Skip to content

Commit 9e6660d

Browse files
wagnermacielandrewseguin
wagnermaciel
authored and
andrewseguin
committed
test(tabs): add performance tests for mat-tabs (#19752)
* test(tabs): add performance tests for mat-tabs * fixup! test(tabs): add performance tests for mat-tabs * fixup! test(tabs): add performance tests for mat-tabs * fixup! test(tabs): add performance tests for mat-tabs * fixup! test(tabs): add performance tests for mat-tabs (cherry picked from commit 094a49c)
1 parent 3326cf4 commit 9e6660d

File tree

4 files changed

+179
-0
lines changed

4 files changed

+179
-0
lines changed

‎test/benchmarks/material/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/tabs",
18+
],
19+
ng_srcs = [
20+
":app.module.ts",
21+
":fake-tab-data.ts",
22+
],
23+
prefix = "",
24+
styles = ["//src/material/prebuilt-themes:indigo-pink"],
25+
)

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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/tabs';
13+
import {threeTabs, tenTabs, twentyTabs} from './fake-tab-data';
14+
15+
/** component: mat-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/core/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+
providers: [],
56+
bootstrap: [TabsBenchmarkApp],
57+
})
58+
export class AppModule {}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
// tslint:disable:max-line-length
10+
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>';

‎test/benchmarks/material/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-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-tab-header-pagination-after');
77+
while (!isTabPaginatorDisabled(nextBtn)) {
78+
await nextBtn.click();
79+
}
80+
}
81+
});
82+
});
83+
});

0 commit comments

Comments
 (0)