docs(material/table): add harness example for table

src/components-examples/material/table/BUILD.bazel

@@ -13,6 +13,8 @@ ng_module(
     deps = [
         "//src/cdk/drag-drop",
         "//src/cdk/table",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/button-toggle",
         "//src/material/checkbox",
@@ -22,6 +24,10 @@ ng_module(
         "//src/material/progress-spinner",
         "//src/material/sort",
         "//src/material/table",
+        "//src/material/table/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/table/index.ts

@@ -40,6 +40,7 @@ import {
 import {TableTextColumnExample} from './table-text-column/table-text-column-example';
 import {TableWrappedExample, WrapperTable} from './table-wrapped/table-wrapped-example';
 import {TableReorderableExample} from './table-reorderable/table-reorderable-example';
+import {TableHarnessExample} from './table-harness/table-harness-example';
 
 export {
   TableBasicExample,          TableFlexBasicExample,
@@ -53,7 +54,7 @@ export {
   TableStickyFooterExample,   TableStickyHeaderExample,
   TableTextColumnExample,     TableTextColumnAdvancedExample,
   TableWrappedExample,        WrapperTable,
-  TableReorderableExample,
+  TableReorderableExample,    TableHarnessExample,
 };
 
 const EXAMPLES = [
@@ -68,7 +69,7 @@ const EXAMPLES = [
   TableStickyFooterExample,   TableStickyHeaderExample,
   TableTextColumnExample,     TableTextColumnAdvancedExample,
   TableWrappedExample,        WrapperTable,
-  TableReorderableExample,
+  TableReorderableExample,    TableHarnessExample,
 ];
 
 @NgModule({

src/components-examples/material/table/table-harness/table-harness-example.html

@@ -0,0 +1,29 @@
+<table mat-table [dataSource]="dataSource">
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef>No.</th>
+    <td mat-cell *matCellDef="let element">{{element.position}}</td>
+    <td mat-footer-cell *matFooterCellDef>Number of the element</td>
+  </ng-container>
+
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
+    <td mat-cell *matCellDef="let element">{{element.name}}</td>
+    <td mat-footer-cell *matFooterCellDef>Name of the element</td>
+  </ng-container>
+
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef>Weight</th>
+    <td mat-cell *matCellDef="let element">{{element.weight}}</td>
+    <td mat-footer-cell *matFooterCellDef>Weight of the element</td>
+  </ng-container>
+
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef>Symbol</th>
+    <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
+    <td mat-footer-cell *matFooterCellDef>Symbol of the element</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/components-examples/material/table/table-harness/table-harness-example.spec.ts

@@ -0,0 +1,93 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatTableHarness} from '@angular/material/table/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatTableModule} from '@angular/material/table';
+import {TableHarnessExample} from './table-harness-example';
+
+describe('TableHarnessExample', () => {
+  let fixture: ComponentFixture<TableHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatTableModule],
+        declarations: [TableHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(TableHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load harness for a table', async () => {
+    const tables = await loader.getAllHarnesses(MatTableHarness);
+    expect(tables.length).toBe(1);
+  });
+
+  it('should get the different kinds of rows in the table', async () => {
+    const table = await loader.getHarness(MatTableHarness);
+    const headerRows = await table.getHeaderRows();
+    const footerRows = await table.getFooterRows();
+    const rows = await table.getRows();
+    expect(headerRows.length).toBe(1);
+    expect(footerRows.length).toBe(1);
+    expect(rows.length).toBe(10);
+  });
+
+  it('should get cells inside a row', async () => {
+    const table = await loader.getHarness(MatTableHarness);
+    const headerRows = await table.getHeaderRows();
+    const footerRows = await table.getFooterRows();
+    const rows = await table.getRows();
+    const headerCells = (await parallel(() => headerRows.map(row => row.getCells())))
+      .map(row => row.length);
+    const footerCells = (await parallel(() => footerRows.map(row => row.getCells())))
+      .map(row => row.length);
+    const cells = (await parallel(() => rows.map(row => row.getCells())))
+      .map(row => row.length);
+
+    expect(headerCells).toEqual([4]);
+    expect(cells).toEqual([4, 4, 4, 4, 4, 4, 4, 4, 4, 4]);
+    expect(footerCells).toEqual([4]);
+  });
+
+  it('should be able to get the text of a cell', async () => {
+    const table = await loader.getHarness(MatTableHarness);
+    const secondRow = (await table.getRows())[1];
+    const cells = await secondRow.getCells();
+    const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
+    expect(cellTexts).toEqual(['2', 'Helium', '4.0026', 'He']);
+  });
+
+  it('should be able to get the column name of a cell', async () => {
+    const table = await loader.getHarness(MatTableHarness);
+    const fifthRow = (await table.getRows())[1];
+    const cells = await fifthRow.getCells();
+    const cellColumnNames = await parallel(() => cells.map(cell => cell.getColumnName()));
+    expect(cellColumnNames).toEqual(['position', 'name', 'weight', 'symbol']);
+  });
+
+  it('should be able to filter cells by text', async () => {
+    const table = await loader.getHarness(MatTableHarness);
+    const firstRow = (await table.getRows())[0];
+    const cells = await firstRow.getCells({text: '1.0079'});
+    const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
+    expect(cellTexts).toEqual(['1.0079']);
+  });
+
+  it('should be able to filter cells by column name', async () => {
+    const table = await loader.getHarness(MatTableHarness);
+    const firstRow = (await table.getRows())[0];
+    const cells = await firstRow.getCells({columnName: 'symbol'});
+    const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
+    expect(cellTexts).toEqual(['H']);
+  });
+});

src/components-examples/material/table/table-harness/table-harness-example.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatTableHarness
+ */
+
+@Component({
+  selector: 'table-harness-example',
+  templateUrl: 'table-harness-example.html',
+})
+export class TableHarnessExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = [
+    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+    {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+    {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+    {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+    {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+    {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+    {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+  ];
+}