Testowanie jednostki HttpInterceptor od Angular 4

Question

Czy możesz mi powiedzieć, jak przetestować HttpInterceptor dostarczony przez Angular 4. Stworzyłem przechwytywacz, jak na przykładach, ale nie wiem jak to przetestować. Poniżej znajduje się mój przechwytujący i chcę przetestować, czy niestandardowe nagłówki są dodawane, a kiedy status odpowiedzi jest ustawiony na 401 window.location.href.

export class MyInterceptor implements HttpInterceptor { 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     const headers = new HttpHeaders(); 
     this.addHeader(headers); // This will add headers 

     const changedReq = req.clone({ headers: headers }); 
     return next.handle(req) 
      .catch(err => { 
       if (err instanceof HttpErrorResponse) { 
        switch (err.status) { 
         case 302: 
         case 401: 
          window.location.href = "http//google.com"; 
          break;    
         default: 
          throw new Error(this.getErrorMessage(err)); 
        } 
       } 

       return Observable.throw(err); 
      }); 
    } 

Answer 1

Testowanie przechwytujące jest podobne do testowania usługi kątowej. A TestBed zapewni wszystko, czego potrzebujesz, aby je przetestować.

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


describe('making http calls',() => { 
     it('adding header test', inject([HttpClient, YourMock], (http: HttpClient, httpMock: YourMock) => { 

      http.get('/data').subscribe(
       response => { 
        expect(response).toBeTruthy(); 
       } 
      ); 

      expect(response.status).toEqual('401'); 
     })); 
    }); 

Kpiące z usługi daje dane, które chcesz powielić podczas testu.

Answer 2

utknąłem testowania coś podobnego, ale dzięki artykule Alisa za Intercepting Http Requests mam go do pracy

import {TestBed, inject} from '@angular/core/testing'; 
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; 
import {HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http'; 

import {LangInterceptorService} from './lang-interceptor.service'; 

describe('Lang-interceptor.service',() => { 
    beforeEach(() => TestBed.configureTestingModule({ 
     imports: [HttpClientTestingModule], 
     providers: [{ 
        provide: HTTP_INTERCEPTORS, 
        useClass: LangInterceptorService, 
        multi: true 
      }] 
    })); 

    describe('intercept HTTP requests',() => { 
     it('should add Accept-Language to Headers', inject([HttpClient, HttpTestingController], 
      (http: HttpClient, mock: HttpTestingController) => { 

       http.get('/api').subscribe(response => expect(response).toBeTruthy()); 
       const request = mock.expectOne(req => (req.headers.has('Accept-Language') && req.headers.get('Accept-Language') === 'ar')); 

       request.flush({data: 'test'}); 
       mock.verify(); 
     })); 
    }); 

    afterEach(inject([HttpTestingController], (mock: HttpTestingController) => { 
     mock.verify(); 
    })); 
}); 

Answer 3

Tylko na każde wezwanie i odpowiedź drwić z .error() metody HttpTestingController i powinno działać.

describe('Error interceptor', function() { 
let http: HttpTestingController; 
    let httpClient: HttpClient; 

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

http = testBed.get(HttpTestingController); 
httpClient = testBed.get(HttpClient); 
}); 

    it('should catch 401', function (done) { 
    httpClient.get('/error').subscribe(() => {},() => { 
     // Perform test 
     done(); 
    }); 

    http.expectOne('/error').error(new ErrorEvent('Unauthorized error'), { 
     status: 401 
    }); 
    http.verify(); 
    }); 

}); 

Answer 4

Jestem trochę późno na to stanowisko, ale wymyśliliśmy sposób testowania przechwytujących poza kontekstem kątowej za. Oznacza to, że nie musisz kpić z połączeń HTTP, testujesz tylko funkcję intercept, tak jak każdą funkcję JavaScript.

Załóżmy, że przechwytujący robi tylko to, co wyświetla dziennik jeśli status błędu 500:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next 
    .handle(req) 
    .catch((err: HttpErrorResponse) => { 
     if(err.status === 500) { console.log('Server error'); } 
    }); 
} 

Następnie w swojej służbie, można drwić parametry swojej funkcji tak:

const err: any = { status: 500 }; 
const next: any = { 
    handle: (request: HttpRequest<any>) => ({ 
    catch: (callback: Function) => callback(err) 
    }) 
}; 

z tym, można napisać test dla kolektora:

it('should write a console log with error status equal to 500',() => { 
    spyOn(console, 'log'); 

    service.intercept({} as any, next); 

    expect(console.log).toHaveBeenCalled(); 
}); 

i voila !