Angular 测试：模拟一个包含 blob 的 HttpResponse

Question

我正在开发一个 Angular 9 应用程序，多亏了 jest，我正在编写单元测试。我的 angular 服务调用一个 spring API，其中 returns 一个要下载的 CSV 文件。我想进行单元测试，但无法模拟 HttpResponse。

* MyService.ts *

downloadCsv(id: string) {
    return this.http.get('/api/ + id + `/csv/`,
      { responseType: 'blob' as 'json', observe: 'response' });
  }

* MyService.spec.ts *

  it(`should call the GET API and return a csv file as result`, () => {
    // GIVEN 
    const expectedData: Blob = new Blob(['a', 'b', 'c', 'd']);

    // WHEN
    let actualData = {};
    service.downloadCsv('1').subscribe(data => {
      actualData = data;
    });

    // THEN
    backendMock.expectOne((req: HttpRequest<any>) => {
      return req.url === `/api/` + '1' + `/csv/`
        && req.method === 'GET';
    },  `GET data to ${'/api/'}`)
      .flush(expectedData);

    expect(actualData).toEqual(expectedData);
  });

我不知道如何构建包含 blob 的 HttpResponse，即使我试图在 expectedData 中放置一个新的 HttpResponse（我没有找到太多示例，文档也没有真正帮助我： / (HttpResponse documentation))

我正在等待的响应如下所示：

有人可以帮助我吗？

Answer 1

你可以做这样的事情来模拟响应

const fakeFile = (): File => {
const blob = new Blob([''], { type: 'text/html' });
return blob as File;
};

希望这对您有所帮助:)

Angular 测试：模拟一个包含 blob 的 HttpResponse

Angular test : mock a HttpResponse containing a blob

unit-testing

blob

httpresponse

jestjs

angular