iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fix BannerComponent unit tests (#42336)

Browse Source 
remove `async` and `await` from `BannerComponent` test because the
component uses an inline template and styles

create doc region in `banner-external.component.spec.ts` demonstrating
test setup that may fail due to a missing call to `.compileComponents()`
for a component with an external template and stylesheet

PR Close #42336
This commit is contained in:
Sam Severance 2021-05-25 19:15:17 -04:00 committed by Zach Arend
parent 0166391402
commit caf15da651
3 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
View File

@ -10,12 +10,27 @@ describe('BannerComponent (external files)', () => {
let fixture: ComponentFixture<BannerComponent>; let fixture: ComponentFixture<BannerComponent>;
let h1: HTMLElement; let h1: HTMLElement;
describe('setup that may fail', () => {
// #docregion setup-may-fail
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ BannerComponent ],
}); // missing call to compileComponents()
fixture = TestBed.createComponent(BannerComponent);
});
// #enddocregion setup-may-fail
it('should create', () => {
expect(fixture.componentInstance).toBeDefined();
});
});
describe('Two beforeEach', () => { describe('Two beforeEach', () => {
// #docregion async-before-each // #docregion async-before-each
beforeEach(async () => { beforeEach(async () => {
TestBed TestBed
.configureTestingModule({ .configureTestingModule({
declarations: [BannerComponent], declarations: [ BannerComponent ],
}) })
.compileComponents(); // compile template and css .compileComponents(); // compile template and css
}); });
@ -37,7 +52,7 @@ describe('BannerComponent (external files)', () => {
// #docregion one-before-each // #docregion one-before-each
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [BannerComponent], declarations: [ BannerComponent ],
}).compileComponents(); }).compileComponents();
fixture = TestBed.createComponent(BannerComponent); fixture = TestBed.createComponent(BannerComponent);
component = fixture.componentInstance; component = fixture.componentInstance;

9
aio/content/examples/testing/src/app/banner/banner.component.spec.ts
View File

@ -11,18 +11,15 @@ describe('BannerComponent (inline template)', () => {
let fixture: ComponentFixture<BannerComponent>; let fixture: ComponentFixture<BannerComponent>;
let h1: HTMLElement; let h1: HTMLElement;
// #docregion configure-and-create beforeEach(() => {
beforeEach(async () => { TestBed.configureTestingModule({
await TestBed.configureTestingModule({
declarations: [ BannerComponent ], declarations: [ BannerComponent ],
}); });
fixture = TestBed.createComponent(BannerComponent); fixture = TestBed.createComponent(BannerComponent);
// #enddocregion configure-and-create
component = fixture.componentInstance; // BannerComponent test instance component = fixture.componentInstance; // BannerComponent test instance
h1 = fixture.nativeElement.querySelector('h1'); h1 = fixture.nativeElement.querySelector('h1');
// #docregion configure-and-create
}); });
// #enddocregion setup, configure-and-create // #enddocregion setup
// #docregion test-w-o-detect-changes // #docregion test-w-o-detect-changes
it('no title in the DOM after createComponent()', () => { it('no title in the DOM after createComponent()', () => {

6
aio/content/guide/testing-components-scenarios.md
View File

@ -1469,9 +1469,9 @@ the following version of the `BannerComponent` does.
The test fails when the `TestBed` tries to create the component. The test fails when the `TestBed` tries to create the component.
<code-example <code-example
path="testing/src/app/banner/banner.component.spec.ts" path="testing/src/app/banner/banner-external.component.spec.ts"
region="configure-and-create" region="setup-may-fail"
header="app/banner/banner.component.spec.ts (setup that fails)" header="app/banner/banner-external.component.spec.ts (setup that fails)"
avoid></code-example> avoid></code-example>
Recall that the application hasn't been compiled. Recall that the application hasn't been compiled.