From caf15da651c4459be5e948514f2ae503361d8b4d Mon Sep 17 00:00:00 2001
From: Sam Severance <swseverance@gmail.com>
Date: Tue, 25 May 2021 19:15:17 -0400
Subject: [PATCH] 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
---
 .../banner/banner-external.component.spec.ts  | 19 +++++++++++++++++--
 .../src/app/banner/banner.component.spec.ts   |  9 +++------
 .../guide/testing-components-scenarios.md     |  6 +++---
 3 files changed, 23 insertions(+), 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
index d7d67e861d..ff7a775fc3 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
@@ -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
index 0b79132224..a14fe656a9 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
@@ -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
index 12dfd645a2..97d0a666fe 100644
--- 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.