feat(material/testing): Add 'type' attribute filter and getter to Mat… (#31657)

* feat(material/testing): Add 'type' attribute filter and getter to MatButtonHarness

* fix(material/testing): Rename MatButtonHarness "type" filter to
"buttonType" to avoid conflict with the reserved TS keyword

* fix(material/testing): Update goldens/material/button/testing/index.api.md

Author: wildcardalice

goldens/material/button/testing/index.api.md

@@ -15,11 +15,15 @@ export type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'to
 // @public
 export interface ButtonHarnessFilters extends BaseHarnessFilters {
     appearance?: ButtonAppearance;
+    buttonType?: ButtonType;
     disabled?: boolean;
     text?: string | RegExp;
     variant?: ButtonVariant;
 }
 
+// @public
+export type ButtonType = 'button' | 'submit' | 'reset';
+
 // @public
 export type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab';
 
@@ -32,6 +36,7 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
     focus(): Promise<void>;
     getAppearance(): Promise<ButtonAppearance | null>;
     getText(): Promise<string>;
+    getType(): Promise<ButtonType | null>;
     getVariant(): Promise<ButtonVariant>;
     static hostSelector: string;
     isDisabled(): Promise<boolean>;

src/material/button/testing/button-harness-filters.ts

@@ -14,6 +14,9 @@ export type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab';
 /** Possible button appearances. */
 export type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';
 
+/** Possible button types. */
+export type ButtonType = 'button' | 'submit' | 'reset';
+
 /** A set of criteria that can be used to filter a list of button harness instances. */
 export interface ButtonHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose text matches the given value. */
@@ -27,4 +30,7 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters {
 
   /** Only find instances which match the given disabled state. */
   disabled?: boolean;
+
+  /** Only find instances with the specified type. */
+  buttonType?: ButtonType;
 }

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

@@ -21,7 +21,7 @@ describe('MatButtonHarness', () => {
 
   it('should load all button harnesses', async () => {
     const buttons = await loader.getAllHarnesses(MatButtonHarness);
-    expect(buttons.length).toBe(17);
+    expect(buttons.length).toBe(18);
   });
 
   it('should load button with exact text', async () => {
@@ -40,7 +40,7 @@ describe('MatButtonHarness', () => {
   it('should filter by whether a button is disabled', async () => {
     const enabledButtons = await loader.getAllHarnesses(MatButtonHarness.with({disabled: false}));
     const disabledButtons = await loader.getAllHarnesses(MatButtonHarness.with({disabled: true}));
-    expect(enabledButtons.length).toBe(15);
+    expect(enabledButtons.length).toBe(16);
     expect(disabledButtons.length).toBe(2);
   });
 
@@ -59,6 +59,13 @@ describe('MatButtonHarness', () => {
     expect(await disabledElevatedAnchor.isDisabled()).toBe(true);
   });
 
+  it('should load button with type attribute', async () => {
+    const buttons = await loader.getAllHarnesses(MatButtonHarness.with({buttonType: 'submit'}));
+    expect(buttons.length).toBe(1);
+    expect(await buttons[0].getText()).toBe('Submit button');
+    expect(await buttons[0].getType()).toBe('submit');
+  });
+
   it('should get button text', async () => {
     const [firstButton, secondButton] = await loader.getAllHarnesses(MatButtonHarness);
     expect(await firstButton.getText()).toBe('Basic button');
@@ -127,6 +134,7 @@ describe('MatButtonHarness', () => {
       'basic',
       'basic',
       'basic',
+      'basic',
       'icon',
       'fab',
       'mini-fab',
@@ -148,6 +156,7 @@ describe('MatButtonHarness', () => {
       null,
       null,
       'text',
+      'text',
       'filled',
       'elevated',
       'outlined',
@@ -199,6 +208,7 @@ describe('MatButtonHarness', () => {
     </button>
     <button id="fab" type="button" matFab>Fab button</button>
     <button id="mini-fab" type="button" matMiniFab>Mini Fab button</button>
+    <button id="submit" type="submit" matButton>Submit button</button>
 
     <a id="anchor-basic" matButton>Basic anchor</a>
     <a id="anchor-flat" matButton="filled">Filled anchor</a>

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

@@ -12,7 +12,12 @@ import {
   ContentContainerComponentHarness,
   HarnessPredicate,
 } from '@angular/cdk/testing';
-import {ButtonAppearance, ButtonHarnessFilters, ButtonVariant} from './button-harness-filters';
+import {
+  ButtonAppearance,
+  ButtonHarnessFilters,
+  ButtonType,
+  ButtonVariant,
+} from './button-harness-filters';
 
 /** Harness for interacting with a mat-button in tests. */
 export class MatButtonHarness extends ContentContainerComponentHarness {
@@ -50,7 +55,10 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
       )
       .addOption('disabled', options.disabled, async (harness, disabled) => {
         return (await harness.isDisabled()) === disabled;
-      });
+      })
+      .addOption('buttonType', options.buttonType, (harness, buttonType) =>
+        HarnessPredicate.stringMatches(harness.getType(), buttonType),
+      );
   }
 
   /**
@@ -150,4 +158,16 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
 
     return null;
   }
+
+  /**
+   * Gets the type of the button. Supported values are 'button', 'submit', and 'reset'.
+   */
+  async getType(): Promise<ButtonType | null> {
+    const host = await this.host();
+    const buttonType = await host.getAttribute('type');
+    if (buttonType === 'button' || buttonType === 'submit' || buttonType === 'reset') {
+      return buttonType;
+    }
+    return null;
+  }
 }