docs(material/dialog): add harness example for dialog (#21474)

Author: annieyw

src/components-examples/material/dialog/BUILD.bazel

@@ -11,11 +11,17 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/dialog",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/dialog",
+        "//src/material/dialog/testing",
         "//src/material/input",
         "//src/material/menu",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/dialog/dialog-harness/dialog-harness-example.html

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

src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts

@@ -0,0 +1,74 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatDialogHarness} from '@angular/material/dialog/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatDialogModule} from '@angular/material/dialog';
+import {DialogHarnessExample} from './dialog-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('DialogHarnessExample', () => {
+  let fixture: ComponentFixture<DialogHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatDialogModule, NoopAnimationsModule],
+        declarations: [DialogHarnessExample]
+      }).compileComponents();
+    }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load harness for dialog', async () => {
+    fixture.componentInstance.open();
+    const dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogs.length).toBe(1);
+  });
+
+  it('should load harness for dialog with specific id', async () => {
+    fixture.componentInstance.open({id: 'my-dialog'});
+    fixture.componentInstance.open({id: 'other'});
+    let dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogs.length).toBe(2);
+
+    dialogs = await loader.getAllHarnesses(MatDialogHarness.with({selector: '#my-dialog'}));
+    expect(dialogs.length).toBe(1);
+  });
+
+  it('should be able to get role of dialog', async () => {
+    fixture.componentInstance.open({role: 'alertdialog'});
+    fixture.componentInstance.open({role: 'dialog'});
+    const dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    expect(await dialogs[0].getRole()).toBe('alertdialog');
+    expect(await dialogs[1].getRole()).toBe('dialog');
+  });
+
+
+  it('should be able to close dialog', async () => {
+    fixture.componentInstance.open({disableClose: true});
+    fixture.componentInstance.open();
+    let dialogs = await loader.getAllHarnesses(MatDialogHarness);
+
+    expect(dialogs.length).toBe(2);
+    await dialogs[0].close();
+
+    dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogs.length).toBe(1);
+
+    // should be a noop since "disableClose" is set to "true".
+    await dialogs[0].close();
+    dialogs = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogs.length).toBe(1);
+  });
+});

src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts

@@ -0,0 +1,19 @@
+import {Component, TemplateRef, ViewChild} from '@angular/core';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+
+/**
+ * @title Testing with MatDialogHarness
+ */
+@Component({
+  selector: 'dialog-harness-example',
+  templateUrl: 'dialog-harness-example.html',
+})
+export class DialogHarnessExample {
+  @ViewChild(TemplateRef) dialogTemplate: TemplateRef<any>;
+
+  constructor(readonly dialog: MatDialog) {}
+
+  open(config?: MatDialogConfig) {
+    return this.dialog.open(this.dialogTemplate, config);
+  }
+}

src/components-examples/material/dialog/index.ts

@@ -22,6 +22,7 @@ import {
   DialogFromMenuExample,
   DialogFromMenuExampleDialog
 } from './dialog-from-menu/dialog-from-menu-example';
+import {DialogHarnessExample} from './dialog-harness/dialog-harness-example';
 
 export {
   DialogContentExample,
@@ -32,6 +33,7 @@ export {
   DialogElementsExampleDialog,
   DialogFromMenuExample,
   DialogFromMenuExampleDialog,
+  DialogHarnessExample,
   DialogOverviewExample,
   DialogOverviewExampleDialog,
 };
@@ -45,6 +47,7 @@ const EXAMPLES = [
   DialogElementsExampleDialog,
   DialogFromMenuExample,
   DialogFromMenuExampleDialog,
+  DialogHarnessExample,
   DialogOverviewExample,
   DialogOverviewExampleDialog,
 ];