Тестирование реакции перехватчиков Angular с помощью Jest и Spectator

Question

Я пытаюсь протестировать перехватчик, который изменяет ответ на HTTP-запрос.

Вот мой текущий код:

@Injectable()
export class ResponseCamelCaseInterceptor implements HttpInterceptor {
  intercept(
    httpRequest: HttpRequest<Record<string, unknown>>,
    httpHandler: HttpHandler,
  ): Observable<HttpEvent<Record<string, unknown>>> {
    return httpHandler.handle(httpRequest).pipe(
      filter(
        (value): value is HttpResponse<Record<string, unknown>> =>
          value instanceof HttpResponse,
      ),
      filter(({ body }) => isPlainObject(body)),
      map(httpEvent =>
        httpEvent.clone({ body: snakeToCamelCase(httpEvent.body) }),
      ),
    );
  }
}

и соответствующий тестовый файл, который у меня есть:

describe(ResponseCamelCaseInterceptor.name, () => {
  const createService = createServiceFactory(ResponseCamelCaseInterceptor);

  test('some description', () => {
    const { service } = createService();
    const fakeHttpRequest = new HttpRequest('POST', 'https://...', { custom_key: '1' });

    service.intercept(fakeHttpRequest, 'what should I put here for HttpHandler?').subscribe(() => {
      // expect(httpResponse.body).toStrictEqual({ customKey: '1' });
    });
  });
});

---

Обратите внимание, что я использую Angular 10.xy, Jest 26.xy и Spectator 5.xy.

Answer 1

Мне удалось получить метод перехвата, чтобы принять следующее. При необходимости измените возврат mockHandler.handle.

const mockHandler = {
  handle: jest.fn(() =>  of(new HttpResponse({status: 200, body: {data: 'thisIsWhatImTesting'}})))
};


spectator.service.intercept(new HttpRequest<any>(HttpMethod.GET, '/api'), mockHandler)
      .subscribe((response: HttpResponse<any>) => {
        expect(response.body).toStrictEqual({customKey: '1'});
      });

В лямбде подписки вам нужно указать ответ в качестве ввода. Это должен быть обработанный HttpResponse от перехватчика.

Ключевым моментом здесь является то, что для имитации шутки вам нужно использовать jest.fn() для имитации функции. Чтобы TypeScript распознал макет как правильный класс, вам нужно удовлетворить интерфейс, реализовав "handle".