diff --git a/README.md b/README.md index 1e79079cba..b4034b1d2c 100644 --- a/README.md +++ b/README.md @@ -3342,6 +3342,97 @@ describe('TestHttpRequest', () => { --- +## How to test a http interceptor + +The source file is here: +[examples/TestHttpInterceptor/test.spec.ts](https://github.com/ike18t/ng-mocks/blob/master/examples/TestHttpInterceptor/test.spec.ts) + +```typescript +import { + HTTP_INTERCEPTORS, + HttpClient, + HttpClientModule, + HttpEvent, + HttpHandler, + HttpInterceptor, + HttpRequest, +} from '@angular/common/http'; +import { + HttpClientTestingModule, + HttpTestingController, +} from '@angular/common/http/testing'; +import { Injectable, NgModule } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { MockBuilder } from 'ng-mocks'; +import { Observable } from 'rxjs'; + +// An interceptor we want to test. +@Injectable() +class TargetInterceptor implements HttpInterceptor { + protected value = 'HttpInterceptor'; + + public intercept( + request: HttpRequest, + next: HttpHandler + ): Observable> { + return next.handle( + request.clone({ + setHeaders: { + 'My-Custom': this.value, + }, + }) + ); + } +} + +// A module with its definition. +@NgModule({ + imports: [HttpClientModule], + providers: [ + TargetInterceptor, + { + multi: true, + provide: HTTP_INTERCEPTORS, + useClass: TargetInterceptor, + }, + ], +}) +class TargetModule {} + +describe('TestHttpInterceptor', () => { + // Because we want to test the interceptor, we pass it as the first + // parameter of MockBuilder. To correctly satisfy its dependencies + // we need to pass its module as the second parameter. Also we + // should mocking HTTP_INTERCEPTORS and replace HttpClientModule + // with HttpClientTestingModule. + beforeEach(() => + MockBuilder(TargetInterceptor, TargetModule) + .keep(HTTP_INTERCEPTORS) + .replace(HttpClientModule, HttpClientTestingModule) + ); + + it('triggers interceptor', () => { + const client: HttpClient = TestBed.get(HttpClient); + const httpMock: HttpTestingController = TestBed.get( + HttpTestingController + ); + + // Let's do a simply request. + client.get('/target').subscribe(); + + // Now we can assert that a header has been added to the request. + const req = httpMock.expectOne('/target'); + expect(req.request.headers.get('My-Custom')).toEqual( + 'HttpInterceptor' + ); + req.flush(''); + httpMock.verify(); + }); +}); +``` + +--- + ## Find an issue or have a question or a request? [Ask a question on gitter](https://gitter.im/ng-mocks/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge), diff --git a/examples/TestHttpInterceptor/test.spec.ts b/examples/TestHttpInterceptor/test.spec.ts new file mode 100644 index 0000000000..0f547c322d --- /dev/null +++ b/examples/TestHttpInterceptor/test.spec.ts @@ -0,0 +1,71 @@ +import { + HTTP_INTERCEPTORS, + HttpClient, + HttpClientModule, + HttpEvent, + HttpHandler, + HttpInterceptor, + HttpRequest, +} from '@angular/common/http'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { Injectable, NgModule } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { MockBuilder } from 'ng-mocks'; +import { Observable } from 'rxjs'; + +// An interceptor we want to test. +@Injectable() +class TargetInterceptor implements HttpInterceptor { + protected value = 'HttpInterceptor'; + + public intercept(request: HttpRequest, next: HttpHandler): Observable> { + return next.handle( + request.clone({ + setHeaders: { + 'My-Custom': this.value, + }, + }) + ); + } +} + +// A module with its definition. +@NgModule({ + imports: [HttpClientModule], + providers: [ + TargetInterceptor, + { + multi: true, + provide: HTTP_INTERCEPTORS, + useClass: TargetInterceptor, + }, + ], +}) +class TargetModule {} + +describe('TestHttpInterceptor', () => { + // Because we want to test the interceptor, we pass it as the first + // parameter of MockBuilder. To correctly satisfy its dependencies + // we need to pass its module as the second parameter. Also we + // should mocking HTTP_INTERCEPTORS and replace HttpClientModule + // with HttpClientTestingModule. + beforeEach(() => + MockBuilder(TargetInterceptor, TargetModule) + .keep(HTTP_INTERCEPTORS) + .replace(HttpClientModule, HttpClientTestingModule) + ); + + it('triggers interceptor', () => { + const client: HttpClient = TestBed.get(HttpClient); + const httpMock: HttpTestingController = TestBed.get(HttpTestingController); + + // Let's do a simply request. + client.get('/target').subscribe(); + + // Now we can assert that a header has been added to the request. + const req = httpMock.expectOne('/target'); + expect(req.request.headers.get('My-Custom')).toEqual('HttpInterceptor'); + req.flush(''); + httpMock.verify(); + }); +}); diff --git a/examples/TestHttpRequest/test.spec.ts b/examples/TestHttpRequest/test.spec.ts index d305a2d0d1..40ac285b42 100644 --- a/examples/TestHttpRequest/test.spec.ts +++ b/examples/TestHttpRequest/test.spec.ts @@ -37,17 +37,17 @@ describe('TestHttpRequest', () => { it('sends a request', () => { // Let's extract the service and http controller for testing. const service: TargetService = TestBed.get(TargetService); - const http: HttpTestingController = TestBed.get(HttpTestingController); + const httpMock: HttpTestingController = TestBed.get(HttpTestingController); // A simple subscription to check what the service returns. let actual: any; service.fetch().subscribe(value => (actual = value)); // Simulating a request. - const req = http.expectOne('/data'); + const req = httpMock.expectOne('/data'); expect(req.request.method).toEqual('GET'); req.flush([false, true, false]); - http.verify(); + httpMock.verify(); // Asserting the result. expect(actual).toEqual([false, true, false]);