feat(table): add test harness

Adds a test harness for `MatTable`, as well as the related row and cell directives.

Author: crisbeto

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

@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {
+  ComponentHarness,
+  HarnessPredicate,
+  ComponentHarnessConstructor,
+} from '@angular/cdk/testing';
 import {CellHarnessFilters} from './table-harness-filters';
 
 /** Harness for interacting with a standard Angular Material table cell. */
@@ -17,9 +21,7 @@ export class MatCellHarness extends ComponentHarness {
    * Gets a `HarnessPredicate` that can be used to search for a cell with specific attributes.
    */
   static with(options: CellHarnessFilters = {}): HarnessPredicate<MatCellHarness> {
-    return new HarnessPredicate(MatCellHarness, options)
-        .addOption('text', options.text,
-            (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    return getCellPredicate(MatCellHarness, options);
   }
 
   /** Gets a promise for the cell's text. */
@@ -53,9 +55,7 @@ export class MatHeaderCellHarness extends MatCellHarness {
    * Gets a `HarnessPredicate` that can be used to search for a header cell with specific attributes
    */
   static with(options: CellHarnessFilters = {}): HarnessPredicate<MatHeaderCellHarness> {
-    return new HarnessPredicate(MatHeaderCellHarness, options)
-        .addOption('text', options.text,
-            (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    return getCellPredicate(MatHeaderCellHarness, options);
   }
 }
 
@@ -67,8 +67,15 @@ export class MatFooterCellHarness extends MatCellHarness {
    * Gets a `HarnessPredicate` that can be used to search for a footer cell with specific attributes
    */
   static with(options: CellHarnessFilters = {}): HarnessPredicate<MatFooterCellHarness> {
-    return new HarnessPredicate(MatFooterCellHarness, options)
-        .addOption('text', options.text,
-            (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    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));
+}

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

@@ -10,8 +10,8 @@ import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
 import {RowHarnessFilters, CellHarnessFilters} from './table-harness-filters';
 import {MatCellHarness, MatHeaderCellHarness, MatFooterCellHarness} from './cell-harness';
 
-/** Data extracted from the cells in a table row. */
-export type MatRowHarnessData = {
+/** Text extracted from the cells in a table row. */
+export type MatRowHarnessText = {
   columnName: string;
   text: string;
 }[];
@@ -32,8 +32,8 @@ export class MatRowHarness extends ComponentHarness {
     return this.locatorForAll(MatCellHarness.with(filter))();
   }
 
-  /** Gets the data of the cells in the footer row. */
-  async getData(filter: CellHarnessFilters = {}): Promise<MatRowHarnessData> {
+  /** Gets the text of the cells in the footer row. */
+  async getText(filter: CellHarnessFilters = {}): Promise<MatRowHarnessText> {
     return getCellData(await this.getCells(filter));
   }
 }
@@ -54,8 +54,8 @@ export class MatHeaderRowHarness extends ComponentHarness {
     return this.locatorForAll(MatHeaderCellHarness.with(filter))();
   }
 
-  /** Gets the data of the cells in the footer row. */
-  async getData(filter: CellHarnessFilters = {}): Promise<MatRowHarnessData> {
+  /** Gets the text of the cells in the footer row. */
+  async getText(filter: CellHarnessFilters = {}): Promise<MatRowHarnessText> {
     return getCellData(await this.getCells(filter));
   }
 }
@@ -77,16 +77,16 @@ export class MatFooterRowHarness extends ComponentHarness {
     return this.locatorForAll(MatFooterCellHarness.with(filter))();
   }
 
-  /** Gets the data of the cells in the footer row. */
-  async getData(filter: CellHarnessFilters = {}): Promise<MatRowHarnessData> {
+  /** Gets the text of the cells in the footer row. */
+  async getText(filter: CellHarnessFilters = {}): Promise<MatRowHarnessText> {
     return getCellData(await this.getCells(filter));
   }
 }
 
 /** Extracts the data from the cells in a row. */
-async function getCellData(cells: MatCellHarness[]): Promise<MatRowHarnessData> {
-  return Promise.all(cells.map(async cell => ({
-    text: await cell.getText(),
-    columnName: await cell.getColumnName()
-  })));
+async function getCellData(cells: MatCellHarness[]): Promise<MatRowHarnessText> {
+  return Promise.all(cells.map(async cell => {
+    const [text, columnName] = await Promise.all([cell.getText(), cell.getColumnName()]);
+    return {text, columnName};
+  }));
 }

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

@@ -87,11 +87,11 @@ export function runHarnessTests(
     expect(cellTexts).toEqual(['Hydrogen', 'H']);
   });
 
-  it('should be able to get the table data organized by columns', async () => {
+  it('should be able to get the table text organized by columns', async () => {
     const table = await loader.getHarness(tableHarness);
-    const data = await table.getColumnsData();
+    const text = await table.getColumnsText();
 
-    expect(data).toEqual({
+    expect(text).toEqual({
       position: {
         headerText: 'No.',
         footerText: 'Number of the element',
@@ -121,11 +121,11 @@ export function runHarnessTests(
     });
   });
 
-  it('should be able to get the table data organized by rows', async () => {
+  it('should be able to get the table text organized by rows', async () => {
     const table = await loader.getHarness(tableHarness);
-    const data = await table.getRowsData();
+    const text = await table.getRowsText();
 
-    expect(data).toEqual([
+    expect(text).toEqual([
       [
         {text: '1', columnName: 'position'},
         {text: 'Hydrogen', columnName: 'name'},

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

@@ -11,7 +11,7 @@ import {TableHarnessFilters, RowHarnessFilters} from './table-harness-filters';
 import {MatRowHarness, MatHeaderRowHarness, MatFooterRowHarness} from './row-harness';
 
 /** Data extracted from a table organized by columns. */
-export interface MatTableHarnessColumnsData {
+export interface MatTableHarnessColumnsText {
   [columnName: string]: {
     text: string[];
     headerText: string;
@@ -20,7 +20,7 @@ export interface MatTableHarnessColumnsData {
 }
 
 /** Data extracted from a table organized by rows. */
-export type MatTableHarnessRowsData = {
+export type MatTableHarnessRowsText = {
   columnName: string;
   text: string;
 }[][];
@@ -54,41 +54,45 @@ export class MatTableHarness extends ComponentHarness {
     return this.locatorForAll(MatFooterRowHarness.with(filter))();
   }
 
-  /** Gets the data inside the entire table organized by rows. */
-  async getRowsData(): Promise<MatTableHarnessRowsData> {
+  /** Gets the text inside the entire table organized by rows. */
+  async getRowsText(): Promise<MatTableHarnessRowsText> {
     const rows = await this.getRows();
-    return Promise.all(rows.map(row => row.getData()));
+    return Promise.all(rows.map(row => row.getText()));
   }
 
-  /** Gets the data inside the entire table organized by columns. */
-  async getColumnsData(): Promise<MatTableHarnessColumnsData> {
-    // Tables can have multiple header rows, but we consider the first one as the "main" row.
-    const headerRow = (await this.getHeaderRows())[0];
-    const footerRow = (await this.getFooterRows())[0];
-    const dataRows = await this.getRows();
+  /** Gets the text inside the entire table organized by columns. */
+  async getColumnsText(): Promise<MatTableHarnessColumnsText> {
+    const [headerRow, footerRow, dataRows] = await Promise.all([
+      // Tables can have multiple header rows, but we consider the first one as the "main" row.
+      this.getHeaderRows().then(rows => rows[0]),
+      this.getFooterRows().then(rows => rows[0]),
+      this.getRows()
+    ]);
 
-    const headerData = headerRow ? await headerRow.getData() : [];
-    const footerData = footerRow ? await footerRow.getData() : [];
-    const rowsData = await Promise.all(dataRows.map(row => row.getData()));
-    const data: MatTableHarnessColumnsData = {};
+    const text: MatTableHarnessColumnsText = {};
+    const [headerData, footerData, rowsData] = await Promise.all([
+      headerRow ? headerRow.getText() : [],
+      footerRow ? footerRow.getText() : [],
+      Promise.all(dataRows.map(row => row.getText())),
+    ]);
 
     rowsData.forEach(cells => {
       cells.forEach(cell => {
-        if (!data[cell.columnName]) {
+        if (!text[cell.columnName]) {
           const headerCell = headerData.find(header => header.columnName === cell.columnName);
           const footerCell = footerData.find(footer => footer.columnName === cell.columnName);
 
-          data[cell.columnName] = {
+          text[cell.columnName] = {
             headerText: headerCell ? headerCell.text : '',
             footerText: footerCell ? footerCell.text : '',
             text: []
           };
         }
 
-        data[cell.columnName].text.push(cell.text);
+        text[cell.columnName].text.push(cell.text);
       });
     });
 
-    return data;
+    return text;
   }
 }

tools/public_api_guard/material/table/testing.d.ts

@@ -16,7 +16,7 @@ export declare class MatFooterCellHarness extends MatCellHarness {
 
 export declare class MatFooterRowHarness extends ComponentHarness {
     getCells(filter?: CellHarnessFilters): Promise<MatFooterCellHarness[]>;
-    getData(filter?: CellHarnessFilters): Promise<MatRowHarnessData>;
+    getText(filter?: CellHarnessFilters): Promise<MatRowHarnessText>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatFooterRowHarness>;
 }
@@ -28,42 +28,42 @@ export declare class MatHeaderCellHarness extends MatCellHarness {
 
 export declare class MatHeaderRowHarness extends ComponentHarness {
     getCells(filter?: CellHarnessFilters): Promise<MatHeaderCellHarness[]>;
-    getData(filter?: CellHarnessFilters): Promise<MatRowHarnessData>;
+    getText(filter?: CellHarnessFilters): Promise<MatRowHarnessText>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatHeaderRowHarness>;
 }
 
 export declare class MatRowHarness extends ComponentHarness {
     getCells(filter?: CellHarnessFilters): Promise<MatCellHarness[]>;
-    getData(filter?: CellHarnessFilters): Promise<MatRowHarnessData>;
+    getText(filter?: CellHarnessFilters): Promise<MatRowHarnessText>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatRowHarness>;
 }
 
-export declare type MatRowHarnessData = {
+export declare type MatRowHarnessText = {
     columnName: string;
     text: string;
 }[];
 
 export declare class MatTableHarness extends ComponentHarness {
-    getColumnsData(): Promise<MatTableHarnessColumnsData>;
+    getColumnsText(): Promise<MatTableHarnessColumnsText>;
     getFooterRows(filter?: RowHarnessFilters): Promise<MatFooterRowHarness[]>;
     getHeaderRows(filter?: RowHarnessFilters): Promise<MatHeaderRowHarness[]>;
     getRows(filter?: RowHarnessFilters): Promise<MatRowHarness[]>;
-    getRowsData(): Promise<MatTableHarnessRowsData>;
+    getRowsText(): Promise<MatTableHarnessRowsText>;
     static hostSelector: string;
     static with(options?: TableHarnessFilters): HarnessPredicate<MatTableHarness>;
 }
 
-export interface MatTableHarnessColumnsData {
+export interface MatTableHarnessColumnsText {
     [columnName: string]: {
         text: string[];
         headerText: string;
         footerText: string;
     };
 }
 
-export declare type MatTableHarnessRowsData = {
+export declare type MatTableHarnessRowsText = {
     columnName: string;
     text: string;
 }[][];