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 index b52039a059..d7d67e861d 100644 --- 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 index 51f9407761..0b79132224 100644 --- 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 index 8f4ee4f6d7..ca8260f1d6 100644 --- 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 index 1c30c7dc6a..b3b0e56a55 100644 --- 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 index d564ea5dfc..ed4a425822 100644 --- 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 index 0e0cff413f..5bcadb0219 100644 --- 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`. -
- -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. - -
- Here's the previous `fakeAsync()` test, re-written with the `waitForAsync()` utility. + region="waitForAsync-test"> 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.
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 @@ -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. - - - - #### 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)"> -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 index e385c2fcdc..c4154e1212 100644 --- 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.
If you create project with `Angular/CLI`, it is already imported in `src/test.ts`.