feat(material/list): add test harnesses for list components (#17859)

Author: mmalerba

src/cdk/testing/component-harness.ts

@@ -412,7 +412,7 @@ export class HarnessPredicate<T extends ComponentHarness> {
    * @param pattern The pattern the value is expected to match. If `pattern` is a string,
    *   `value` is expected to match exactly. If `pattern` is a regex, a partial match is
    *   allowed. If `pattern` is `null`, the value is expected to be `null`.
-   * @return A Promise that resolves to whether the value matches the pattern.
+   * @return Whether the value matches the pattern.
    */
   static async stringMatches(value: string | null | Promise<string | null>,
                              pattern: string | RegExp | null): Promise<boolean> {

src/material/config.bzl

@@ -17,13 +17,15 @@ entryPoints = [
     "dialog",
     "dialog/testing",
     "divider",
+    "divider/testing",
     "expansion",
     "expansion/testing",
     "form-field",
     "grid-list",
     "icon",
     "input",
     "list",
+    "list/testing",
     "menu",
     "menu/testing",
     "paginator",

src/material/divider/testing/BUILD.bazel

@@ -0,0 +1,50 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+ts_library(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material/divider/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/testbed",
+        "//src/material/divider",
+        "@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/divider",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material/divider/testing/divider-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
+ */
+
+import {BaseHarnessFilters} from '@angular/cdk/testing';
+
+export interface DividerHarnessFilters extends BaseHarnessFilters {
+}

src/material/divider/testing/divider-harness.spec.ts

@@ -0,0 +1,7 @@
+import {MatDividerModule} from '@angular/material/divider';
+import {MatDividerHarness} from './divider-harness';
+import {runHarnessTests} from './shared.spec';
+
+describe('Non-MDC-based MatButtonHarness', () => {
+  runHarnessTests(MatDividerModule, MatDividerHarness);
+});

src/material/divider/testing/divider-harness.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 {DividerHarnessFilters} from './divider-harness-filters';
+
+/**
+ * Harness for interacting with a `mat-divider`.
+ * @dynamic
+ */
+export class MatDividerHarness extends ComponentHarness {
+  static hostSelector = 'mat-divider';
+
+  static with(options: DividerHarnessFilters = {}) {
+    return new HarnessPredicate(MatDividerHarness, options);
+  }
+
+  async getOrientation(): Promise<'horizontal' | 'vertical'> {
+    return (await this.host()).getAttribute('aria-orientation') as
+        Promise<'horizontal' | 'vertical'>;
+  }
+
+  async isInset(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-divider-inset');
+  }
+}

src/material/divider/testing/index.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/divider/testing/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @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 './divider-harness';
+export * from './divider-harness-filters';

src/material/divider/testing/shared.spec.ts

@@ -0,0 +1,49 @@
+import {HarnessLoader} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatDividerHarness} from './divider-harness';
+
+/** Shared tests to run on both the original and MDC-based dividers. */
+export function runHarnessTests(
+    dividerModule: typeof MatDividerModule, dividerHarness: typeof MatDividerHarness) {
+  let fixture: ComponentFixture<DividerHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [dividerModule],
+      declarations: [DividerHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DividerHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all divider harnesses', async () => {
+    const dividers = await loader.getAllHarnesses(dividerHarness);
+    expect(dividers.length).toBe(2);
+  });
+
+  it('should check if divider is inset', async () => {
+    const dividers = await loader.getAllHarnesses(dividerHarness);
+    expect(await dividers[0].isInset()).toBe(false);
+    expect(await dividers[1].isInset()).toBe(true);
+  });
+
+  it('should get divider orientation', async () => {
+    const dividers = await loader.getAllHarnesses(dividerHarness);
+    expect(await dividers[0].getOrientation()).toBe('horizontal');
+    expect(await dividers[1].getOrientation()).toBe('vertical');
+  });
+}
+
+@Component({
+  template: `
+    <mat-divider></mat-divider>
+    <mat-divider inset vertical></mat-divider>
+  `
+})
+class DividerHarnessTest {}

src/material/list/testing/BUILD.bazel

@@ -0,0 +1,54 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+ts_library(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material/list/testing",
+    deps = [
+        "//src/cdk/coercion",
+        "//src/cdk/testing",
+        "//src/material/divider/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/testbed",
+        "//src/material/divider/testing",
+        "//src/material/list",
+        "@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/divider/testing",
+        "//src/material/list",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material/list/testing/action-list-harness.ts

@@ -0,0 +1,65 @@
+/**
+ * @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 {MatListHarnessBase} from './list-harness-base';
+import {ActionListHarnessFilters, ActionListItemHarnessFilters} from './list-harness-filters';
+import {getListItemPredicate, MatListItemHarnessBase} from './list-item-harness-base';
+
+/** Harness for interacting with a standard mat-action-list in tests. */
+export class MatActionListHarness extends MatListHarnessBase<
+    typeof MatActionListItemHarness, MatActionListItemHarness, ActionListItemHarnessFilters> {
+  /** The selector for the host element of a `MatActionList` instance. */
+  static hostSelector = 'mat-action-list';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatActionListHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which action list instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ActionListHarnessFilters = {}): HarnessPredicate<MatActionListHarness> {
+    return new HarnessPredicate(MatActionListHarness, options);
+  }
+
+  _itemHarness = MatActionListItemHarness;
+}
+
+/** Harness for interacting with an action list item. */
+export class MatActionListItemHarness extends MatListItemHarnessBase {
+  /** The selector for the host element of a `MatListItem` instance. */
+  static hostSelector = ['mat-list-item', 'a[mat-list-item]', 'button[mat-list-item]']
+      .map(selector => `${MatActionListHarness.hostSelector} ${selector}`)
+      .join(',');
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatActionListItemHarness` that
+   * meets certain criteria.
+   * @param options Options for filtering which action list item instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ActionListItemHarnessFilters = {}):
+      HarnessPredicate<MatActionListItemHarness> {
+    return getListItemPredicate(MatActionListItemHarness, options);
+  }
+
+  /** Clicks on the action list item. */
+  async click(): Promise<void> {
+    return (await this.host()).click();
+  }
+
+  /** Focuses the action list item. */
+  async focus(): Promise<void> {
+    return (await this.host()).focus();
+  }
+
+  /** Blurs the action list item. */
+  async blur(): Promise<void> {
+    return (await this.host()).blur();
+  }
+}

src/material/list/testing/index.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';