fix: spinner test

src/app/modules/shared/components/spinner-overlay/spinner-overlay.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-spinner-overlay',
-  templateUrl: './spinner-overlay.component.html',
+  template: '<mat-spinner diameter="80"></mat-spinner>',
   styleUrls: ['./spinner-overlay.component.scss'],
 })
 

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

@@ -2,8 +2,9 @@ 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, Subscription } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { SpinnerOverlayService } from '../services/spinner-overlay.service';
+import { ComponentPortal } from 'ngx-toastr';
 
 
 describe('SpinnerInterceptorService test', () => {
@@ -20,32 +21,40 @@ describe('SpinnerInterceptorService test', () => {
     }
   }
 
-  let overlay: Overlay;
-  let httpHandler: HttpHandler;
+  let spinnerService: SpinnerOverlayService;
   let spinnerInterceptor: SpinnerInterceptor;
-  let spinnerOverlayService: SpinnerOverlayService;
+  let mockHttpHandler: HttpHandler;
+  let overlayRef: any;
 
   beforeEach(() => {
-    overlay = jasmine.createSpyObj('Overlay', ['create']);
-    httpHandler = new MockHttpHandler();
-    spinnerInterceptor = new SpinnerInterceptor(new SpinnerOverlayService(overlay));
-    spinnerOverlayService = new SpinnerOverlayService(overlay);
+    spinnerService = TestBed.inject(SpinnerOverlayService);
+    spinnerInterceptor = TestBed.inject(SpinnerInterceptor);
+    mockHttpHandler = new MockHttpHandler();
+    overlayRef = spinnerService.overlayRef;
   });
 
   it('should be created', () => {
     expect(spinnerInterceptor).toBeTruthy();
   });
 
-  it('if request is made then spinnerInterceptor is called', () => {
-    const request = new HttpRequest('GET', '/foo');
-    const spinnerSubscription: Subscription = spinnerOverlayService.spinner$.subscribe();
-    spyOn(spinnerSubscription, 'unsubscribe')
-    spyOn(spinnerInterceptor, 'intercept').and.callThrough();
+  it('if request is made then spinnerService is show', () => {
+    const request = new HttpRequest('GET', '/recent');
+    spyOn(spinnerService, 'show');
 
-    spinnerInterceptor.intercept(request, httpHandler);
+    spinnerInterceptor.intercept(request, mockHttpHandler);
 
-    expect(spinnerInterceptor.intercept).toHaveBeenCalledWith(request, httpHandler);
-    expect(spinnerSubscription.unsubscribe).toBeTruthy();
+    expect(spinnerService.show).toHaveBeenCalled();
+    expect(ComponentPortal).toBeTruthy();
+  });
+
+
+  it('if hide calls detach method of overlayRef and then sets it to undefined', () => {
+    spyOn(spinnerService, 'hide');
+
+    spinnerService.hide();
+
+    expect(spinnerService.hide).toHaveBeenCalled();
+    expect(overlayRef).toBeUndefined();
   });
 
 });

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

@@ -5,21 +5,16 @@ import {
   HttpRequest,
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable } 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>> {
-    const spinnerSubscription: Subscription = this.spinnerOverlayService.spinner$.subscribe();
-    return next
-      .handle(req)
-      .pipe(finalize(() => spinnerSubscription.unsubscribe()));
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    this.spinnerOverlayService.show();
+    return next.handle(req).pipe(finalize(() => this.spinnerOverlayService.hide()));
   }
 }

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

@@ -44,16 +44,23 @@ describe('SpinnerOverlayService test', () => {
   });
 
   it('if request is made then spinnerService is show', () => {
-    const request = new HttpRequest('GET', '/foo');
+    const request = new HttpRequest('GET', '/recent');
     spyOn(spinnerService, 'show');
-    spyOn(spinnerService, 'hide');
 
     spinnerInterceptor.intercept(request, mockHttpHandler);
 
     expect(spinnerService.show).toHaveBeenCalled();
-    expect(overlayRef).toBeUndefined();
     expect(ComponentPortal).toBeTruthy();
-    expect(spinnerService.hide).toBeTruthy();
+  });
+
+
+  it('if hide calls detach method of overlayRef and then sets it to undefined', () => {
+    spyOn(spinnerService, 'hide');
+
+    spinnerService.hide();
+
+    expect(spinnerService.hide).toHaveBeenCalled();
+    expect(overlayRef).toBeUndefined();
   });
 
 });

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

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