docs(material/checkbox): add checkbox harness example (#20839)

(cherry picked from commit 65e9ad1)

Author: annieyw

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

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

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

@@ -0,0 +1,11 @@
+<mat-checkbox
+    required
+    [checked]="true"
+    name="first-name"
+    value="first-value"
+    aria-label="First checkbox">
+  First
+</mat-checkbox>
+<mat-checkbox indeterminate="true" [disabled]="disabled" aria-label="Second checkbox">
+  Second
+</mat-checkbox>

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

@@ -0,0 +1,64 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {CheckboxHarnessExample} from './checkbox-harness-example';
+
+describe('CheckboxHarnessExample', () => {
+  let fixture: ComponentFixture<CheckboxHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatCheckboxModule, ReactiveFormsModule],
+        declarations: [CheckboxHarnessExample]
+      }).compileComponents();
+    }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CheckboxHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load checkbox with name', async () => {
+    const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'}));
+    expect(checkboxes.length).toBe(1);
+    expect(await checkboxes[0].getLabelText()).toBe('First');
+  });
+
+  it('should get checked state', async () => {
+    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
+    expect(await checkedCheckbox.isChecked()).toBe(true);
+    expect(await uncheckedCheckbox.isChecked()).toBe(false);
+  });
+
+  it('should get name', async () => {
+    const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
+    expect(await checkbox.getName()).toBe('first-name');
+  });
+
+  it('should get label text', async () => {
+    const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
+    expect(await firstCheckbox.getLabelText()).toBe('First');
+    expect(await secondCheckbox.getLabelText()).toBe('Second');
+  });
+
+  it('should toggle checkbox', async () => {
+    fixture.componentInstance.disabled = false;
+    const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
+    await checkedCheckbox.toggle();
+    await uncheckedCheckbox.toggle();
+    expect(await checkedCheckbox.isChecked()).toBe(false);
+    expect(await uncheckedCheckbox.isChecked()).toBe(true);
+  });
+});

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

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatCheckboxHarness
+ */
+@Component({
+  selector: 'checkbox-harness-example',
+  templateUrl: 'checkbox-harness-example.html',
+})
+export class CheckboxHarnessExample {
+  disabled = true;
+}

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

@@ -6,15 +6,18 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
 import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
+import {CheckboxHarnessExample} from './checkbox-harness/checkbox-harness-example';
 
 export {
   CheckboxConfigurableExample,
   CheckboxOverviewExample,
+  CheckboxHarnessExample,
 };
 
 const EXAMPLES = [
   CheckboxConfigurableExample,
   CheckboxOverviewExample,
+  CheckboxHarnessExample,
 ];
 
 @NgModule({