feat(chips): add test harness

Adds test harnesses for the Material chips and the related components.

Author: crisbeto

.github/CODEOWNERS

@@ -290,6 +290,7 @@
 /tools/public_api_guard/material/card.d.ts              @jelbourn
 /tools/public_api_guard/material/checkbox.d.ts          @jelbourn @devversion
 /tools/public_api_guard/material/chips.d.ts             @jelbourn
+/tools/public_api_guard/material/chips/testing.d.ts     @jelbourn
 /tools/public_api_guard/material/core.d.ts              @jelbourn
 /tools/public_api_guard/material/datepicker.d.ts        @mmalerba
 /tools/public_api_guard/material/dialog.d.ts            @jelbourn @crisbeto

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

@@ -40,7 +40,8 @@ const keyMap = {
   [TestKey.F10]: Key.F10,
   [TestKey.F11]: Key.F11,
   [TestKey.F12]: Key.F12,
-  [TestKey.META]: Key.META
+  [TestKey.META]: Key.META,
+  [TestKey.SPACE]: Key.SPACE
 };
 
 /** Converts a `ModifierKeys` object to a list of Protractor `Key`s. */

src/cdk/testing/test-element.ts

@@ -53,7 +53,8 @@ export enum TestKey {
   F10,
   F11,
   F12,
-  META
+  META,
+  SPACE,
 }
 
 /**

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

@@ -49,7 +49,8 @@ const keyMap = {
   [TestKey.F10]: {keyCode: keyCodes.F10, key: 'F10'},
   [TestKey.F11]: {keyCode: keyCodes.F11, key: 'F11'},
   [TestKey.F12]: {keyCode: keyCodes.F12, key: 'F12'},
-  [TestKey.META]: {keyCode: keyCodes.META, key: 'Meta'}
+  [TestKey.META]: {keyCode: keyCodes.META, key: 'Meta'},
+  [TestKey.SPACE]: {keyCode: keyCodes.SPACE, key: 'Space'},
 };
 
 /** A `TestElement` implementation for unit tests. */

src/material/chips/chip-list.ts

@@ -418,6 +418,10 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   /** Associates an HTML input element with this chip list. */
   registerInput(inputElement: MatChipTextControl): void {
     this._chipInput = inputElement;
+
+    // We use this attribute to match the chip list to its input in test harnesses.
+    // Set the attribute directly here to avoid "changed after checked" errors.
+    this._elementRef.nativeElement.setAttribute('data-mat-chip-input', inputElement.id);
   }
 
   /**

src/material/chips/testing/BUILD.bazel

@@ -0,0 +1,52 @@
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material/chips/testing",
+    deps = [
+        "//src/cdk/testing",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_test_library(
+    name = "harness_tests_lib",
+    srcs = ["shared.spec.ts"],
+    deps = [
+        ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/private",
+        "//src/cdk/testing/testbed",
+        "//src/material/chips",
+        "//src/material/form-field",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["shared.spec.ts"],
+    ),
+    deps = [
+        ":harness_tests_lib",
+        ":testing",
+        "//src/material/chips",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material/chips/testing/chip-harness-filters.ts

@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+import {BaseHarnessFilters} from '@angular/cdk/testing';
+
+/** A set of criteria that can be used to filter a list of `MatChipHarness` instances. */
+export interface ChipHarnessFilters extends BaseHarnessFilters {
+  /** Only find instances whose text matches the given value. */
+  text?: string | RegExp;
+}
+
+/** A set of criteria that can be used to filter a list of `MatChipListHarness` instances. */
+export interface ChipListHarnessFilters extends BaseHarnessFilters {}
+
+/** A set of criteria that can be used to filter a list of `MatChipListInputHarness` instances. */
+export interface ChipInputHarnessFilters extends BaseHarnessFilters {
+  /** Filters based on the value of the input. */
+  value?: string | RegExp;
+  /** Filters based on the placeholder text of the input. */
+  placeholder?: string | RegExp;
+}
+
+/** A set of criteria that can be used to filter a list of `MatChipRemoveHarness` instances. */
+export interface ChipRemoveHarnessFilters extends BaseHarnessFilters {}

src/material/chips/testing/chip-harness.ts

@@ -0,0 +1,76 @@
+/**
+ * @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
+ */
+
+import {ComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
+import {ChipHarnessFilters, ChipRemoveHarnessFilters} from './chip-harness-filters';
+import {MatChipRemoveHarness} from './chip-remove-harness';
+
+/** Harness for interacting with a standard Angular Material chip in tests. */
+export class MatChipHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatChip` instance. */
+  static hostSelector = '.mat-chip';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatChipHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which chip instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ChipHarnessFilters = {}): HarnessPredicate<MatChipHarness> {
+    return new HarnessPredicate(MatChipHarness, options)
+        .addOption('text', options.text,
+            (harness, label) => HarnessPredicate.stringMatches(harness.getText(), label));
+  }
+
+  /** Gets the text of the chip. */
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+
+  /** Whether the chip is selected. */
+  async isSelected(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-chip-selected');
+  }
+
+  /** Whether the chip is disabled. */
+  async isDisabled(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-chip-disabled');
+  }
+
+  /** Selects the given chip. Only applies if it's selectable. */
+  async select(): Promise<void> {
+    if (!(await this.isSelected())) {
+      await this.toggle();
+    }
+  }
+
+  /** Deselects the given chip. Only applies if it's selectable. */
+  async deselect(): Promise<void> {
+    if (await this.isSelected()) {
+      await this.toggle();
+    }
+  }
+
+  /** Toggles the selected state of the given chip. Only applies if it's selectable. */
+  async toggle(): Promise<void> {
+    return (await this.host()).sendKeys(TestKey.SPACE);
+  }
+
+  /** Removes the given chip. Only applies if it's removable. */
+  async remove(): Promise<void> {
+    await (await this.host()).sendKeys(TestKey.DELETE);
+  }
+
+  /**
+   * Gets the remove button inside of a chip.
+   * @param filter Optionally filters which chips are included.
+   */
+  async getRemoveButton(filter: ChipRemoveHarnessFilters = {}): Promise<MatChipRemoveHarness> {
+    return this.locatorFor(MatChipRemoveHarness.with(filter))();
+  }
+}

src/material/chips/testing/chip-input-harness.ts

@@ -0,0 +1,95 @@
+/**
+ * @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
+ */
+
+import {HarnessPredicate, ComponentHarness, TestKey} from '@angular/cdk/testing';
+import {ChipInputHarnessFilters} from './chip-harness-filters';
+
+/** Harness for interacting with a standard Material chip inputs in tests. */
+export class MatChipInputHarness extends ComponentHarness {
+  static hostSelector = '.mat-chip-input';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatChipInputHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which input instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ChipInputHarnessFilters = {}): HarnessPredicate<MatChipInputHarness> {
+    return new HarnessPredicate(MatChipInputHarness, options)
+        .addOption('value', options.value, async (harness, value) => {
+          return (await harness.getValue()) === value;
+        })
+        .addOption('placeholder', options.placeholder, async (harness, placeholder) => {
+          return (await harness.getPlaceholder()) === placeholder;
+        });
+  }
+
+  /** Whether the input is disabled. */
+  async isDisabled(): Promise<boolean> {
+    return (await this.host()).getProperty('disabled')!;
+  }
+
+  /** Whether the input is required. */
+  async isRequired(): Promise<boolean> {
+    return (await this.host()).getProperty('required')!;
+  }
+
+  /** Gets the value of the input. */
+  async getValue(): Promise<string> {
+    // The "value" property of the native input is never undefined.
+    return (await (await this.host()).getProperty('value'))!;
+  }
+
+  /** Gets the placeholder of the input. */
+  async getPlaceholder(): Promise<string> {
+    return (await (await this.host()).getProperty('placeholder'));
+  }
+
+  /**
+   * Focuses the input and returns a promise that indicates when the
+   * action is complete.
+   */
+  async focus(): Promise<void> {
+    return (await this.host()).focus();
+  }
+
+  /**
+   * Blurs the input and returns a promise that indicates when the
+   * action is complete.
+   */
+  async blur(): Promise<void> {
+    return (await this.host()).blur();
+  }
+
+  /** Whether the input is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
+  /**
+   * Sets the value of the input. The value will be set by simulating
+   * keypresses that correspond to the given value.
+   */
+  async setValue(newValue: string): Promise<void> {
+    const inputEl = await this.host();
+    await inputEl.clear();
+
+    // We don't want to send keys for the value if the value is an empty
+    // string in order to clear the value. Sending keys with an empty string
+    // still results in unnecessary focus events.
+    if (newValue) {
+      await inputEl.sendKeys(newValue);
+    }
+  }
+
+  /** Sends a chip separator key to the input element. */
+  async sendSeparatorKey(key: TestKey | string): Promise<void> {
+    const inputEl = await this.host();
+    return inputEl.sendKeys(key);
+  }
+}

src/material/chips/testing/chip-list-harness.spec.ts

@@ -0,0 +1,11 @@
+import {MatChipsModule} from '@angular/material/chips';
+import {runHarnessTests} from '@angular/material/chips/testing/shared.spec';
+import {MatChipListHarness} from './chip-list-harness';
+import {MatChipHarness} from './chip-harness';
+import {MatChipInputHarness} from './chip-input-harness';
+import {MatChipRemoveHarness} from './chip-remove-harness';
+
+describe('Non-MDC-based MatChipListHarness', () => {
+  runHarnessTests(MatChipsModule, MatChipListHarness, MatChipHarness, MatChipInputHarness,
+      MatChipRemoveHarness);
+});