State after section 4

Author: baflo

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

@@ -0,0 +1,114 @@
+import { fakeAsync, flush, tick, flushMicrotasks } from "@angular/core/testing";
+import { of } from "rxjs";
+import { delay } from "rxjs/operators";
+
+describe("Async Testing Examples", () => {
+
+  it("Asynchronous test example with Jasmine done()", async function (done: DoneFn) {
+
+    let test = false;
+
+    setTimeout(() => {
+      console.log("running assertions");
+      test = true;
+      expect(test).toBeTruthy();
+
+      done();
+    }, 1000);
+  });
+
+  it("Asynchronous test example -- setTimeout", fakeAsync(function () {
+    // fakeAsync creates a async zone that observes many browser integrated async operations
+    // including setTimeout and setInterval. When the function is left, the zone is
+    // closed. The zone can see which operations still haven't finished and will throw
+    // an error, if the zone was left with some timers left.
+
+    let test = false
+
+    setTimeout(() => {
+      console.log("running assertions setTimeout()");
+      test = true;
+    }, 1000);
+
+    flush();
+    expect(test).toBeTrue()
+  }));
+
+  it("Asynchronous test example -- plain Promise", fakeAsync(function () {
+    let test = false;
+
+    console.log("Createing promise");
+
+    Promise.resolve().then(() => {
+      console.log("Promise evaluated successfullly");
+      test = true;
+    });
+
+    flushMicrotasks();
+
+    console.log("Running assertions.");
+    expect(test).toBeTrue();
+  }));
+
+  it("Asynchronous test example -- Promises + setTimeout()", fakeAsync(function () {
+    let counter = 0;
+
+    Promise.resolve()
+      .then(() => new Promise(resolve => {
+        counter += 10;
+
+        setTimeout(() => {
+          counter += 1;
+          resolve();
+        }, 1000);
+      }))
+      .then(() => {
+        counter += 10;
+      })
+
+    flushMicrotasks()
+    expect(counter).toBe(10);
+
+    tick(600);
+    expect(counter).toBe(10);
+    
+    flush();
+    expect(counter).toBe(21);
+  }));
+
+  it("Asynchronous test example -- immediate Observable", function () {
+    let test = false;
+
+    console.log("Creating Observable");
+
+    const test$ = of(test);
+
+    test$.subscribe(() => {
+      test = true;
+    });
+
+    console.log("Running test assertions");
+    expect(test).toBeTrue();
+  });
+      
+
+  it("Asynchronous test example -- Observables", fakeAsync(function () {
+    let test = false;
+
+    console.log("Creating Observable");
+
+    const test$ = of(test).pipe(delay(1000));
+
+    test$.subscribe(() => {
+      test = true;
+    });
+
+    tick(1000000);
+    // flushMicrotasks();
+    // flush();
+
+    console.log("Running test assertions");
+    expect(test).toBeTrue();
+  }));
+      
+})

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { CoursesModule } from '../courses.module';
 import { DebugElement } from '@angular/core';
 
@@ -12,6 +12,7 @@ import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { click } from '../common/test-utils';
+import { fake } from 'cypress/types/sinon';
 
 
 
@@ -95,25 +96,71 @@ describe('HomeComponent', () => {
 
     fixture.detectChanges();
 
+    const tabs = el.queryAll(By.css(".mat-tab-label"));
+
+    expect(tabs.length).toBe(2, "Unexpected number of tabs");
+  });
+
+
+  fit("should display advanced courses when tab clicked -- fakeAsync", fakeAsync(() => {
+    // `of` creates an observable that **immediately** emits its value. All of this is done
+    // synchronously, the emission and the completion. This is, this spec can be completely
+    // synchronous!!!
+    coursesService.findAllCourses.and.returnValue(of(setupCourses()));
+
+    fixture.detectChanges();
+
     const [beginnerTab, advancedTab] = el.queryAll(By.css(".mat-tab-label"));
-    click(advancedTab)
+    click(advancedTab);
 
     fixture.detectChanges();
+    flush();
 
-    const cardTitles = el.queryAll(By.css(".mat-card-title"));
+    const cardTitles = el.queryAll(By.css(".mat-tab-body-active .mat-card-title"));
     expect(cardTitles).toBeTruthy();
     expect(cardTitles[0].nativeElement.textContent).toContain("Angular Security Course");
-  });
+  }));
 
+  fit("should display advanced courses when tab clicked -- waitForAsync", waitForAsync(() => {
+    // `of` creates an observable that **immediately** emits its value. All of this is done
+    // synchronously, the emission and the completion. This is, this spec can be completely
+    // synchronous!!!
+    coursesService.findAllCourses.and.returnValue(of(setupCourses()));
 
-  it("should display advanced courses when tab clicked", () => {
+    fixture.detectChanges();
 
-    coursesService.findAllCourses.and.returnValue(of(advancedCourses));
+    const [beginnerTab, advancedTab] = el.queryAll(By.css(".mat-tab-label"));
+    click(advancedTab);
 
     fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      console.log("called whenStable()");
 
-    const tabs = el.queryAll(By.css(".mat-tab-label"));
+      const cardTitles = el.queryAll(By.css(".mat-tab-body-active .mat-card-title"));
+      expect(cardTitles).toBeTruthy();
+      expect(cardTitles[0].nativeElement.textContent).toContain("Angular Security Course");
+    });
+  }));
+
+  fit("should display advanced courses when tab clicked -- Typescript async", async () => {
+    // `of` creates an observable that **immediately** emits its value. All of this is done
+    // synchronously, the emission and the completion. This is, this spec can be completely
+    // synchronous!!!
+    coursesService.findAllCourses.and.returnValue(of(setupCourses()));
 
+    fixture.detectChanges();
+
+    const [beginnerTab, advancedTab] = el.queryAll(By.css(".mat-tab-label"));
+    click(advancedTab);
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    console.log("called whenStable()");
+
+    const cardTitles = el.queryAll(By.css(".mat-tab-body-active .mat-card-title"));
+    expect(cardTitles).toBeTruthy();
+    expect(cardTitles[0].nativeElement.textContent).toContain("Angular Security Course");
   });
 
 });