add tests

src/app/app.component.html

@@ -7,7 +7,7 @@ <h1>
     <img width="200" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <nav>
-    <a routerLink="/" routerLinkActive="active">Home</a>
+    <a routerLink="/home" routerLinkActive="active">Home</a>
     <a routerLink="/employee/1" routerLinkActive="active">Backend Devs</a>
     <a routerLink="/employee/2" routerLinkActive="active">Database Devs</a>
     <a routerLink="/employee/3" routerLinkActive="active">Frontend Devs</a>

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { routes } from './routes/routes';
 import { HomeComponent } from './home/home.component';
 import { EmployeeComponent } from './employee/employee.component';
 import { Route, RouterModule, Routes } from '@angular/router';
@@ -12,10 +13,6 @@ import { AppComponent } from './app.component';
 
 import { AppStateService } from './app-status/app-state.service';
 
-const routes: Routes = [
-  { path: '', pathMatch: 'full', component: HomeComponent },
-  { path: 'employee/:role', component: EmployeeComponent }
-];
 
 @NgModule({
   declarations: [

src/app/employee/employees.html

@@ -1,4 +1,6 @@
 <h2>{{title}}</h2>
-<div *ngFor="let employee of employees">
-    {{employee.id}} - {{employee.name}} - {{employee.role.name}}
+<div id="employee-list">
+    <div *ngFor="let employee of employees">
+        {{employee.id}} - {{employee.name}} - {{employee.role.name}}
+    </div>
 </div>

src/app/routes/routes.ts

@@ -0,0 +1,9 @@
+import { EmployeeComponent } from './../employee/employee.component';
+import { HomeComponent } from './../home/home.component';
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent },
+  { path: 'employee/:role', component: EmployeeComponent }
+];

src/test/home.component.spec.ts

@@ -7,7 +7,7 @@ import { HomeComponent } from '../app/home/home.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AlertModule } from 'ngx-bootstrap/alert';
 
-describe('Home Component', function() {  
+describe('Home Component', () => {  
     let comp: HomeComponent;
     let fixture: ComponentFixture<HomeComponent>;
     let de:  DebugElement;

src/test/navigation.spec.ts

@@ -0,0 +1,54 @@
+import { routes } from './../app/routes/routes';
+import { EmployeeComponent } from './../app/employee/employee.component';
+import { HomeComponent } from './../app/home/home.component';
+import { AppComponent } from './../app/app.component';
+import { Router } from '@angular/router';
+import { By } from '@angular/platform-browser';
+import { AppStateServiceMock } from './mocks/app-state.service.mock';
+import { AppStateService } from './../app/app-status/app-state.service';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { RouterTestingModule } from "@angular/router/testing";
+import { fakeAsync } from "@angular/core/testing";
+import { tick } from "@angular/core/testing";
+import { AlertModule } from 'ngx-bootstrap/alert';
+import { FormsModule } from '@angular/forms';
+import { Location } from "@angular/common";
+
+describe('Navigation',() => {
+    let location: Location;
+    let router: Router;
+    let fixture;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [ 
+                AlertModule,
+                RouterTestingModule.withRoutes(routes),
+                FormsModule 
+            ],
+            declarations: [ AppComponent, HomeComponent, EmployeeComponent ],
+            providers: [
+                { provide: AppStateService, useClass: AppStateServiceMock },     
+            ]
+        });
+        router = TestBed.get(Router);
+        location = TestBed.get(Location);
+        fixture = TestBed.createComponent(AppComponent);
+        router.initialNavigation();
+    }); 
+
+    it('navigate to "" redirects you to /home', fakeAsync(() => {
+        router.navigate(['']).then(() => {            
+            expect(location.path()).toBe('/home');
+        });
+        tick();
+    }));
+
+    it('navigate to "employee/3" takes you to employee/3', fakeAsync(() => {
+        router.navigate(['/employee/3']).then(() => {   
+            expect(location.path()).toBe('/employee/3');
+        });
+        tick();
+    }));
+});