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
angular · May 28, 2021 · 0d71c58 · 0d71c58
1 parent 999720e
commit 0d71c58
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 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
@@ -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;

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

diff --git a/aio/content/guide/testing-components-scenarios.md b/aio/content/guide/testing-components-scenarios.md
@@ -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.