complete unit testing

Author: max-in-bc

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

@@ -2,7 +2,7 @@ import {fakeAsync, flush, flushMicrotasks, tick} from '@angular/core/testing';
 import {of} from 'rxjs';
 import {delay} from 'rxjs/operators';
 
-fdescribe('Async testing examples', () => {
+describe('Async testing examples', () => {
   it('Async test example with Jasmine done()', (done: DoneFn) => {
     let test = false;
 

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

@@ -85,21 +85,37 @@ 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()));
     fixture.detectChanges();
     const tabs = el.queryAll(By.css('.mat-tab-label'));
     click(tabs[1]);
     fixture.detectChanges();
-    setTimeout(() => {
+    flush();
+    const cardTitles = el.queryAll(By.css('.mat-tab-body-active .mat-card-title'));
+    expect(cardTitles.length).toBeGreaterThan(0, 'could not find card titles');
+    expect(cardTitles[0].nativeElement.textContent).toContain('Angular Security Course');
 
+  }));
+
+  it('should display advanced courses when tab clicked - waitForAsync', waitForAsync(() => {
+
+    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(() => {
+      // all async code in this block now completed
+      console.log('called whenStable();');
       const cardTitles = el.queryAll(By.css('.mat-tab-body-active .mat-card-title'));
       expect(cardTitles.length).toBeGreaterThan(0, 'could not find card titles');
       expect(cardTitles[0].nativeElement.textContent).toContain('Angular Security Course');
-      done();
-    }, 500);
-  });
+
+    });
+
+  }));
 
 });