docs: fix `BannerComponent` unit tests (#42336)

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

View File

@ -10,12 +10,27 @@ describe('BannerComponent (external files)', () => {
let fixture: ComponentFixture<BannerComponent>;
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', () => {
// #docregion async-before-each
beforeEach(async () => {
TestBed
.configureTestingModule({
declarations: [BannerComponent],
declarations: [ BannerComponent ],
})
.compileComponents(); // compile template and css
});
@ -37,7 +52,7 @@ describe('BannerComponent (external files)', () => {
// #docregion one-before-each
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [BannerComponent],
declarations: [ BannerComponent ],
}).compileComponents();
fixture = TestBed.createComponent(BannerComponent);
component = fixture.componentInstance;

View File

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

View File

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