feat(material-experimental): add button toggle test harness

Adds a test harness for `mat-button-toggle`.

Author: crisbeto

.github/CODEOWNERS

@@ -108,6 +108,7 @@
 /src/material-experimental/mdc-slider/**           @devversion
 /src/material-experimental/mdc-tabs/**             @crisbeto
 /src/material-experimental/mdc-sidenav/**          @crisbeto
+/src/material-experimental/mdc-button-toggle/**    @crisbeto
 /src/material-experimental/mdc-theming/**          @mmalerba
 /src/material-experimental/mdc-typography/**       @mmalerba
 /src/material-experimental/popover-edit/**         @kseamon @andrewseguin

src/material-experimental/mdc-button-toggle/BUILD.bazel

@@ -0,0 +1,99 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite", "ts_library")
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+
+ng_module(
+    name = "mdc-button-toggle",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "harness/**",
+        ],
+    ),
+    assets = [
+        # TODO: include scss assets
+    ] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-button-toggle",
+    deps = [
+        "//src/material/core",
+    ],
+)
+
+ts_library(
+    name = "harness",
+    srcs = glob(
+        ["harness/**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk-experimental/testing",
+        "//src/cdk/coercion",
+    ],
+)
+
+sass_library(
+    name = "mdc_button_toggle_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
+    ],
+)
+
+sass_binary(
+    name = "button_toggle_scss",
+    src = "button-toggle.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:all_themes",
+    ],
+)
+
+ng_test_library(
+    name = "button_toggle_tests_lib",
+    srcs = [
+        "harness/button-toggle-harness.spec.ts",
+    ],
+    deps = [
+        ":harness",
+        ":mdc-button-toggle",
+        "//src/cdk-experimental/testing",
+        "//src/cdk-experimental/testing/testbed",
+        "//src/cdk/platform",
+        "//src/cdk/testing",
+        "//src/material/button-toggle",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [
+        ":button_toggle_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/e2e",
+    ],
+)

src/material-experimental/mdc-button-toggle/README.md

@@ -0,0 +1 @@
+<!-- TODO -->

src/material-experimental/mdc-button-toggle/_mdc-button-toggle.scss

@@ -0,0 +1,13 @@
+@import '../mdc-helpers/mdc-helpers';
+
+@mixin mat-button-toggle-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    // TODO: implement MDC-based button toggle.
+  }
+}
+
+@mixin mat-buttont-toggle-typography-mdc($config) {
+  @include mat-using-mdc-typography($config) {
+    // TODO: implement MDC-based button toggle.
+  }
+}

src/material-experimental/mdc-button-toggle/button-toggle.e2e.spec.ts

@@ -0,0 +1 @@
+// TODO: copy tests from existing mat-button-toggle, update as necessary to fix.

src/material-experimental/mdc-button-toggle/button-toggle.scss

@@ -0,0 +1 @@
+// TODO: implement MDC-based button toggle

src/material-experimental/mdc-button-toggle/harness/button-toggle-harness-filters.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export type ButtonToggleHarnessFilters = {
+  label?: string | RegExp,
+  name?: string,
+};

src/material-experimental/mdc-button-toggle/harness/button-toggle-harness.spec.ts

@@ -0,0 +1,187 @@
+import {HarnessLoader} from '@angular/cdk-experimental/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {Platform, PlatformModule} from '@angular/cdk/platform';
+import {MatButtonToggleModule as MatMdcButtonToggleModule} from '../index';
+import {MatButtonToggleHarness} from './button-toggle-harness';
+import {MatButtonToggleHarness as MatMdcButtonToggleHarness} from './mdc-button-toggle-harness';
+
+let fixture: ComponentFixture<ButtonToggleHarnessTest>;
+let loader: HarnessLoader;
+let harness: typeof MatButtonToggleHarness;
+
+describe('MatButtonToggleHarness', () => {
+  describe('non-MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [MatButtonToggleModule, PlatformModule],
+        declarations: [ButtonToggleHarnessTest],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(ButtonToggleHarnessTest);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      harness = MatButtonToggleHarness;
+    });
+
+    runTests();
+  });
+
+  describe('MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [MatMdcButtonToggleModule, PlatformModule],
+        declarations: [ButtonToggleHarnessTest],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(ButtonToggleHarnessTest);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      // Public APIs are the same as MatButtonToggleHarness, but cast is
+      // necessary because of different private fields.
+      harness = MatMdcButtonToggleHarness as any;
+    });
+
+    // TODO: enable when the MDC-based harness is done.
+    // runTests();
+  });
+});
+
+/** Shared tests to run on both the original and MDC-based toggles. */
+function runTests() {
+  let platform: Platform;
+
+  beforeEach(inject([Platform], (p: Platform) => {
+    platform = p;
+  }));
+
+  it('should load all button toggle harnesses', async () => {
+    const toggles = await loader.getAllHarnesses(harness);
+    expect(toggles.length).toBe(2);
+  });
+
+  it('should load a button toggle with exact label', async () => {
+    const toggles = await loader.getAllHarnesses(harness.with({label: 'First'}));
+    expect(toggles.length).toBe(1);
+    expect(await toggles[0].getText()).toBe('First');
+  });
+
+  it('should load a button toggle with regex label match', async () => {
+    const toggles = await loader.getAllHarnesses(harness.with({label: /^s/i}));
+    expect(toggles.length).toBe(1);
+    expect(await toggles[0].getText()).toBe('Second');
+  });
+
+  it('should get checked state', async () => {
+    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(harness);
+    expect(await checkedToggle.isChecked()).toBe(true);
+    expect(await uncheckedToggle.isChecked()).toBe(false);
+  });
+
+  it('should get disabled state', async () => {
+    const [enabledToggle, disabledToggle] = await loader.getAllHarnesses(harness);
+    expect(await enabledToggle.isDisabled()).toBe(false);
+    expect(await disabledToggle.isDisabled()).toBe(true);
+  });
+
+  it('should get name', async () => {
+    const toggle = await loader.getHarness(harness.with({label: 'First'}));
+    expect(await toggle.getName()).toBe('first-name');
+  });
+
+  it('should get aria-label', async () => {
+    const toggle = await loader.getHarness(harness.with({label: 'First'}));
+    expect(await toggle.getAriaLabel()).toBe('First toggle');
+  });
+
+  it('should get aria-labelledby', async () => {
+    const toggle = await loader.getHarness(harness.with({label: 'Second'}));
+    expect(await toggle.getAriaLabelledby()).toBe('second-label');
+  });
+
+  it('should get label text', async () => {
+    const [firstToggle, secondToggle] = await loader.getAllHarnesses(harness);
+    expect(await firstToggle.getText()).toBe('First');
+    expect(await secondToggle.getText()).toBe('Second');
+  });
+
+  it('should focus button', async () => {
+    const toggle = await loader.getHarness(harness.with({label: 'First'}));
+    expect(getActiveElementTagName()).not.toBe('button');
+    await toggle.focus();
+    expect(getActiveElementTagName()).toBe('button');
+  });
+
+  it('should blur button', async () => {
+    const toggle = await loader.getHarness(harness.with({label: 'First'}));
+    await toggle.focus();
+    expect(getActiveElementTagName()).toBe('button');
+    await toggle.blur();
+    expect(getActiveElementTagName()).not.toBe('button');
+  });
+
+  it('should toggle', async () => {
+    fixture.componentInstance.disabled = false;
+    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(harness);
+    await checkedToggle.toggle();
+    await uncheckedToggle.toggle();
+    expect(await checkedToggle.isChecked()).toBe(false);
+    expect(await uncheckedToggle.isChecked()).toBe(true);
+  });
+
+  it('should check toggle', async () => {
+    fixture.componentInstance.disabled = false;
+    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(harness);
+    await checkedToggle.check();
+    await uncheckedToggle.check();
+    expect(await checkedToggle.isChecked()).toBe(true);
+    expect(await uncheckedToggle.isChecked()).toBe(true);
+  });
+
+  it('should uncheck toggle', async () => {
+    fixture.componentInstance.disabled = false;
+    const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(harness);
+    await checkedToggle.uncheck();
+    await uncheckedToggle.uncheck();
+    expect(await checkedToggle.isChecked()).toBe(false);
+    expect(await uncheckedToggle.isChecked()).toBe(false);
+  });
+
+  it('should not change disabled toggle', async () => {
+    // Older versions of Edge have a bug where `disabled` buttons are still clickable if
+    // they contain child elements. We skip this check on Edge.
+    // See https://stackoverflow.com/questions/32377026/disabled-button-is-clickable-on-edge-browser
+    if (platform.EDGE) {
+      return;
+    }
+
+    const disabledToggle = await loader.getHarness(harness.with({label: 'Second'}));
+    expect(await disabledToggle.isChecked()).toBe(false);
+    await disabledToggle.toggle();
+    expect(await disabledToggle.isChecked()).toBe(false);
+  });
+}
+
+function getActiveElementTagName() {
+  return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
+}
+
+@Component({
+  template: `
+    <mat-button-toggle
+      name="first-name"
+      value="first-value"
+      aria-label="First toggle"
+      checked>First</mat-button-toggle>
+    <mat-button-toggle
+      [disabled]="disabled"
+      aria-labelledby="second-label">Second</mat-button-toggle>
+    <span id="second-label">Second toggle</span>
+  `
+})
+class ButtonToggleHarnessTest {
+  disabled = true;
+}
+