Replace custom http interceptor by the one provided from angular 4.3

mpalourdio · mpalourdio · commit 79d5fe59540d · 2017-07-16T01:04:08.000+02:00
diff --git a/src/app/ng-http-loader.module.ts b/src/app/ng-http-loader.module.ts
@@ -12,20 +12,31 @@ import { SpinnerComponent } from './spinner/spinner.component';
 import { HttpInterceptorServiceFactoryProvider } from './http-interceptor.service';
 import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
+import { PendingInterceptorService, PendingInterceptorServiceFactoryProvider } from './pending-interceptor.service';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+
+const PendingInterceptorServiceExistingProvider = {
+    provide: HTTP_INTERCEPTORS,
+    useExisting: PendingInterceptorService,
+    multi: true
+};
 
 @NgModule({
     declarations: [
         SpinnerComponent,
     ],
     imports: [
         CommonModule,
-        HttpModule
+        HttpModule,
+        HttpClientModule
     ],
     exports: [
         SpinnerComponent,
     ],
     providers: [
         HttpInterceptorServiceFactoryProvider,
+        PendingInterceptorServiceExistingProvider,
+        PendingInterceptorServiceFactoryProvider
     ]
 })
 export class NgHttpLoaderModule {
diff --git a/src/app/pending-interceptor.service.spec.ts b/src/app/pending-interceptor.service.spec.ts
@@ -0,0 +1,101 @@
+/*
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { async, inject, TestBed } from '@angular/core/testing';
+import { PendingInterceptorService } from './pending-interceptor.service';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+
+describe('PendingInterceptorService', () => {
+
+    const PendingInterceptorServiceExistingProvider = {
+        provide: HTTP_INTERCEPTORS,
+        useExisting: PendingInterceptorService,
+        multi: true
+    };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule],
+            providers: [PendingInterceptorService, PendingInterceptorServiceExistingProvider]
+        });
+    });
+
+    it('should be created', inject([PendingInterceptorService], (service: PendingInterceptorService) => {
+        expect(service).toBeTruthy();
+    }));
+
+    it('should be aware of the pending http requests',
+        inject(
+            [PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+
+                function runQuery(url: string): Observable<any> {
+                    return http.get(url);
+                }
+
+                Observable.forkJoin([runQuery('/fake'), runQuery('/fake2')]).subscribe();
+
+                const firstRequest = httpMock.expectOne('/fake');
+                const secondRequest = httpMock.expectOne('/fake2');
+
+                expect(service.pendingRequests).toBe(2);
+                firstRequest.flush({});
+
+                expect(service.pendingRequests).toBe(1);
+                secondRequest.flush({});
+
+                expect(service.pendingRequests).toBe(0);
+
+                httpMock.verify();
+            })
+    );
+
+    it('should correctly notify the pendingRequestsStatus observable', async(
+        inject(
+            [PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+                const pendingRequestsStatus = service.pendingRequestsStatus;
+
+                pendingRequestsStatus
+                    .subscribe(
+                        next => expect(next).toBeTruthy(),
+                        error => expect(1).toBe(2)
+                    );
+
+                http.get('/fake').subscribe();
+                httpMock.expectOne('/fake');
+            })
+    ));
+
+    it('should fail correctly',
+        inject(
+            [PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+
+                const statusText = 'NOT FOUND';
+
+                http.get('/fake').subscribe(
+                    next => expect(1).toBe(2),
+                    (error: Response) => expect(error.statusText).toBe(statusText)
+                );
+
+                const testRequest = httpMock.expectOne('/fake');
+                testRequest.flush({}, {
+                    'headers': {
+                        'name': 'useless-header'
+                    },
+                    'status': 404,
+                    'statusText': statusText
+                });
+                httpMock.verify();
+            })
+    );
+});
diff --git a/src/app/pending-interceptor.service.ts b/src/app/pending-interceptor.service.ts
@@ -0,0 +1,58 @@
+/*
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class PendingInterceptorService implements HttpInterceptor {
+    private _pendingRequests = 0;
+    private _pendingRequestsStatus: Subject<boolean> = new Subject<boolean>();
+
+    get pendingRequestsStatus(): Observable<boolean> {
+        return this._pendingRequestsStatus.asObservable();
+    }
+
+    get pendingRequests(): number {
+        return this._pendingRequests;
+    }
+
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        this._pendingRequests++;
+
+        if (1 === this._pendingRequests) {
+            this._pendingRequestsStatus.next(true);
+        }
+
+        return next.handle(req).map(event => {
+            return event;
+        })
+            .catch(error => {
+                return Observable.throw(error);
+            })
+            .finally(() => {
+                this._pendingRequests--;
+
+                if (0 === this._pendingRequests) {
+                    this._pendingRequestsStatus.next(false);
+                }
+            });
+    }
+}
+
+export function PendingInterceptorServiceFactory() {
+    return new PendingInterceptorService();
+}
+
+export let PendingInterceptorServiceFactoryProvider = {
+    provide: PendingInterceptorService,
+    useFactory: PendingInterceptorServiceFactory
+};
diff --git a/src/app/spinner/spinner.component.spec.ts b/src/app/spinner/spinner.component.spec.ts
@@ -9,12 +9,15 @@
 
 import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
 import { SpinnerComponent } from './spinner.component';
-import { HttpModule, RequestOptions, Response, ResponseOptions } from '@angular/http';
+import { HttpModule, RequestOptions } from '@angular/http';
 import { By } from '@angular/platform-browser';
 import { Spinkit } from '../spinkits';
-import { MockBackend, MockConnection } from '@angular/http/testing';
+import { MockBackend } from '@angular/http/testing';
 import { HttpInterceptorService } from '../http-interceptor.service';
 import { Observable } from 'rxjs/Observable';
+import { PendingInterceptorService } from '../pending-interceptor.service';
+import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
 describe('SpinnerComponent', () => {
     let component: SpinnerComponent;
@@ -30,11 +33,22 @@ describe('SpinnerComponent', () => {
         deps: [MockBackend, RequestOptions]
     };
 
+    const PendingInterceptorServiceExistingProvider = {
+        provide: HTTP_INTERCEPTORS,
+        useExisting: PendingInterceptorService,
+        multi: true
+    };
+
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [SpinnerComponent],
-            providers: [MockBackend, HttpInterceptorServiceFactoryProvider],
-            imports: [HttpModule]
+            providers: [
+                MockBackend,
+                PendingInterceptorService,
+                PendingInterceptorServiceExistingProvider,
+                HttpInterceptorServiceFactoryProvider
+            ],
+            imports: [HttpModule, HttpClientTestingModule]
         })
             .compileComponents();
     }));
@@ -108,40 +122,37 @@ describe('SpinnerComponent', () => {
     });
 
     it('should show and hide the spinner according to the pending http requests',
-        inject([HttpInterceptorService, MockBackend], (service: HttpInterceptorService, backend: MockBackend) => {
+        inject(
+            [PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
 
-            const connections: MockConnection[] = [],
-                responseMock = {key: 'value'},
-                mockResponse: Response = new Response(new ResponseOptions({body: responseMock, status: 200}));
+                function runQuery(url: string): Observable<any> {
+                    return http.get(url);
+                }
 
-            function runQuery(url: string): Observable<Response> {
-                return service.get(url);
-            }
+                Observable.forkJoin([runQuery('/fake'), runQuery('/fake2')]).subscribe();
 
-            backend.connections.subscribe((c: MockConnection) => connections.push(c));
-            Observable.forkJoin([runQuery('http://www.fake.url'), runQuery('http://www2.fake.url')]).subscribe();
+                const firstRequest = httpMock.expectOne('/fake');
+                const secondRequest = httpMock.expectOne('/fake2');
 
-            expect(component.isSpinnerVisible).toBeTruthy();
+                expect(component.isSpinnerVisible).toBeTruthy();
 
-            connections[0].mockRespond(mockResponse);
-            expect(component.isSpinnerVisible).toBeTruthy();
+                firstRequest.flush({});
+                expect(component.isSpinnerVisible).toBeTruthy();
 
-            connections[1].mockRespond(mockResponse);
-            expect(component.isSpinnerVisible).toBeFalsy();
-        })
+                secondRequest.flush({});
+                expect(component.isSpinnerVisible).toBeFalsy();
+            })
     );
 
     it('should hide and show a the spinner for a single http request',
-        inject([HttpInterceptorService, MockBackend], (service: HttpInterceptorService, backend: MockBackend) => {
-            let connection: MockConnection;
-            const responseMock = {key: 'value'},
-                mockResponse: Response = new Response(new ResponseOptions({body: responseMock, status: 200}));
-
-            backend.connections.subscribe((c: MockConnection) => connection = c);
-            service.get('http://www.fake.url').subscribe();
-            expect(component.isSpinnerVisible).toBeTruthy();
-            connection.mockRespond(mockResponse);
-            expect(component.isSpinnerVisible).toBeFalsy();
-        })
+        inject(
+            [PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+                http.get('/fake').subscribe();
+                expect(component.isSpinnerVisible).toBeTruthy();
+                httpMock.expectOne('/fake').flush({});
+                expect(component.isSpinnerVisible).toBeFalsy();
+            })
     );
 });
diff --git a/src/app/spinner/spinner.component.ts b/src/app/spinner/spinner.component.ts
@@ -11,6 +11,7 @@ import { Component, Input, OnDestroy } from '@angular/core';
 import { HttpInterceptorService } from '../http-interceptor.service';
 import { Subscription } from 'rxjs/Rx';
 import { Spinkit } from '../spinkits';
+import { PendingInterceptorService } from '../pending-interceptor.service';
 
 @Component({
     selector: 'spinner',
@@ -29,22 +30,36 @@ import { Spinkit } from '../spinkits';
 })
 export class SpinnerComponent implements OnDestroy {
     public isSpinnerVisible: boolean;
+    private oldSubscription: Subscription;
     private subscription: Subscription;
     public Spinkit = Spinkit;
     @Input()
     public backgroundColor: string;
     @Input()
     public spinner = Spinkit.skCubeGrid;
 
-    constructor(private http: HttpInterceptorService) {
-        this.subscription = this.http
+    constructor(private http: HttpInterceptorService, private pendingRequestInterceptorService: PendingInterceptorService) {
+        this.oldSubscription = this.http
+            .pendingRequestsStatus
+            .subscribe(isSpinnerVisible => {
+                if (isSpinnerVisible) {
+                    console.log(
+                        'HttpInterceptorService is deprecated and will soon be removed ' +
+                        'in favor of HttpClientModule. Please upgrade !'
+                    );
+                }
+                this.isSpinnerVisible = isSpinnerVisible;
+            });
+
+        this.subscription = this.pendingRequestInterceptorService
             .pendingRequestsStatus
             .subscribe(isSpinnerVisible => {
                 this.isSpinnerVisible = isSpinnerVisible;
             });
     }
 
     ngOnDestroy(): void {
+        this.oldSubscription.unsubscribe();
         this.subscription.unsubscribe();
     }
 }
