茉莉花角单位测试等待间谍组件有望解决

Question

我们对一个 Angular 组件进行单元测试，该组件的目的是选择和上传文件。 在组件中我们将文件转换为base64字符串（后端要求） 并做一些其他检查。

仅当文件转换为 Base64 后，模板才会更新并显示 待上传附件。

这就是我们想要进行单元测试的内容：要上传的 Base64 编码文件列表的可见性。

以下是我们的 MWE 的链接（为了简洁起见，我们删除了与我们的问题无关的特定逻辑）： https://stackblitz.com/edit/angular-jasmine-promise-await-bjvxuc?file=src%2Fapp%2Fapp.component.html

有没有办法让 jasmine 等待我们的 Angular 组件返回已解决的承诺，以便我们确定性地知道模板将重新渲染，以便我们可以预期附件列表已渲染？

Answer 1

您正在寻找的是 Angular 解决方案，很可能不是 jasmine 解决方案。

在 Angular 中有多种等待 Promise 的方法：

1.) async 和 await Fixture.whenStable()

it('should do xyz', async () => {
  // do some stuff that creates promises and puts them in queue

  // wait for pending promises to complete before continuing
  await fixture.whenStable();

  // promises completed, continue with assertions or other stuff
});

2.) waitForAsync 和 fixture.whenStable()

waitForAsync 辅助方法在完成测试之前等待创建的 Promise 得到解析

it('should do xyz', waitForAsync(() => {
  // do some stuff that creates promises and puts them in queue

  fixture.whenStable().then(() => {
    // do your assertions here when the promises complete
  });
}));

3.) fakeAsync 和tick()

it('should do xyz', fakeAsync(() => {
  // do some stuff that creates promises and puts them in queue

  // wait for promises to resolve before continuing
  tick();

  // do assertions or other stuff
}));

https://www. digitalocean.com/community/tutorials/angular-testing-async-fakeasync

以上是一篇好文章。您可以继续学习 fakeAsync 和 tick、fixture.whenStable() 和 waitForAsync。

====编辑=====

it('shows attachments in attachmentslist', fakeAsync(() => {
    // arrange
    // in our test we actually construct and use a mockFileDataTransfer object here
    // and trigger a dispatchEvent(new InputEvent('change'));
    // to better mimic user interaction, we left all of this out for brevity

    // act
    // this is not in our own test, but for demonstration purposes we directly call
    // the method here.
    component.onFilesDropped();
    fixture.detectChanges();

    // add tick() to make the pending promises complete
     tick();
    // add tick(#) to make the timer proceed in a fake way that duration
     tick(250);
    
    // the rest

}));