docs: update testing components doc with generated compileComponent (a…

…ngular#41947) Updated testing-components-scenarios.md to match CLI generated test case. Closes angular#39740 PR Close angular#41947
davidecavaliere · May 6, 2021 · 2b93976 · 2b93976
1 parent 3a5f006
commit 2b93976
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 68 deletions.
diff --git a/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
@@ -1,7 +1,5 @@
 // #docplaster
-// #docregion import-async
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-// #enddocregion import-async
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
@@ -14,13 +12,13 @@ describe('BannerComponent (external files)', () => {
 
   describe('Two beforeEach', () => {
     // #docregion async-before-each
-    beforeEach(waitForAsync(() => {
+    beforeEach(async () => {
       TestBed
           .configureTestingModule({
             declarations: [BannerComponent],
           })
           .compileComponents();  // compile template and css
-    }));
+    });
     // #enddocregion async-before-each
 
     // synchronous beforeEach
@@ -37,18 +35,14 @@ describe('BannerComponent (external files)', () => {
 
   describe('One beforeEach', () => {
     // #docregion one-before-each
-    beforeEach(waitForAsync(() => {
-      TestBed
-          .configureTestingModule({
-            declarations: [BannerComponent],
-          })
-          .compileComponents()
-          .then(() => {
-            fixture = TestBed.createComponent(BannerComponent);
-            component = fixture.componentInstance;
-            h1 = fixture.nativeElement.querySelector('h1');
-          });
-    }));
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        declarations: [BannerComponent],
+      }).compileComponents();
+      fixture = TestBed.createComponent(BannerComponent);
+      component = fixture.componentInstance;
+      h1 = fixture.nativeElement.querySelector('h1');
+    });
     // #enddocregion one-before-each
 
     tests();

diff --git a/aio/content/examples/testing/src/app/banner/banner.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.spec.ts
@@ -12,8 +12,8 @@ describe('BannerComponent (inline template)', () => {
   let h1: HTMLElement;
 
   // #docregion configure-and-create
-  beforeEach(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [ BannerComponent ],
     });
     fixture = TestBed.createComponent(BannerComponent);

diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -50,10 +50,10 @@ function overrideSetup() {
   beforeEach(() => activatedRoute.setParamMap({id: 99999}));
 
   // #docregion setup-override
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     const routerSpy = createRouterSpy();
 
-    TestBed
+    await TestBed
         .configureTestingModule({
           imports: [HeroModule],
           providers: [
@@ -74,17 +74,17 @@ function overrideSetup() {
         // #enddocregion override-component-method
 
         .compileComponents();
-  }));
+  });
   // #enddocregion setup-override
 
   // #docregion override-tests
   let hdsSpy: HeroDetailServiceSpy;
 
-  beforeEach(waitForAsync(() => {
-    createComponent();
+  beforeEach(async () => {
+    await createComponent();
     // get the component's injected HeroDetailServiceSpy
     hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
-  }));
+  });
 
   it('should have called `getHero`', () => {
     expect(hdsSpy.getHero.calls.count()).toBe(1, 'getHero called once');
@@ -133,10 +133,10 @@ const firstHero = getTestHeroes()[0];
 
 function heroModuleSetup() {
   // #docregion setup-hero-module
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     const routerSpy = createRouterSpy();
 
-    TestBed
+    await TestBed
         .configureTestingModule({
           imports: [HeroModule],
           // #enddocregion setup-hero-module
@@ -149,18 +149,18 @@ function heroModuleSetup() {
           ]
         })
         .compileComponents();
-  }));
+  });
   // #enddocregion setup-hero-module
 
   // #docregion route-good-id
   describe('when navigate to existing hero', () => {
     let expectedHero: Hero;
 
-    beforeEach(waitForAsync(() => {
+    beforeEach(async () => {
       expectedHero = firstHero;
       activatedRoute.setParamMap({id: expectedHero.id});
-      createComponent();
-    }));
+      await createComponent();
+    });
 
     // #docregion selected-tests
     it('should display that hero\'s name', () => {
@@ -218,7 +218,9 @@ function heroModuleSetup() {
 
   // #docregion route-no-id
   describe('when navigate with no hero id', () => {
-    beforeEach(waitForAsync(createComponent));
+    beforeEach(async () => {
+      await createComponent();
+    });
 
     it('should have hero.id === 0', () => {
       expect(component.hero.id).toBe(0);
@@ -232,10 +234,10 @@ function heroModuleSetup() {
 
   // #docregion route-bad-id
   describe('when navigate to non-existent hero id', () => {
-    beforeEach(waitForAsync(() => {
+    beforeEach(async () => {
       activatedRoute.setParamMap({id: 99999});
-      createComponent();
-    }));
+      await createComponent();
+    });
 
     it('should try to navigate back to hero list', () => {
       expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
@@ -266,10 +268,10 @@ import { TitleCasePipe } from '../shared/title-case.pipe';
 
 function formsModuleSetup() {
   // #docregion setup-forms-module
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     const routerSpy = createRouterSpy();
 
-    TestBed
+    await TestBed
         .configureTestingModule({
           imports: [FormsModule],
           declarations: [HeroDetailComponent, TitleCasePipe],
@@ -280,7 +282,7 @@ function formsModuleSetup() {
           ]
         })
         .compileComponents();
-  }));
+  });
   // #enddocregion setup-forms-module
 
   it('should display 1st hero\'s name', waitForAsync(() => {
@@ -297,10 +299,10 @@ import { SharedModule } from '../shared/shared.module';
 
 function sharedModuleSetup() {
   // #docregion setup-shared-module
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     const routerSpy = createRouterSpy();
 
-    TestBed
+    await TestBed
         .configureTestingModule({
           imports: [SharedModule],
           declarations: [HeroDetailComponent],
@@ -311,7 +313,7 @@ function sharedModuleSetup() {
           ]
         })
         .compileComponents();
-  }));
+  });
   // #enddocregion setup-shared-module
 
   it('should display 1st hero\'s name', waitForAsync(() => {

diff --git a/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts b/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion without-toBlob-macrotask
-import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 
 import { CanvasComponent } from './canvas.component';
 
@@ -17,13 +17,13 @@ describe('CanvasComponent', () => {
   });
   // #enddocregion enable-toBlob-macrotask
   // #docregion without-toBlob-macrotask
-  beforeEach(waitForAsync(() => {
-    TestBed
+  beforeEach(async () => {
+    await TestBed
         .configureTestingModule({
           declarations: [CanvasComponent],
         })
         .compileComponents();
-  }));
+  });
 
   it('should be able to generate blob data from canvas', fakeAsync(() => {
        const fixture = TestBed.createComponent(CanvasComponent);

diff --git a/aio/content/examples/testing/src/app/twain/twain.component.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
@@ -120,8 +120,8 @@ describe('TwainComponent', () => {
        }));
     // #enddocregion fake-async-test
 
-    // #docregion async-test
-    it('should show quote after getQuote (async)', waitForAsync(() => {
+    // #docregion waitForAsync-test
+    it('should show quote after getQuote (waitForAsync)', waitForAsync(() => {
          fixture.detectChanges();  // ngOnInit()
          expect(quoteEl.textContent).toBe('...', 'should show placeholder');
 
@@ -131,7 +131,7 @@ describe('TwainComponent', () => {
            expect(errorMessage()).toBeNull('should not show error');
          });
        }));
-    // #enddocregion async-test
+    // #enddocregion waitForAsync-test
 
 
     // #docregion quote-done-test

diff --git a/aio/content/guide/testing-components-scenarios.md b/aio/content/guide/testing-components-scenarios.md
@@ -586,19 +586,11 @@ Then you can assert that the quote element displays the expected text.
 To use `waitForAsync()` functionality, you must import `zone.js/testing` in your test setup file.
 If you created your project with the Angular CLI, `zone-testing` is already imported in `src/test.ts`.
 
-<div class="alert is-helpful">
-
-The `TestBed.compileComponents()` method (see [below](#compile-components)) calls `XHR`
-to read external template and css files during "just-in-time" compilation.
-Write tests that call `compileComponents()` with the `waitForAsync()` utility.
-
-</div>
-
 Here's the previous `fakeAsync()` test, re-written with the `waitForAsync()` utility.
 
 <code-example
   path="testing/src/app/twain/twain.component.spec.ts"
-  region="async-test">
+  region="waitForAsync-test">
 </code-example>
 
 The `waitForAsync()` utility hides some asynchronous boilerplate by arranging for the tester's code
@@ -1502,7 +1494,7 @@ You must call `compileComponents()` within an asynchronous test function.
 <div class="alert is-critical">
 
 If you neglect to make the test function async
-(e.g., forget to use `waitForAsync()` as described below),
+(e.g., forget to use the `async` keyword as described below),
 you'll see this error message
 
 <code-example language="sh" class="code-shell" hideCopy>
@@ -1516,13 +1508,6 @@ A typical approach is to divide the setup logic into two separate `beforeEach()`
 1.  An async `beforeEach()` that compiles the components
 1.  A synchronous `beforeEach()` that performs the remaining setup.
 
-To follow this pattern, import the `waitForAsync()` helper with the other testing symbols.
-
-<code-example
-  path="testing/src/app/banner/banner-external.component.spec.ts"
-  region="import-async">
-</code-example>
-
 #### The async _beforeEach_
 
 Write the first async `beforeEach` like this.
@@ -1532,8 +1517,6 @@ Write the first async `beforeEach` like this.
   region="async-before-each"
   header="app/banner/banner-external.component.spec.ts (async beforeEach)"></code-example>
 
-The `waitForAsync()` helper function takes a parameterless function with the body of the setup.
-
 The `TestBed.configureTestingModule()` method returns the `TestBed` class so you can chain
 calls to other `TestBed` static methods such as `compileComponents()`.
 

diff --git a/aio/content/guide/upgrade-setup.md b/aio/content/guide/upgrade-setup.md
@@ -308,7 +308,7 @@ So when IE is refreshed (manually or automatically by `ng serve`), sometimes the
 
 ## Appendix: Test using `fakeAsync()/waitForAsync()`
 
-If you use the `fakeAsync()/waitForAsync()` helper function to run unit tests (for details, read the [Testing guide](guide/testing-components-scenarios#fake-async)), you need to import `zone.js/testing` in your test setup file.
+If you use the `fakeAsync()/waitForAsync()` helper functions to run unit tests (for details, read the [Testing guide](guide/testing-components-scenarios#fake-async)), you need to import `zone.js/testing` in your test setup file.
 
 <div class="alert is-important">
 If you create project with `Angular/CLI`, it is already imported in `src/test.ts`.