Komponententest HttpInterceptor von Angular 4

Question

Können Sie mir sagen, wie ich den HttpInterceptor des Angular 4 testen soll? Ich habe einen Interceptor wie in den Beispielen beschrieben, aber nicht sicher, wie er getestet werden soll. Unten ist mein Interceptor und ich möchte testen, ob die benutzerdefinierten Header hinzugefügt werden und wann der Antwortstatus 401 window.location.href ist.

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

Interceptor-Test ist vergleichbar mit dem Test von Angular-Service. Und TestBed wird alles liefern, was Sie brauchen, um sie zu testen.

Wenn Sie Ihren Dienst verspotten, erhalten Sie Daten, die Sie während des Tests duplizieren möchten.

Answer 2

habe ich steckte eine ähnliche Sache zu testen, aber dank Alisa Artikel Intercepting Http Requests ich es bekam

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

einfach einen beliebigen Anruf zu arbeiten und verspotten sollte die Antwort mit .error() Methode von HttpTestingController und es funktioniert.

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

Ich bin ein bisschen spät, um die Post, aber ich herausgefunden, einen Weg der Abfangjäger der Prüfung außerhalb von Angular Kontext. Das bedeutet, dass Sie HTTP-Aufrufe nicht vortäuschen müssen, Sie testen nur die Funktion intercept wie jede Javascript-Funktion.

Lassen Sie uns sagen, dass Ihre Abfangjäger nur das tut, was ein Protokoll angezeigt wird, wenn der Fehlerstatus 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'); } 
    }); 
} 

Dann in Ihren Dienst, können Sie die Parameter Ihrer Funktion wie so spotten:

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

Damit können Sie einen Test für Ihre Abfangjäger schreiben:

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

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

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

Und voilà !