Skip to content

Commit caba725

Browse files
wagnermacielwagnermaciel
committed
fixup! test(benchmarks): Add performance tests for mat-table
1 parent 4f91b06 commit caba725

File tree

4 files changed

+194
-138
lines changed

4 files changed

+194
-138
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ component_benchmark(
1212
"@npm//@angular/core",
1313
"@npm//@angular/platform-browser",
1414
"//src/material/table",
15-
"//src/cdk/a11y",
1615
],
1716
ng_srcs = [
1817
":app.module.ts",

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

Lines changed: 61 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,99 @@
11
/**
22
* @license
3-
* Copyright Google Inc. All Rights Reserved.
3+
* Copyright Google LLC All Rights Reserved.
44
*
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
import {A11yModule} from '@angular/cdk/a11y';
8+
99
import {Component, NgModule, ViewEncapsulation} from '@angular/core';
10+
import {MatTableModule} from '@angular/material/table';
1011
import {BrowserModule} from '@angular/platform-browser';
1112
import {BasicTable, GenericObject} from './basic-table';
12-
import {MatTableModule} from '@angular/material/table';
1313

14-
/**
15-
* @title Checkbox benchmark component.
16-
*/
14+
function createRows(numRows: number, cols: string[]): GenericObject[] {
15+
const rows: GenericObject[] = new Array(numRows);
16+
for (let i = 0; i < rows.length; i++) {
17+
rows[i] = createRow(cols, (i + 1).toString());
18+
}
19+
return rows;
20+
}
21+
22+
function createRow(cols: string[], value: string): GenericObject {
23+
const row: GenericObject = {};
24+
for (let i = 0; i < cols.length; i++) {
25+
const col = cols[i];
26+
row[col] = value;
27+
}
28+
return row;
29+
}
30+
31+
const fiveCols = ['a', 'b', 'c', 'd', 'e'];
32+
const tenCols = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
33+
const twentyCols = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't'];
34+
35+
const tenRows = createRows(10, twentyCols);
36+
const oneHundredRows = createRows(100, twentyCols);
37+
const oneThousandRows = createRows(1000, twentyCols);
38+
1739
@Component({
1840
selector: 'app-root',
1941
template: `
20-
<button id="show" (click)="show()">Show</button>
2142
<button id="hide" (click)="hide()">Hide</button>
43+
<button id="show-10-rows-5-cols" (click)="showTenRowsFiveCols()">Show 10 Rows 5 Cols</button>
44+
<button id="show-100-rows-5-cols" (click)="showOneHundredRowsFiveCols()">Show 100 Rows 5 Cols</button>
45+
<button id="show-1000-rows-5-cols" (click)="showOneThousandRowsFiveCols()">Show 1000 Rows 5 Cols</button>
46+
<button id="show-10-rows-10-cols" (click)="showTenRowsTenCols()">Show 10 Rows 10 Cols</button>
47+
<button id="show-10-rows-20-cols" (click)="showTenRowsTwentyCols()">Show 10 Rows 20 Cols</button>
2248
23-
<button id="ten-rows" (click)="updateTable({ numRows: 10 })">10 Rows</button>
24-
<button id="one-hundred-rows" (click)="updateTable({ numRows: 100 })">100 Rows</button>
25-
<button id="one-thousand-rows" (click)="updateTable({ numRows: 1000 })">1000 Rows</button>
26-
27-
<button id="five-cols" (click)="updateTable({ numCols: 5 })">5 Cols</button>
28-
<button id="ten-cols" (click)="updateTable({ numCols: 10 })">10 Cols</button>
29-
<button id="twenty-cols" (click)="updateTable({ numCols: 20 })">20 Cols</button>
49+
<basic-table [rows]="tenRows" [cols]="fiveCols" *ngIf="isTenRowsFiveColsVisible"></basic-table>
50+
<basic-table [rows]="oneHundredRows" [cols]="fiveCols" *ngIf="isOneHundredRowsFiveColsVisible"></basic-table>
51+
<basic-table [rows]="oneThousandRows" [cols]="fiveCols" *ngIf="isOneThousandRowsFiveColsVisible"></basic-table>
3052
31-
<ng-container *ngIf="isVisible">
32-
<basic-table [rows]="createRows()" [cols]="createCols()"></basic-table>
33-
</ng-container>
53+
<basic-table [rows]="tenRows" [cols]="tenCols" *ngIf="isTenRowsTenColsVisible"></basic-table>
54+
<basic-table [rows]="tenRows" [cols]="twentyCols" *ngIf="isTenRowsTwentyColsVisible"></basic-table>
3455
`,
3556
encapsulation: ViewEncapsulation.None,
3657
styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
3758
})
3859
export class TableBenchmarkApp {
39-
isVisible = false;
40-
numRows = 10;
41-
numCols = 5;
60+
fiveCols = fiveCols;
61+
tenCols = tenCols;
62+
twentyCols = twentyCols;
4263

43-
show() { this.isVisible = true; }
44-
hide() { this.isVisible = false; }
64+
tenRows = tenRows;
65+
oneHundredRows = oneHundredRows;
66+
oneThousandRows = oneThousandRows;
4567

46-
/**
47-
* The cols array is just a string array of size numCols whose values are 0 to numCols.
48-
*/
49-
createCols() {
50-
const cols = new Array(this.numCols);
51-
for (let i = 0; i < this.numCols; i++) {
52-
cols[i] = `${i}`;
53-
}
54-
return cols;
55-
}
68+
isTenRowsFiveColsVisible = false;
69+
isOneHundredRowsFiveColsVisible = false;
70+
isOneThousandRowsFiveColsVisible = false;
71+
isTenRowsTenColsVisible = false;
72+
isTenRowsTwentyColsVisible = false;
5673

57-
/**
58-
* The rows array is an object array.
59-
* Each object's keys are the values in the cols array, and the values are "ROW - COL".
60-
*/
61-
createRows() {
62-
const rows = new Array(this.numRows);
63-
for (let i = 0; i < this.numRows; i++) {
64-
const row: GenericObject = {};
65-
for (let j = 0; j < this.numCols; j++) {
66-
row[j] = `${i} - ${j}`;
67-
}
68-
rows[i] = row;
69-
}
70-
return rows;
74+
hide() {
75+
this.isTenRowsFiveColsVisible = false;
76+
this.isOneHundredRowsFiveColsVisible = false;
77+
this.isOneThousandRowsFiveColsVisible = false;
78+
this.isTenRowsTenColsVisible = false;
79+
this.isTenRowsTwentyColsVisible = false;
7180
}
7281

73-
/**
74-
* Sets the number of rows and cols to display in our table.
75-
*
76-
* @param param0.numRows The new number of rows to display.
77-
* @param param0.numCols The new number of cols to display.
78-
*/
79-
updateTable({ numRows, numCols }: { numRows?: number, numCols?: number}) {
80-
if (numRows !== undefined) { this.numRows = numRows; }
81-
if (numCols !== undefined) { this.numCols = numCols; }
82-
}
82+
showTenRowsFiveCols() { this.isTenRowsFiveColsVisible = true; }
83+
showOneHundredRowsFiveCols() { this.isOneHundredRowsFiveColsVisible = true; }
84+
showOneThousandRowsFiveCols() { this.isOneThousandRowsFiveColsVisible = true; }
85+
showTenRowsTenCols() { this.isTenRowsTenColsVisible = true; }
86+
showTenRowsTwentyCols() { this.isTenRowsTwentyColsVisible = true; }
8387
}
8488

8589

8690
@NgModule({
8791
declarations: [BasicTable, TableBenchmarkApp],
8892
imports: [
89-
A11yModule,
9093
BrowserModule,
9194
MatTableModule,
9295
],
9396
providers: [],
94-
bootstrap: [TableBenchmarkApp]
97+
bootstrap: [TableBenchmarkApp],
9598
})
9699
export class AppModule {}

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

Lines changed: 107 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
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+
19
import {Component, Input} from '@angular/core';
210

311
/**
@@ -10,19 +18,109 @@ export interface GenericObject {
1018
[key: string]: any;
1119
}
1220

13-
/**
14-
* @title A basic table.
15-
* @input rows - Objects whose properties are the cols provided.
16-
* @input cols - An array of strings.
17-
*/
1821
@Component({
1922
selector: 'basic-table',
2023
template: `
2124
<table mat-table [dataSource]="rows" class="mat-elevation-z8">
2225
23-
<ng-container *ngFor="let col of cols" matColumnDef="{{ col }}">
24-
<th mat-header-cell *matHeaderCellDef> {{ col }} </th>
25-
<td mat-cell *matCellDef="let cell"> {{ cell[col] }} </td>
26+
<ng-container matColumnDef="a">
27+
<th mat-header-cell *matHeaderCellDef> A </th>
28+
<td mat-cell *matCellDef="let cell"> {{cell.a}} </td>
29+
</ng-container>
30+
31+
<ng-container matColumnDef="b">
32+
<th mat-header-cell *matHeaderCellDef> B </th>
33+
<td mat-cell *matCellDef="let cell"> {{cell.b}} </td>
34+
</ng-container>
35+
36+
<ng-container matColumnDef="c">
37+
<th mat-header-cell *matHeaderCellDef> C </th>
38+
<td mat-cell *matCellDef="let cell"> {{cell.c}} </td>
39+
</ng-container>
40+
41+
<ng-container matColumnDef="d">
42+
<th mat-header-cell *matHeaderCellDef> D </th>
43+
<td mat-cell *matCellDef="let cell"> {{cell.d}} </td>
44+
</ng-container>
45+
46+
<ng-container matColumnDef="e">
47+
<th mat-header-cell *matHeaderCellDef> E </th>
48+
<td mat-cell *matCellDef="let cell"> {{cell.e}} </td>
49+
</ng-container>
50+
51+
<ng-container matColumnDef="f">
52+
<th mat-header-cell *matHeaderCellDef> F </th>
53+
<td mat-cell *matCellDef="let cell"> {{cell.f}} </td>
54+
</ng-container>
55+
56+
<ng-container matColumnDef="g">
57+
<th mat-header-cell *matHeaderCellDef> G </th>
58+
<td mat-cell *matCellDef="let cell"> {{cell.g}} </td>
59+
</ng-container>
60+
61+
<ng-container matColumnDef="h">
62+
<th mat-header-cell *matHeaderCellDef> H </th>
63+
<td mat-cell *matCellDef="let cell"> {{cell.h}} </td>
64+
</ng-container>
65+
66+
<ng-container matColumnDef="i">
67+
<th mat-header-cell *matHeaderCellDef> I </th>
68+
<td mat-cell *matCellDef="let cell"> {{cell.i}} </td>
69+
</ng-container>
70+
71+
<ng-container matColumnDef="j">
72+
<th mat-header-cell *matHeaderCellDef> J </th>
73+
<td mat-cell *matCellDef="let cell"> {{cell.j}} </td>
74+
</ng-container>
75+
76+
<ng-container matColumnDef="k">
77+
<th mat-header-cell *matHeaderCellDef> K </th>
78+
<td mat-cell *matCellDef="let cell"> {{cell.k}} </td>
79+
</ng-container>
80+
81+
<ng-container matColumnDef="l">
82+
<th mat-header-cell *matHeaderCellDef> L </th>
83+
<td mat-cell *matCellDef="let cell"> {{cell.l}} </td>
84+
</ng-container>
85+
86+
<ng-container matColumnDef="m">
87+
<th mat-header-cell *matHeaderCellDef> M </th>
88+
<td mat-cell *matCellDef="let cell"> {{cell.m}} </td>
89+
</ng-container>
90+
91+
<ng-container matColumnDef="n">
92+
<th mat-header-cell *matHeaderCellDef> N </th>
93+
<td mat-cell *matCellDef="let cell"> {{cell.n}} </td>
94+
</ng-container>
95+
96+
<ng-container matColumnDef="o">
97+
<th mat-header-cell *matHeaderCellDef> O </th>
98+
<td mat-cell *matCellDef="let cell"> {{cell.o}} </td>
99+
</ng-container>
100+
101+
<ng-container matColumnDef="p">
102+
<th mat-header-cell *matHeaderCellDef> P </th>
103+
<td mat-cell *matCellDef="let cell"> {{cell.p}} </td>
104+
</ng-container>
105+
106+
<ng-container matColumnDef="q">
107+
<th mat-header-cell *matHeaderCellDef> Q </th>
108+
<td mat-cell *matCellDef="let cell"> {{cell.q}} </td>
109+
</ng-container>
110+
111+
<ng-container matColumnDef="r">
112+
<th mat-header-cell *matHeaderCellDef> R </th>
113+
<td mat-cell *matCellDef="let cell"> {{cell.r}} </td>
114+
</ng-container>
115+
116+
<ng-container matColumnDef="s">
117+
<th mat-header-cell *matHeaderCellDef> S </th>
118+
<td mat-cell *matCellDef="let cell"> {{cell.s}} </td>
119+
</ng-container>
120+
121+
<ng-container matColumnDef="t">
122+
<th mat-header-cell *matHeaderCellDef> T </th>
123+
<td mat-cell *matCellDef="let cell"> {{cell.t}} </td>
26124
</ng-container>
27125
28126
<tr mat-header-row *matHeaderRowDef="cols"></tr>
@@ -32,6 +130,6 @@ export interface GenericObject {
32130
styles: ['table { width: 100% }', 'th.mat-header-cell, td.mat-cell { padding: 0px 20px }'],
33131
})
34132
export class BasicTable {
35-
@Input() rows: GenericObject[];
36133
@Input() cols: string[];
134+
@Input() rows: GenericObject[];
37135
}

0 commit comments

Comments
 (0)