Feature/solution

karma.conf.js

@@ -8,12 +8,16 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-firefox-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      jasmine: {
+        random: false
+      }
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, './coverage/fe-test-app'),
@@ -25,7 +29,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['Firefox'],
     singleRun: false,
     restartOnFileChange: true
   });

package.json

@@ -49,6 +49,7 @@
     "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "~3.3.0",
     "karma-jasmine-html-reporter": "^1.6.0",
     "path-browserify": "^1.0.1",

src/app/app-routing.module.ts

@@ -1,8 +1,22 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
+import { CreateUserComponent } from './components/create-user/create-user.component';
+import { UsersTableComponent } from './components/users-table/users-table.component';
+import { APP_ROUTES } from './enums/app-routes.enum';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: APP_ROUTES.USERS,
+    component: UsersTableComponent,
+  },
+  {
+    path: APP_ROUTES.CREATE_USER,
+    component: CreateUserComponent,
+    pathMatch: 'full'
+  },
+  { path: '**', redirectTo: APP_ROUTES.USERS, pathMatch: 'full' }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<mat-toolbar>{{'APP.TITLE'}}</mat-toolbar>
+<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+<router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+mat-progress-bar {
+  position: absolute;
+}

src/app/app.component.spec.ts

@@ -1,16 +1,36 @@
-import { TestBed, async } from '@angular/core/testing';
+import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { MatProgressBarModule, MatToolbarModule } from '@angular/material';
 import { RouterTestingModule } from '@angular/router/testing';
+import { of, BehaviorSubject } from 'rxjs';
 import { AppComponent } from './app.component';
+import { LoadingService } from './services/loading.service';
 
 describe('AppComponent', () => {
+
+  let _loading = new BehaviorSubject(false);
   beforeEach(async(() => {
+    const mockLoadingService = jasmine.createSpyObj('LoadingService', ['isLoading', 'setLoading', 'loading']);
+
+    mockLoadingService.isLoading.and.callFake(function(){
+      return _loading;
+    });
+    mockLoadingService.setLoading.and.callFake(function(loading:boolean){
+      _loading.next(loading);
+    });
+    mockLoadingService.loading.and.callFake(function(){
+      return _loading.asObservable();
+    });
+
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        MatToolbarModule,
+        MatProgressBarModule
       ],
       declarations: [
         AppComponent
       ],
+      providers: [{ provide: LoadingService, useValue: mockLoadingService }]
     }).compileComponents();
   }));
 
@@ -19,4 +39,36 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
+
+  it('should subscribe to loading events', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    app.ngOnInit();
+
+    expect(app.subscriptions).toBeTruthy();
+    expect(app.subscriptions.length).toBeGreaterThan(0);
+    expect(app.subscriptions[0].closed).toBeFalsy();
+  });
+
+  it('it should update loading value', (fakeAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    const service = fixture.debugElement.injector.get(LoadingService);
+    app.ngOnInit();
+
+    expect(app.isLoading).toBe(false);
+    service.setLoading(true);
+    tick(150);
+    expect(app.isLoading).toBe(true);
+  })));
+
+  it('it should unsubscribe on destroy', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    app.ngOnInit();
+
+    expect(app.subscriptions).toBeTruthy();
+    app.ngOnDestroy();
+    expect(app.subscriptions[0].closed).toBeTruthy();
+  });
 });

src/app/app.component.ts

@@ -1,8 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LoadingService } from './services/loading.service';
 
 @Component({
   selector: 'exads-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent { }
+export class AppComponent implements OnInit {
+
+  private subscriptions: Subscription[] = [];
+  public isLoading: boolean = false;
+  constructor(public loadingService: LoadingService) {
+  }
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.loadingService.loading().subscribe((loading) => {
+        // use short timeout to prevent ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => {
+          this.isLoading = loading;
+        }, 100)
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => {
+      sub.unsubscribe();
+    });
+  }
+}

src/app/app.module.ts

@@ -1,20 +1,44 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { LoadingInterceptor } from './interceptors/loading.interceptor';
+import { HttpClientModule, HTTP_INTERCEPTORS, HttpInterceptor } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule, MatInputModule, MatPaginatorIntl, MatPaginatorModule, MatProgressBarModule, MatSelectModule, MatSnackBarModule, MatTableModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CreateUserComponent } from './components/create-user/create-user.component';
+import { UsersTableComponent } from './components/users-table/users-table.component';
+import { CustomMatPagerIntl } from './mat-helpers/custom-mat-pager-intl';
+
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    UsersTableComponent,
+    CreateUserComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    HttpClientModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    MatToolbarModule,
+    MatProgressBarModule,
+    MatSnackBarModule
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },
+    { provide: MatPaginatorIntl, useClass: CustomMatPagerIntl}
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }