Skip to content

Commit e13a79d

Browse files
wagnermacielwagnermaciel
authored
test(mdc-tabs): add performance tests for mdc-tabs (#20496)
* test(mdc-tabs): add performance tests for mdc-tabs * use template string to format fake tab data correctly * fix indentation and remove unnecessary providers * fix selectors for mdc tabs benchmark * remove ':' from source files
1 parent e7f5e4f commit e13a79d

File tree

6 files changed

+261
-12
lines changed

6 files changed

+261
-12
lines changed

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ import {threeTabs, tenTabs, twentyTabs} from './fake-tab-data';
1717
@Component({
1818
selector: 'app-root',
1919
template: `
20-
<button id="show-three-tabs" (click)="showThreeTabs()">Show Three Tabs</button>
21-
<button id="show-ten-tabs" (click)="showTenTabs()">Show Ten Tabs</button>
22-
<button id="show-twenty-tabs" (click)="showTwentyTabs()">Show Twenty Tabs</button>
23-
<button id="hide" (click)="hide()">Hide</button>
20+
<button id="show-three-tabs" (click)="showThreeTabs()">Show Three Tabs</button>
21+
<button id="show-ten-tabs" (click)="showTenTabs()">Show Ten Tabs</button>
22+
<button id="show-twenty-tabs" (click)="showTwentyTabs()">Show Twenty Tabs</button>
23+
<button id="hide" (click)="hide()">Hide</button>
2424
25-
<mat-tab-group *ngIf="areThreeTabsVisible">${threeTabs}</mat-tab-group>
26-
<mat-tab-group *ngIf="areTenTabsVisible">${tenTabs}</mat-tab-group>
27-
<mat-tab-group *ngIf="areTwentyTabsVisible">${twentyTabs}</mat-tab-group>
25+
<mat-tab-group *ngIf="areThreeTabsVisible">${threeTabs}</mat-tab-group>
26+
<mat-tab-group *ngIf="areTenTabsVisible">${tenTabs}</mat-tab-group>
27+
<mat-tab-group *ngIf="areTwentyTabsVisible">${twentyTabs}</mat-tab-group>
2828
`,
2929
encapsulation: ViewEncapsulation.None,
3030
styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
@@ -52,7 +52,6 @@ export class TabsBenchmarkApp {
5252
BrowserAnimationsModule,
5353
MatTabsModule,
5454
],
55-
providers: [],
5655
bootstrap: [TabsBenchmarkApp],
5756
})
5857
export class AppModule {}

‎test/benchmarks/material/tabs/fake-tab-data.ts

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,44 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
// tslint:disable:max-line-length
9+
export const threeTabs = `
10+
<mat-tab label="Tab #1"> Content #1 </mat-tab>
11+
<mat-tab label="Tab #2"> Content #2 </mat-tab>
12+
<mat-tab label="Tab #3"> Content #3 </mat-tab>
13+
`;
1014

11-
export const threeTabs = '<mat-tab label="Tab #1"> Content #1 </mat-tab><mat-tab label="Tab #2"> Content #2 </mat-tab><mat-tab label="Tab #3"> Content #3 </mat-tab>';
12-
export const tenTabs = '<mat-tab label="Tab #1"> Content #1 </mat-tab><mat-tab label="Tab #2"> Content #2 </mat-tab><mat-tab label="Tab #3"> Content #3 </mat-tab><mat-tab label="Tab #4"> Content #4 </mat-tab><mat-tab label="Tab #5"> Content #5 </mat-tab><mat-tab label="Tab #6"> Content #6 </mat-tab><mat-tab label="Tab #7"> Content #7 </mat-tab><mat-tab label="Tab #8"> Content #8 </mat-tab><mat-tab label="Tab #9"> Content #9 </mat-tab><mat-tab label="Tab #10"> Content #10 </mat-tab>';
13-
export const twentyTabs = '<mat-tab label="Tab #1"> Content #1 </mat-tab><mat-tab label="Tab #2"> Content #2 </mat-tab><mat-tab label="Tab #3"> Content #3 </mat-tab><mat-tab label="Tab #4"> Content #4 </mat-tab><mat-tab label="Tab #5"> Content #5 </mat-tab><mat-tab label="Tab #6"> Content #6 </mat-tab><mat-tab label="Tab #7"> Content #7 </mat-tab><mat-tab label="Tab #8"> Content #8 </mat-tab><mat-tab label="Tab #9"> Content #9 </mat-tab><mat-tab label="Tab #10"> Content #10 </mat-tab><mat-tab label="Tab #11"> Content #11 </mat-tab><mat-tab label="Tab #12"> Content #12 </mat-tab><mat-tab label="Tab #13"> Content #13 </mat-tab><mat-tab label="Tab #14"> Content #14 </mat-tab><mat-tab label="Tab #15"> Content #15 </mat-tab><mat-tab label="Tab #16"> Content #16 </mat-tab><mat-tab label="Tab #17"> Content #17 </mat-tab><mat-tab label="Tab #18"> Content #18 </mat-tab><mat-tab label="Tab #19"> Content #19 </mat-tab><mat-tab label="Tab #20"> Content #20 </mat-tab>';
15+
export const tenTabs = `
16+
<mat-tab label="Tab #1"> Content #1 </mat-tab>
17+
<mat-tab label="Tab #2"> Content #2 </mat-tab>
18+
<mat-tab label="Tab #3"> Content #3 </mat-tab>
19+
<mat-tab label="Tab #4"> Content #4 </mat-tab>
20+
<mat-tab label="Tab #5"> Content #5 </mat-tab>
21+
<mat-tab label="Tab #6"> Content #6 </mat-tab>
22+
<mat-tab label="Tab #7"> Content #7 </mat-tab>
23+
<mat-tab label="Tab #8"> Content #8 </mat-tab>
24+
<mat-tab label="Tab #9"> Content #9 </mat-tab>
25+
<mat-tab label="Tab #10"> Content #10 </mat-tab>
26+
`;
27+
28+
export const twentyTabs = `
29+
<mat-tab label="Tab #1"> Content #1 </mat-tab>
30+
<mat-tab label="Tab #2"> Content #2 </mat-tab>
31+
<mat-tab label="Tab #3"> Content #3 </mat-tab>
32+
<mat-tab label="Tab #4"> Content #4 </mat-tab>
33+
<mat-tab label="Tab #5"> Content #5 </mat-tab>
34+
<mat-tab label="Tab #6"> Content #6 </mat-tab>
35+
<mat-tab label="Tab #7"> Content #7 </mat-tab>
36+
<mat-tab label="Tab #8"> Content #8 </mat-tab>
37+
<mat-tab label="Tab #9"> Content #9 </mat-tab>
38+
<mat-tab label="Tab #10"> Content #10 </mat-tab>
39+
<mat-tab label="Tab #11"> Content #11 </mat-tab>
40+
<mat-tab label="Tab #12"> Content #12 </mat-tab>
41+
<mat-tab label="Tab #13"> Content #13 </mat-tab>
42+
<mat-tab label="Tab #14"> Content #14 </mat-tab>
43+
<mat-tab label="Tab #15"> Content #15 </mat-tab>
44+
<mat-tab label="Tab #16"> Content #16 </mat-tab>
45+
<mat-tab label="Tab #17"> Content #17 </mat-tab>
46+
<mat-tab label="Tab #18"> Content #18 </mat-tab>
47+
<mat-tab label="Tab #19"> Content #19 </mat-tab>
48+
<mat-tab label="Tab #20"> Content #20 </mat-tab>
49+
`;

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
2+
3+
# TODO(wagnermaciel): Update this target to provide indigo-pink in a way that doesn't require having to import it with
4+
# stylesUrls inside the components once `component_benchmark` supports asset injection.
5+
6+
component_benchmark(
7+
name = "benchmark",
8+
driver = "tabs.perf-spec.ts",
9+
driver_deps = [
10+
"@npm//@angular/dev-infra-private",
11+
"@npm//protractor",
12+
"@npm//@types/jasmine",
13+
],
14+
ng_deps = [
15+
"@npm//@angular/core",
16+
"@npm//@angular/platform-browser",
17+
"//src/material-experimental/mdc-tabs",
18+
],
19+
ng_srcs = [
20+
"app.module.ts",
21+
"fake-tab-data.ts",
22+
],
23+
prefix = "",
24+
styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
25+
)

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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 {BrowserModule} from '@angular/platform-browser';
11+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
12+
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
13+
import {threeTabs, tenTabs, twentyTabs} from './fake-tab-data';
14+
15+
/** component: mdc-tab */
16+
17+
@Component({
18+
selector: 'app-root',
19+
template: `
20+
<button id="show-three-tabs" (click)="showThreeTabs()">Show Three Tabs</button>
21+
<button id="show-ten-tabs" (click)="showTenTabs()">Show Ten Tabs</button>
22+
<button id="show-twenty-tabs" (click)="showTwentyTabs()">Show Twenty Tabs</button>
23+
<button id="hide" (click)="hide()">Hide</button>
24+
25+
<mat-tab-group *ngIf="areThreeTabsVisible">${threeTabs}</mat-tab-group>
26+
<mat-tab-group *ngIf="areTenTabsVisible">${tenTabs}</mat-tab-group>
27+
<mat-tab-group *ngIf="areTwentyTabsVisible">${twentyTabs}</mat-tab-group>
28+
`,
29+
encapsulation: ViewEncapsulation.None,
30+
styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
31+
})
32+
export class TabsBenchmarkApp {
33+
areThreeTabsVisible = false;
34+
areTenTabsVisible = false;
35+
areTwentyTabsVisible = false;
36+
37+
showThreeTabs() { this.areThreeTabsVisible = true; }
38+
showTenTabs() { this.areTenTabsVisible = true; }
39+
showTwentyTabs() { this.areTwentyTabsVisible = true; }
40+
41+
hide() {
42+
this.areThreeTabsVisible = false;
43+
this.areTenTabsVisible = false;
44+
this.areTwentyTabsVisible = false;
45+
}
46+
}
47+
48+
@NgModule({
49+
declarations: [TabsBenchmarkApp],
50+
imports: [
51+
BrowserModule,
52+
BrowserAnimationsModule,
53+
MatTabsModule,
54+
],
55+
bootstrap: [TabsBenchmarkApp],
56+
})
57+
export class AppModule {}

‎test/benchmarks/mdc/tabs/fake-tab-data.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
export const threeTabs = `
10+
<mat-tab label="Tab #1"> Content #1 </mat-tab>
11+
<mat-tab label="Tab #2"> Content #2 </mat-tab>
12+
<mat-tab label="Tab #3"> Content #3 </mat-tab>
13+
`;
14+
15+
export const tenTabs = `
16+
<mat-tab label="Tab #1"> Content #1 </mat-tab>
17+
<mat-tab label="Tab #2"> Content #2 </mat-tab>
18+
<mat-tab label="Tab #3"> Content #3 </mat-tab>
19+
<mat-tab label="Tab #4"> Content #4 </mat-tab>
20+
<mat-tab label="Tab #5"> Content #5 </mat-tab>
21+
<mat-tab label="Tab #6"> Content #6 </mat-tab>
22+
<mat-tab label="Tab #7"> Content #7 </mat-tab>
23+
<mat-tab label="Tab #8"> Content #8 </mat-tab>
24+
<mat-tab label="Tab #9"> Content #9 </mat-tab>
25+
<mat-tab label="Tab #10"> Content #10 </mat-tab>
26+
`;
27+
28+
export const twentyTabs = `
29+
<mat-tab label="Tab #1"> Content #1 </mat-tab>
30+
<mat-tab label="Tab #2"> Content #2 </mat-tab>
31+
<mat-tab label="Tab #3"> Content #3 </mat-tab>
32+
<mat-tab label="Tab #4"> Content #4 </mat-tab>
33+
<mat-tab label="Tab #5"> Content #5 </mat-tab>
34+
<mat-tab label="Tab #6"> Content #6 </mat-tab>
35+
<mat-tab label="Tab #7"> Content #7 </mat-tab>
36+
<mat-tab label="Tab #8"> Content #8 </mat-tab>
37+
<mat-tab label="Tab #9"> Content #9 </mat-tab>
38+
<mat-tab label="Tab #10"> Content #10 </mat-tab>
39+
<mat-tab label="Tab #11"> Content #11 </mat-tab>
40+
<mat-tab label="Tab #12"> Content #12 </mat-tab>
41+
<mat-tab label="Tab #13"> Content #13 </mat-tab>
42+
<mat-tab label="Tab #14"> Content #14 </mat-tab>
43+
<mat-tab label="Tab #15"> Content #15 </mat-tab>
44+
<mat-tab label="Tab #16"> Content #16 </mat-tab>
45+
<mat-tab label="Tab #17"> Content #17 </mat-tab>
46+
<mat-tab label="Tab #18"> Content #18 </mat-tab>
47+
<mat-tab label="Tab #19"> Content #19 </mat-tab>
48+
<mat-tab label="Tab #20"> Content #20 </mat-tab>
49+
`;

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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, ElementFinder} from 'protractor';
10+
import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
11+
12+
describe('tabs performance benchmarks', () => {
13+
beforeAll(() => {
14+
browser.rootEl = '#root';
15+
});
16+
17+
it('renders three tabs', async() => {
18+
await runBenchmark({
19+
id: 'three-tab-render',
20+
url: '',
21+
ignoreBrowserSynchronization: true,
22+
params: [],
23+
prepare: async() => await $('#hide').click(),
24+
work: async() => await $('#show-three-tabs').click(),
25+
});
26+
});
27+
28+
it('renders ten tabs', async() => {
29+
await runBenchmark({
30+
id: 'ten-tab-render',
31+
url: '',
32+
ignoreBrowserSynchronization: true,
33+
params: [],
34+
prepare: async() => await $('#hide').click(),
35+
work: async() => await $('#show-ten-tabs').click(),
36+
});
37+
});
38+
39+
it('renders twenty tabs', async() => {
40+
await runBenchmark({
41+
id: 'twenty-tab-render',
42+
url: '',
43+
ignoreBrowserSynchronization: true,
44+
params: [],
45+
prepare: async() => await $('#hide').click(),
46+
work: async() => await $('#show-twenty-tabs').click(),
47+
});
48+
});
49+
50+
it('switches between tabs', async() => {
51+
await runBenchmark({
52+
id: 'tab-switching',
53+
url: '',
54+
ignoreBrowserSynchronization: true,
55+
params: [],
56+
setup: async() => await $('#show-three-tabs').click(),
57+
prepare: async() => await $('#mat-tab-label-0-0').click(),
58+
work: async() => await $('#mat-tab-label-0-1').click(),
59+
});
60+
});
61+
62+
it('paginates tabs', async() => {
63+
async function isTabPaginatorDisabled(ele: ElementFinder) {
64+
return (await ele.getAttribute('class')).includes('mat-mdc-tab-header-pagination-disabled');
65+
}
66+
await runBenchmark({
67+
id: 'tab-pagination',
68+
url: '',
69+
ignoreBrowserSynchronization: true,
70+
params: [],
71+
prepare: async() => {
72+
await $('#hide').click();
73+
await $('#show-twenty-tabs').click();
74+
},
75+
work: async() => {
76+
const nextBtn = $('.mat-mdc-tab-header-pagination-after');
77+
while (!isTabPaginatorDisabled(nextBtn)) {
78+
await nextBtn.click();
79+
}
80+
}
81+
});
82+
});
83+
});

0 commit comments

Comments
 (0)