docs(material/slide-toggle): add harness example for slide-toggle (#21465)

Author: annieyw

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

@@ -11,12 +11,18 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/slide-toggle",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/card",
         "//src/material/checkbox",
         "//src/material/radio",
         "//src/material/slide-toggle",
+        "//src/material/slide-toggle/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

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

@@ -10,16 +10,19 @@ import {
 } from './slide-toggle-configurable/slide-toggle-configurable-example';
 import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
 import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
+import {SlideToggleHarnessExample} from './slide-toggle-harness/slide-toggle-harness-example';
 
 export {
   SlideToggleConfigurableExample,
   SlideToggleFormsExample,
+  SlideToggleHarnessExample,
   SlideToggleOverviewExample,
 };
 
 const EXAMPLES = [
   SlideToggleConfigurableExample,
   SlideToggleFormsExample,
+  SlideToggleHarnessExample,
   SlideToggleOverviewExample,
 ];
 

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

@@ -0,0 +1,8 @@
+<mat-slide-toggle
+    [formControl]="ctrl"
+    name="first-name">
+  First
+</mat-slide-toggle>
+<mat-slide-toggle [disabled]="disabled">
+  Second
+</mat-slide-toggle>

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

@@ -0,0 +1,63 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatSlideToggleHarness} from '@angular/material/slide-toggle/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {SlideToggleHarnessExample} from './slide-toggle-harness-example';
+import {ReactiveFormsModule} from '@angular/forms';
+
+describe('SlideToggleHarnessExample', () => {
+  let fixture: ComponentFixture<SlideToggleHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatSlideToggleModule, ReactiveFormsModule],
+        declarations: [SlideToggleHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(SlideToggleHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all slide-toggle harnesses', async () => {
+    const slideToggles = await loader.getAllHarnesses(MatSlideToggleHarness);
+    expect(slideToggles.length).toBe(2);
+  });
+
+  it('should load slide-toggle with name', async () => {
+    const slideToggles = await loader.getAllHarnesses(
+      MatSlideToggleHarness.with({name: 'first-name'}));
+    expect(slideToggles.length).toBe(1);
+    expect(await slideToggles[0].getLabelText()).toBe('First');
+  });
+
+  it('should get disabled state', async () => {
+    const [enabledToggle, disabledToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
+    expect(await enabledToggle.isDisabled()).toBe(false);
+    expect(await disabledToggle.isDisabled()).toBe(true);
+  });
+
+  it('should get label text', async () => {
+    const [firstToggle, secondToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
+    expect(await firstToggle.getLabelText()).toBe('First');
+    expect(await secondToggle.getLabelText()).toBe('Second');
+  });
+
+  it('should toggle slide-toggle', async () => {
+    fixture.componentInstance.disabled = false;
+    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(MatSlideToggleHarness);
+    await checkedToggle.toggle();
+    await uncheckedToggle.toggle();
+    expect(await checkedToggle.isChecked()).toBe(false);
+    expect(await uncheckedToggle.isChecked()).toBe(true);
+  });
+});

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Testing with MatSlideToggleHarness
+ */
+@Component({
+  selector: 'slide-toggle-harness-example',
+  templateUrl: 'slide-toggle-harness-example.html',
+})
+export class SlideToggleHarnessExample {
+  disabled = true;
+  ctrl = new FormControl(true);
+}