Angular Testing Course

Author: jhades

src/app/courses/common/test-utils.ts

@@ -0,0 +1,15 @@
+import {DebugElement} from '@angular/core';
+
+export const ButtonClickEvents = {
+  left:  { button: 0 },
+  right: { button: 2 }
+};
+
+
+export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
+  if (el instanceof HTMLElement) {
+    el.click();
+  } else {
+    el.triggerEventHandler('click', eventObj);
+  }
+}

src/app/courses/home/home.component.spec.ts

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed} from '@angular/core/testing';
 import {CoursesModule} from '../courses.module';
 import {DebugElement} from '@angular/core';
 
@@ -11,6 +11,7 @@ import {setupCourses} from '../common/setup-test-data';
 import {By} from '@angular/platform-browser';
 import {of} from 'rxjs';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {click} from '../common/test-utils';
 
 
 
@@ -93,6 +94,33 @@ describe('HomeComponent', () => {
 
   });
 
+
+  it("should display advanced courses when tab clicked", async(() => {
+
+    TestBed.get(CoursesService).findAllCourses.and.returnValue(of(setupCourses()));
+
+    fixture.detectChanges();
+
+    const tabs = el.queryAll(By.css('.mat-tab-label'));
+
+    click(tabs[1]);
+
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => {
+
+      const cardTitles = el.queryAll(By.css('.mat-card-title'));
+
+      expect(cardTitles.length).toBeGreaterThan(0,"Could not find card titles");
+
+      expect(cardTitles[0].nativeElement.textContent).toContain("Angular Security Course");
+
+
+    });
+
+
+  }));
+
 });
 
 

src/app/courses/home/home.component.ts

@@ -22,8 +22,6 @@ export class HomeComponent implements OnInit {
 
     ngOnInit() {
 
-      console.log("called Home ngOnInit()");
-
       this.reloadCourses();
 
     }