Enable unit tests for components

Author: alisaduncan

src/app/users/dialog/dialog.component.html

@@ -9,7 +9,7 @@ <h3 mat-dialog-title>Add a user</h3>
           </mat-form-field>
 
           <mat-form-field>
-            <input matInput ngModel name="bs" placeholder="Corporate Jargon BS" required>
+            <input matInput ngModel name="bs" placeholder="Corporate jargon BS" required>
           </mat-form-field>
     </div>
   </form>

src/app/users/dialog/dialog.component.spec.ts

@@ -2,15 +2,24 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { DialogComponent } from './dialog.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { FormsModule } from '@angular/forms';
 
 describe('DialogComponent', () => {
   let component: DialogComponent;
   let fixture: ComponentFixture<DialogComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        FormsModule
+      ],
       declarations: [ DialogComponent ],
-      schemas: [ NO_ERRORS_SCHEMA ]
+      schemas: [ NO_ERRORS_SCHEMA ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {}}
+      ]
     })
     .compileComponents();
   }));
@@ -21,7 +30,7 @@ describe('DialogComponent', () => {
     fixture.detectChanges();
   });
 
-  xit('should be created', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/users/users.component.html

@@ -1,8 +1,4 @@
 <div fxLayout="column" fxFlex class="users">
-  <mat-toolbar color="primary">
-    Angular HttpClient
-  </mat-toolbar>
-
 
   <mat-nav-list>
     <mat-list-item *ngFor="let user of users" (click)="selectedUser = user">

src/app/users/users.component.spec.ts

@@ -2,15 +2,24 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { UsersComponent } from './users.component';
+import { UserService } from '../user.service';
+import { FakeUserService } from '@testing/fake-user.service';
+import { MatDialogModule } from '@angular/material';
 
-xdescribe('UsersComponent', () => {
+describe('UsersComponent', () => {
   let component: UsersComponent;
   let fixture: ComponentFixture<UsersComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        MatDialogModule,
+      ],
       declarations: [ UsersComponent ],
-      schemas: [ NO_ERRORS_SCHEMA ]
+      schemas: [ NO_ERRORS_SCHEMA ],
+      providers: [
+        { provide: UserService, useClass: FakeUserService }
+      ]
     })
     .compileComponents();
   }));

src/testing/fake-user.service.ts

@@ -0,0 +1,31 @@
+import { Observable, of } from 'rxjs';
+import { User } from '../app/user';
+
+export const FAKE_USERS: User[] = [
+  {
+    name: 'Test 1',
+    bs: 'BS 1',
+    id: 1,
+    avatar: 'avatar-1'
+  },
+  {
+    name: 'Test 2',
+    bs: 'BS 2',
+    id: 2
+  },
+];
+
+export class FakeUserService {
+  public apiEndpoint = 'api/';
+
+  public getUsers(): Observable<User[]> {
+    return of(FAKE_USERS);
+  }
+
+  public addUser(user: User): Observable<User> {
+    return of({
+      name: user.name,
+      bs: user.bs
+    });
+  }
+}

src/tsconfig.app.json

@@ -7,6 +7,7 @@
   },
   "exclude": [
     "test.ts",
+    "**/testing/*",
     "**/*.spec.ts"
   ]
 }

tsconfig.json

@@ -15,6 +15,9 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@testing/*": ["src/testing/*"]
+    }
   }
 }