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,28 +6,33 @@
  * 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. */
 export class MatCellHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatCellHarness` instance. */
   static hostSelector = '.mat-cell';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a cell with specific attributes.
+   * 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 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. */
+  /** Gets the cell's text. */
   async getText(): Promise<string> {
     return (await this.host()).text();
   }
 
-  /** Gets the name of the column. */
+  /** 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');
@@ -47,28 +52,41 @@ export class MatCellHarness extends ComponentHarness {
 
 /** Harness for interacting with a standard Angular Material table header cell. */
 export class MatHeaderCellHarness extends MatCellHarness {
+  /** The selector for the host element of a `MatHeaderCellHarness` instance. */
   static hostSelector = '.mat-header-cell';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a header cell with specific attributes
+   * 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 new HarnessPredicate(MatHeaderCellHarness, options)
-        .addOption('text', options.text,
-            (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    return getCellPredicate(MatHeaderCellHarness, options);
   }
 }
 
 /** Harness for interacting with a standard Angular Material table footer cell. */
 export class MatFooterCellHarness extends MatCellHarness {
+  /** The selector for the host element of a `MatFooterCellHarness` instance. */
   static hostSelector = '.mat-footer-cell';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a footer cell with specific attributes
+   * 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 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,83 +10,87 @@ 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 {
+  /** The selector for the host element of a `MatRowHarness` instance. */
   static hostSelector = '.mat-row';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a row with specific attributes.
+   * 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 all cells of the table row. */
+  /** 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 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);
   }
 }
 
 /** Harness for interacting with a standard Angular Material table header row. */
 export class MatHeaderRowHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatHeaderRowHarness` instance. */
   static hostSelector = '.mat-header-row';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a header row with specific attributes.
+   * 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 all cells of the table header row. */
+  /** 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 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);
   }
 }
 
 
 /** Harness for interacting with a standard Angular Material table footer row. */
 export class MatFooterRowHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatFooterRowHarness` instance. */
   static hostSelector = '.mat-footer-row';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a footer row with specific attributes.
+   * 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 all cells of the table footer row. */
+  /** 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 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,105 +87,55 @@ 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',
+        headerText: ['No.'],
+        footerText: ['Number of the element'],
         text: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
       },
       name: {
-        headerText: 'Name',
-        footerText: 'Name of the element',
+        headerText: ['Name'],
+        footerText: ['Name of the element'],
         text: [
           'Hydrogen', 'Helium', 'Lithium', 'Beryllium', 'Boron',
           'Carbon', 'Nitrogen', 'Oxygen', 'Fluorine', 'Neon'
         ]
       },
       weight: {
-        headerText: 'Weight',
-        footerText: 'Weight of the element',
+        headerText: ['Weight'],
+        footerText: ['Weight of the element'],
         text: [
           '1.0079', '4.0026', '6.941', '9.0122', '10.811',
           '12.0107', '14.0067', '15.9994', '18.9984', '20.1797'
         ]
       },
       symbol: {
-        headerText: 'Symbol',
-        footerText: 'Symbol of the element',
+        headerText: ['Symbol'],
+        footerText: ['Symbol of the element'],
         text: ['H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne']
       }
     });
   });
 
-  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-filters.ts

@@ -7,12 +7,16 @@
  */
 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;
 }
 
+/** 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 {
 }