diff --git a/goldens/material/button/testing/index.api.md b/goldens/material/button/testing/index.api.md index 582029883cd2..c6ea75d18022 100644 --- a/goldens/material/button/testing/index.api.md +++ b/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; getAppearance(): Promise; getText(): Promise; + getType(): Promise; getVariant(): Promise; static hostSelector: string; isDisabled(): Promise; diff --git a/src/material/button/testing/button-harness-filters.ts b/src/material/button/testing/button-harness-filters.ts index 7f053c133ad0..c88e9a122b12 100644 --- a/src/material/button/testing/button-harness-filters.ts +++ b/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; } diff --git a/src/material/button/testing/button-harness.spec.ts b/src/material/button/testing/button-harness.spec.ts index 0dfa249854d8..cc0485eea71e 100644 --- a/src/material/button/testing/button-harness.spec.ts +++ b/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', () => { + Basic anchor Filled anchor diff --git a/src/material/button/testing/button-harness.ts b/src/material/button/testing/button-harness.ts index 65bc7fc0040f..34caf427620d 100644 --- a/src/material/button/testing/button-harness.ts +++ b/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 { + const host = await this.host(); + const buttonType = await host.getAttribute('type'); + if (buttonType === 'button' || buttonType === 'submit' || buttonType === 'reset') { + return buttonType; + } + return null; + } }