refactor(material-experimental/mdc-table): de-duplicate test harness logic (#22451)

The logic for all the MDC table harnesses was identical. These changes pull it out into base classes in order to avoid repeating it.

Author: crisbeto

scripts/check-mdc-exports-config.ts

@@ -97,6 +97,11 @@ export const config = {
       '_MatTableDataSource',
       '_MAT_TEXT_COLUMN_TEMPLATE'
     ],
+    'mdc-table/testing': [
+      // Private symbols that are only exported for MDC.
+      '_MatTableHarnessBase',
+      '_MatRowHarnessBase'
+    ],
     'mdc-tooltip': [
       // Private symbols that are only exported for MDC.
       '_MatTooltipBase',

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

@@ -11,6 +11,7 @@ ts_library(
     module_name = "@angular/material-experimental/mdc-table/testing",
     deps = [
         "//src/cdk/testing",
+        "//src/material/table/testing",
     ],
 )
 

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

@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {HarnessPredicate} from '@angular/cdk/testing';
 import {
-  HarnessPredicate,
-  ComponentHarnessConstructor,
-  ContentContainerComponentHarness,
-} from '@angular/cdk/testing';
-import {CellHarnessFilters} from './table-harness-filters';
+  MatCellHarness as BaseMatCellHarness,
+  MatHeaderCellHarness as BaseMatHeaderCellHarness,
+  MatFooterCellHarness as BaseMatFooterCellHarness,
+  CellHarnessFilters
+} from '@angular/material/table/testing';
 
 /** Harness for interacting with an MDC-based Angular Material table cell. */
-export class MatCellHarness extends ContentContainerComponentHarness {
+export class MatCellHarness extends BaseMatCellHarness {
   /** The selector for the host element of a `MatCellHarness` instance. */
   static hostSelector = '.mat-mdc-cell';
 
@@ -24,34 +25,12 @@ export class MatCellHarness extends ContentContainerComponentHarness {
    * @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.');
+    return BaseMatCellHarness._getCellPredicate(MatCellHarness, options);
   }
 }
 
 /** Harness for interacting with an MDC-based Angular Material table header cell. */
-export class MatHeaderCellHarness extends MatCellHarness {
+export class MatHeaderCellHarness extends BaseMatHeaderCellHarness {
   /** The selector for the host element of a `MatHeaderCellHarness` instance. */
   static hostSelector = '.mat-mdc-header-cell';
 
@@ -62,12 +41,12 @@ export class MatHeaderCellHarness extends MatCellHarness {
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: CellHarnessFilters = {}): HarnessPredicate<MatHeaderCellHarness> {
-    return getCellPredicate(MatHeaderCellHarness, options);
+    return BaseMatHeaderCellHarness._getCellPredicate(MatHeaderCellHarness, options);
   }
 }
 
 /** Harness for interacting with an MDC-based Angular Material table footer cell. */
-export class MatFooterCellHarness extends MatCellHarness {
+export class MatFooterCellHarness extends BaseMatFooterCellHarness {
   /** The selector for the host element of a `MatFooterCellHarness` instance. */
   static hostSelector = '.mat-mdc-footer-cell';
 
@@ -78,17 +57,6 @@ export class MatFooterCellHarness extends MatCellHarness {
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: CellHarnessFilters = {}): HarnessPredicate<MatFooterCellHarness> {
-    return getCellPredicate(MatFooterCellHarness, options);
+    return BaseMatFooterCellHarness._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/public-api.ts

@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+export {
+  CellHarnessFilters,
+  RowHarnessFilters,
+  TableHarnessFilters,
+  MatRowHarnessColumnsText,
+  MatTableHarnessColumnsText,
+} from '@angular/material/table/testing';
 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

@@ -6,19 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate, parallel} from '@angular/cdk/testing';
-import {RowHarnessFilters, CellHarnessFilters} from './table-harness-filters';
+import {HarnessPredicate} from '@angular/cdk/testing';
+import {_MatRowHarnessBase, RowHarnessFilters} from '@angular/material/table/testing';
 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 {
+export class MatRowHarness extends _MatRowHarnessBase<typeof MatCellHarness, MatCellHarness> {
   /** The selector for the host element of a `MatRowHarness` instance. */
   static hostSelector = '.mat-mdc-row';
+  protected _cellHarness = MatCellHarness;
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a table row with specific attributes.
@@ -28,27 +24,14 @@ export class MatRowHarness extends ComponentHarness {
   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 {
+export class MatHeaderRowHarness extends _MatRowHarnessBase<
+  typeof MatHeaderCellHarness, MatHeaderCellHarness> {
   /** The selector for the host element of a `MatHeaderRowHarness` instance. */
   static hostSelector = '.mat-mdc-header-row';
+  protected _cellHarness = MatHeaderCellHarness;
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for
@@ -59,28 +42,15 @@ export class MatHeaderRowHarness extends ComponentHarness {
   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 {
+export class MatFooterRowHarness extends _MatRowHarnessBase<
+  typeof MatFooterCellHarness, MatFooterCellHarness> {
   /** The selector for the host element of a `MatFooterRowHarness` instance. */
   static hostSelector = '.mat-mdc-footer-row';
+  protected _cellHarness = MatFooterCellHarness;
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for
@@ -91,39 +61,4 @@ export class MatFooterRowHarness extends ComponentHarness {
   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 parallel(() => 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 parallel(() => cells.map(cell => {
-    return parallel(() => [cell.getColumnName(), cell.getText()]);
-  }));
-  cellsData.forEach(([columnName, text]) => output[columnName] = text);
-  return output;
 }

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

@@ -3,5 +3,5 @@ import {runHarnessTests} from '@angular/material/table/testing/shared.spec';
 import {MatTableHarness} from './table-harness';
 
 describe('MDC-based MatTableHarness', () => {
-  runHarnessTests(MatTableModule, MatTableHarness);
+  runHarnessTests(MatTableModule, MatTableHarness as any);
 });