test(popover-edit): fix tests leaking overlay containers (#16103)

Fixes instances of `cdk-overlay-container` being leaked after each `popover-edit` test. Aside from leaking memory, this has the potential of throwing off other tests that do things like `querySelector('.cdk-overlay-container .something')`.

Author: crisbeto

src/cdk-experimental/popover-edit/BUILD.bazel

@@ -33,6 +33,7 @@ ng_test_library(
         "//src/cdk/keycodes",
         "//src/cdk/table",
         "//src/cdk/testing",
+        "//src/cdk/overlay",
     ],
 )
 

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -4,9 +4,10 @@ import {CdkTableModule} from '@angular/cdk/table';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {CommonModule} from '@angular/common';
 import {Component, ElementRef, Type, ViewChild} from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, TestBed, tick, inject} from '@angular/core/testing';
 import {FormsModule, NgForm} from '@angular/forms';
 import {BidiModule, Direction} from '@angular/cdk/bidi';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {BehaviorSubject} from 'rxjs';
 
 import {CdkPopoverEditColspan, CdkPopoverEditModule, PopoverEditClickOutBehavior} from './index';
@@ -322,17 +323,28 @@ describe('CDK Popover Edit', () => {
     describe(label, () => {
       let component: BaseTestComponent;
       let fixture: ComponentFixture<BaseTestComponent>;
+      let overlayContainer: OverlayContainer;
 
       beforeEach(() => {
         TestBed.configureTestingModule({
           imports: [CdkTableModule, CdkPopoverEditModule, CommonModule, FormsModule, BidiModule],
           declarations: [componentClass],
         }).compileComponents();
+        inject([OverlayContainer], (oc: OverlayContainer) => {
+          overlayContainer = oc;
+        })();
         fixture = TestBed.createComponent(componentClass);
         component = fixture.componentInstance;
         fixture.detectChanges();
       });
 
+      afterEach(() => {
+        // The overlay container's `ngOnDestroy` won't be called between test runs so we need
+        // to call it ourselves, in order to avoid leaking containers between tests and potentially
+        // throwing `querySelector` calls.
+        overlayContainer.ngOnDestroy();
+      });
+
       describe('triggering edit', () => {
         it('shows and hides on-hover content only after a delay', fakeAsync(() => {
              const [row0, row1] = component.getRows();

src/material-experimental/popover-edit/BUILD.bazel

@@ -33,6 +33,7 @@ ng_test_library(
     "//src/cdk/collections",
     "//src/cdk/keycodes",
     "//src/cdk/testing",
+    "//src/cdk/overlay",
     "//src/cdk-experimental/popover-edit",
     "//src/material/table",
   ],

src/material-experimental/popover-edit/popover-edit.spec.ts

@@ -4,8 +4,9 @@ import {MatTableModule} from '@angular/material/table';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {CommonModule} from '@angular/common';
 import {Component, ElementRef, Type, ViewChild} from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, TestBed, tick, inject} from '@angular/core/testing';
 import {FormsModule, NgForm} from '@angular/forms';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {BehaviorSubject} from 'rxjs';
 
 import {
@@ -263,17 +264,28 @@ describe('Material Popover Edit', () => {
     describe(label, () => {
       let component: BaseTestComponent;
       let fixture: ComponentFixture<BaseTestComponent>;
+      let overlayContainer: OverlayContainer;
 
       beforeEach(() => {
         TestBed.configureTestingModule({
           imports: [MatTableModule, MatPopoverEditModule, CommonModule, FormsModule],
           declarations: [componentClass],
         }).compileComponents();
+        inject([OverlayContainer], (oc: OverlayContainer) => {
+          overlayContainer = oc;
+        })();
         fixture = TestBed.createComponent(componentClass);
         component = fixture.componentInstance;
         fixture.detectChanges();
       });
 
+      afterEach(() => {
+        // The overlay container's `ngOnDestroy` won't be called between test runs so we need
+        // to call it ourselves, in order to avoid leaking containers between tests and potentially
+        // throwing `querySelector` calls.
+        overlayContainer.ngOnDestroy();
+      });
+
       describe('triggering edit', () => {
         it('shows and hides on-hover content only after a delay', fakeAsync(() => {
              const [row0, row1] = component.getRows();