feat(bottom-sheet): add test harness (#17618)

Author: crisbeto

src/material/bottom-sheet/testing/BUILD.bazel

@@ -0,0 +1,52 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+ts_library(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material/bottom-sheet/testing",
+    deps = [
+        "//src/cdk/testing",
+        "//src/material/bottom-sheet",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_test_library(
+    name = "harness_tests_lib",
+    srcs = ["shared.spec.ts"],
+    deps = [
+        ":testing",
+        "//src/cdk/overlay",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/bottom-sheet",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["shared.spec.ts"],
+    ),
+    deps = [
+        ":harness_tests_lib",
+        ":testing",
+        "//src/material/bottom-sheet",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material/bottom-sheet/testing/bottom-sheet-harness-filters.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 {BaseHarnessFilters} from '@angular/cdk/testing';
+
+export interface BottomSheetHarnessFilters extends BaseHarnessFilters {}

src/material/bottom-sheet/testing/bottom-sheet-harness.spec.ts

@@ -0,0 +1,7 @@
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {runHarnessTests} from '@angular/material/bottom-sheet/testing/shared.spec';
+import {MatBottomSheetHarness} from './bottom-sheet-harness';
+
+describe('Non-MDC-based MatBottomSheetHarness', () => {
+  runHarnessTests(MatBottomSheetModule, MatBottomSheetHarness);
+});

src/material/bottom-sheet/testing/bottom-sheet-harness.ts

@@ -0,0 +1,43 @@
+/**
+ * @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, HarnessPredicate, TestKey} from '@angular/cdk/testing';
+import {BottomSheetHarnessFilters} from './bottom-sheet-harness-filters';
+
+/**
+ * Harness for interacting with a standard MatBottomSheet in tests.
+ * @dynamic
+ */
+export class MatBottomSheetHarness extends ComponentHarness {
+  // Developers can provide a custom component or template for the
+  // bottom sheet. The canonical parent is the ".mat-bottom-sheet-container".
+  static hostSelector = '.mat-bottom-sheet-container';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a bottom sheet with
+   * specific attributes.
+   * @param options Options for narrowing the search.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: BottomSheetHarnessFilters = {}): HarnessPredicate<MatBottomSheetHarness> {
+    return new HarnessPredicate(MatBottomSheetHarness, options);
+  }
+
+  /** Gets the value of the bottom sheet's "aria-label" attribute. */
+  async getAriaLabel(): Promise<string|null> {
+    return (await this.host()).getAttribute('aria-label');
+  }
+
+  /**
+   * Dismisses the bottom sheet by pressing escape. Note that this method cannot
+   * be used if "disableClose" has been set to true via the config.
+   */
+  async dismiss(): Promise<void> {
+    await (await this.host()).sendKeys(TestKey.ESCAPE);
+  }
+}

src/material/bottom-sheet/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export * from './public-api';

src/material/bottom-sheet/testing/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+export * from './bottom-sheet-harness';
+export * from './bottom-sheet-harness-filters';

src/material/bottom-sheet/testing/shared.spec.ts

@@ -0,0 +1,85 @@
+import {HarnessLoader} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {Component, TemplateRef, ViewChild} from '@angular/core';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
+import {
+  MatBottomSheet,
+  MatBottomSheetConfig,
+  MatBottomSheetModule,
+} from '@angular/material/bottom-sheet';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {MatBottomSheetHarness} from './bottom-sheet-harness';
+
+/** Shared tests to run on both the original and MDC-based bottom sheets. */
+export function runHarnessTests(
+    bottomSheetModule: typeof MatBottomSheetModule, harness: typeof MatBottomSheetHarness) {
+  let fixture: ComponentFixture<BottomSheetHarnessTest>;
+  let loader: HarnessLoader;
+  let overlayContainer: OverlayContainer;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [bottomSheetModule, NoopAnimationsModule],
+      declarations: [BottomSheetHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BottomSheetHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+    inject([OverlayContainer], (oc: OverlayContainer) => {
+      overlayContainer = oc;
+    })();
+  });
+
+  afterEach(() => {
+    // Dismiss the bottom sheet once the tests are done. This is necessary because the
+    // "MatBottomSheet" service is not destroyed automatically by TestBed, and it could
+    // mean that bottom sheets are left in the DOM.
+    fixture.componentInstance.bottomSheet.dismiss();
+    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 a bottom sheet', async () => {
+    fixture.componentInstance.open();
+    const bottomSheets = await loader.getAllHarnesses(harness);
+    expect(bottomSheets.length).toBe(1);
+  });
+
+  it('should be able to get aria-label of the bottom sheet', async () => {
+    fixture.componentInstance.open({ariaLabel: 'Confirm purchase.'});
+    const bottomSheet = await loader.getHarness(harness);
+    expect(await bottomSheet.getAriaLabel()).toBe('Confirm purchase.');
+  });
+
+  it('should be able to dismiss the bottom sheet', async () => {
+    fixture.componentInstance.open();
+    let bottomSheets = await loader.getAllHarnesses(harness);
+
+    expect(bottomSheets.length).toBe(1);
+    await bottomSheets[0].dismiss();
+
+    bottomSheets = await loader.getAllHarnesses(harness);
+    expect(bottomSheets.length).toBe(0);
+  });
+}
+
+@Component({
+  template: `
+    <ng-template>
+      Hello from the bottom sheet!
+    </ng-template>
+  `
+})
+class BottomSheetHarnessTest {
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
+
+  constructor(readonly bottomSheet: MatBottomSheet) {}
+
+  open(config?: MatBottomSheetConfig) {
+    return this.bottomSheet.open(this.template, config);
+  }
+}

src/material/config.bzl

@@ -4,6 +4,7 @@ entryPoints = [
     "badge",
     "badge/testing",
     "bottom-sheet",
+    "bottom-sheet/testing",
     "button",
     "button/testing",
     "button-toggle",

test/karma-system-config.js

@@ -104,6 +104,8 @@ System.config({
     '@angular/material/badge/testing': 'dist/packages/material/badge/testing/index.js',
     '@angular/material/badge/testing/shared.spec': 'dist/packages/material/badge/testing/shared.spec.js',
     '@angular/material/bottom-sheet': 'dist/packages/material/bottom-sheet/index.js',
+    '@angular/material/bottom-sheet/testing': 'dist/packages/material/bottom-sheet/testing/index.js',
+    '@angular/material/bottom-sheet/testing/shared.spec': 'dist/packages/material/bottom-sheet/testing/shared.spec.js',
     '@angular/material/button': 'dist/packages/material/button/index.js',
     '@angular/material/button/testing': 'dist/packages/material/button/testing/index.js',
     '@angular/material/button/testing/shared.spec': 'dist/packages/material/button/testing/shared.spec.js',