Skip to content

Commit d1878fe

Browse files
authored
docs(material/table): add harness example for table (#21405)
1 parent 6945570 commit d1878fe

File tree

5 files changed

+156
-2
lines changed

5 files changed

+156
-2
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ ng_module(
1313
deps = [
1414
"//src/cdk/drag-drop",
1515
"//src/cdk/table",
16+
"//src/cdk/testing",
17+
"//src/cdk/testing/testbed",
1618
"//src/material/button",
1719
"//src/material/button-toggle",
1820
"//src/material/checkbox",
@@ -22,6 +24,10 @@ ng_module(
2224
"//src/material/progress-spinner",
2325
"//src/material/sort",
2426
"//src/material/table",
27+
"//src/material/table/testing",
28+
"@npm//@angular/platform-browser",
29+
"@npm//@angular/platform-browser-dynamic",
30+
"@npm//@types/jasmine",
2531
],
2632
)
2733

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
import {TableTextColumnExample} from './table-text-column/table-text-column-example';
4141
import {TableWrappedExample, WrapperTable} from './table-wrapped/table-wrapped-example';
4242
import {TableReorderableExample} from './table-reorderable/table-reorderable-example';
43+
import {TableHarnessExample} from './table-harness/table-harness-example';
4344

4445
export {
4546
TableBasicExample, TableFlexBasicExample,
@@ -53,7 +54,7 @@ export {
5354
TableStickyFooterExample, TableStickyHeaderExample,
5455
TableTextColumnExample, TableTextColumnAdvancedExample,
5556
TableWrappedExample, WrapperTable,
56-
TableReorderableExample,
57+
TableReorderableExample, TableHarnessExample,
5758
};
5859

5960
const EXAMPLES = [
@@ -68,7 +69,7 @@ const EXAMPLES = [
6869
TableStickyFooterExample, TableStickyHeaderExample,
6970
TableTextColumnExample, TableTextColumnAdvancedExample,
7071
TableWrappedExample, WrapperTable,
71-
TableReorderableExample,
72+
TableReorderableExample, TableHarnessExample,
7273
];
7374

7475
@NgModule({
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<table mat-table [dataSource]="dataSource">
2+
<ng-container matColumnDef="position">
3+
<th mat-header-cell *matHeaderCellDef>No.</th>
4+
<td mat-cell *matCellDef="let element">{{element.position}}</td>
5+
<td mat-footer-cell *matFooterCellDef>Number of the element</td>
6+
</ng-container>
7+
8+
<ng-container matColumnDef="name">
9+
<th mat-header-cell *matHeaderCellDef>Name</th>
10+
<td mat-cell *matCellDef="let element">{{element.name}}</td>
11+
<td mat-footer-cell *matFooterCellDef>Name of the element</td>
12+
</ng-container>
13+
14+
<ng-container matColumnDef="weight">
15+
<th mat-header-cell *matHeaderCellDef>Weight</th>
16+
<td mat-cell *matCellDef="let element">{{element.weight}}</td>
17+
<td mat-footer-cell *matFooterCellDef>Weight of the element</td>
18+
</ng-container>
19+
20+
<ng-container matColumnDef="symbol">
21+
<th mat-header-cell *matHeaderCellDef>Symbol</th>
22+
<td mat-cell *matCellDef="let element">{{element.symbol}}</td>
23+
<td mat-footer-cell *matFooterCellDef>Symbol of the element</td>
24+
</ng-container>
25+
26+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
27+
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
28+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
29+
</table>
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
2+
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3+
import {MatTableHarness} from '@angular/material/table/testing';
4+
import {HarnessLoader, parallel} from '@angular/cdk/testing';
5+
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
6+
from '@angular/platform-browser-dynamic/testing';
7+
import {MatTableModule} from '@angular/material/table';
8+
import {TableHarnessExample} from './table-harness-example';
9+
10+
describe('TableHarnessExample', () => {
11+
let fixture: ComponentFixture<TableHarnessExample>;
12+
let loader: HarnessLoader;
13+
14+
beforeAll(() => {
15+
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
16+
});
17+
18+
beforeEach(
19+
waitForAsync(() => {
20+
TestBed.configureTestingModule({
21+
imports: [MatTableModule],
22+
declarations: [TableHarnessExample]
23+
}).compileComponents();
24+
fixture = TestBed.createComponent(TableHarnessExample);
25+
fixture.detectChanges();
26+
loader = TestbedHarnessEnvironment.loader(fixture);
27+
})
28+
);
29+
30+
it('should load harness for a table', async () => {
31+
const tables = await loader.getAllHarnesses(MatTableHarness);
32+
expect(tables.length).toBe(1);
33+
});
34+
35+
it('should get the different kinds of rows in the table', async () => {
36+
const table = await loader.getHarness(MatTableHarness);
37+
const headerRows = await table.getHeaderRows();
38+
const footerRows = await table.getFooterRows();
39+
const rows = await table.getRows();
40+
expect(headerRows.length).toBe(1);
41+
expect(footerRows.length).toBe(1);
42+
expect(rows.length).toBe(10);
43+
});
44+
45+
it('should get cells inside a row', async () => {
46+
const table = await loader.getHarness(MatTableHarness);
47+
const headerRows = await table.getHeaderRows();
48+
const footerRows = await table.getFooterRows();
49+
const rows = await table.getRows();
50+
const headerCells = (await parallel(() => headerRows.map(row => row.getCells())))
51+
.map(row => row.length);
52+
const footerCells = (await parallel(() => footerRows.map(row => row.getCells())))
53+
.map(row => row.length);
54+
const cells = (await parallel(() => rows.map(row => row.getCells())))
55+
.map(row => row.length);
56+
57+
expect(headerCells).toEqual([4]);
58+
expect(cells).toEqual([4, 4, 4, 4, 4, 4, 4, 4, 4, 4]);
59+
expect(footerCells).toEqual([4]);
60+
});
61+
62+
it('should be able to get the text of a cell', async () => {
63+
const table = await loader.getHarness(MatTableHarness);
64+
const secondRow = (await table.getRows())[1];
65+
const cells = await secondRow.getCells();
66+
const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
67+
expect(cellTexts).toEqual(['2', 'Helium', '4.0026', 'He']);
68+
});
69+
70+
it('should be able to get the column name of a cell', async () => {
71+
const table = await loader.getHarness(MatTableHarness);
72+
const fifthRow = (await table.getRows())[1];
73+
const cells = await fifthRow.getCells();
74+
const cellColumnNames = await parallel(() => cells.map(cell => cell.getColumnName()));
75+
expect(cellColumnNames).toEqual(['position', 'name', 'weight', 'symbol']);
76+
});
77+
78+
it('should be able to filter cells by text', async () => {
79+
const table = await loader.getHarness(MatTableHarness);
80+
const firstRow = (await table.getRows())[0];
81+
const cells = await firstRow.getCells({text: '1.0079'});
82+
const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
83+
expect(cellTexts).toEqual(['1.0079']);
84+
});
85+
86+
it('should be able to filter cells by column name', async () => {
87+
const table = await loader.getHarness(MatTableHarness);
88+
const firstRow = (await table.getRows())[0];
89+
const cells = await firstRow.getCells({columnName: 'symbol'});
90+
const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
91+
expect(cellTexts).toEqual(['H']);
92+
});
93+
});
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Testing with MatTableHarness
5+
*/
6+
7+
@Component({
8+
selector: 'table-harness-example',
9+
templateUrl: 'table-harness-example.html',
10+
})
11+
export class TableHarnessExample {
12+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
13+
dataSource = [
14+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
15+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
16+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
17+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
18+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
19+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
20+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
21+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
22+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
23+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
24+
];
25+
}

0 commit comments

Comments
 (0)