等待单元测试中的可观察内部方法 Angular

Question

我有以下代码：

app.component.specs.ts:

  it('should upload files and add links to array', async () => {
    const files = new TestFileList() as any as FileList;
    component.uploadFiles(files);
    await new Promise((resolve => setTimeout(resolve, 5000)));
    expect(component.photoUrls.length).toEqual(files.length);
  });
}

app.component.ts

uploadFiles(files: FileList) {
    for (let i = 0; i < files.length; i++) {
      this.photoService.uploadPhoto(files.item(i)).subscribe(data => this.photoUrls.push(data.link), error => alert(error));
    }
  }

app.component.specs.ts 中的超时承诺看起来不太好。我怎样才能等到所有文件都被上传并以其他方式将链接添加到数组？

Answer 1

请这样尝试。如果它不起作用，请告诉我？

 it('should upload files and add links to array' , inject([PhotoService] , fakeAsync((photoService : PhotoService) => {
    const files = new TestFileList() as any as FileList;
    spyOn(photoService ,'uploadPhoto').and.returnValue(of('http://image1.jpeg'));
    component.uploadFiles(files);
    tick(3000);
    expect(component.photoUrls.length).toEqual(files.length);
  })));

Answer 2

这很有趣，我还没有处理过这样的情况。但通常，我会重复使用一个名为 waitUntil.

的效用函数

import { interval } from 'rxjs';
.....
export const waitUntil = async (untilTruthy: Function): Promise<boolean> => {
  while (!untilTruthy()) {
    await interval(25).pipe(take(1)).toPromise();
  }
  return Promise.resolve(true);
};

你可以随意设置时间，我只是默认了25ms。

it('should upload files and add links to array', async (done) => {
    const files = new TestFileList() as any as FileList;
    component.uploadFiles(files);
    await waitUntil(() => component.photoUrls.length === files.length);
    // you may not have to do the following assertion because we waited for it to be true
    expect(component.photoUrls.length).toEqual(files.length);
    done();
  });

通过这种方式，我们不依赖于时间 (setTimeOut of 5s)，而是不断循环直到条件变为真，然后继续我们的断言。我觉得这样读起来更好。

等待单元测试中的可观察内部方法 Angular

Await for observable inside method in Unit test Angular

unit-testing

jasmine

karma-jasmine

angular