docs(material/bottom-sheet): add harness example for bottom sheet

Author: annieyw

src/components-examples/material/bottom-sheet/BUILD.bazel

@@ -11,9 +11,16 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/bottom-sheet",
     deps = [
+        "//src/cdk/overlay",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/bottom-sheet",
+        "//src/material/bottom-sheet/testing",
         "//src/material/button",
         "//src/material/list",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.html

@@ -0,0 +1,3 @@
+<ng-template>
+  Hello from the bottom sheet!
+</ng-template>

src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.spec.ts

@@ -0,0 +1,71 @@
+import {TestBed, ComponentFixture, waitForAsync, inject} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatBottomSheetHarness} from '@angular/material/bottom-sheet/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {BottomSheetHarnessExample} from './bottom-sheet-harness-example';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('BottomSheetHarnessExample', () => {
+  let fixture: ComponentFixture<BottomSheetHarnessExample>;
+  let loader: HarnessLoader;
+  let overlayContainer: OverlayContainer;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatBottomSheetModule, NoopAnimationsModule],
+        declarations: [BottomSheetHarnessExample]
+      }).compileComponents();
+    }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BottomSheetHarnessExample);
+    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();
+    overlayContainer = null!;
+  });
+
+  it('should load harness for a bottom sheet', async () => {
+    fixture.componentInstance.open();
+    const bottomSheets = await loader.getAllHarnesses(MatBottomSheetHarness);
+    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(MatBottomSheetHarness);
+    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(MatBottomSheetHarness);
+
+    expect(bottomSheets.length).toBe(1);
+    await bottomSheets[0].dismiss();
+
+    bottomSheets = await loader.getAllHarnesses(MatBottomSheetHarness);
+    expect(bottomSheets.length).toBe(0);
+  });
+});

src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.ts

@@ -0,0 +1,19 @@
+import {Component, TemplateRef, ViewChild} from '@angular/core';
+import {MatBottomSheet, MatBottomSheetConfig} from '@angular/material/bottom-sheet';
+
+/**
+ * @title Testing with MatBottomSheetHarness
+ */
+@Component({
+  selector: 'bottom-sheet-harness-example',
+  templateUrl: 'bottom-sheet-harness-example.html',
+})
+export class BottomSheetHarnessExample {
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
+
+  constructor(readonly bottomSheet: MatBottomSheet) {}
+
+  open(config?: MatBottomSheetConfig) {
+    return this.bottomSheet.open(this.template, config);
+  }
+}

src/components-examples/material/bottom-sheet/index.ts

@@ -6,13 +6,16 @@ import {
   BottomSheetOverviewExample,
   BottomSheetOverviewExampleSheet
 } from './bottom-sheet-overview/bottom-sheet-overview-example';
+import {BottomSheetHarnessExample} from './bottom-sheet-harness/bottom-sheet-harness-example';
 
 export {
+  BottomSheetHarnessExample,
   BottomSheetOverviewExample,
   BottomSheetOverviewExampleSheet,
 };
 
 const EXAMPLES = [
+  BottomSheetHarnessExample,
   BottomSheetOverviewExample,
   BottomSheetOverviewExampleSheet,
 ];