spyOn не работает в Http Interceptor в Angular 6 - PullRequest
Новая
       28

spyOn не работает в Http Interceptor в Angular 6

0 голосов
/ 20 ноября 2018

Я пытаюсь проверить HttpInterceptor, который регистрирует ответ на запрос http. У меня есть служба журналов, которая регистрирует ответ на запрос. Журнал перехватчика только для запросов GET.

Вот мой перехватчик: 

import { HttpInterceptor, HttpHandler, HttpEvent, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { LogService } from './log.service';
import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
export class LoggerInterceptor implements HttpInterceptor {

  constructor(private _log: LogService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .pipe(
        tap(event => {
          if (event instanceof HttpResponse) {
            if (req.method === 'GET') {
              this._log.log('I was logged');
            }
          }
        })
      );
  }
}

Вот файл спецификации: 

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController, TestRequest } from '@angular/common/http/testing';
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { HeaderInterceptor } from './add.header.interceptor';
import { LogService } from './log.service';
import { LoggerInterceptor } from './logger.interceptor';

const posts: Array<any> = [
  {
    'userId': 1,
    'id': 1,
    'title': 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    'body': 'quia et suscipit\nsuscipit recusandae consequuntur expedita et '
  },
  {
    'userId': 1,
    'id': 2,
    'title': 'qui est esse',
    'body': 'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor b'
  }
];

describe('HeaderInterceptor', () => {

  let httpMock: HttpTestingController;
  let logService: LogService;
  let httpClient: HttpClient;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ],
      providers: [
        LogService,
        { provide: HTTP_INTERCEPTORS, useClass: LoggerInterceptor, multi: true }
      ]
    });

    httpMock = TestBed.get(HttpTestingController);
    logService = TestBed.get(LogService);
    httpClient = TestBed.get(HttpClient);
  });

  it('must log the http get request', () => {

    const spy = spyOn(logService, 'log');

    httpClient.get('http://jsonplaceholder.typicode.com/posts')
      .subscribe(
        (data: Array<any>) => {
          expect(data.length).toBe(2);
        }
    );

    const req: TestRequest = httpMock.expectOne('http://jsonplaceholder.typicode.com/posts');
    expect(req.request.headers.has('Content-Type')).toBe(true);
    expect(spy).toHaveBeenCalled();

    req.flush(posts);
  });

  it('must log the http post request', () => {

    const spy = spyOn(logService, 'log');

    httpClient.post('http://jsonplaceholder.typicode.com/posts', posts)
      .subscribe();

    const req: TestRequest = httpMock.expectOne('http://jsonplaceholder.typicode.com/posts');
    expect(req.request.headers.has('Content-Type')).toBe(true);
    expect(spy).not.toHaveBeenCalled();

    req.flush(posts);
  });
});

У меня есть HeaderInterceptor, который добавляет заголовок Content-Type к каждому HTTP-запросу. Тестирование этого перехватчика работает нормально.

Когда я пытался проверить LoggerInterceptor, я получаю сообщение об ошибке на шпионе expect(spy).toHaveBeenCalled();

Вот ошибка: 

Error: Expected spy log to have been called.
    at stack (http://localhost:9876/absolute/home/pritambohra/Desktop/testing-in-angular/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2455:17)
    at buildExpectationResult (http://localhost:9876/absolute/home/pritambohra/Desktop/testing-in-angular/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2425:14)
    at Spec.expectationResultFactory (http://localhost:9876/absolute/home/pritambohra/Desktop/testing-in-angular/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:901:18)
    at Spec.addExpectationResult (http://localhost:9876/absolute/home/pritambohra/Desktop/testing-in-angular/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:524:34)
    at Expectation.addExpectationResult (http://localhost:9876/absolute/home/pritambohra/Desktop/testing-in-angular/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:845:21)
    at Expectation.toHaveBeenCalled (http://localhost:9876/absolute/home/pritambohra/Desktop/testing-in-angular/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2369:12)
    at UserContext.<anonymous> (http://localhost:9876/src/app/logger.interceptor.spec.ts?:57:17)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/node_modules/zone.js/dist/zone.js?:388:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/node_modules/zone.js/dist/zone-testing.js?:288:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/node_modules/zone.js/dist/zone.js?:387:1)

Не совсем уверен, где я иду не так. Я выполняю пост-http-звонок ради покрытия кода. Что мне нужно исправить?

1 Ответ

0 голосов
/ 10 января 2019

Это может быть только частичный ответ.

Я не эксперт в тестировании, поэтому я не должен пытаться объяснить , почему ваш код не работает, но я считаю, что приведенный ниже кодправильно и делать настоящие тесты.

IMO В вашем коде в случае GET есть две проблемы: - вы сбрасываете после ожидания шпиона - должно быть наоборот - вы не вызываете done() изнутри.subscribe()

Ваш код для случая POST, кажется, работает нормально, хотя (за исключением того, что описание теста кажется неправильным, не должно ли это быть "не должно регистрироваться" вместо этого?)

Я оставилпроверьте заголовок Content-Type, так как по какой-то причине он не удался (у вас нет времени на его дальнейшее изучение - будет интересно посмотреть, решите ли вы его), и он не был частью вашего вопроса. 

describe('Logger Interceptor', () => {
  let httpMock: HttpTestingController;
  let httpClient: HttpClient;
  let logService: LogService;
  let spy: Function;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: LoggerInterceptor,
          multi: true,
        },
      ],
    });

    httpClient = TestBed.get(HttpClient);
    httpMock = TestBed.get(HttpTestingController);
    logService = TestBed.get(LogService);
    spy = spyOn(logService, 'log');
  });

  afterEach(() => httpMock.verify());

  it('must log the http get request', (done) => {

    httpClient.get('http://jsonplaceholder.typicode.com/posts').subscribe((data: any[]) => {
      expect(data.length).toBe(2);
      done();
    });

    const req: TestRequest = httpMock.expectOne('http://jsonplaceholder.typicode.com/posts');

    req.flush(posts);
    expect(spy).toHaveBeenCalled();
  });

  it('should NOT log the http post request', () => {

    httpClient.post('http://jsonplaceholder.typicode.com/posts', posts)
      .subscribe();

    const req: TestRequest = httpMock.expectOne('http://jsonplaceholder.typicode.com/posts');
    expect(spy).not.toHaveBeenCalled();

    req.flush(posts);
  });
});

Мне было бы интересно услышать, почему дело GET требует вышеуказанных изменений, если кто-нибудь сможет объяснить.

...