cleanup: restructure mdc-chips harness to follow the file structure used

by other harnesses, and add missing filter options

Author: mmalerba

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

@@ -9,7 +9,6 @@ ng_module(
         ["**/*.ts"],
         exclude = [
             "**/*.spec.ts",
-            "harness/**",
         ],
     ),
     assets = [":chips_scss"] + glob(["**/*.html"]),
@@ -26,17 +25,6 @@ ng_module(
     ],
 )
 
-ts_library(
-    name = "harness",
-    srcs = glob(
-        ["harness/**/*.ts"],
-        exclude = ["**/*.spec.ts"],
-    ),
-    deps = [
-        "//src/cdk/testing",
-    ],
-)
-
 sass_library(
     name = "mdc_chips_scss_lib",
     srcs = glob(["**/_*.scss"]),
@@ -66,15 +54,13 @@ ng_test_library(
         exclude = ["**/*.e2e.spec.ts"],
     ),
     deps = [
-        ":harness",
         ":mdc-chips",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
         "//src/cdk/keycodes",
         "//src/cdk/platform",
         "//src/cdk/private/testing",
         "//src/cdk/testing",
-        "//src/cdk/testing/testbed",
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",

src/material-experimental/mdc-chips/harness/chip-harness.ts

@@ -0,0 +1,39 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+ng_module(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material-experimental/mdc-chips/testing",
+    deps = [
+        "//src/cdk/coercion",
+        "//src/cdk/testing",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material-experimental/mdc-chips",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = [
+        "@npm//:node_modules/@material/chips/dist/mdc.chips.js",
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
+    ],
+    deps = [
+        ":unit_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)

src/material-experimental/mdc-chips/harness/chip-row-harness.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ChipGridHarnessFilters} from './chip-harness-filters';
+import {MatChipInputHarness} from './chip-input-harness';
 import {MatChipRowHarness} from './chip-row-harness';
-import {MatChipInputHarness} from './chip-input';
 
 /**
  * Harness for interacting with a mat-chip-grid in tests.
@@ -17,6 +18,13 @@ import {MatChipInputHarness} from './chip-input';
 export class MatChipGridHarness extends ComponentHarness {
   static hostSelector = 'mat-chip-grid';
 
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a chip grid with specific attributes.
+   */
+  static with(options: ChipGridHarnessFilters = {}): HarnessPredicate<MatChipGridHarness> {
+    return new HarnessPredicate(MatChipGridHarness, options);
+  }
+
   private _rows = this.locatorForAll(MatChipRowHarness);
   private _input = this.locatorFor(MatChipInputHarness);
 

src/material-experimental/mdc-chips/testing/BUILD.bazel

@@ -0,0 +1,25 @@
+/**
+ * @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';
+
+// TODO(mmalerba): Add additional options that make sense for each harness type.
+
+export interface ChipGridHarnessFilters extends BaseHarnessFilters {}
+
+export interface ChipHarnessFilters extends BaseHarnessFilters {}
+
+export interface ChipInputHarnessFilters extends BaseHarnessFilters {}
+
+export interface ChipListboxHarnessFilters extends BaseHarnessFilters {}
+
+export interface ChipOptionHarnessFilters extends ChipHarnessFilters {}
+
+export interface ChipRowHarnessFilters extends ChipHarnessFilters {}
+
+export interface ChipSetHarnessFilters extends BaseHarnessFilters {}

src/material-experimental/mdc-chips/harness/chip-grid-harness.spec.ts renamed to src/material-experimental/mdc-chips/testing/chip-grid-harness.spec.ts

@@ -0,0 +1,34 @@
+/**
+ * @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} from '@angular/cdk/testing';
+import {ChipHarnessFilters} from './chip-harness-filters';
+
+/**
+ * Harness for interacting with a mat-chip in tests.
+ * @dynamic
+ */
+export class MatChipHarness extends ComponentHarness {
+  static hostSelector = 'mat-basic-chip, mat-chip';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a chip with specific attributes.
+   */
+  // Note(mmalerba): generics are used as a workaround for lack of polymorphic `this` in static
+  // methods. See https://github.com/microsoft/TypeScript/issues/5863
+  static with<T extends typeof MatChipHarness>(this: T, options: ChipHarnessFilters = {}):
+      HarnessPredicate<InstanceType<T>> {
+    return new HarnessPredicate(MatChipHarness, options) as
+        unknown as HarnessPredicate<InstanceType<T>>;
+  }
+
+  /** Gets a promise for the text content the option. */
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+}

src/material-experimental/mdc-chips/harness/chip-grid-harness.ts renamed to src/material-experimental/mdc-chips/testing/chip-grid-harness.ts

@@ -3,7 +3,7 @@ import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatChipsModule} from '../index';
-import {MatChipInputHarness} from './chip-input';
+import {MatChipInputHarness} from './chip-input-harness';
 
 let fixture: ComponentFixture<ChipInputHarnessTest>;
 let loader: HarnessLoader;

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

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ChipInputHarnessFilters} from './chip-harness-filters';
 
 /**
  * Harness for interacting with a grid's chip input in tests.
@@ -15,6 +16,13 @@ import {ComponentHarness} from '@angular/cdk/testing';
 export class MatChipInputHarness extends ComponentHarness {
   static hostSelector = '.mat-mdc-chip-input';
 
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a chip input with specific attributes.
+   */
+  static with(options: ChipInputHarnessFilters = {}): HarnessPredicate<MatChipInputHarness> {
+    return new HarnessPredicate(MatChipInputHarness, options);
+  }
+
   /** Gets a promise for the disabled state. */
   async isDisabled(): Promise<boolean> {
     return await ((await this.host()).getAttribute('disabled')) === 'true';

src/material-experimental/mdc-chips/harness/chip-harness.spec.ts renamed to src/material-experimental/mdc-chips/testing/chip-harness.spec.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ChipListboxHarnessFilters} from './chip-harness-filters';
 import {MatChipOptionHarness} from './chip-option-harness';
 
 /**
@@ -16,6 +17,14 @@ import {MatChipOptionHarness} from './chip-option-harness';
 export class MatChipListboxHarness extends ComponentHarness {
   static hostSelector = 'mat-chip-listbox';
 
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a chip listbox with specific
+   * attributes.
+   */
+  static with(options: ChipListboxHarnessFilters = {}): HarnessPredicate<MatChipListboxHarness> {
+    return new HarnessPredicate(MatChipListboxHarness, options);
+  }
+
   private _options = this.locatorForAll(MatChipOptionHarness);
 
   /** Gets promise of the harnesses for the chip options in the listbox. */

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

@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {HarnessPredicate} from '@angular/cdk/testing';
 import {MatChipHarness} from './chip-harness';
+import {ChipOptionHarnessFilters} from './chip-harness-filters';
 
 /**
  * Harness for interacting with a mat-chip-option in tests.
@@ -15,6 +17,18 @@ import {MatChipHarness} from './chip-harness';
 export class MatChipOptionHarness extends MatChipHarness {
   static hostSelector = 'mat-basic-chip-option, mat-chip-option';
 
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a chip option with specific
+   * attributes.
+   */
+  // Note(mmalerba): generics are used as a workaround for lack of polymorphic `this` in static
+  // methods. See https://github.com/microsoft/TypeScript/issues/5863
+  static with<T extends typeof MatChipHarness>(
+      this: T, options: ChipOptionHarnessFilters = {}): HarnessPredicate<InstanceType<T>> {
+    return new HarnessPredicate(MatChipOptionHarness, options) as
+        unknown as HarnessPredicate<InstanceType<T>>;
+  }
+
   /** Gets a promise for the selected state. */
   async isSelected(): Promise<boolean> {
     return await ((await this.host()).getAttribute('aria-selected')) === 'true';

src/material-experimental/mdc-chips/harness/chip-input.spec.ts renamed to src/material-experimental/mdc-chips/testing/chip-input-harness.spec.ts

@@ -0,0 +1,30 @@
+/**
+ * @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} from '@angular/cdk/testing';
+import {ChipRowHarnessFilters} from './chip-harness-filters';
+import {MatChipHarness} from './chip-harness';
+
+/**
+ * Harness for interacting with a mat-chip-row in tests.
+ * @dynamic
+ */
+export class MatChipRowHarness extends MatChipHarness {
+  static hostSelector = 'mat-chip-row, mat-basic-chip-row';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a chip row with specific attributes.
+   */
+  // Note(mmalerba): generics are used as a workaround for lack of polymorphic `this` in static
+  // methods. See https://github.com/microsoft/TypeScript/issues/5863
+  static with<T extends typeof MatChipHarness>(
+      this: T, options: ChipRowHarnessFilters = {}): HarnessPredicate<InstanceType<T>> {
+    return new HarnessPredicate(MatChipRowHarness, options) as
+        unknown as HarnessPredicate<InstanceType<T>>;
+  }
+}

src/material-experimental/mdc-chips/harness/chip-input.ts renamed to src/material-experimental/mdc-chips/testing/chip-input-harness.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
 import {MatChipHarness} from './chip-harness';
+import {ChipSetHarnessFilters} from './chip-harness-filters';
 
 /**
  * Harness for interacting with a mat-chip-set in tests.
@@ -16,6 +17,13 @@ import {MatChipHarness} from './chip-harness';
 export class MatChipSetHarness extends ComponentHarness {
   static hostSelector = 'mat-chip-set';
 
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a chip set with specific attributes.
+   */
+  static with(options: ChipSetHarnessFilters = {}): HarnessPredicate<MatChipSetHarness> {
+    return new HarnessPredicate(MatChipSetHarness, options);
+  }
+
   private _chips = this.locatorForAll(MatChipHarness);
 
   /** Gets promise of the harnesses for the chips. */

src/material-experimental/mdc-chips/harness/chip-listbox-harness.spec.ts renamed to src/material-experimental/mdc-chips/testing/chip-listbox-harness.spec.ts

@@ -0,0 +1,9 @@
+/**
+ * @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 * from './public-api';

src/material-experimental/mdc-chips/harness/chip-listbox-harness.ts renamed to src/material-experimental/mdc-chips/testing/chip-listbox-harness.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 * from './chip-grid-harness';
+export * from './chip-harness';
+export * from './chip-harness-filters';
+export * from './chip-input-harness';
+export * from './chip-listbox-harness';
+export * from './chip-option-harness';
+export * from './chip-row-harness';
+export * from './chip-set-harness';