Merge pull request #95 from gnom7/tests

ISSUE-90: Better handling of synchronous (sequential) requests

Author: mpalourdio

src/lib/components/ng-http-loader.component.ts

@@ -45,10 +45,23 @@ export class NgHttpLoaderComponent implements OnDestroy, OnInit {
     public entryComponent: any = null;
 
     constructor(private pendingInterceptorService: PendingInterceptorService, private spinnerVisibilityService: SpinnerVisibilityService) {
+    }
+
+    ngOnInit(): void {
+        this.nullifySpinnerIfEntryComponentIsDefined();
+        this.initFilters();
+        this.initializeSubscription();
+    }
+
+    ngOnDestroy(): void {
+        this.subscriptions.unsubscribe();
+    }
+
+    private initializeSubscription() {
         const [showSpinner, hideSpinner] = partition((h: boolean) => h)(this.pendingInterceptorService.pendingRequestsStatus$);
 
         this.subscriptions = merge(
-            merge(showSpinner, hideSpinner).pipe(
+            this.pendingInterceptorService.pendingRequestsStatus$.pipe(
                 switchMap(() => showSpinner.pipe(debounce(() => timer(this.debounceDelay))))
             ),
             showSpinner.pipe(
@@ -60,15 +73,6 @@ export class NgHttpLoaderComponent implements OnDestroy, OnInit {
             .subscribe(h => this.handleSpinnerVisibility(h));
     }
 
-    ngOnInit(): void {
-        this.nullifySpinnerIfEntryComponentIsDefined();
-        this.initFilters();
-    }
-
-    ngOnDestroy(): void {
-        this.subscriptions.unsubscribe();
-    }
-
     private nullifySpinnerIfEntryComponentIsDefined(): void {
         if (null != this.entryComponent) {
             this.spinner = null;

src/test/components/ng-http-loader.component.spec.ts

@@ -33,6 +33,7 @@ describe('NgHttpLoaderComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(NgHttpLoaderComponent);
         component = fixture.componentInstance;
+        component.ngOnInit();
     });
 
     it('should create the ng-http-loader component', () => {
@@ -281,6 +282,7 @@ describe('NgHttpLoaderComponent', () => {
 
             const newFixture = TestBed.createComponent(NgHttpLoaderComponent);
             const newComponent = newFixture.componentInstance;
+            newComponent.ngOnInit();
 
             tick();
             expect(newComponent.isSpinnerVisible).toBeTruthy();
@@ -336,6 +338,64 @@ describe('NgHttpLoaderComponent', () => {
         }
     )));
 
+    it('should correctly handle the debounce delay for HTTP sequential requests finished before spinner should be shown', fakeAsync(inject(
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
+            component.debounceDelay = 5000;
+            http.get('/fake').subscribe();
+
+            // the first HTTP request is pending for 1 second now
+            tick(1000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the first HTTP request is over
+            httpMock.expectOne('/fake').flush({});
+            tick(1000);
+
+            http.get('/fake2').subscribe();
+
+            // the second HTTP request is pending for 1 second now
+            tick(1000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the second HTTP request is over
+            httpMock.expectOne('/fake2').flush({});
+            tick();
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the spinner shouldn't be shown after debounceDelay terminated
+            tick(2000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+        }
+    )));
+
+    it('should correctly handle the debounce delay for HTTP parallel requests finished before spinner should be shown', fakeAsync(inject(
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
+            component.debounceDelay = 5000;
+            http.get('/fake').subscribe();
+            http.get('/fake2').subscribe();
+
+            // both HTTP requests are pending for 1s now
+            tick(1000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the first HTTP request is over
+            httpMock.expectOne('/fake').flush({});
+
+            // the second HTTP request is pending for 2s now
+            tick(1000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the second HTTP request is over
+            httpMock.expectOne('/fake2').flush({});
+            tick();
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the spinner shouldn't be shown after debounceDelay terminated
+            tick(3000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+        }
+    )));
+
     it('should correctly handle the debounce delay for multiple HTTP requests', fakeAsync(inject(
         [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             component.debounceDelay = 2000;