Angular6 - тестирование HttpClient «тап» и «труба» - PullRequest
Новая
       50

Angular6 - тестирование HttpClient «тап» и «труба»

0 голосов
/ 29 июня 2018

Я недавно обновил свой проект 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();
    })
);

Когда я смотрю на покрытие кода, я вижу, что не все ветви покрыты моим тестом. НО я не уверен, что изменить, чтобы покрыть это должным образом. Любые указатели или советы по поводу того, что мне нужно изменить, были бы великолепны!

enter image description here

Заранее спасибо!

1 Ответ

0 голосов
/ 29 июня 2018

Так что я быстро заметил, как обойти это. Просто отправлять сообщения на случай, если кто-то еще посчитает это полезным. Я разделил свои положительные и отрицательные тесты 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();
  });

Основное отличие состоит в том, что каждый сбрасывает объект успеха, а другой - ошибку.

...