refactor(table): add the ability to get row text organized by… (#18024)

Follow-up from the feedback in #17799. Adds a `getCellTextByColumnName` to the `MatRowHarness` which aligns with what we have on the table harness.

Author: crisbeto

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

@@ -10,6 +10,11 @@ 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 a standard Angular Material table row. */
 export class MatRowHarness extends ComponentHarness {
   /** The selector for the host element of a `MatRowHarness` instance. */
@@ -33,6 +38,11 @@ export class MatRowHarness extends ComponentHarness {
   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 a standard Angular Material table header row. */
@@ -59,6 +69,11 @@ export class MatHeaderRowHarness extends ComponentHarness {
   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);
+  }
 }
 
 
@@ -86,11 +101,29 @@ export class MatFooterRowHarness extends ComponentHarness {
   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/table/testing/shared.spec.ts

@@ -138,6 +138,27 @@ export function runHarnessTests(
       ['10', 'Neon', '20.1797', 'Ne']
     ]);
   });
+
+  it('should be able to get the cell text in a row organized by index', async () => {
+    const table = await loader.getHarness(tableHarness);
+    const rows = await table.getRows();
+
+    expect(rows.length).toBeGreaterThan(0);
+    expect(await rows[0].getCellTextByIndex()).toEqual(['1', 'Hydrogen', '1.0079', 'H']);
+  });
+
+  it('should be able to get the cell text in a row organized by columns', async () => {
+    const table = await loader.getHarness(tableHarness);
+    const rows = await table.getRows();
+
+    expect(rows.length).toBeGreaterThan(0);
+    expect(await rows[0].getCellTextByColumnName()).toEqual({
+      position: '1',
+      name: 'Hydrogen',
+      weight: '1.0079',
+      symbol: 'H'
+    });
+  });
 }
 
 @Component({

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

@@ -8,7 +8,12 @@
 
 import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
 import {TableHarnessFilters, RowHarnessFilters} from './table-harness-filters';
-import {MatRowHarness, MatHeaderRowHarness, MatFooterRowHarness} from './row-harness';
+import {
+  MatRowHarness,
+  MatHeaderRowHarness,
+  MatFooterRowHarness,
+  MatRowHarnessColumnsText,
+} from './row-harness';
 
 /** Text extracted from a table organized by columns. */
 export interface MatTableHarnessColumnsText {
@@ -64,13 +69,15 @@ export class MatTableHarness extends ComponentHarness {
 
     const text: MatTableHarnessColumnsText = {};
     const [headerData, footerData, rowsData] = await Promise.all([
-      Promise.all(headerRows.map(row => getRowData(row))),
-      Promise.all(footerRows.map(row => getRowData(row))),
-      Promise.all(dataRows.map(row => getRowData(row))),
+      Promise.all(headerRows.map(row => row.getCellTextByColumnName())),
+      Promise.all(footerRows.map(row => row.getCellTextByColumnName())),
+      Promise.all(dataRows.map(row => row.getCellTextByColumnName())),
     ]);
 
-    rowsData.forEach(cells => {
-      cells.forEach(([columnName, cellText]) => {
+    rowsData.forEach(data => {
+      Object.keys(data).forEach(columnName => {
+        const cellText = data[columnName];
+
         if (!text[columnName]) {
           text[columnName] = {
             headerText: getCellTextsByColumn(headerData, columnName),
@@ -87,21 +94,14 @@ export class MatTableHarness extends ComponentHarness {
   }
 }
 
-/** 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()])));
-}
-
-
 /** Extracts the text of cells only under a particular column. */
-function getCellTextsByColumn(rowsData: [string, string][][], column: string): string[] {
+function getCellTextsByColumn(rowsData: MatRowHarnessColumnsText[], column: string): string[] {
   const columnTexts: string[] = [];
 
-  rowsData.forEach(cells => {
-    cells.forEach(([columnName, cellText]) => {
+  rowsData.forEach(data => {
+    Object.keys(data).forEach(columnName => {
       if (columnName === column) {
-        columnTexts.push(cellText);
+        columnTexts.push(data[columnName]);
       }
     });
   });

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

@@ -15,6 +15,7 @@ export declare class MatFooterCellHarness extends MatCellHarness {
 }
 
 export declare class MatFooterRowHarness extends ComponentHarness {
+    getCellTextByColumnName(): Promise<MatRowHarnessColumnsText>;
     getCellTextByIndex(filter?: CellHarnessFilters): Promise<string[]>;
     getCells(filter?: CellHarnessFilters): Promise<MatFooterCellHarness[]>;
     static hostSelector: string;
@@ -27,19 +28,25 @@ export declare class MatHeaderCellHarness extends MatCellHarness {
 }
 
 export declare class MatHeaderRowHarness extends ComponentHarness {
+    getCellTextByColumnName(): Promise<MatRowHarnessColumnsText>;
     getCellTextByIndex(filter?: CellHarnessFilters): Promise<string[]>;
     getCells(filter?: CellHarnessFilters): Promise<MatHeaderCellHarness[]>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatHeaderRowHarness>;
 }
 
 export declare class MatRowHarness extends ComponentHarness {
+    getCellTextByColumnName(): Promise<MatRowHarnessColumnsText>;
     getCellTextByIndex(filter?: CellHarnessFilters): Promise<string[]>;
     getCells(filter?: CellHarnessFilters): Promise<MatCellHarness[]>;
     static hostSelector: string;
     static with(options?: RowHarnessFilters): HarnessPredicate<MatRowHarness>;
 }
 
+export interface MatRowHarnessColumnsText {
+    [columnName: string]: string;
+}
+
 export declare class MatTableHarness extends ComponentHarness {
     getCellTextByColumnName(): Promise<MatTableHarnessColumnsText>;
     getCellTextByIndex(): Promise<string[][]>;