Add tests for new 'debounceDelay' option. Run old tests in fakeAsync zone now.

Author: mpalourdio

test/components/spinner/spinner.component.spec.ts

@@ -7,7 +7,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, discardPeriodicTasks, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { SpinnerComponent } from '../../../src/components/spinner/spinner.component';
 import { By } from '@angular/platform-browser';
 import { Spinkit, SPINKIT_COMPONENTS } from '../../../src/spinkits';
@@ -98,7 +98,7 @@ describe('SpinnerComponent', () => {
         expect(element.style['background-color']).toBe('rgb(255, 0, 0)');
     });
 
-    it('should show and hide the spinner according to the pending http requests', inject(
+    it('should show and hide the spinner according to the pending http requests', fakeAsync(inject(
         [PendingInterceptorService, HttpClient, HttpTestingController],
         (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
 
@@ -111,72 +111,169 @@ describe('SpinnerComponent', () => {
             const firstRequest = httpMock.expectOne('/fake');
             const secondRequest = httpMock.expectOne('/fake2');
 
+            tick();
             expect(component.isSpinnerVisible).toBeTruthy();
-
             firstRequest.flush({});
-            expect(component.isSpinnerVisible).toBeTruthy();
 
+            tick();
+            expect(component.isSpinnerVisible).toBeTruthy();
             secondRequest.flush({});
+
+            tick();
             expect(component.isSpinnerVisible).toBeFalsy();
         }
-    ));
+    )));
 
-    it('should hide and show a the spinner for a single http request', inject(
+    it('should hide and show a the spinner for a single http request', fakeAsync(inject(
         [PendingInterceptorService, HttpClient, HttpTestingController],
         (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
             http.get('/fake').subscribe();
+
+            tick();
             expect(component.isSpinnerVisible).toBeTruthy();
             httpMock.expectOne('/fake').flush({});
+
+            tick();
             expect(component.isSpinnerVisible).toBeFalsy();
         }
-    ));
+    )));
 
-    it('should not show the spinner if the request is filtered', inject(
+    it('should not show the spinner if the request is filtered', fakeAsync(inject(
         [PendingInterceptorService, HttpClient, HttpTestingController],
         (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
             component.filteredUrlPatterns.push('fake');
             fixture.detectChanges();
 
             http.get('/fake').subscribe();
+            tick();
             expect(component.isSpinnerVisible).toBeFalsy();
             httpMock.expectOne('/fake').flush({});
         }
-    ));
+    )));
 
-    it('should correctly filter with several requests and one pattern', inject(
+    it('should correctly filter with several requests and one pattern', fakeAsync(inject(
         [PendingInterceptorService, HttpClient, HttpTestingController],
         (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
             component.filteredUrlPatterns.push('\\d');
             fixture.detectChanges();
 
             http.get('/12345').subscribe();
+            tick();
             expect(component.isSpinnerVisible).toBeFalsy();
             httpMock.expectOne('/12345').flush({});
 
             http.get('/fake').subscribe();
+            tick();
             expect(component.isSpinnerVisible).toBeTruthy();
             httpMock.expectOne('/fake').flush({});
+
+            tick();
             expect(component.isSpinnerVisible).toBeFalsy();
         }
-    ));
+    )));
 
     it('should throw an error if filteredUrlPatterns is not an array', () => {
         component.filteredUrlPatterns = null;
-        expect(() => fixture.detectChanges())
-            .toThrow(new Error('`filteredUrlPatterns` must be an array.'));
+        expect(() => fixture.detectChanges()).toThrow(new Error('`filteredUrlPatterns` must be an array.'));
     });
 
-    it('should show the spinner even if the component is created after the http request is performed', inject(
+    it('should show the spinner even if the component is created after the http request is performed',
+        fakeAsync(inject([PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+                http.get('/fake').subscribe();
+
+                const newFixture = TestBed.createComponent(SpinnerComponent);
+                const newComponent = newFixture.componentInstance;
+
+                tick();
+                expect(newComponent.isSpinnerVisible).toBeTruthy();
+                httpMock.expectOne('/fake').flush({});
+
+                tick();
+                expect(newComponent.isSpinnerVisible).toBeFalsy();
+                httpMock.verify();
+            }
+        ))
+    );
+
+    it('should correctly handle the debounce delay for a single http request', fakeAsync(inject(
         [PendingInterceptorService, HttpClient, HttpTestingController],
         (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+            component.debounceDelay = 2000;
             http.get('/fake').subscribe();
 
-            const newFixture = TestBed.createComponent(SpinnerComponent);
-            const newComponent = newFixture.componentInstance;
-            expect(newComponent.isSpinnerVisible).toBeTruthy();
+            // the http request is pending for 1 second now
+            tick(1000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the http request is pending for 1,999 seconds now
+            tick(999);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the http request is pending for 2 seconds now - the spinner will be displayed
+            tick(1);
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            // the http request is pending for 5 seconds now - the spinner is still displayed
+            tick(3000);
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            // the http request is finally over, the spinner is hidden
             httpMock.expectOne('/fake').flush({});
-            expect(newComponent.isSpinnerVisible).toBeFalsy();
-            httpMock.verify();
+            tick();
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // https://github.com/angular/angular/issues/10127
+            discardPeriodicTasks();
+        }
+    )));
+
+    it('should correctly handle the debounce delay for multiple http requests', fakeAsync(inject(
+        [PendingInterceptorService, HttpClient, HttpTestingController],
+        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+            component.debounceDelay = 2000;
+
+            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');
+
+            // the http requests are pending for 1 second now
+            tick(1000);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the http requests are pending for 1,999 seconds now
+            tick(999);
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the http requests are pending for 2 seconds now - the spinner will be displayed
+            tick(1);
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            // the http requests are pending for 5 seconds now - the spinner is still displayed
+            tick(3000);
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            // the first http request is finally over, the spinner is still displayed
+            firstRequest.flush({});
+            tick();
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            // the second request is pending for 8 seconds now - the spinner is still displayed
+            tick(3000);
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            // the second http request is finally over, the spinner is hidden
+            secondRequest.flush({});
+            tick();
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // https://github.com/angular/angular/issues/10127
+            discardPeriodicTasks();
         }
-    ));
+    )));
 });