Skip to content

Commit 5c988fc

Browse files
wagnermacielwagnermaciel
authored
test(mdc-table): add performance tests for mdc-table (#20134)
* fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink * fixup! fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink * test(mdc-table): add performance tests for mdc-table * refactor(mdc-table-benchmark): move html out of app.module.ts * fix(mdc-table-benchmark): remove unnecessary provider
1 parent 9b0cd3c commit 5c988fc

File tree

6 files changed

+304
-0
lines changed

6 files changed

+304
-0
lines changed

‎test/benchmarks/mdc/table/BUILD.bazel

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
2+
3+
component_benchmark(
4+
name = "benchmark",
5+
driver = ":table.perf-spec.ts",
6+
driver_deps = [
7+
"@npm//@angular/dev-infra-private",
8+
"@npm//protractor",
9+
"@npm//@types/jasmine",
10+
],
11+
ng_deps = [
12+
"@npm//@angular/core",
13+
"@npm//@angular/platform-browser",
14+
"//src/material-experimental/mdc-table",
15+
],
16+
ng_srcs = [
17+
":app.module.ts",
18+
":basic-table.ts",
19+
":fake-table-data.ts",
20+
],
21+
prefix = "",
22+
styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
23+
)

‎test/benchmarks/mdc/table/app.module.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<button id="hide" (click)="hide()">Hide</button>
2+
<button id="show-10-rows-5-cols" (click)="showTenRowsFiveCols()">Show 10 Rows 5 Cols</button>
3+
<button id="show-100-rows-5-cols" (click)="showOneHundredRowsFiveCols()">Show 100 Rows 5 Cols</button>
4+
<button id="show-1000-rows-5-cols" (click)="showOneThousandRowsFiveCols()">Show 1000 Rows 5 Cols</button>
5+
<button id="show-10-rows-10-cols" (click)="showTenRowsTenCols()">Show 10 Rows 10 Cols</button>
6+
<button id="show-10-rows-20-cols" (click)="showTenRowsTwentyCols()">Show 10 Rows 20 Cols</button>
7+
8+
<basic-table [rows]="tenRows" [cols]="fiveCols" *ngIf="isTenRowsFiveColsVisible"></basic-table>
9+
<basic-table [rows]="oneHundredRows" [cols]="fiveCols" *ngIf="isOneHundredRowsFiveColsVisible"></basic-table>
10+
<basic-table [rows]="oneThousandRows" [cols]="fiveCols" *ngIf="isOneThousandRowsFiveColsVisible"></basic-table>
11+
12+
<basic-table [rows]="tenRows" [cols]="tenCols" *ngIf="isTenRowsTenColsVisible"></basic-table>
13+
<basic-table [rows]="tenRows" [cols]="twentyCols" *ngIf="isTenRowsTwentyColsVisible"></basic-table>

‎test/benchmarks/mdc/table/app.module.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component, NgModule, ViewEncapsulation} from '@angular/core';
10+
import {MatTableModule} from '@angular/material-experimental/mdc-table';
11+
import {BrowserModule} from '@angular/platform-browser';
12+
import {BasicTable} from './basic-table';
13+
import {
14+
fiveCols, tenCols, twentyCols,
15+
tenRows, oneHundredRows, oneThousandRows,
16+
} from './fake-table-data';
17+
18+
/** component: mdc-table */
19+
20+
@Component({
21+
selector: 'app-root',
22+
templateUrl: './app.module.html',
23+
encapsulation: ViewEncapsulation.None,
24+
styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
25+
})
26+
export class TableBenchmarkApp {
27+
fiveCols = fiveCols;
28+
tenCols = tenCols;
29+
twentyCols = twentyCols;
30+
31+
tenRows = tenRows;
32+
oneHundredRows = oneHundredRows;
33+
oneThousandRows = oneThousandRows;
34+
35+
isTenRowsFiveColsVisible = false;
36+
isOneHundredRowsFiveColsVisible = false;
37+
isOneThousandRowsFiveColsVisible = false;
38+
isTenRowsTenColsVisible = false;
39+
isTenRowsTwentyColsVisible = false;
40+
41+
hide() {
42+
this.isTenRowsFiveColsVisible = false;
43+
this.isOneHundredRowsFiveColsVisible = false;
44+
this.isOneThousandRowsFiveColsVisible = false;
45+
this.isTenRowsTenColsVisible = false;
46+
this.isTenRowsTwentyColsVisible = false;
47+
}
48+
49+
showTenRowsFiveCols() { this.isTenRowsFiveColsVisible = true; }
50+
showOneHundredRowsFiveCols() { this.isOneHundredRowsFiveColsVisible = true; }
51+
showOneThousandRowsFiveCols() { this.isOneThousandRowsFiveColsVisible = true; }
52+
showTenRowsTenCols() { this.isTenRowsTenColsVisible = true; }
53+
showTenRowsTwentyCols() { this.isTenRowsTwentyColsVisible = true; }
54+
}
55+
56+
57+
@NgModule({
58+
declarations: [BasicTable, TableBenchmarkApp],
59+
imports: [
60+
BrowserModule,
61+
MatTableModule,
62+
],
63+
bootstrap: [TableBenchmarkApp],
64+
})
65+
export class AppModule {}

‎test/benchmarks/mdc/table/basic-table.ts

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component, Input} from '@angular/core';
10+
11+
@Component({
12+
selector: 'basic-table',
13+
template: `
14+
<table mat-table [dataSource]="rows" class="mat-elevation-z8">
15+
16+
<ng-container matColumnDef="a">
17+
<th mat-header-cell *matHeaderCellDef> A </th>
18+
<td mat-cell *matCellDef="let cell"> {{cell.a}} </td>
19+
</ng-container>
20+
21+
<ng-container matColumnDef="b">
22+
<th mat-header-cell *matHeaderCellDef> B </th>
23+
<td mat-cell *matCellDef="let cell"> {{cell.b}} </td>
24+
</ng-container>
25+
26+
<ng-container matColumnDef="c">
27+
<th mat-header-cell *matHeaderCellDef> C </th>
28+
<td mat-cell *matCellDef="let cell"> {{cell.c}} </td>
29+
</ng-container>
30+
31+
<ng-container matColumnDef="d">
32+
<th mat-header-cell *matHeaderCellDef> D </th>
33+
<td mat-cell *matCellDef="let cell"> {{cell.d}} </td>
34+
</ng-container>
35+
36+
<ng-container matColumnDef="e">
37+
<th mat-header-cell *matHeaderCellDef> E </th>
38+
<td mat-cell *matCellDef="let cell"> {{cell.e}} </td>
39+
</ng-container>
40+
41+
<ng-container matColumnDef="f">
42+
<th mat-header-cell *matHeaderCellDef> F </th>
43+
<td mat-cell *matCellDef="let cell"> {{cell.f}} </td>
44+
</ng-container>
45+
46+
<ng-container matColumnDef="g">
47+
<th mat-header-cell *matHeaderCellDef> G </th>
48+
<td mat-cell *matCellDef="let cell"> {{cell.g}} </td>
49+
</ng-container>
50+
51+
<ng-container matColumnDef="h">
52+
<th mat-header-cell *matHeaderCellDef> H </th>
53+
<td mat-cell *matCellDef="let cell"> {{cell.h}} </td>
54+
</ng-container>
55+
56+
<ng-container matColumnDef="i">
57+
<th mat-header-cell *matHeaderCellDef> I </th>
58+
<td mat-cell *matCellDef="let cell"> {{cell.i}} </td>
59+
</ng-container>
60+
61+
<ng-container matColumnDef="j">
62+
<th mat-header-cell *matHeaderCellDef> J </th>
63+
<td mat-cell *matCellDef="let cell"> {{cell.j}} </td>
64+
</ng-container>
65+
66+
<ng-container matColumnDef="k">
67+
<th mat-header-cell *matHeaderCellDef> K </th>
68+
<td mat-cell *matCellDef="let cell"> {{cell.k}} </td>
69+
</ng-container>
70+
71+
<ng-container matColumnDef="l">
72+
<th mat-header-cell *matHeaderCellDef> L </th>
73+
<td mat-cell *matCellDef="let cell"> {{cell.l}} </td>
74+
</ng-container>
75+
76+
<ng-container matColumnDef="m">
77+
<th mat-header-cell *matHeaderCellDef> M </th>
78+
<td mat-cell *matCellDef="let cell"> {{cell.m}} </td>
79+
</ng-container>
80+
81+
<ng-container matColumnDef="n">
82+
<th mat-header-cell *matHeaderCellDef> N </th>
83+
<td mat-cell *matCellDef="let cell"> {{cell.n}} </td>
84+
</ng-container>
85+
86+
<ng-container matColumnDef="o">
87+
<th mat-header-cell *matHeaderCellDef> O </th>
88+
<td mat-cell *matCellDef="let cell"> {{cell.o}} </td>
89+
</ng-container>
90+
91+
<ng-container matColumnDef="p">
92+
<th mat-header-cell *matHeaderCellDef> P </th>
93+
<td mat-cell *matCellDef="let cell"> {{cell.p}} </td>
94+
</ng-container>
95+
96+
<ng-container matColumnDef="q">
97+
<th mat-header-cell *matHeaderCellDef> Q </th>
98+
<td mat-cell *matCellDef="let cell"> {{cell.q}} </td>
99+
</ng-container>
100+
101+
<ng-container matColumnDef="r">
102+
<th mat-header-cell *matHeaderCellDef> R </th>
103+
<td mat-cell *matCellDef="let cell"> {{cell.r}} </td>
104+
</ng-container>
105+
106+
<ng-container matColumnDef="s">
107+
<th mat-header-cell *matHeaderCellDef> S </th>
108+
<td mat-cell *matCellDef="let cell"> {{cell.s}} </td>
109+
</ng-container>
110+
111+
<ng-container matColumnDef="t">
112+
<th mat-header-cell *matHeaderCellDef> T </th>
113+
<td mat-cell *matCellDef="let cell"> {{cell.t}} </td>
114+
</ng-container>
115+
116+
<tr mat-header-row *matHeaderRowDef="cols"></tr>
117+
<tr mat-row *matRowDef="let row; columns: cols;"></tr>
118+
</table>
119+
`,
120+
styles: ['table { width: 100% }', 'th.mat-header-cell, td.mat-cell { padding: 0px 20px }'],
121+
})
122+
export class BasicTable {
123+
@Input() cols: string[];
124+
@Input() rows: Record<string, string>[];
125+
}

‎test/benchmarks/mdc/table/fake-table-data.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
function numToChar(num: number): string {
10+
return String.fromCharCode('a'.charCodeAt(0) + num);
11+
}
12+
13+
function generateTableColumnNames(numColumns: number) {
14+
return Array(numColumns).fill(null).map((_, index) => numToChar(index));
15+
}
16+
17+
function generateTableData(numRows: number, cols: string[]): Record<string, string>[] {
18+
return Array(numRows).fill(null).map((_, index) => generateTableDataRow(cols, `${index + 1}`));
19+
}
20+
21+
function generateTableDataRow(cols: string[], value: string): Record<string, string> {
22+
return cols.reduce((rowData, columnName) => ({...rowData, [columnName]: value}), {});
23+
}
24+
25+
export const fiveCols = generateTableColumnNames(5);
26+
export const tenCols = generateTableColumnNames(10);
27+
export const twentyCols = generateTableColumnNames(20);
28+
29+
export const tenRows = generateTableData(10, twentyCols);
30+
export const oneHundredRows = generateTableData(100, twentyCols);
31+
export const oneThousandRows = generateTableData(1000, twentyCols);

‎test/benchmarks/mdc/table/table.perf-spec.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {$, browser} from 'protractor';
10+
import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
11+
12+
function runTableRenderBenchmark(testId: string, buttonId: string) {
13+
return runBenchmark({
14+
id: testId,
15+
url: '',
16+
ignoreBrowserSynchronization: true,
17+
params: [],
18+
prepare: async () => await $('#hide').click(),
19+
work: async () => await $(buttonId).click(),
20+
});
21+
}
22+
23+
describe('table performance benchmarks', () => {
24+
beforeAll(() => {
25+
browser.rootEl = '#root';
26+
});
27+
28+
it('renders 10 rows with 5 cols', async() => {
29+
await runTableRenderBenchmark('table-render-10-rows-5-cols', '#show-10-rows-5-cols');
30+
});
31+
32+
it('renders 100 rows with 5 cols', async() => {
33+
await runTableRenderBenchmark('table-render-100-rows-5-cols', '#show-100-rows-5-cols');
34+
});
35+
36+
it('renders 1000 rows with 5 cols', async() => {
37+
await runTableRenderBenchmark('table-render-1000-rows-5-cols', '#show-1000-rows-5-cols');
38+
});
39+
40+
it('renders 10 rows with 10 cols', async() => {
41+
await runTableRenderBenchmark('table-render-10-rows-10-cols', '#show-10-rows-10-cols');
42+
});
43+
44+
it('renders 10 rows with 20 cols', async() => {
45+
await runTableRenderBenchmark('table-render-10-rows-20-cols', '#show-10-rows-20-cols');
46+
});
47+
});

0 commit comments

Comments
 (0)