Angular Testing Course

Author: Your Name

src/app/courses/home/async-examples.spec.ts

@@ -3,7 +3,7 @@ import {of} from 'rxjs';
 import {delay} from 'rxjs/operators';
 
 
-fdescribe('Async Testing Examples', () => {
+describe('Async Testing Examples', () => {
 
     it('Asynchronous test example with Jasmine done()', (done: DoneFn) => {
 

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

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed, tick} from '@angular/core/testing';
 import {CoursesModule} from '../courses.module';
 import {DebugElement} from '@angular/core';
 
@@ -29,6 +29,8 @@ describe('HomeComponent', () => {
     const advancedCourses = setupCourses()
         .filter(course => course.category == 'ADVANCED');
 
+
+
   beforeEach(async(() => {
 
       const coursesServiceSpy = jasmine.createSpyObj('CoursesService', ['findAllCourses'])
@@ -49,11 +51,8 @@ describe('HomeComponent', () => {
               coursesService = TestBed.get(CoursesService);
           });
 
-
   }));
 
-
-
   it("should create the component", () => {
 
     expect(component).toBeTruthy();
@@ -100,7 +99,7 @@ describe('HomeComponent', () => {
   });
 
 
-  it("should display advanced courses when tab clicked", (done: DoneFn) => {
+  it("should display advanced courses when tab clicked - fakeAsync", fakeAsync(() => {
 
       coursesService.findAllCourses.and.returnValue(of(setupCourses()));
 
@@ -112,19 +111,43 @@ describe('HomeComponent', () => {
 
       fixture.detectChanges();
 
-      setTimeout(() => {
+      flush();
 
-          const cardTitles = el.queryAll(By.css('.mat-card-title'));
+      const cardTitles = el.queryAll(By.css('.mat-card-title'));
 
-          expect(cardTitles.length).toBeGreaterThan(0,"Could not find card titles");
+      expect(cardTitles.length).toBeGreaterThan(0,"Could not find card titles");
 
-          expect(cardTitles[0].nativeElement.textContent).toContain("Angular Security Course");
+      expect(cardTitles[0].nativeElement.textContent).toContain("Angular Security Course");
 
-          done();
+  }));
 
-      }, 500);
 
-  });
+    it("should display advanced courses when tab clicked - async", async(() => {
+
+        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(() => {
+
+            console.log("called whenStable() ");
+
+            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");
+
+        });
+
+    }));
+
 
 });