feat(material-experimental/mdc-table): add test harnesses

src/material-experimental/config.bzl

@@ -33,6 +33,7 @@ entryPoints = [
     "mdc-slider/testing",
     "mdc-snack-bar",
     "mdc-table",
+    "mdc-table/testing",
     "mdc-tabs",
     "menubar",
     "popover-edit",

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

@@ -26,7 +26,6 @@ ng_test_library(
         ["**/*.spec.ts"],
         exclude = [
             "**/*.e2e.spec.ts",
-            "shared.spec.ts",
         ],
     ),
     deps = [

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

@@ -0,0 +1,35 @@
+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-experimental/mdc-table/testing",
+    deps = [
+        "//src/cdk/testing",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":testing",
+        "//src/material-experimental/mdc-table",
+        "//src/material/table/testing:harness_tests_lib",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material-experimental/mdc-table/testing/cell-harness.ts

@@ -0,0 +1,94 @@
+/**
+ * @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,
+  ComponentHarnessConstructor,
+} from '@angular/cdk/testing';
+import {CellHarnessFilters} from './table-harness-filters';
+
+/** Harness for interacting with an MDC-based Angular Material table cell. */
+export class MatCellHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatCellHarness` instance. */
+  static hostSelector = '.mat-mdc-cell';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes.
+   * @param options Options for narrowing the search
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: CellHarnessFilters = {}): HarnessPredicate<MatCellHarness> {
+    return getCellPredicate(MatCellHarness, options);
+  }
+
+  /** Gets the cell's text. */
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+
+  /** Gets the name of the column that the cell belongs to. */
+  async getColumnName(): Promise<string> {
+    const host = await this.host();
+    const classAttribute = await host.getAttribute('class');
+
+    if (classAttribute) {
+      const prefix = 'mat-column-';
+      const name = classAttribute.split(' ').map(c => c.trim()).find(c => c.startsWith(prefix));
+
+      if (name) {
+        return name.split(prefix)[1];
+      }
+    }
+
+    throw Error('Could not determine column name of cell.');
+  }
+}
+
+/** Harness for interacting with an MDC-based Angular Material table header cell. */
+export class MatHeaderCellHarness extends MatCellHarness {
+  /** The selector for the host element of a `MatHeaderCellHarness` instance. */
+  static hostSelector = '.mat-mdc-header-cell';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for
+   * a table header cell with specific attributes.
+   * @param options Options for narrowing the search
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: CellHarnessFilters = {}): HarnessPredicate<MatHeaderCellHarness> {
+    return getCellPredicate(MatHeaderCellHarness, options);
+  }
+}
+
+/** Harness for interacting with an MDC-based Angular Material table footer cell. */
+export class MatFooterCellHarness extends MatCellHarness {
+  /** The selector for the host element of a `MatFooterCellHarness` instance. */
+  static hostSelector = '.mat-mdc-footer-cell';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for
+   * a table footer cell with specific attributes.
+   * @param options Options for narrowing the search
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: CellHarnessFilters = {}): HarnessPredicate<MatFooterCellHarness> {
+    return getCellPredicate(MatFooterCellHarness, options);
+  }
+}
+
+
+function getCellPredicate<T extends MatCellHarness>(
+  type: ComponentHarnessConstructor<T>,
+  options: CellHarnessFilters): HarnessPredicate<T> {
+  return new HarnessPredicate(type, options)
+    .addOption('text', options.text,
+        (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+    .addOption('columnName', options.columnName,
+        (harness, name) => HarnessPredicate.stringMatches(harness.getColumnName(), name));
+}

src/material-experimental/mdc-table/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-experimental/mdc-table/testing/public-api.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 * from './table-harness';
+export * from './row-harness';
+export * from './cell-harness';
+export * from './table-harness-filters';

src/material-experimental/mdc-table/testing/row-harness.ts

@@ -0,0 +1,129 @@
+/**
+ * @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 {RowHarnessFilters, CellHarnessFilters} from './table-harness-filters';
+import {MatCellHarness, MatHeaderCellHarness, MatFooterCellHarness} from './cell-harness';
+
+/** Text extracted from a table row organized by columns. */
+export interface MatRowHarnessColumnsText {
+  [columnName: string]: string;
+}
+
+/** Harness for interacting with an MDC-based Angular Material table row. */
+export class MatRowHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatRowHarness` instance. */
+  static hostSelector = '.mat-mdc-row';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a table row with specific attributes.
+   * @param options Options for narrowing the search
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: RowHarnessFilters = {}): HarnessPredicate<MatRowHarness> {
+    return new HarnessPredicate(MatRowHarness, options);
+  }
+
+  /** Gets a list of `MatCellHarness` for all cells in the row. */
+  async getCells(filter: CellHarnessFilters = {}): Promise<MatCellHarness[]> {
+    return this.locatorForAll(MatCellHarness.with(filter))();
+  }
+
+  /** Gets the text of the cells in the row. */
+  async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
+    return getCellTextByIndex(this, filter);
+  }
+
+  /** Gets the text inside the row organized by columns. */
+  async getCellTextByColumnName(): Promise<MatRowHarnessColumnsText> {
+    return getCellTextByColumnName(this);
+  }
+}
+
+/** Harness for interacting with an MDC-based Angular Material table header row. */
+export class MatHeaderRowHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatHeaderRowHarness` instance. */
+  static hostSelector = '.mat-mdc-header-row';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for
+   * a table header row with specific attributes.
+   * @param options Options for narrowing the search
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: RowHarnessFilters = {}): HarnessPredicate<MatHeaderRowHarness> {
+    return new HarnessPredicate(MatHeaderRowHarness, options);
+  }
+
+  /** Gets a list of `MatHeaderCellHarness` for all cells in the row. */
+  async getCells(filter: CellHarnessFilters = {}): Promise<MatHeaderCellHarness[]> {
+    return this.locatorForAll(MatHeaderCellHarness.with(filter))();
+  }
+
+  /** Gets the text of the cells in the header row. */
+  async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
+    return getCellTextByIndex(this, filter);
+  }
+
+  /** Gets the text inside the header row organized by columns. */
+  async getCellTextByColumnName(): Promise<MatRowHarnessColumnsText> {
+    return getCellTextByColumnName(this);
+  }
+}
+
+
+/** Harness for interacting with an MDC-based Angular Material table footer row. */
+export class MatFooterRowHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatFooterRowHarness` instance. */
+  static hostSelector = '.mat-mdc-footer-row';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for
+   * a table footer row cell with specific attributes.
+   * @param options Options for narrowing the search
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: RowHarnessFilters = {}): HarnessPredicate<MatFooterRowHarness> {
+    return new HarnessPredicate(MatFooterRowHarness, options);
+  }
+
+  /** Gets a list of `MatFooterCellHarness` for all cells in the row. */
+  async getCells(filter: CellHarnessFilters = {}): Promise<MatFooterCellHarness[]> {
+    return this.locatorForAll(MatFooterCellHarness.with(filter))();
+  }
+
+  /** Gets the text of the cells in the footer row. */
+  async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
+    return getCellTextByIndex(this, filter);
+  }
+
+  /** Gets the text inside the footer row organized by columns. */
+  async getCellTextByColumnName(): Promise<MatRowHarnessColumnsText> {
+    return getCellTextByColumnName(this);
+  }
+}
+
+
+async function getCellTextByIndex(harness: {
+  getCells: (filter?: CellHarnessFilters) => Promise<MatCellHarness[]>
+}, filter: CellHarnessFilters): Promise<string[]> {
+  const cells = await harness.getCells(filter);
+  return Promise.all(cells.map(cell => cell.getText()));
+}
+
+async function getCellTextByColumnName(harness: {
+  getCells: () => Promise<MatCellHarness[]>
+}): Promise<MatRowHarnessColumnsText> {
+  const output: MatRowHarnessColumnsText = {};
+  const cells = await harness.getCells();
+  const cellsData = await Promise.all(cells.map(cell => {
+    return Promise.all([cell.getColumnName(), cell.getText()]);
+  }));
+  cellsData.forEach(([columnName, text]) => output[columnName] = text);
+  return output;
+}

src/material-experimental/mdc-table/testing/table-harness-filters.ts

@@ -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';
+
+/** A set of criteria that can be used to filter a list of cell harness instances. */
+export interface CellHarnessFilters extends BaseHarnessFilters {
+  /** Only find instances whose text matches the given value. */
+  text?: string | RegExp;
+
+  /** Only find instances whose column name matches the given value. */
+  columnName?: string | RegExp;
+}
+
+/** A set of criteria that can be used to filter a list of row harness instances. */
+export interface RowHarnessFilters extends BaseHarnessFilters {
+}
+
+/** A set of criteria that can be used to filter a list of table harness instances. */
+export interface TableHarnessFilters extends BaseHarnessFilters {
+}

src/material-experimental/mdc-table/testing/table-harness.spec.ts

@@ -0,0 +1,7 @@
+import {MatTableModule} from '@angular/material-experimental/mdc-table';
+import {runHarnessTests} from '@angular/material/table/testing/shared.spec';
+import {MatTableHarness} from './table-harness';
+
+describe('MDC-based MatTableHarness', () => {
+  runHarnessTests(MatTableModule, MatTableHarness);
+});