feat(material/sidenav): add test harnesses for container and content elements (#21115)

* Adds test harnesses for `MatDrawerContainer`, `MatDrawerContent`,
`MatSidenavContainer` and `MatSidenavContent`. This came up during the original
PR review (#16695), but we never followed up on it.
* Fixes that `MatSidenavHarness.with` was returning a `MatDrawerHarness`. I had to
move all the common code into a new class called `MatDrawerHarnessBase` so TS
doesn't complain that the types don't match up.

Author: crisbeto

src/material/sidenav/testing/drawer-container-harness.ts

@@ -0,0 +1,42 @@
+/**
+ * @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 {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {DrawerContainerHarnessFilters, DrawerHarnessFilters} from './drawer-harness-filters';
+import {MatDrawerContentHarness} from './drawer-content-harness';
+import {MatDrawerHarness} from './drawer-harness';
+
+/** Harness for interacting with a standard mat-drawer-container in tests. */
+export class MatDrawerContainerHarness extends ContentContainerComponentHarness<string> {
+  /** The selector for the host element of a `MatDrawerContainer` instance. */
+  static hostSelector = '.mat-drawer-container';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerContainerHarness` that
+   * meets certain criteria.
+   * @param options Options for filtering which container instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: DrawerContainerHarnessFilters = {}):
+    HarnessPredicate<MatDrawerContainerHarness> {
+    return new HarnessPredicate(MatDrawerContainerHarness, options);
+  }
+
+  /**
+   * Gets drawers that match particular criteria within the container.
+   * @param filter Optionally filters which chips are included.
+   */
+  async getDrawers(filter: DrawerHarnessFilters = {}): Promise<MatDrawerHarness[]> {
+    return this.locatorForAll(MatDrawerHarness.with(filter))();
+  }
+
+  /** Gets the element that has the container's content. */
+  async getContent(): Promise<MatDrawerContentHarness> {
+    return this.locatorFor(MatDrawerContentHarness)();
+  }
+}

src/material/sidenav/testing/drawer-content-harness.ts

@@ -0,0 +1,27 @@
+/**
+ * @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 {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {DrawerContentHarnessFilters} from './drawer-harness-filters';
+
+/** Harness for interacting with a standard mat-drawer-content in tests. */
+export class MatDrawerContentHarness extends ContentContainerComponentHarness<string> {
+  /** The selector for the host element of a `MatDrawerContent` instance. */
+  static hostSelector = '.mat-drawer-content';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerContentHarness` that
+   * meets certain criteria.
+   * @param options Options for filtering which drawer content instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: DrawerContentHarnessFilters = {}):
+    HarnessPredicate<MatDrawerContentHarness> {
+    return new HarnessPredicate(MatDrawerContentHarness, options);
+  }
+}

src/material/sidenav/testing/drawer-harness-filters.ts

@@ -13,3 +13,9 @@ export interface DrawerHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose side is the given value. */
   position?: 'start' | 'end';
 }
+
+/** A set of criteria that can be used to filter a list of `MatDrawerContainerHarness` instances. */
+export interface DrawerContainerHarnessFilters extends BaseHarnessFilters {}
+
+/** A set of criteria that can be used to filter a list of `MatDrawerContentHarness` instances. */
+export interface DrawerContentHarnessFilters extends BaseHarnessFilters {}

src/material/sidenav/testing/drawer-harness.ts

@@ -9,23 +9,11 @@
 import {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
 import {DrawerHarnessFilters} from './drawer-harness-filters';
 
-/** Harness for interacting with a standard mat-drawer in tests. */
-export class MatDrawerHarness extends ContentContainerComponentHarness<string> {
-  /** The selector for the host element of a `MatDrawer` instance. */
-  static hostSelector = '.mat-drawer';
-
-  /**
-   * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerHarness` that meets
-   * certain criteria.
-   * @param options Options for filtering which drawer instances are considered a match.
-   * @return a `HarnessPredicate` configured with the given options.
-   */
-  static with(options: DrawerHarnessFilters = {}): HarnessPredicate<MatDrawerHarness> {
-    return new HarnessPredicate(MatDrawerHarness, options)
-        .addOption('position', options.position,
-            async (harness, position) => (await harness.getPosition()) === position);
-  }
-
+/**
+ * Base class for the drawer harness functionality.
+ * @docs-private
+ */
+export class MatDrawerHarnessBase extends ContentContainerComponentHarness<string> {
   /** Whether the drawer is open. */
   async isOpen(): Promise<boolean> {
     return (await this.host()).hasClass('mat-drawer-opened');
@@ -52,3 +40,21 @@ export class MatDrawerHarness extends ContentContainerComponentHarness<string> {
     return 'over';
   }
 }
+
+/** Harness for interacting with a standard mat-drawer in tests. */
+export class MatDrawerHarness extends MatDrawerHarnessBase {
+  /** The selector for the host element of a `MatDrawer` instance. */
+  static hostSelector = '.mat-drawer';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which drawer instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: DrawerHarnessFilters = {}): HarnessPredicate<MatDrawerHarness> {
+    return new HarnessPredicate(MatDrawerHarness, options)
+        .addOption('position', options.position,
+            async (harness, position) => (await harness.getPosition()) === position);
+  }
+}

src/material/sidenav/testing/public-api.ts

@@ -6,6 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './drawer-harness';
+export {MatDrawerHarness} from './drawer-harness';
+export * from './drawer-container-harness';
+export * from './drawer-content-harness';
 export * from './drawer-harness-filters';
+export * from './sidenav-container-harness';
+export * from './sidenav-content-harness';
 export * from './sidenav-harness';

src/material/sidenav/testing/shared.spec.ts

@@ -1,17 +1,25 @@
-import {HarnessLoader} from '@angular/cdk/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatSidenavHarness} from '@angular/material/sidenav/testing/sidenav-harness';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatDrawerContainerHarness} from './drawer-container-harness';
+import {MatDrawerContentHarness} from './drawer-content-harness';
 import {MatDrawerHarness} from './drawer-harness';
+import {MatSidenavContainerHarness} from './sidenav-container-harness';
+import {MatSidenavContentHarness} from './sidenav-content-harness';
+import {MatSidenavHarness} from './sidenav-harness';
 
 /** Shared tests to run on both the original and MDC-based drawer & sidenav. */
 export function runHarnessTests(sidenavModule: typeof MatSidenavModule,
                                 drawerHarness: typeof MatDrawerHarness,
-                                sidenavHarness: typeof MatSidenavHarness) {
-  describe('MatDrawerHarness', () => {
+                                drawerContainerHarness: typeof MatDrawerContainerHarness,
+                                drawerContentHarness: typeof MatDrawerContentHarness,
+                                sidenavHarness: typeof MatSidenavHarness,
+                                sidenavContainerHarness: typeof MatSidenavContainerHarness,
+                                sidenavContentHarness: typeof MatSidenavContentHarness) {
+  describe('drawer', () => {
     let fixture: ComponentFixture<DrawerHarnessTest>;
     let loader: HarnessLoader;
 
@@ -67,9 +75,41 @@ export function runHarnessTests(sidenavModule: typeof MatSidenavModule,
       expect(await drawers[1].getMode()).toBe('side');
       expect(await drawers[2].getMode()).toBe('push');
     });
+
+    it('should load all drawer container harnesses', async () => {
+      const containers = await loader.getAllHarnesses(drawerContainerHarness);
+      expect(containers.length).toBe(2);
+    });
+
+    it('should get the drawers within a container', async () => {
+      const containers = await loader.getAllHarnesses(drawerContainerHarness);
+      const [firstContainerDrawers, secondContainerDrawers] = await parallel(() => {
+        return containers.map(container => container.getDrawers());
+      });
+
+      expect(await parallel(() => {
+        return firstContainerDrawers.map(async container => (await container.host()).text());
+      })).toEqual(['One', 'Two']);
+
+      expect(await parallel(() => {
+        return secondContainerDrawers.map(async container => (await container.host()).text());
+      })).toEqual(['Three']);
+    });
+
+    it('should get the content of a container', async () => {
+      const container = await loader.getHarness(drawerContainerHarness);
+      const content = await container.getContent();
+      expect(await (await content.host()).text()).toBe('Content');
+    });
+
+    it('should load all drawer content harnesses', async () => {
+      const contentElements = await loader.getAllHarnesses(drawerContentHarness);
+      expect(contentElements.length).toBe(2);
+    });
+
   });
 
-  describe('MatSidenavHarness', () => {
+  describe('sidenav', () => {
     let fixture: ComponentFixture<SidenavHarnessTest>;
     let loader: HarnessLoader;
 
@@ -91,6 +131,38 @@ export function runHarnessTests(sidenavModule: typeof MatSidenavModule,
       expect(await sidenavs[1].isFixedInViewport()).toBe(false);
       expect(await sidenavs[2].isFixedInViewport()).toBe(true);
     });
+
+    it('should load all sidenav container harnesses', async () => {
+      const containers = await loader.getAllHarnesses(sidenavContainerHarness);
+      expect(containers.length).toBe(2);
+    });
+
+    it('should get the sidenavs within a container', async () => {
+      const containers = await loader.getAllHarnesses(sidenavContainerHarness);
+      const [firstContainerSidenavs, secondContainerSidenavs] = await parallel(() => {
+        return containers.map(container => container.getSidenavs());
+      });
+
+      expect(await parallel(() => {
+        return firstContainerSidenavs.map(async container => (await container.host()).text());
+      })).toEqual(['One', 'Two']);
+
+      expect(await parallel(() => {
+        return secondContainerSidenavs.map(async container => (await container.host()).text());
+      })).toEqual(['Three']);
+    });
+
+    it('should get the content of a container', async () => {
+      const container = await loader.getHarness(sidenavContainerHarness);
+      const content = await container.getContent();
+      expect(await (await content.host()).text()).toBe('Content');
+    });
+
+    it('should load all sidenav content harnesses', async () => {
+      const contentElements = await loader.getAllHarnesses(sidenavContentHarness);
+      expect(contentElements.length).toBe(2);
+    });
+
   });
 }
 

src/material/sidenav/testing/sidenav-container-harness.ts

@@ -0,0 +1,42 @@
+/**
+ * @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 {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {DrawerContainerHarnessFilters, DrawerHarnessFilters} from './drawer-harness-filters';
+import {MatSidenavContentHarness} from './sidenav-content-harness';
+import {MatSidenavHarness} from './sidenav-harness';
+
+/** Harness for interacting with a standard mat-sidenav-container in tests. */
+export class MatSidenavContainerHarness extends ContentContainerComponentHarness<string> {
+  /** The selector for the host element of a `MatSidenavContainer` instance. */
+  static hostSelector = '.mat-sidenav-container';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatSidenavContainerHarness` that
+   * meets certain criteria.
+   * @param options Options for filtering which container instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: DrawerContainerHarnessFilters = {}):
+    HarnessPredicate<MatSidenavContainerHarness> {
+    return new HarnessPredicate(MatSidenavContainerHarness, options);
+  }
+
+  /**
+   * Gets sidenavs that match particular criteria within the container.
+   * @param filter Optionally filters which chips are included.
+   */
+  async getSidenavs(filter: DrawerHarnessFilters = {}): Promise<MatSidenavHarness[]> {
+    return this.locatorForAll(MatSidenavHarness.with(filter))();
+  }
+
+  /** Gets the element that has the container's content. */
+  async getContent(): Promise<MatSidenavContentHarness> {
+    return this.locatorFor(MatSidenavContentHarness)();
+  }
+}

src/material/sidenav/testing/sidenav-content-harness.ts

@@ -0,0 +1,27 @@
+/**
+ * @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 {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {DrawerContentHarnessFilters} from './drawer-harness-filters';
+
+/** Harness for interacting with a standard mat-sidenav-content in tests. */
+export class MatSidenavContentHarness extends ContentContainerComponentHarness<string> {
+  /** The selector for the host element of a `MatSidenavContent` instance. */
+  static hostSelector = '.mat-sidenav-content';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatSidenavContentHarness` that
+   * meets certain criteria.
+   * @param options Options for filtering which sidenav content instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: DrawerContentHarnessFilters = {}):
+    HarnessPredicate<MatSidenavContentHarness> {
+    return new HarnessPredicate(MatSidenavContentHarness, options);
+  }
+}

src/material/sidenav/testing/sidenav-harness.spec.ts

@@ -1,8 +1,20 @@
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {runHarnessTests} from '@angular/material/sidenav/testing/shared.spec';
+import {MatDrawerContainerHarness} from './drawer-container-harness';
+import {MatDrawerContentHarness} from './drawer-content-harness';
 import {MatDrawerHarness} from './drawer-harness';
+import {MatSidenavContainerHarness} from './sidenav-container-harness';
+import {MatSidenavContentHarness} from './sidenav-content-harness';
 import {MatSidenavHarness} from './sidenav-harness';
 
 describe('Non-MDC-based', () => {
-  runHarnessTests(MatSidenavModule, MatDrawerHarness, MatSidenavHarness);
+  runHarnessTests(
+    MatSidenavModule,
+    MatDrawerHarness,
+    MatDrawerContainerHarness,
+    MatDrawerContentHarness,
+    MatSidenavHarness,
+    MatSidenavContainerHarness,
+    MatSidenavContentHarness
+  );
 });

src/material/sidenav/testing/sidenav-harness.ts

@@ -7,11 +7,11 @@
  */
 
 import {HarnessPredicate} from '@angular/cdk/testing';
-import {MatDrawerHarness} from './drawer-harness';
+import {MatDrawerHarnessBase} from './drawer-harness';
 import {DrawerHarnessFilters} from './drawer-harness-filters';
 
 /** Harness for interacting with a standard mat-sidenav in tests. */
-export class MatSidenavHarness extends MatDrawerHarness {
+export class MatSidenavHarness extends MatDrawerHarnessBase {
   /** The selector for the host element of a `MatSidenav` instance. */
   static hostSelector = '.mat-sidenav';
 
@@ -21,8 +21,8 @@ export class MatSidenavHarness extends MatDrawerHarness {
    * @param options Options for filtering which sidenav instances are considered a match.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: DrawerHarnessFilters = {}): HarnessPredicate<MatDrawerHarness> {
-    return new HarnessPredicate(MatDrawerHarness, options)
+  static with(options: DrawerHarnessFilters = {}): HarnessPredicate<MatSidenavHarness> {
+    return new HarnessPredicate(MatSidenavHarness, options)
         .addOption('position', options.position,
             async (harness, position) => (await harness.getPosition()) === position);
   }