test(material-experimental): harness tests leaking overlay containers (#17007)

Fixes the `cdk-overlay-container` nodes not being cleaned up between test harness tests.

Author: crisbeto

src/material-experimental/mdc-autocomplete/BUILD.bazel

@@ -67,6 +67,7 @@ ng_test_library(
         ":mdc-autocomplete",
         "//src/cdk-experimental/testing",
         "//src/cdk-experimental/testing/testbed",
+        "//src/cdk/overlay",
         "//src/cdk/platform",
         "//src/cdk/testing",
         "//src/material/autocomplete",

src/material-experimental/mdc-autocomplete/harness/autocomplete-harness.spec.ts

@@ -1,15 +1,17 @@
 import {HarnessLoader} from '@angular/cdk-experimental/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
 import {Component} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {MatAutocompleteModule as MatMdcAutocompleteModule} from '../index';
 import {MatAutocompleteHarness} from './autocomplete-harness';
 import {MatAutocompleteHarness as MatMdcAutocompleteHarness} from './mdc-autocomplete-harness';
 
 let fixture: ComponentFixture<AutocompleteHarnessTest>;
 let loader: HarnessLoader;
 let harness: typeof MatAutocompleteHarness;
+let overlayContainer: OverlayContainer;
 
 describe('MatAutocompleteHarness', () => {
   describe('non-MDC-based', () => {
@@ -23,6 +25,9 @@ describe('MatAutocompleteHarness', () => {
       fixture.detectChanges();
       loader = TestbedHarnessEnvironment.loader(fixture);
       harness = MatAutocompleteHarness;
+      inject([OverlayContainer], (oc: OverlayContainer) => {
+        overlayContainer = oc;
+      })();
     });
 
     runTests();
@@ -50,6 +55,11 @@ describe('MatAutocompleteHarness', () => {
 
 /** Shared tests to run on both the original and MDC-based autocomplete. */
 function runTests() {
+  afterEach(() => {
+    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
+    overlayContainer.ngOnDestroy();
+  });
+
   it('should load all autocomplete harnesses', async () => {
     const inputs = await loader.getAllHarnesses(harness);
     expect(inputs.length).toBe(5);

src/material-experimental/mdc-dialog/harness/BUILD.bazel

@@ -21,6 +21,7 @@ ng_test_library(
         ":harness",
         "//src/cdk-experimental/testing",
         "//src/cdk-experimental/testing/testbed",
+        "//src/cdk/overlay",
         "//src/material/dialog",
         "@npm//@angular/platform-browser",
     ],

src/material-experimental/mdc-dialog/harness/dialog-harness.spec.ts

@@ -1,14 +1,16 @@
 import {HarnessLoader} from '@angular/cdk-experimental/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
 import {Component, TemplateRef, ViewChild} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {MatDialog, MatDialogConfig, MatDialogModule} from '@angular/material/dialog';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {MatDialogHarness} from './dialog-harness';
 
 let fixture: ComponentFixture<DialogHarnessTest>;
 let loader: HarnessLoader;
 let dialogHarness: typeof MatDialogHarness;
+let overlayContainer: OverlayContainer;
 
 describe('MatDialogHarness', () => {
   describe('non-MDC-based', () => {
@@ -24,6 +26,9 @@ describe('MatDialogHarness', () => {
       fixture.detectChanges();
       loader = new TestbedHarnessEnvironment(document.body, fixture);
       dialogHarness = MatDialogHarness;
+      inject([OverlayContainer], (oc: OverlayContainer) => {
+        overlayContainer = oc;
+      })();
     });
 
     runTests();
@@ -44,6 +49,9 @@ function runTests() {
     // dialogs are left in the DOM.
     fixture.componentInstance.dialog.closeAll();
     fixture.detectChanges();
+
+    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
+    overlayContainer.ngOnDestroy();
   });
 
   it('should load harness for dialog', async () => {

src/material-experimental/mdc-menu/harness/menu-harness.spec.ts

@@ -1,15 +1,17 @@
 import {HarnessLoader} from '@angular/cdk-experimental/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
 import {Component} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {MatMenuModule} from '@angular/material/menu';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {MatMenuModule as MatMdcMenuModule} from '../index';
 import {MatMenuHarness as MatMdcMenuHarness} from './mdc-menu-harness';
 import {MatMenuHarness} from './menu-harness';
 
 let fixture: ComponentFixture<MenuHarnessTest>;
 let loader: HarnessLoader;
 let menuHarness: typeof MatMenuHarness;
+let overlayContainer: OverlayContainer;
 
 describe('MatMenuHarness', () => {
   describe('non-MDC-based', () => {
@@ -23,6 +25,9 @@ describe('MatMenuHarness', () => {
       fixture.detectChanges();
       loader = TestbedHarnessEnvironment.loader(fixture);
       menuHarness = MatMenuHarness;
+      inject([OverlayContainer], (oc: OverlayContainer) => {
+        overlayContainer = oc;
+      })();
     });
 
     runTests();
@@ -49,6 +54,11 @@ describe('MatMenuHarness', () => {
 
 /** Shared tests to run on both the original and MDC-based menues. */
 function runTests() {
+  afterEach(() => {
+    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
+    overlayContainer.ngOnDestroy();
+  });
+
   it('should load all menu harnesses', async () => {
     const menues = await loader.getAllHarnesses(menuHarness);
     expect(menues.length).toBe(2);

src/material-experimental/mdc-select/BUILD.bazel

@@ -66,6 +66,7 @@ ng_test_library(
         ":mdc-select",
         "//src/cdk-experimental/testing",
         "//src/cdk-experimental/testing/testbed",
+        "//src/cdk/overlay",
         "//src/cdk/platform",
         "//src/cdk/testing",
         "//src/material/form-field",

src/material-experimental/mdc-select/harness/select-harness.spec.ts

@@ -1,9 +1,10 @@
 import {HarnessLoader} from '@angular/cdk-experimental/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
 import {Component} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule, FormControl, Validators} from '@angular/forms';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {MatSelectModule as MatMdcSelectModule} from '../index';
@@ -13,6 +14,7 @@ import {MatSelectHarness as MatMdcSelectHarness} from './mdc-select-harness';
 let fixture: ComponentFixture<SelectHarnessTest>;
 let loader: HarnessLoader;
 let harness: typeof MatSelectHarness;
+let overlayContainer: OverlayContainer;
 
 describe('MatSelectHarness', () => {
   describe('non-MDC-based', () => {
@@ -31,6 +33,9 @@ describe('MatSelectHarness', () => {
       fixture.detectChanges();
       loader = TestbedHarnessEnvironment.loader(fixture);
       harness = MatSelectHarness;
+      inject([OverlayContainer], (oc: OverlayContainer) => {
+        overlayContainer = oc;
+      })();
     });
 
     runTests();
@@ -63,6 +68,11 @@ describe('MatSelectHarness', () => {
 
 /** Shared tests to run on both the original and MDC-based select. */
 function runTests() {
+  afterEach(() => {
+    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
+    overlayContainer.ngOnDestroy();
+  });
+
   it('should load all select harnesses', async () => {
     const selects = await loader.getAllHarnesses(harness);
     expect(selects.length).toBe(4);