Angular6

Question

我最近将我的 Angular5 项目升级到了 Angular6，我必须改变的事情之一是围绕 HttpClient 的使用，引入了 tap 和 pipe。

我现在的代码如下：

public getCountryData(id: string): Country[] {
    const url = `${this.config.apiUrl}/${id}`;

    return this.http.get<CountryData>(url, this.noCacheOptions).pipe(
      tap(res => {
        res = this.convertToCountryArray(res);
        return res;
      }),
      catchError(error => this.handleError(error))
    );
}

我正在编写测试来覆盖我的 API 调用，我需要测试一个成功的获取和一个有错误的获取，所以我编写了以下测试（前言 - 我是写作的新手这些单元测试，所以毫无疑问它可以做得更好，任何建议都将受到赞赏！）：

  it('should call getCountryData, inject([HttpTestingController, CountryDataService, ConfigService],
    (httpMock: HttpTestingController, dataService: CountryDataService, configService: ConfigService) => {

        expect(CountryDataService).toBeTruthy();

        const id = 'cfc78ed9-4e771215efdd64b1';

        dataService.getCountryData(id).subscribe((event: any) => {
          switch (event.type) {
            case HttpEventType.Response:
              expect(event.body).toEqual(mockCountryList);
          }
        }, (err) => {
          expect(err).toBeTruthy();
        });

        const mockReq = httpMock.expectOne(`${configService.apiUrl}/${id}`);

        expect(mockReq.cancelled).toBeFalsy();
        expect(mockReq.request.responseType).toEqual('json');

        try {
          mockReq.flush(new Error(), { status: 404, statusText: 'Bad Request' });
        } catch (error) {
          expect(error).toBeTruthy();
        }

        httpMock.verify();
    })
);

当我查看代码覆盖率时，我发现我的测试并未覆盖所有分支。但是我不确定要更改什么才能正确覆盖它。任何关于我需要更改的内容的指示或建议都很棒！

提前致谢！

Answer 1

所以我很快发现了如何解决这个问题。只是张贴以防其他人发现它有用。我将 api 的正面和负面测试分成两个单元测试，如下所示：

  it('should call getCountryData with success', () => {

    const id = 'cfc78ed9-4e771215efdd64b1';

    dataService.getCountryData(id).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Response:
          expect(event.body).toEqual(mockCountryData);
      }
    });

    const mockReq = httpMock.expectOne(`${configService.apiUrl}/${id}`);

    expect(mockReq.cancelled).toBeFalsy();
    expect(mockReq.request.responseType).toEqual('json');

    mockReq.flush(mockCountryData);
    httpMock.verify();
  });

  it('should call getCountryData with failure', () => {

    const id = 'cfc78ed9-4e771215efdd64b1';

    dataService.getCountryData(id).subscribe((event: HttpEvent<any>) => { },
    (err) => {
      expect(err).toBeTruthy();
    });

    const mockReq = httpMock.expectOne(`${configService.apiUrl}/${id}`);

    expect(mockReq.cancelled).toBeFalsy();
    expect(mockReq.request.responseType).toEqual('json');

    mockReq.flush({ errorType: 2,
      errorDetails: [{ errorKey: 'errorKey', errorCode: '1001', errorMessage: 'errorMessage' }],
      errorIdentifier: 'cfc78ed9-4e771215efdd64b1' },
      { status: 404, statusText: 'Bad Request' });
    httpMock.verify();
  });

主要区别在于，一种刷新成功对象，另一种刷新错误。

Angular6 - 测试 HttpClient "tap" 和 "pipe"

Angular6 - testing HttpClient "tap" and "pipe"

unit-testing

code-coverage

istanbul

angular-httpclient