Angular Testing : mock a HttpResponse containing a blob

Question

我正在开发一个 Angular 9 应用程序，并且由于 Jest 我正在编写单元测试。我的 angular 服务调用一个 spring API，它返回一个 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;
};

希望这可以帮助 :)