build: run example harness unit tests and fix errors (#21759)

* Makes it so we're able to run the test harness example tests to make sure they pass.
* Fixes several example unit tests that didn't pass.
* Reduces the boilerplate in the example tests.

Fixes #21758.

(cherry picked from commit 6947a39)

Author: crisbeto

src/components-examples/material/autocomplete/BUILD.bazel

@@ -1,10 +1,13 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
     name = "autocomplete",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     assets = glob([
         "**/*.html",
         "**/*.css",
@@ -34,3 +37,22 @@ filegroup(
         "**/*.ts",
     ]),
 )
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":autocomplete",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/autocomplete",
+        "//src/material/autocomplete/testing",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    exclude_init_script = True,
+    deps = [":unit_tests_lib"],
+)

src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.spec.ts

@@ -1,43 +1,30 @@
-import {TestBed, ComponentFixture, waitForAsync, inject} from '@angular/core/testing';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
-  from '@angular/platform-browser-dynamic/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {AutocompleteHarnessExample} from './autocomplete-harness-example';
-import {OverlayContainer} from '@angular/cdk/overlay';
 
 describe('AutocompleteHarnessExample', () => {
   let fixture: ComponentFixture<AutocompleteHarnessExample>;
   let loader: HarnessLoader;
-  let overlayContainer: OverlayContainer;
 
   beforeAll(() => {
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
   });
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [MatAutocompleteModule],
-        declarations: [AutocompleteHarnessExample]
-      }).compileComponents();
-    }));
-
-  beforeEach( () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatAutocompleteModule],
+      declarations: [AutocompleteHarnessExample]
+    }).compileComponents();
     fixture = TestBed.createComponent(AutocompleteHarnessExample);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);
-    inject([OverlayContainer], (oc: OverlayContainer) => {
-      overlayContainer = oc;
-    })();
-  });
-
-  afterEach(() => {
-    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
-    overlayContainer.ngOnDestroy();
-    overlayContainer = null!;
   });
 
   it('should load all autocomplete harnesses', async () => {

src/components-examples/material/badge/BUILD.bazel

@@ -1,10 +1,13 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
     name = "badge",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     assets = glob([
         "**/*.html",
         "**/*.css",
@@ -31,3 +34,22 @@ filegroup(
         "**/*.ts",
     ]),
 )
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":badge",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/badge",
+        "//src/material/badge/testing",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    exclude_init_script = True,
+    deps = [":unit_tests_lib"],
+)

src/components-examples/material/badge/badge-harness/badge-harness-example.spec.ts

@@ -1,9 +1,11 @@
-import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatBadgeHarness} from '@angular/material/badge/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
-  from '@angular/platform-browser-dynamic/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
 import {MatBadgeModule} from '@angular/material/badge';
 import {BadgeHarnessExample} from './badge-harness-example';
 
@@ -15,17 +17,15 @@ describe('BadgeHarnessExample', () => {
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
   });
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [MatBadgeModule],
-        declarations: [BadgeHarnessExample]
-      }).compileComponents();
-      fixture = TestBed.createComponent(BadgeHarnessExample);
-      fixture.detectChanges();
-      loader = TestbedHarnessEnvironment.loader(fixture);
-    })
-  );
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatBadgeModule],
+      declarations: [BadgeHarnessExample]
+    }).compileComponents();
+    fixture = TestBed.createComponent(BadgeHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
 
   it('should load all badge harnesses', async () => {
     const badges = await loader.getAllHarnesses(MatBadgeHarness);

src/components-examples/material/bottom-sheet/BUILD.bazel

@@ -1,10 +1,13 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
     name = "bottom-sheet",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     assets = glob([
         "**/*.html",
         "**/*.css",
@@ -32,3 +35,23 @@ filegroup(
         "**/*.ts",
     ]),
 )
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":bottom-sheet",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/bottom-sheet",
+        "//src/material/bottom-sheet/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    exclude_init_script = True,
+    deps = [":unit_tests_lib"],
+)

src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.spec.ts

@@ -1,12 +1,13 @@
-import {TestBed, ComponentFixture, waitForAsync, inject} from '@angular/core/testing';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatBottomSheetHarness} from '@angular/material/bottom-sheet/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
-  from '@angular/platform-browser-dynamic/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
 import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
 import {BottomSheetHarnessExample} from './bottom-sheet-harness-example';
-import {OverlayContainer} from '@angular/cdk/overlay';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 describe('BottomSheetHarnessExample', () => {
@@ -17,19 +18,14 @@ describe('BottomSheetHarnessExample', () => {
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
   });
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [MatBottomSheetModule, NoopAnimationsModule],
-        declarations: [BottomSheetHarnessExample]
-      }).compileComponents();
-    }));
-
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatBottomSheetModule, NoopAnimationsModule],
+      declarations: [BottomSheetHarnessExample]
+    }).compileComponents();
     fixture = TestBed.createComponent(BottomSheetHarnessExample);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
-    inject([OverlayContainer], () => {})();
   });
 
   it('should load harness for a bottom sheet', async () => {

src/components-examples/material/button-toggle/BUILD.bazel

@@ -1,10 +1,13 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
     name = "button-toggle",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     assets = glob([
         "**/*.html",
         "**/*.css",
@@ -30,3 +33,22 @@ filegroup(
         "**/*.ts",
     ]),
 )
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":button-toggle",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/button-toggle",
+        "//src/material/button-toggle/testing",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    exclude_init_script = True,
+    deps = [":unit_tests_lib"],
+)

src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.spec.ts

@@ -1,9 +1,11 @@
-import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatButtonToggleGroupHarness} from '@angular/material/button-toggle/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
-  from '@angular/platform-browser-dynamic/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {ButtonToggleHarnessExample} from './button-toggle-harness-example';
 
@@ -15,15 +17,11 @@ describe('ButtonToggleHarnessExample', () => {
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
   });
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [MatButtonToggleModule],
-        declarations: [ButtonToggleHarnessExample]
-      }).compileComponents();
-    }));
-
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatButtonToggleModule],
+      declarations: [ButtonToggleHarnessExample]
+    }).compileComponents();
     fixture = TestBed.createComponent(ButtonToggleHarnessExample);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);

src/components-examples/material/button/BUILD.bazel

@@ -1,10 +1,13 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
     name = "button",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     assets = glob([
         "**/*.html",
         "**/*.css",
@@ -31,3 +34,22 @@ filegroup(
         "**/*.ts",
     ]),
 )
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":button",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/button",
+        "//src/material/button/testing",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    exclude_init_script = True,
+    deps = [":unit_tests_lib"],
+)