docs(material/button): add harness example (#20722)

Author: annieyw

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

@@ -11,9 +11,15 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/button",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
+        "//src/material/button/testing",
         "//src/material/divider",
         "//src/material/icon",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

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

@@ -0,0 +1,3 @@
+<button id="basic" type="button" mat-button (click)="clicked = true">
+  Basic button
+</button>

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

@@ -0,0 +1,48 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatButtonHarness} from '@angular/material/button/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {ButtonHarnessExample} from './button-harness-example';
+
+describe('ButtonHarnessExample', () => {
+  let fixture: ComponentFixture<ButtonHarnessExample>;
+  let loader: HarnessLoader;
+  let buttonHarness = MatButtonHarness;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatButtonModule],
+        declarations: [ButtonHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(ButtonHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all button harnesses', async () => {
+      const buttons = await loader.getAllHarnesses(MatButtonHarness);
+      expect(buttons.length).toBe(1);
+    }
+  );
+
+  it('should load button with exact text', async () => {
+    const buttons = await loader.getAllHarnesses(buttonHarness.with({text: 'Basic button'}));
+    expect(buttons.length).toBe(1);
+    expect(await buttons[0].getText()).toBe('Basic button');
+  });
+
+  it('should click a button', async () => {
+    const button = await loader.getHarness(buttonHarness.with({text: 'Basic button'}));
+    await button.click();
+    expect(fixture.componentInstance.clicked).toBe(true);
+  });
+});

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

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatButtonHarness
+ */
+@Component({
+  selector: 'button-harness-example',
+  templateUrl: 'button-harness-example.html',
+})
+export class ButtonHarnessExample  {
+  clicked = false;
+}

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

@@ -4,15 +4,18 @@ import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
 import {ButtonTypesExample} from './button-types/button-types-example';
+import {ButtonHarnessExample} from './button-harness/button-harness-example';
 
 export {
   ButtonOverviewExample,
   ButtonTypesExample,
+  ButtonHarnessExample,
 };
 
 const EXAMPLES = [
   ButtonOverviewExample,
   ButtonTypesExample,
+  ButtonHarnessExample,
 ];
 
 @NgModule({

tools/example-module/generate-example-module.ts

@@ -131,6 +131,9 @@ function analyzeExamples(sourceFiles: string[], baseDir: string): AnalyzedExampl
       if (primaryComponent.styleUrls) {
         example.files.push(...primaryComponent.styleUrls);
       }
+      if (primaryComponent.componentName.includes('Harness')) {
+        example.files.push(primaryComponent.selector + '.spec.ts');
+      }
 
       if (secondaryComponents.length) {
         for (const meta of secondaryComponents) {