fix(material/button): align harness with new terminology

Updates the button harness to align with the terminology for button appearances.

BREAKING CHANGE:
* `ButtonVariant` which is returned by `MatButtonHarness.getVariant` no longer includes the appearance of the button. Use `MatButtonHarness.getAppearance` instead.

Author: crisbeto

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

@@ -8,8 +8,11 @@
 
 import {BaseHarnessFilters} from '@angular/cdk/testing';
 
+/** Possible button variants. */
+export type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab';
+
 /** Possible button appearances. */
-export type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab';
+export type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined';
 
 /** A set of criteria that can be used to filter a list of button harness instances. */
 export interface ButtonHarnessFilters extends BaseHarnessFilters {
@@ -19,6 +22,9 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters {
   /** Only find instances with a variant. */
   variant?: ButtonVariant;
 
+  /** Only find instances with a specific appearance. */
+  appearance?: ButtonAppearance;
+
   /** Only find instances which match the given disabled state. */
   disabled?: boolean;
 }

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

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
-import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
-import {Platform, PlatformModule} from '@angular/cdk/platform';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Platform} from '@angular/cdk/platform';
 import {HarnessLoader, parallel} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatButtonModule} from '../module';
@@ -14,19 +14,12 @@ describe('MatButtonHarness', () => {
   let platform: Platform;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [MatButtonModule, MatIconModule, PlatformModule, ButtonHarnessTest],
-    });
-
     fixture = TestBed.createComponent(ButtonHarnessTest);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);
+    platform = TestBed.inject(Platform);
   });
 
-  beforeEach(inject([Platform], (p: Platform) => {
-    platform = p;
-  }));
-
   it('should load all button harnesses', async () => {
     const buttons = await loader.getAllHarnesses(MatButtonHarness);
     expect(buttons.length).toBe(15);
@@ -53,24 +46,24 @@ describe('MatButtonHarness', () => {
   });
 
   it('should get disabled state', async () => {
-    // Grab each combination of [enabled, disabled] ⨯ [button, anchor]
-    const [disabledFlatButton, enabledFlatAnchor] = await loader.getAllHarnesses(
-      MatButtonHarness.with({text: /flat/i}),
+    // Grab each combination of [enabled, disabled] x [button, anchor]
+    const [disabledFilledButton, enabledFilledAnchor] = await loader.getAllHarnesses(
+      MatButtonHarness.with({text: /filled/i}),
     );
-    const [enabledRaisedButton, disabledRaisedAnchor] = await loader.getAllHarnesses(
-      MatButtonHarness.with({text: /raised/i}),
+    const [enabledElevatedButton, disabledElevatedAnchor] = await loader.getAllHarnesses(
+      MatButtonHarness.with({text: /elevated/i}),
     );
 
-    expect(await enabledFlatAnchor.isDisabled()).toBe(false);
-    expect(await disabledFlatButton.isDisabled()).toBe(true);
-    expect(await enabledRaisedButton.isDisabled()).toBe(false);
-    expect(await disabledRaisedAnchor.isDisabled()).toBe(true);
+    expect(await enabledFilledAnchor.isDisabled()).toBe(false);
+    expect(await disabledFilledButton.isDisabled()).toBe(true);
+    expect(await enabledElevatedButton.isDisabled()).toBe(false);
+    expect(await disabledElevatedAnchor.isDisabled()).toBe(true);
   });
 
   it('should get button text', async () => {
     const [firstButton, secondButton] = await loader.getAllHarnesses(MatButtonHarness);
     expect(await firstButton.getText()).toBe('Basic button');
-    expect(await secondButton.getText()).toBe('Flat button');
+    expect(await secondButton.getText()).toBe('Filled button');
   });
 
   it('should focus and blur a button', async () => {
@@ -99,7 +92,7 @@ describe('MatButtonHarness', () => {
       return;
     }
 
-    const button = await loader.getHarness(MatButtonHarness.with({text: 'Flat button'}));
+    const button = await loader.getHarness(MatButtonHarness.with({text: 'Filled button'}));
     await button.click();
 
     expect(fixture.componentInstance.clicked).toBe(false);
@@ -116,65 +109,93 @@ describe('MatButtonHarness', () => {
     expect(await favIcon.getName()).toBe('favorite');
   });
 
-  it('should load all button harnesses', async () => {
+  it('should be able to ge the type variant of the button', async () => {
     const buttons = await loader.getAllHarnesses(MatButtonHarness);
     const variants = await parallel(() => buttons.map(button => button.getVariant()));
 
     expect(variants).toEqual([
       'basic',
-      'flat',
-      'raised',
-      'stroked',
+      'basic',
+      'basic',
+      'basic',
       'icon',
       'icon',
       'fab',
       'mini-fab',
       'basic',
-      'flat',
-      'raised',
-      'stroked',
+      'basic',
+      'basic',
+      'basic',
       'icon',
       'fab',
       'mini-fab',
     ]);
   });
 
+  it('should be able to get the appearance of the button', async () => {
+    const buttons = await loader.getAllHarnesses(MatButtonHarness);
+    const appearances = await parallel(() => buttons.map(button => button.getAppearance()));
+
+    expect(appearances).toEqual([
+      'text',
+      'filled',
+      'elevated',
+      'outlined',
+      null,
+      null,
+      null,
+      null,
+      'text',
+      'filled',
+      'elevated',
+      'outlined',
+      null,
+      null,
+      null,
+    ]);
+  });
+
   it('should be able to filter buttons based on their variant', async () => {
-    const button = await loader.getHarness(MatButtonHarness.with({variant: 'flat'}));
-    expect(await button.getText()).toBe('Flat button');
+    const button = await loader.getHarness(MatButtonHarness.with({variant: 'fab'}));
+    expect(await button.getText()).toBe('Fab button');
+  });
+
+  it('should be able to filter buttons based on their appearance', async () => {
+    const button = await loader.getHarness(MatButtonHarness.with({appearance: 'filled'}));
+    expect(await button.getText()).toBe('Filled button');
   });
 });
 
 @Component({
   // Include one of each type of button selector to ensure that they're all captured by
   // the harness's selector.
   template: `
-    <button id="basic" type="button" mat-button (click)="clicked = true">
+    <button id="basic" type="button" matButton (click)="clicked = true">
       Basic button
     </button>
-    <button id="flat" type="button" mat-flat-button disabled (click)="clicked = true">
-      Flat button
+    <button id="flat" type="button" matButton="filled" disabled (click)="clicked = true">
+      Filled button
     </button>
-    <button id="raised" type="button" mat-raised-button>Raised button</button>
-    <button id="stroked" type="button" mat-stroked-button>Stroked button</button>
-    <button id="home-icon" type="button" mat-icon-button>
+    <button id="raised" type="button" matButton="elevated">Elevated button</button>
+    <button id="stroked" type="button" matButton="outlined">Outlined button</button>
+    <button id="home-icon" type="button" matIconButton>
       <mat-icon>home</mat-icon>
     </button>
-    <button id="favorite-icon" type="button" mat-icon-button>
+    <button id="favorite-icon" type="button" matIconButton>
       <mat-icon>favorite</mat-icon>
     </button>
-    <button id="fab" type="button" mat-fab>Fab button</button>
-    <button id="mini-fab" type="button" mat-mini-fab>Mini Fab button</button>
-
-    <a id="anchor-basic" mat-button>Basic anchor</a>
-    <a id="anchor-flat" mat-flat-button>Flat anchor</a>
-    <a id="anchor-raised" mat-raised-button disabled>Raised anchor</a>
-    <a id="anchor-stroked" mat-stroked-button>Stroked anchor</a>
-    <a id="anchor-icon" mat-icon-button>Icon anchor</a>
-    <a id="anchor-fab" mat-fab>Fab anchor</a>
-    <a id="anchor-mini-fab" mat-mini-fab>Mini Fab anchor</a>
+    <button id="fab" type="button" matFab>Fab button</button>
+    <button id="mini-fab" type="button" matMiniFab>Mini Fab button</button>
+
+    <a id="anchor-basic" matButton>Basic anchor</a>
+    <a id="anchor-flat" matButton="filled">Filled anchor</a>
+    <a id="anchor-raised" matButton="elevated" disabled>Elevated anchor</a>
+    <a id="anchor-stroked" matButton="outlined">Stroked anchor</a>
+    <a id="anchor-icon" matIconButton>Icon anchor</a>
+    <a id="anchor-fab" matFab>Fab anchor</a>
+    <a id="anchor-mini-fab" matMiniFab>Mini Fab anchor</a>
   `,
-  imports: [MatButtonModule, MatIconModule, PlatformModule],
+  imports: [MatButtonModule, MatIconModule],
 })
 class ButtonHarnessTest {
   disabled = true;

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

@@ -12,20 +12,22 @@ import {
   ContentContainerComponentHarness,
   HarnessPredicate,
 } from '@angular/cdk/testing';
-import {ButtonHarnessFilters, ButtonVariant} from './button-harness-filters';
+import {ButtonAppearance, ButtonHarnessFilters, ButtonVariant} from './button-harness-filters';
 
 /** Harness for interacting with a mat-button in tests. */
 export class MatButtonHarness extends ContentContainerComponentHarness {
   // TODO(jelbourn) use a single class, like `.mat-button-base`
-  static hostSelector = `[mat-button], [mat-raised-button], [mat-flat-button],
-                         [mat-icon-button], [mat-stroked-button], [mat-fab], [mat-mini-fab]`;
+  static hostSelector = `[matButton], [mat-button], [matIconButton], [matFab], [matMiniFab],
+    [mat-raised-button], [mat-flat-button], [mat-icon-button], [mat-stroked-button], [mat-fab],
+    [mat-mini-fab]`;
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.
    * @param options Options for narrowing the search:
    *   - `selector` finds a button whose host element matches the given selector.
    *   - `text` finds a button with specific text content.
    *   - `variant` finds buttons matching a specific variant.
+   *   - `appearance` finds buttons matching a specific appearance.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with<T extends MatButtonHarness>(
@@ -39,6 +41,9 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
       .addOption('variant', options.variant, (harness, variant) =>
         HarnessPredicate.stringMatches(harness.getVariant(), variant),
       )
+      .addOption('appearance', options.appearance, (harness, appearance) =>
+        HarnessPredicate.stringMatches(harness.getAppearance(), appearance),
+      )
       .addOption('disabled', options.disabled, async (harness, disabled) => {
         return (await harness.isDisabled()) === disabled;
       });
@@ -91,20 +96,41 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
   async getVariant(): Promise<ButtonVariant> {
     const host = await this.host();
 
-    if ((await host.getAttribute('mat-raised-button')) != null) {
-      return 'raised';
-    } else if ((await host.getAttribute('mat-flat-button')) != null) {
-      return 'flat';
-    } else if ((await host.getAttribute('mat-icon-button')) != null) {
+    if (await host.hasClass('mat-mdc-icon-button')) {
       return 'icon';
-    } else if ((await host.getAttribute('mat-stroked-button')) != null) {
-      return 'stroked';
-    } else if ((await host.getAttribute('mat-fab')) != null) {
-      return 'fab';
-    } else if ((await host.getAttribute('mat-mini-fab')) != null) {
+    }
+
+    if (await host.hasClass('mat-mdc-mini-fab')) {
       return 'mini-fab';
     }
 
+    if (await host.hasClass('mat-mdc-fab')) {
+      return 'fab';
+    }
+
     return 'basic';
   }
+
+  /** Gets the appearance of the button. */
+  async getAppearance(): Promise<ButtonAppearance | null> {
+    const host = await this.host();
+
+    if (await host.hasClass('mat-mdc-outlined-button')) {
+      return 'outlined';
+    }
+
+    if (await host.hasClass('mat-mdc-raised-button')) {
+      return 'elevated';
+    }
+
+    if (await host.hasClass('mat-mdc-unelevated-button')) {
+      return 'filled';
+    }
+
+    if (await host.hasClass('mat-mdc-button')) {
+      return 'text';
+    }
+
+    return null;
+  }
 }

tools/public_api_guard/material/button-testing.md

@@ -9,15 +9,19 @@ import { ComponentHarnessConstructor } from '@angular/cdk/testing';
 import { ContentContainerComponentHarness } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 
+// @public
+export type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined';
+
 // @public
 export interface ButtonHarnessFilters extends BaseHarnessFilters {
+    appearance?: ButtonAppearance;
     disabled?: boolean;
     text?: string | RegExp;
     variant?: ButtonVariant;
 }
 
 // @public
-export type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab';
+export type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab';
 
 // @public
 export class MatButtonHarness extends ContentContainerComponentHarness {
@@ -26,6 +30,7 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
     click(location: 'center'): Promise<void>;
     click(): Promise<void>;
     focus(): Promise<void>;
+    getAppearance(): Promise<ButtonAppearance | null>;
     getText(): Promise<string>;
     getVariant(): Promise<ButtonVariant>;
     // (undocumented)