fix: Tta 193 add loading page to new ip check load time (#939)

* feat: TTA-193 add preload page

* fix: TTA-181 change husky hint when commit message is wrong (#937)

Co-authored-by: mmaquina <[email protected]>

* chore(release): 1.75.21 [skip ci]nn

* feat: TTA-193 add service and interceptor for spinner loading

* feat: TTA-193 add spinner overlay and style it

* test: TTA-193 make test

* update package-lock.json version

* test: add test for interceptor and service

* test: TTA-193 increase code coverage

* test: TTA-193 increase code coverage

* fix: spinner test

* fix: spinner test

* fix: load spinner when route is recent

Co-authored-by: mmaquina <[email protected]>
Co-authored-by: mmaquina <[email protected]>
Co-authored-by: semantic-release-bot <[email protected]>
Co-authored-by: Andres Cabrera <andres@MSI>
Co-authored-by: Nicole Garcia <nicolsss>

Author: 4 people

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "time-tracker",
-  "version": "1.75.22",
+  "version": "1.75.24",
   "scripts": {
     "preinstall": "npx npm-force-resolutions",
     "ng": "ng",

package.json

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

src/app/app.component.html

@@ -3,7 +3,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
 import { CommonModule, DatePipe } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, Component } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataTablesModule } from 'angular-datatables';
@@ -14,6 +14,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -95,6 +97,8 @@ import { SearchUserComponent } from './modules/shared/components/search-user/sea
 import { TimeRangeCustomComponent } from './modules/reports/components/time-range-custom/time-range-custom.component';
 import { TimeRangeHeaderComponent } from './modules/reports/components/time-range-custom/time-range-header/time-range-header.component';
 import { TimeRangeOptionsComponent } from './modules/reports/components/time-range-custom/time-range-options/time-range-options.component';
+import { SpinnerOverlayComponent } from './modules/shared/components/spinner-overlay/spinner-overlay.component';
+import { SpinnerInterceptor } from './modules/shared/interceptors/spinner.interceptor';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -154,6 +158,7 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeCustomComponent,
     TimeRangeHeaderComponent,
     TimeRangeOptionsComponent,
+    SpinnerOverlayComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),
@@ -172,6 +177,7 @@ const maskConfig: Partial<IConfig> = {
     DataTablesModule,
     AutocompleteLibModule,
     NgxMaterialTimepickerModule,
+    MatProgressSpinnerModule,
     UiSwitchModule,
     DragDropModule,
     MatIconModule,
@@ -206,6 +212,11 @@ const maskConfig: Partial<IConfig> = {
       useClass: InjectTokenInterceptor,
       multi: true,
     },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: SpinnerInterceptor,
+      multi: true,
+    },
     DatePipe,
     CookieService,
     {provide: Window, useValue: window}

src/app/app.module.ts

@@ -0,0 +1,5 @@
+@use "../../../../../styles/colors.scss" as colors;
+
+:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
+    stroke: colors.$warning;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerOverlayComponent } from './spinner-overlay.component';
+
+describe('SpinnerOverlayComponent', () => {
+  let component: SpinnerOverlayComponent;
+  let fixture: ComponentFixture<SpinnerOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SpinnerOverlayComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SpinnerOverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-spinner-overlay',
+  template: '<mat-spinner diameter="80"></mat-spinner>',
+  styleUrls: ['./spinner-overlay.component.scss'],
+})
+
+export class SpinnerOverlayComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,49 @@
+
+
+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';
+
+
+describe('SpinnerInterceptorService test', () => {
+  TestBed.configureTestingModule({
+    providers: [
+      SpinnerInterceptor,
+      Overlay
+    ],
+  });
+
+    class MockHttpHandler implements HttpHandler {
+      handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+        return of(new HttpResponse());
+      }
+    }
+
+  let overlay: Overlay;
+  let httpHandler: HttpHandler;
+  let spinnerInterceptor: SpinnerInterceptor;
+
+  beforeEach(() => {
+    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 spinnerInterceptor is called', () => {
+    const request = new HttpRequest('GET', '/recent');
+    spyOn(spinnerInterceptor, 'intercept');
+
+    spinnerInterceptor.intercept(request, httpHandler);
+
+    expect(spinnerInterceptor.intercept).toHaveBeenCalledWith(request, httpHandler);
+
+  });
+
+});

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

@@ -0,0 +1,30 @@
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+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) {}
+
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    if(req.url.endsWith('recent')){
+      const spinnerSubscription: Subscription = this.spinnerOverlayService.spinner$.subscribe();
+    return next
+      .handle(req)
+      .pipe(finalize(() => spinnerSubscription.unsubscribe()));
+    }else{
+      return next.handle(req);
+    }
+    
+  }
+}

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

@@ -0,0 +1,66 @@
+import { TestBed } from '@angular/core/testing';
+import { Overlay } from '@angular/cdk/overlay';
+
+import { SpinnerOverlayService } from './spinner-overlay.service';
+import { SpinnerInterceptor } from '../interceptors/spinner.interceptor';
+import { HttpEvent, HttpHandler, HttpRequest, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { ComponentPortal } from 'ngx-toastr';
+
+
+describe('SpinnerOverlayService test', () => {
+
+  class MockHttpHandler extends HttpHandler {
+    handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+      return of(new HttpResponse());
+    }
+  }
+
+  let spinnerService: SpinnerOverlayService;
+  let spinnerInterceptor: SpinnerInterceptor;
+  let mockHttpHandler: HttpHandler;
+  let overlayRef: any;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        Overlay,
+        SpinnerInterceptor,
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: SpinnerInterceptor,
+          multi: true,
+        },
+      ],
+    });
+    spinnerService = TestBed.inject(SpinnerOverlayService);
+    spinnerInterceptor = TestBed.inject(SpinnerInterceptor);
+    mockHttpHandler = new MockHttpHandler();
+    overlayRef = spinnerService.overlayRef;
+  });
+
+  it('should be created', () => {
+    expect(spinnerService).toBeTruthy();
+  });
+
+  it('if request is made then spinnerService is show', () => {
+    const request = new HttpRequest('GET', '/recent');
+    spyOn(spinnerService, 'show');
+
+    spinnerInterceptor.intercept(request, mockHttpHandler);
+
+    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();
+  });
+
+});