feat(material-experimental/checkbox): Add test harnesses for both versions of mat-checkbox

src/cdk-experimental/testing/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "ng_module", "ng_web_test_suite")
+load("//tools:defaults.bzl", "ng_module", "ng_web_test_suite", "ts_library")
 load("@npm_angular_bazel//:index.bzl", "protractor_web_test_suite")
 
 ng_module(

src/cdk-experimental/testing/protractor/protractor-element.ts

@@ -50,4 +50,9 @@ export class ProtractorElement implements TestElement {
   async getAttribute(name: string): Promise<string|null> {
     return this.element.getAttribute(name);
   }
+
+  async hasClass(name: string): Promise<boolean> {
+    const classes = (await this.getAttribute('class')) || '';
+    return new Set(classes.split(/\s+/).filter(c => c)).has(name);
+  }
 }

src/cdk-experimental/testing/public-api.ts

@@ -8,6 +8,4 @@
 
 export * from './component-harness';
 export * from './harness-environment';
-export * from './protractor';
 export * from './test-element';
-export * from './testbed';

src/cdk-experimental/testing/test-element.ts

@@ -43,4 +43,7 @@ export interface TestElement {
    * falls back to reading the property.
    */
   getAttribute(name: string): Promise<string | null>;
+
+  /** Checks whether the element has the given class. */
+  hasClass(name: string): Promise<boolean>;
 }

src/cdk-experimental/testing/testbed/unit-test-element.ts

@@ -86,7 +86,7 @@ export class UnitTestElement implements TestElement {
 
   async text(): Promise<string> {
     await this._stabilize();
-    return this.element.textContent || '';
+    return (this.element.textContent || '').trim();
   }
 
   async getAttribute(name: string): Promise<string|null> {
@@ -100,4 +100,9 @@ export class UnitTestElement implements TestElement {
     }
     return value;
   }
+
+  async hasClass(name: string): Promise<boolean> {
+    await this._stabilize();
+    return this.element.classList.contains(name);
+  }
 }

src/material-experimental/mdc-checkbox/BUILD.bazel

@@ -2,13 +2,13 @@ package(default_visibility = ["//visibility:public"])
 
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
 load("@npm_angular_bazel//:index.bzl", "protractor_web_test_suite")
-load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite", "ts_library")
 
 ng_module(
     name = "mdc-checkbox",
     srcs = glob(
         ["**/*.ts"],
-        exclude = ["**/*.spec.ts"],
+        exclude = ["**/*.spec.ts", "harness/**"],
     ),
     assets = [":checkbox_scss"] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-checkbox",
@@ -25,6 +25,15 @@ ng_module(
     ],
 )
 
+ts_library(
+    name = "harness",
+    srcs = glob(["harness/**/*.ts"], exclude = ["**/*.spec.ts"]),
+    deps = [
+        "//src/cdk/coercion",
+        "//src/cdk-experimental/testing",
+    ]
+)
+
 sass_library(
     name = "mdc_checkbox_scss_lib",
     srcs = glob(["**/_*.scss"]),
@@ -55,8 +64,11 @@ ng_test_library(
         exclude = ["**/*.e2e.spec.ts"],
     ),
     deps = [
+        ":harness",
         ":mdc-checkbox",
         "//src/cdk/testing",
+        "//src/cdk-experimental/testing",
+        "//src/material/checkbox",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
     ],

src/material-experimental/mdc-checkbox/harness/checkbox-harness.spec.ts

@@ -0,0 +1,191 @@
+import {HarnessLoader} from '@angular/cdk-experimental/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatCheckboxModule as MatMdcCheckboxModule} from '../index';
+import {MatCheckboxHarness} from './checkbox-harness';
+import {MatCheckboxHarness as MatMdcCheckboxHarness} from './mdc-checkbox-harness';
+
+let fixture: ComponentFixture<unknown>;
+let loader: HarnessLoader;
+let checkboxHarness: typeof MatCheckboxHarness;
+
+describe('MatCheckboxHarness', () => {
+  describe('non-MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [MatCheckboxModule, ReactiveFormsModule],
+        declarations: [CheckboxHarnessTest],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(CheckboxHarnessTest);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      checkboxHarness = MatCheckboxHarness;
+    });
+
+    runTests();
+  });
+
+  describe('MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [MatMdcCheckboxModule, ReactiveFormsModule],
+        declarations: [CheckboxHarnessTest],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(CheckboxHarnessTest);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      // Public APIs are the same as MatCheckboxHarness, but cast is necessary because of different
+      // private fields.
+      checkboxHarness = MatMdcCheckboxHarness as any;
+    });
+
+    runTests();
+  });
+});
+
+/** Shared tests to run on both the original and MDC-based checkboxes. */
+function runTests() {
+  it('should load all checkbox harnesses', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    expect(checkboxes.length).toBe(2);
+  });
+
+  it('should load checkbox with exact label', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({label: 'First'}));
+    expect(checkboxes.length).toBe(1);
+    expect(await checkboxes[0].getLabelText()).toBe('First');
+  });
+
+  it('should load checkbox with regex label match', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({label: /^s/i}));
+    expect(checkboxes.length).toBe(1);
+    expect(await checkboxes[0].getLabelText()).toBe('Second');
+  });
+
+  it('should get checked state', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    expect(await checkboxes[0].isChecked()).toBe(true);
+    expect(await checkboxes[1].isChecked()).toBe(false);
+  });
+
+  it('should get indeterminate state', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    expect(await checkboxes[0].isIndeterminate()).toBe(false);
+    expect(await checkboxes[1].isIndeterminate()).toBe(true);
+  });
+
+  it('should get disabled state', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    expect(await checkboxes[0].isDisabled()).toBe(false);
+    expect(await checkboxes[1].isDisabled()).toBe(true);
+  });
+
+  it('should get required state', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    expect(await checkboxes[0].isRequired()).toBe(true);
+    expect(await checkboxes[1].isRequired()).toBe(false);
+  });
+
+  it('should get valid state', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    expect(await checkboxes[0].isValid()).toBe(true);
+    expect(await checkboxes[1].isValid()).toBe(true);
+    await checkboxes[0].uncheck();
+    expect(await checkboxes[0].isValid()).toBe(false);
+  });
+
+  it('should get name', async () => {
+    const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'}));
+    expect(await checkbox.getName()).toBe('first-name');
+  });
+
+  it('should get value', async () => {
+    const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'}));
+    expect(await checkbox.getValue()).toBe('first-value');
+  });
+
+  it('should get aria-label', async () => {
+    const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'}));
+    expect(await checkbox.getAriaLabel()).toBe('First checkbox');
+  });
+
+  it('should get aria-labelledby', async () => {
+    const checkbox = await loader.getHarness(checkboxHarness.with({label: 'Second'}));
+    expect(await checkbox.getAriaLabelledby()).toBe('second-label');
+  });
+
+  it('should get label text', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    expect(await checkboxes[0].getLabelText()).toBe('First');
+    expect(await checkboxes[1].getLabelText()).toBe('Second');
+  });
+
+  it('should focus checkbox', async () => {
+    const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'}));
+    expect(getActiveElementTagName()).not.toBe('input');
+    await checkbox.foucs();
+    expect(getActiveElementTagName()).toBe('input');
+  });
+
+  it('should blur checkbox', async () => {
+    const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'}));
+    await checkbox.foucs();
+    expect(getActiveElementTagName()).toBe('input');
+    await checkbox.blur();
+    expect(getActiveElementTagName()).not.toBe('input');
+  });
+
+  it('should toggle checkbox', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    await checkboxes[0].toggle();
+    await checkboxes[1].toggle();
+    expect(await checkboxes[0].isChecked()).toBe(false);
+    expect(await checkboxes[1].isChecked()).toBe(true);
+  });
+
+  it('should check checkbox', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    await checkboxes[0].check();
+    await checkboxes[1].check();
+    expect(await checkboxes[0].isChecked()).toBe(true);
+    expect(await checkboxes[1].isChecked()).toBe(true);
+  });
+
+  it('should uncheck checkbox', async () => {
+    const checkboxes = await loader.getAllHarnesses(checkboxHarness);
+    await checkboxes[0].uncheck();
+    await checkboxes[1].uncheck();
+    expect(await checkboxes[0].isChecked()).toBe(false);
+    expect(await checkboxes[1].isChecked()).toBe(false);
+  });
+}
+
+function getActiveElementTagName() {
+  return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
+}
+
+@Component({
+  template: `
+      <mat-checkbox
+          [formControl]="ctrl"
+          required
+          name="first-name"
+          value="first-value"
+          aria-label="First checkbox">
+        First
+      </mat-checkbox>
+      <mat-checkbox indeterminate="true" disabled="true" aria-labelledby="second-label">
+        Second
+      </mat-checkbox>
+      <span id="second-label">Second checkbox</span>
+  `
+})
+class CheckboxHarnessTest {
+  ctrl = new FormControl(true);
+}
+