fix: spinner test

src/app/modules/shared/interceptors/spinner.interceptor.spec.ts

@@ -1,10 +1,11 @@
+
+
 import { Overlay } from '@angular/cdk/overlay';
 import { TestBed } from '@angular/core/testing';
 import { SpinnerInterceptor } from './spinner.interceptor';
 import { HttpHandler, HttpRequest, HttpResponse, HttpEvent } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { SpinnerOverlayService } from '../services/spinner-overlay.service';
-import { ComponentPortal } from 'ngx-toastr';
 
 
 describe('SpinnerInterceptorService test', () => {
@@ -15,46 +16,34 @@ describe('SpinnerInterceptorService test', () => {
     ],
   });
 
-  class MockHttpHandler implements HttpHandler {
-    handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
-      return of(new HttpResponse());
+    class MockHttpHandler implements HttpHandler {
+      handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+        return of(new HttpResponse());
+      }
     }
-  }
 
-  let spinnerService: SpinnerOverlayService;
+  let overlay: Overlay;
+  let httpHandler: HttpHandler;
   let spinnerInterceptor: SpinnerInterceptor;
-  let mockHttpHandler: HttpHandler;
-  let overlayRef: any;
 
   beforeEach(() => {
-    spinnerService = TestBed.inject(SpinnerOverlayService);
-    spinnerInterceptor = TestBed.inject(SpinnerInterceptor);
-    mockHttpHandler = new MockHttpHandler();
-    overlayRef = spinnerService.overlayRef;
+    overlay = jasmine.createSpyObj('Overlay', ['create']);
+    httpHandler = new MockHttpHandler();
+    spinnerInterceptor = new SpinnerInterceptor(new SpinnerOverlayService(overlay));
   });
 
   it('should be created', () => {
     expect(spinnerInterceptor).toBeTruthy();
   });
 
-  it('if request is made then spinnerService is show', () => {
+  it('if request is made then spinnerInterceptor is called', () => {
     const request = new HttpRequest('GET', '/recent');
-    spyOn(spinnerService, 'show');
-
-    spinnerInterceptor.intercept(request, mockHttpHandler);
-
-    expect(spinnerService.show).toHaveBeenCalled();
-    expect(ComponentPortal).toBeTruthy();
-  });
-
+    spyOn(spinnerInterceptor, 'intercept');
 
-  it('if hide calls detach method of overlayRef and then sets it to undefined', () => {
-    spyOn(spinnerService, 'hide');
+    spinnerInterceptor.intercept(request, httpHandler);
 
-    spinnerService.hide();
+    expect(spinnerInterceptor.intercept).toHaveBeenCalledWith(request, httpHandler);
 
-    expect(spinnerService.hide).toHaveBeenCalled();
-    expect(overlayRef).toBeUndefined();
   });
 
 });

src/app/modules/shared/interceptors/spinner.interceptor.ts

@@ -5,16 +5,21 @@ import {
   HttpRequest,
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { finalize } from 'rxjs/operators';
 import { SpinnerOverlayService } from '../services/spinner-overlay.service';
 
 @Injectable()
 export class SpinnerInterceptor implements HttpInterceptor {
-  constructor(private readonly spinnerOverlayService: SpinnerOverlayService) { }
+  constructor(private readonly spinnerOverlayService: SpinnerOverlayService) {}
 
-  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    this.spinnerOverlayService.show();
-    return next.handle(req).pipe(finalize(() => this.spinnerOverlayService.hide()));
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    const spinnerSubscription: Subscription = this.spinnerOverlayService.spinner$.subscribe();
+    return next
+      .handle(req)
+      .pipe(finalize(() => spinnerSubscription.unsubscribe()));
   }
 }

src/app/modules/shared/services/spinner-overlay.service.ts

@@ -1,14 +1,27 @@
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Injectable } from '@angular/core';
-import { SpinnerOverlayComponent } from '../components/spinner-overlay/spinner-overlay.component';
+import { defer, NEVER } from 'rxjs';
+import { finalize, share } from 'rxjs/operators';
+import { SpinnerOverlayComponent } from './../components/spinner-overlay/spinner-overlay.component';
+
 @Injectable({
   providedIn: 'root',
 })
 export class SpinnerOverlayService {
   public overlayRef: OverlayRef = undefined;
+  static spinner$: any;
+
+  constructor(private readonly overlay: Overlay) {}
 
-  constructor(public overlay: Overlay) { }
+  public readonly spinner$ = defer(() => {
+    this.show();
+    return NEVER.pipe(
+      finalize(() => {
+        this.hide();
+      })
+    );
+  }).pipe(share());
 
   public show(): void {
     Promise.resolve(null).then(() => {