docs: update testing components doc with generated compileComponent (#41947)

Updated testing-components-scenarios.md to match CLI generated test case.

Closes #39740

PR Close #41947
This commit is contained in:
iRealNirmal 2021-05-04 21:16:13 +05:30 committed by Alex Rickabaugh
parent 3a5f006ca6
commit 2b939767fe
7 changed files with 47 additions and 68 deletions

View File

@ -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({
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [BannerComponent],
})
.compileComponents()
.then(() => {
}).compileComponents();
fixture = TestBed.createComponent(BannerComponent);
component = fixture.componentInstance;
h1 = fixture.nativeElement.querySelector('h1');
});
}));
// #enddocregion one-before-each
tests();

View File

@ -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);

View File

@ -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(() => {

View File

@ -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);

View File

@ -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

View File

@ -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()`.

View File

@ -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`.