feat(material/dialog): add support for content sections in harness (#23357)

* feat(material/dialog): add support for content sections in harness

* feat(material/dialog): add support for content sections in harness

Author: mmalerba

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

@@ -12,6 +12,13 @@ import {
   MatDialogHarness as NonMdcDialogHarness
 } from '@angular/material/dialog/testing';
 
+/** Selectors for different sections of the mat-dialog that can contain user content. */
+export const enum MatDialogSection {
+  TITLE = '.mat-mdc-dialog-title',
+  CONTENT = '.mat-mdc-dialog-content',
+  ACTIONS = '.mat-mdc-dialog-actions'
+}
+
 /** Harness for interacting with a standard `MatDialog` in tests. */
 export class MatDialogHarness extends NonMdcDialogHarness {
   /** The selector for the host element of a `MatDialog` instance. */
@@ -26,4 +33,8 @@ export class MatDialogHarness extends NonMdcDialogHarness {
   static override with(options: DialogHarnessFilters = {}): HarnessPredicate<MatDialogHarness> {
     return new HarnessPredicate(MatDialogHarness, options);
   }
+
+  protected override _title = this.locatorForOptional(MatDialogSection.TITLE);
+  protected override _content = this.locatorForOptional(MatDialogSection.CONTENT);
+  protected override _actions = this.locatorForOptional(MatDialogSection.ACTIONS);
 }

src/material-experimental/mdc-dialog/testing/public-api.ts

@@ -7,4 +7,4 @@
  */
 
 export {DialogHarnessFilters} from '@angular/material/dialog/testing';
-export {MatDialogHarness} from './dialog-harness';
+export {MatDialogHarness, MatDialogSection} from './dialog-harness';

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

@@ -10,13 +10,26 @@ import {ContentContainerComponentHarness, HarnessPredicate, TestKey} from '@angu
 import {DialogRole} from '@angular/material/dialog';
 import {DialogHarnessFilters} from './dialog-harness-filters';
 
+/** Selectors for different sections of the mat-dialog that can contain user content. */
+export const enum MatDialogSection {
+  TITLE = '.mat-dialog-title',
+  CONTENT = '.mat-dialog-content',
+  ACTIONS = '.mat-dialog-actions'
+}
+
+// @breaking-change 14.0.0 change generic type to MatDialogSection.
 /** Harness for interacting with a standard `MatDialog` in tests. */
-export class MatDialogHarness extends ContentContainerComponentHarness<string> {
+export class MatDialogHarness extends ContentContainerComponentHarness<MatDialogSection | string> {
   // Developers can provide a custom component or template for the
   // dialog. The canonical dialog parent is the "MatDialogContainer".
   /** The selector for the host element of a `MatDialog` instance. */
   static hostSelector = '.mat-dialog-container';
 
+  protected _title = this.locatorForOptional(MatDialogSection.TITLE);
+  protected _content = this.locatorForOptional(MatDialogSection.CONTENT);
+  protected _actions = this.locatorForOptional(MatDialogSection.ACTIONS);
+
+
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatDialogHarness` that meets
    * certain criteria.
@@ -63,4 +76,24 @@ export class MatDialogHarness extends ContentContainerComponentHarness<string> {
   async close(): Promise<void> {
     await (await this.host()).sendKeys(TestKey.ESCAPE);
   }
+
+  /** Gets te dialog's text. */
+  async getText() {
+    return (await this.host()).text();
+  }
+
+  /** Gets the dialog's title text. This only works if the dialog is using mat-dialog-title. */
+  async getTitleText() {
+    return (await this._title())?.text() ?? '';
+  }
+
+  /** Gets the dialog's content text. This only works if the dialog is using mat-dialog-content. */
+  async getContentText() {
+    return (await this._content())?.text() ?? '';
+  }
+
+  /** Gets the dialog's actions text. This only works if the dialog is using mat-dialog-actions. */
+  async getActionsText() {
+    return (await this._actions())?.text() ?? '';
+  }
 }

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

@@ -95,7 +95,7 @@ export function runHarnessTests(
     fixture.componentInstance.open();
     fixture.componentInstance.open({ariaLabelledBy: 'dialog-label'});
     const dialogs = await loader.getAllHarnesses(dialogHarness);
-    expect(await dialogs[0].getAriaLabelledby()).toBe(null);
+    expect(await dialogs[0].getAriaLabelledby()).toMatch(/-dialog-title-\d+/);
     expect(await dialogs[1].getAriaLabelledby()).toBe('dialog-label');
   });
 
@@ -124,12 +124,26 @@ export function runHarnessTests(
     expect(dialogs.length).toBe(1);
   });
 
+  it('should get the text content of each section', async () => {
+    fixture.componentInstance.open();
+    const dialog = await loader.getHarness(dialogHarness);
+    expect(await dialog.getText()).toBe(`I'm the dialog titleI'm the dialog contentCancelOk`);
+    expect(await dialog.getTitleText()).toBe(`I'm the dialog title`);
+    expect(await dialog.getContentText()).toBe(`I'm the dialog content`);
+    expect(await dialog.getActionsText()).toBe(`CancelOk`);
+  });
+
   @Component({
     template: `
     <ng-template>
-      Hello from the dialog!
+      <div matDialogTitle>I'm the dialog title</div>
+      <div matDialogContent>I'm the dialog content</div>
+      <div matDialogActions>
+        <button>Cancel</button>
+        <button>Ok</button>
+      </div>
     </ng-template>
-  `
+    `
   })
   class DialogHarnessTest {
     @ViewChild(TemplateRef) dialogTmpl: TemplateRef<any>;

tools/public_api_guard/material/dialog-testing.md

@@ -4,27 +4,49 @@
 
 ```ts
 
+import { AsyncFactoryFn } from '@angular/cdk/testing';
 import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ContentContainerComponentHarness } from '@angular/cdk/testing';
 import { DialogRole } from '@angular/material/dialog';
 import { HarnessPredicate } from '@angular/cdk/testing';
+import { TestElement } from '@angular/cdk/testing';
 
 // @public
 export interface DialogHarnessFilters extends BaseHarnessFilters {
 }
 
 // @public
-export class MatDialogHarness extends ContentContainerComponentHarness<string> {
+export class MatDialogHarness extends ContentContainerComponentHarness<MatDialogSection | string> {
+    // (undocumented)
+    protected _actions: AsyncFactoryFn<TestElement | null>;
     close(): Promise<void>;
+    // (undocumented)
+    protected _content: AsyncFactoryFn<TestElement | null>;
+    getActionsText(): Promise<string>;
     getAriaDescribedby(): Promise<string | null>;
     getAriaLabel(): Promise<string | null>;
     getAriaLabelledby(): Promise<string | null>;
+    getContentText(): Promise<string>;
     getId(): Promise<string | null>;
     getRole(): Promise<DialogRole | null>;
+    getText(): Promise<string>;
+    getTitleText(): Promise<string>;
     static hostSelector: string;
+    // (undocumented)
+    protected _title: AsyncFactoryFn<TestElement | null>;
     static with(options?: DialogHarnessFilters): HarnessPredicate<MatDialogHarness>;
 }
 
+// @public
+export const enum MatDialogSection {
+    // (undocumented)
+    ACTIONS = ".mat-dialog-actions",
+    // (undocumented)
+    CONTENT = ".mat-dialog-content",
+    // (undocumented)
+    TITLE = ".mat-dialog-title"
+}
+
 // (No @packageDocumentation comment for this package)
 
 ```