docs(material/button-toggle): add button toggle harness example (#20837)

Author: annieyw

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

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

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

@@ -0,0 +1,4 @@
+<mat-button-toggle-group [disabled]="disabled" [appearance]="appearance">
+  <mat-button-toggle value="1">One</mat-button-toggle>
+  <mat-button-toggle value="2">Two</mat-button-toggle>
+</mat-button-toggle-group>

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

@@ -0,0 +1,56 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatButtonToggleGroupHarness} from '@angular/material/button-toggle/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {ButtonToggleHarnessExample} from './button-toggle-harness-example';
+
+describe('ButtonToggleHarnessExample', () => {
+  let fixture: ComponentFixture<ButtonToggleHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatButtonToggleModule],
+        declarations: [ButtonToggleHarnessExample]
+      }).compileComponents();
+    }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonToggleHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all button toggle group harnesses', async () => {
+    const groups = await loader.getAllHarnesses(MatButtonToggleGroupHarness);
+    expect(groups.length).toBe(1);
+  });
+
+  it('should load the the toggles inside the group', async () => {
+    const group = await loader.getHarness(MatButtonToggleGroupHarness);
+    const toggles = await group.getToggles();
+    expect(toggles.length).toBe(2);
+  });
+
+  it('should get whether the group is disabled', async () => {
+    const group = await loader.getHarness(MatButtonToggleGroupHarness);
+    expect(await group.isDisabled()).toBe(false);
+    fixture.componentInstance.disabled = true;
+    expect(await group.isDisabled()).toBe(true);
+  });
+
+  it('should get the group appearance', async () => {
+    const group = await loader.getHarness(MatButtonToggleGroupHarness);
+    expect(await group.getAppearance()).toBe('standard');
+    fixture.componentInstance.appearance = 'legacy';
+    expect(await group.getAppearance()).toBe('legacy');
+  });
+});

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {MatButtonToggleAppearance} from '@angular/material/button-toggle';
+
+/**
+ * @title Testing with MatButtonToggleHarness
+ */
+@Component({
+  selector: 'button-toggle-harness-example',
+  templateUrl: 'button-toggle-harness-example.html',
+})
+export class ButtonToggleHarnessExample {
+  disabled = false;
+  appearance: MatButtonToggleAppearance = 'standard';
+}

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

@@ -8,17 +8,20 @@ import {
   ButtonToggleExclusiveExample
 } from './button-toggle-exclusive/button-toggle-exclusive-example';
 import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
+import {ButtonToggleHarnessExample} from './button-toggle-harness/button-toggle-harness-example';
 
 export {
   ButtonToggleAppearanceExample,
   ButtonToggleExclusiveExample,
   ButtonToggleOverviewExample,
+  ButtonToggleHarnessExample,
 };
 
 const EXAMPLES = [
   ButtonToggleAppearanceExample,
   ButtonToggleExclusiveExample,
   ButtonToggleOverviewExample,
+  ButtonToggleHarnessExample,
 ];
 
 @NgModule({