Angular 6 unit, проверяющий http get запрос

Question

У меня есть компонент, в котором у меня есть запрос в функции вроде:

getData():Observable<any>{
    return this._http.get('/app/data', {observe: 'response'});
}

Он возвращает мне массив объектов в подписке, например:

[{name: 'a'}, {name: 'b'}]

или что-то подобное.

Я хотел написать тест, который удостоверится, что getData () вызывает http GET один раз с правильным URL, а подписка возвращает что-то похожее на массив.

Мой код:

...
    it('getData() should http GET names', () => {
        inject([HttpTestingController], (httpMock: HttpTestingController) => {

          const names = [{name: 'a'}, {name: 'b'}];

          component.getData().subscribe((res) => {
            expect(res).toEqual(names);
          });

          const req = httpMock.expectOne('/app/data');
          expect(req.request.method).toEqual("GET");
          req.flush(names);

          httpMock.verify();
        });
      });
...

Я не прошел тест с этим сообщением: «Ожидается, что нет открытых запросов, найдено 1: GET / app / data»

Answer 1

Прежде всего, для хорошей практики вы должны отделить свой компонент от выполнения самого запроса и использовать вместо него Сервис, поскольку в долгосрочной перспективе вы найдете его более чистым, так как ваше приложение расширяется для сервисов, обрабатывающих запросы API.

Это еще один подход, который вы можете использовать, чтобы заставить его работать с HttpTestingController, так как я не совсем уверен, почему ваш инжектор контроллера не работает.

просто протестируйте службу вместо этого илипросто примените тот же подход к компонентам, что и в тестах компонентов, с помощью этого обходного пути.

получите данные из службы, внедрив их в компонент.

Компонент:

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private service: TestService)
}

Служба:

@Injectable()
export class TestService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any>{
    return this.http.get('/app/data');
  }

}

, а затем протестируйте службу таким же образом, это как проверка вашего компонента, но вместо этого просто используйте службу

Проверка:

describe('TestService', () => {

  let httpMock: HttpTestingController;
  let testService: TestService;

  beforeEach(() => {

    TestBed.configureTestingModule({
        imports: [ HttpClientTestingModule ],
        providers: [ TestService ]
    });

    testService = TestBed.get(TestService);
    httpMock = TestBed.get(HttpTestingController);

  });

  it('getData() should http GET names', () => {

    const names = [{name: 'a'}, {name: 'b'}];

    testService.getData().subscribe((res) => {
      expect(res).toEqual(names);
    });

    const req = httpMock.expectOne('/app/data');
    expect(req.request.method).toEqual("GET");
    req.flush(names);

    httpMock.verify();
  });

});

вот тест в действии