End home testing

Author: sesp13

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

@@ -1,23 +1,15 @@
 import {
-  async,
   ComponentFixture,
   fakeAsync,
   flush,
-  flushMicrotasks,
   TestBed,
   waitForAsync,
 } from "@angular/core/testing";
 import { CoursesModule } from "../courses.module";
 import { DebugElement } from "@angular/core";
 
 import { HomeComponent } from "./home.component";
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from "@angular/common/http/testing";
 import { CoursesService } from "../services/courses.service";
-import { HttpClient } from "@angular/common/http";
-import { COURSES } from "../../../../server/db-data";
 import { setupCourses } from "../common/setup-test-data";
 import { By } from "@angular/platform-browser";
 import { of } from "rxjs";
@@ -84,20 +76,37 @@ describe("HomeComponent", () => {
     expect(tabs.length).toBe(2, "Unexpected number of tabs found");
   });
 
-  it("should display advanced courses when tab clicked", (done: DoneFn) => {
+  it("should display advanced courses when tab clicked - fakeAysnc", fakeAsync(() => {
     coursesService.findAllCourses.and.returnValue(of(setupCourses()));
     fixture.detectChanges();
     const tabs = el.queryAll(By.css(".mat-tab-label"));
     click(tabs[1]);
+    fixture.detectChanges();
+    flush();
+    const cardTitles = el.queryAll(
+      By.css(".mat-tab-body-active .mat-card-title")
+    );
+    expect(cardTitles.length).toBeGreaterThan(0);
+    expect(cardTitles[0].nativeElement.textContent).toContain(
+      "Angular Security Course"
+    );
+  }));
 
-    setTimeout(() => {
-      const cardTitles = el.queryAll(By.css(".mat-card-title"));
+  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();
+    // This is required using wait for async
+    fixture.whenStable().then(() => {
+      const cardTitles = el.queryAll(
+        By.css(".mat-tab-body-active .mat-card-title")
+      );
       expect(cardTitles.length).toBeGreaterThan(0);
       expect(cardTitles[0].nativeElement.textContent).toContain(
         "Angular Security Course"
       );
-
-      done();
-    }, 500);
-  });
+    });
+  }));
 });