feat(cdk-experimental): expose root loader instance in testbed harness environment

Adds a new method that can be used by harness consumers to load a harness
through `HarnessLoader` from the document root. This is helpful for harnesses
which need to match elements outside of testbed fixtures (e.g. snack-bars, overlays etc.).

Needed for #16697 and #16709.

Author: devversion

src/cdk/testing/testbed/testbed-harness-environment.ts

@@ -14,7 +14,7 @@ import {UnitTestElement} from './unit-test-element';
 
 /** A `HarnessEnvironment` implementation for Angular's Testbed. */
 export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
-  constructor(rawRootElement: Element, private _fixture: ComponentFixture<unknown>) {
+  protected constructor(rawRootElement: Element, private _fixture: ComponentFixture<unknown>) {
     super(rawRootElement);
   }
 
@@ -23,6 +23,14 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
     return new TestbedHarnessEnvironment(fixture.nativeElement, fixture);
   }
 
+  /**
+   * Creates a `HarnessLoader` at the document root. This can be used if harnesses are
+   * located outside of a fixture (e.g. overlays appended to the document body).
+   */
+  static documentRootLoader(fixture: ComponentFixture<unknown>): HarnessLoader {
+    return new TestbedHarnessEnvironment(document.body, fixture);
+  }
+
   /**
    * Creates an instance of the given harness type, using the fixture's root element as the
    * harness's host element. This method should be used when creating a harness for the root element

src/cdk/testing/tests/harnesses/fake-overlay-harness.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ComponentHarness} from '../../component-harness';
+
+export class FakeOverlayHarness extends ComponentHarness {
+  static readonly hostSelector = '.fake-overlay';
+
+  /** Gets the description of the fake overlay. */
+  async getDescription(): Promise<string> {
+    return (await this.host()).text();
+  }
+}

src/cdk/testing/tests/test-main-component.ts

@@ -12,6 +12,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  OnDestroy,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -29,7 +30,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class TestMainComponent {
+export class TestMainComponent implements OnDestroy {
   username: string;
   counter: number;
   asyncCounter: number;
@@ -44,6 +45,8 @@ export class TestMainComponent {
 
   @ViewChild('clickTestElement', {static: false}) clickTestElement: ElementRef<HTMLElement>;
 
+  private _fakeOverlayElement: HTMLElement;
+
   onMouseOver() {
     this._isHovering = true;
   }
@@ -63,6 +66,15 @@ export class TestMainComponent {
       this.asyncCounter = 5;
       this._cdr.markForCheck();
     }, 1000);
+
+    this._fakeOverlayElement = document.createElement('div');
+    this._fakeOverlayElement.classList.add('fake-overlay');
+    this._fakeOverlayElement.innerText = 'This is a fake overlay.';
+    document.body.appendChild(this._fakeOverlayElement);
+  }
+
+  ngOnDestroy() {
+    document.body.removeChild(this._fakeOverlayElement);
   }
 
   click() {

src/cdk/testing/tests/testbed.spec.ts

@@ -1,6 +1,7 @@
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FakeOverlayHarness} from './harnesses/fake-overlay-harness';
 import {MainComponentHarness} from './harnesses/main-component-harness';
 import {SubComponentHarness} from './harnesses/sub-component-harness';
 import {TestComponentsModule} from './test-components-module';
@@ -77,6 +78,16 @@ describe('TestbedHarnessEnvironment', () => {
       const harnesses = await loader.getAllHarnesses(SubComponentHarness);
       expect(harnesses.length).toBe(4);
     });
+
+    it('should be able to load harness through document root loader', async () => {
+      const documentRootHarnesses =
+          await TestbedHarnessEnvironment.documentRootLoader(fixture).getAllHarnesses(
+              FakeOverlayHarness);
+      const fixtureHarnesses = await loader.getAllHarnesses(FakeOverlayHarness);
+      expect(fixtureHarnesses.length).toBe(0);
+      expect(documentRootHarnesses.length).toBe(1);
+      expect(await documentRootHarnesses[0].getDescription()).toBe('This is a fake overlay.');
+    });
   });
 
   describe('ComponentHarness', () => {

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

@@ -24,7 +24,7 @@ describe('MatDialogHarness', () => {
 
       fixture = TestBed.createComponent(DialogHarnessTest);
       fixture.detectChanges();
-      loader = new TestbedHarnessEnvironment(document.body, fixture);
+      loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
       dialogHarness = MatDialogHarness;
       inject([OverlayContainer], (oc: OverlayContainer) => {
         overlayContainer = oc;