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,12 +10,6 @@ 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 = {
-  columnName: string;
-  text: string;
-}[];
-
 /** Harness for interacting with a standard Angular Material table row. */
 export class MatRowHarness extends ComponentHarness {
   static hostSelector = '.mat-row';
@@ -32,9 +26,9 @@ 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> {
-    return getCellData(await this.getCells(filter));
+  /** Gets the text of the cells in the row. */
+  async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
+    return getCellTextByIndex(this, filter);
   }
 }
 
@@ -54,9 +48,9 @@ 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> {
-    return getCellData(await this.getCells(filter));
+  /** Gets the text of the cells in the header row. */
+  async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
+    return getCellTextByIndex(this, filter);
   }
 }
 
@@ -77,16 +71,15 @@ 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> {
-    return getCellData(await this.getCells(filter));
+  /** Gets the text of the cells in the footer row. */
+  async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
+    return getCellTextByIndex(this, 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 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()));
 }

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.getCellTextByColumnName();
 
-    expect(data).toEqual({
+    expect(text).toEqual({
       position: {
         headerText: 'No.',
         footerText: 'Number of the element',
@@ -121,71 +121,21 @@ 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();
-
-    expect(data).toEqual([
-      [
-        {text: '1', columnName: 'position'},
-        {text: 'Hydrogen', columnName: 'name'},
-        {text: '1.0079', columnName: 'weight'},
-        {text: 'H', columnName: 'symbol'}
-      ],
-      [
-        {text: '2', columnName: 'position'},
-        {text: 'Helium', columnName: 'name'},
-        {text: '4.0026', columnName: 'weight'},
-        {text: 'He', columnName: 'symbol'}
-      ],
-      [
-        {text: '3', columnName: 'position'},
-        {text: 'Lithium', columnName: 'name'},
-        {text: '6.941', columnName: 'weight'},
-        {text: 'Li', columnName: 'symbol'}
-      ],
-      [
-        {text: '4', columnName: 'position'},
-        {text: 'Beryllium', columnName: 'name'},
-        {text: '9.0122', columnName: 'weight'},
-        {text: 'Be', columnName: 'symbol'}
-      ],
-      [
-        {text: '5', columnName: 'position'},
-        {text: 'Boron', columnName: 'name'},
-        {text: '10.811', columnName: 'weight'},
-        {text: 'B', columnName: 'symbol'}
-      ],
-      [
-        {text: '6', columnName: 'position'},
-        {text: 'Carbon', columnName: 'name'},
-        {text: '12.0107', columnName: 'weight'},
-        {text: 'C', columnName: 'symbol'}
-      ],
-      [
-        {text: '7', columnName: 'position'},
-        {text: 'Nitrogen', columnName: 'name'},
-        {text: '14.0067', columnName: 'weight'},
-        {text: 'N', columnName: 'symbol'}
-      ],
-      [
-        {text: '8', columnName: 'position'},
-        {text: 'Oxygen', columnName: 'name'},
-        {text: '15.9994', columnName: 'weight'},
-        {text: 'O', columnName: 'symbol'}
-      ],
-      [
-        {text: '9', columnName: 'position'},
-        {text: 'Fluorine', columnName: 'name'},
-        {text: '18.9984', columnName: 'weight'},
-        {text: 'F', columnName: 'symbol'}
-      ],
-      [
-        {text: '10', columnName: 'position'},
-        {text: 'Neon', columnName: 'name'},
-        {text: '20.1797', columnName: 'weight'},
-        {text: 'Ne', columnName: 'symbol'}
-      ]
+    const text = await table.getCellTextByIndex();
+
+    expect(text).toEqual([
+      ['1', 'Hydrogen', '1.0079', 'H'],
+      ['2', 'Helium', '4.0026', 'He'],
+      ['3', 'Lithium', '6.941', 'Li'],
+      ['4', 'Beryllium', '9.0122', 'Be'],
+      ['5', 'Boron', '10.811', 'B'],
+      ['6', 'Carbon', '12.0107', 'C'],
+      ['7', 'Nitrogen', '14.0067', 'N'],
+      ['8', 'Oxygen', '15.9994', 'O'],
+      ['9', 'Fluorine', '18.9984', 'F'],
+      ['10', 'Neon', '20.1797', 'Ne']
     ]);
   });
 }

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

@@ -11,20 +11,14 @@ 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;
     footerText: string;
   };
 }
 
-/** Data extracted from a table organized by rows. */
-export type MatTableHarnessRowsData = {
-  columnName: string;
-  text: string;
-}[][];
-
 /** Harness for interacting with a standard mat-table in tests. */
 export class MatTableHarness extends ComponentHarness {
   static hostSelector = '.mat-table';
@@ -54,41 +48,53 @@ 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 getCellTextByIndex(): Promise<string[][]> {
     const rows = await this.getRows();
-    return Promise.all(rows.map(row => row.getData()));
+    return Promise.all(rows.map(row => row.getCellTextByIndex()));
   }
 
-  /** 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 getCellTextByColumnName(): 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 ? getRowData(headerRow) : [],
+      footerRow ? getRowData(footerRow) : [],
+      Promise.all(dataRows.map(row => getRowData(row))),
+    ]);
 
     rowsData.forEach(cells => {
-      cells.forEach(cell => {
-        if (!data[cell.columnName]) {
-          const headerCell = headerData.find(header => header.columnName === cell.columnName);
-          const footerCell = footerData.find(footer => footer.columnName === cell.columnName);
+      cells.forEach(([columnName, cellText]) => {
+        if (!text[columnName]) {
+          const headerCell =
+              headerData.find(([headerColumnName]) => headerColumnName === columnName);
+          const footerCell =
+              footerData.find(([footerColumnName]) => footerColumnName === columnName);
 
-          data[cell.columnName] = {
-            headerText: headerCell ? headerCell.text : '',
-            footerText: footerCell ? footerCell.text : '',
+          text[columnName] = {
+            headerText: headerCell ? headerCell[1] : '',
+            footerText: footerCell ? footerCell[1] : '',
             text: []
           };
         }
 
-        data[cell.columnName].text.push(cell.text);
+        text[columnName].text.push(cellText);
       });
     });
 
-    return data;
+    return text;
   }
 }
+
+/** Utility to extract the column names and text from all of the cells in a row. */
+async function getRowData(row: MatRowHarness | MatHeaderRowHarness | MatFooterRowHarness) {
+  const cells = await row.getCells();
+  return Promise.all(cells.map(cell => Promise.all([cell.getColumnName(), cell.getText()])));
+}

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

@@ -15,8 +15,8 @@ export declare class MatFooterCellHarness extends MatCellHarness {
 }
 
 export declare class MatFooterRowHarness extends ComponentHarness {
+    getCellTextByIndex(filter?: CellHarnessFilters): Promise<string[]>;
     getCells(filter?: CellHarnessFilters): Promise<MatFooterCellHarness[]>;
-    getData(filter?: CellHarnessFilters): Promise<MatRowHarnessData>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatFooterRowHarness>;
 }
@@ -27,47 +27,37 @@ export declare class MatHeaderCellHarness extends MatCellHarness {
 }
 
 export declare class MatHeaderRowHarness extends ComponentHarness {
+    getCellTextByIndex(filter?: CellHarnessFilters): Promise<string[]>;
     getCells(filter?: CellHarnessFilters): Promise<MatHeaderCellHarness[]>;
-    getData(filter?: CellHarnessFilters): Promise<MatRowHarnessData>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatHeaderRowHarness>;
 }
 
 export declare class MatRowHarness extends ComponentHarness {
+    getCellTextByIndex(filter?: CellHarnessFilters): Promise<string[]>;
     getCells(filter?: CellHarnessFilters): Promise<MatCellHarness[]>;
-    getData(filter?: CellHarnessFilters): Promise<MatRowHarnessData>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatRowHarness>;
 }
 
-export declare type MatRowHarnessData = {
-    columnName: string;
-    text: string;
-}[];
-
 export declare class MatTableHarness extends ComponentHarness {
-    getColumnsData(): Promise<MatTableHarnessColumnsData>;
+    getCellTextByColumnName(): Promise<MatTableHarnessColumnsText>;
+    getCellTextByIndex(): Promise<string[][]>;
     getFooterRows(filter?: RowHarnessFilters): Promise<MatFooterRowHarness[]>;
     getHeaderRows(filter?: RowHarnessFilters): Promise<MatHeaderRowHarness[]>;
     getRows(filter?: RowHarnessFilters): Promise<MatRowHarness[]>;
-    getRowsData(): Promise<MatTableHarnessRowsData>;
     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 = {
-    columnName: string;
-    text: string;
-}[][];
-
 export interface RowHarnessFilters extends BaseHarnessFilters {
 }