Skip to content

Commit b4c908c

Browse files
wagnermacielwagnermaciel
committed
fixup! test(tabs): add performance tests for mat-tabs
1 parent 596071a commit b4c908c

File tree

4 files changed

+83
-43
lines changed

4 files changed

+83
-43
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ component_benchmark(
1616
"@npm//@angular/platform-browser",
1717
"//src/material/tabs",
1818
],
19-
ng_srcs = [":app.module.ts"],
19+
ng_srcs = [
20+
":app.module.ts",
21+
":fake-tab-data.ts",
22+
],
2023
prefix = "",
2124
styles = ["//src/material/prebuilt-themes:indigo-pink"],
2225
)

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

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,41 @@ import {Component, NgModule, ViewEncapsulation} from '@angular/core';
1010
import {BrowserModule} from '@angular/platform-browser';
1111
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
1212
import {MatTabsModule} from '@angular/material/tabs';
13+
import {threeTabs, tenTabs, twentyTabs} from './fake-tab-data';
14+
15+
/** component: mat-tab */
1316

1417
@Component({
1518
selector: 'app-root',
1619
template: `
17-
<button id="show-small-tab-group" (click)="showSmallTabGroup()">Show Small Tab Group</button>
18-
<button id="show-large-tab-group" (click)="showLargeTabGroup()">Show Large Tab Group</button>
19-
<button id="hide" (click)="hide()">Hide</button>
20-
21-
<mat-tab-group *ngIf="isSmallTabGroupVisible">
22-
<mat-tab label="First"> Content 1 </mat-tab>
23-
<mat-tab label="Second"> Content 2 </mat-tab>
24-
<mat-tab label="Third"> Content 3 </mat-tab>
25-
</mat-tab-group>
26-
27-
<mat-tab-group *ngIf="isLargeTabGroupVisible">
28-
<mat-tab label="First"> Content 1 </mat-tab>
29-
<mat-tab label="Second"> Content 2 </mat-tab>
30-
<mat-tab label="Third"> Content 3 </mat-tab>
31-
<mat-tab label="Fourth"> Content 4 </mat-tab>
32-
<mat-tab label="Fifth"> Content 5 </mat-tab>
33-
<mat-tab label="Sixth"> Content 6 </mat-tab>
34-
<mat-tab label="Seventh"> Content 7 </mat-tab>
35-
<mat-tab label="Eigth"> Content 8 </mat-tab>
36-
<mat-tab label="Ninth"> Content 9 </mat-tab>
37-
<mat-tab label="Tenth"> Content 10 </mat-tab>
38-
</mat-tab-group>
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>
3928
`,
4029
encapsulation: ViewEncapsulation.None,
4130
styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
4231
})
4332
export class TabsBenchmarkApp {
44-
isSmallTabGroupVisible = false;
45-
isLargeTabGroupVisible = false;
33+
areThreeTabsVisible = false;
34+
areTenTabsVisible = false;
35+
areTwentyTabsVisible = false;
4636

47-
showSmallTabGroup() { this.isSmallTabGroupVisible = true; }
48-
showLargeTabGroup() { this.isLargeTabGroupVisible = true; }
37+
showThreeTabs() { this.areThreeTabsVisible = true; }
38+
showTenTabs() { this.areTenTabsVisible = true; }
39+
showTwentyTabs() { this.areTwentyTabsVisible = true; }
4940

5041
hide() {
51-
this.isSmallTabGroupVisible = false;
52-
this.isLargeTabGroupVisible = false;
42+
this.areThreeTabsVisible = false;
43+
this.areTenTabsVisible = false;
44+
this.areTwentyTabsVisible = false;
5345
}
5446
}
5547

56-
5748
@NgModule({
5849
declarations: [TabsBenchmarkApp],
5950
imports: [

‎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: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,44 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {$, $$, browser} from 'protractor';
9+
import {$, $$, browser, ElementFinder} from 'protractor';
1010
import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
1111

1212
describe('tabs performance benchmarks', () => {
1313
beforeAll(() => {
1414
browser.rootEl = '#root';
1515
});
1616

17-
it('renders a small tab group', async() => {
17+
it('renders three tabs', async() => {
1818
await runBenchmark({
19-
id: 'small-tab-group-render',
19+
id: 'three-tab-render',
2020
url: '',
2121
ignoreBrowserSynchronization: true,
2222
params: [],
23-
prepare: async () => await $('#hide').click(),
24-
work: async () => await $('#show-small-tab-group').click(),
23+
prepare: async() => await $('#hide').click(),
24+
work: async() => await $('#show-three-tabs').click(),
2525
});
2626
});
2727

28-
it('renders a large tab group', async() => {
28+
it('renders ten tabs', async() => {
2929
await runBenchmark({
30-
id: 'large-tab-group-render',
30+
id: 'ten-tab-render',
3131
url: '',
3232
ignoreBrowserSynchronization: true,
3333
params: [],
34-
prepare: async () => await $('#hide').click(),
35-
work: async () => await $('#show-large-tab-group').click(),
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(),
3647
});
3748
});
3849

@@ -44,14 +55,36 @@ describe('tabs performance benchmarks', () => {
4455
url: '',
4556
ignoreBrowserSynchronization: true,
4657
params: [],
47-
setup: async () => {
48-
await $('#show-small-tab-group').click();
58+
setup: async() => {
59+
await $('#show-three-tabs').click();
4960
tabs = await $$('.mat-tab-label');
5061
},
51-
prepare: async () => {
62+
prepare: async() => {
5263
tabToClick = tabToClick < tabs.length - 1 ? tabToClick + 1 : 0;
5364
},
54-
work: async () => await tabs[tabToClick].click(),
65+
work: async() => await tabs[tabToClick].click(),
66+
});
67+
});
68+
69+
it('paginates tabs', async() => {
70+
async function isTabPaginatorDisabled(ele: ElementFinder) {
71+
return (await ele.getAttribute('class')).includes('mat-tab-header-pagination-disabled');
72+
}
73+
await runBenchmark({
74+
id: 'tab-pagination',
75+
url: '',
76+
ignoreBrowserSynchronization: true,
77+
params: [],
78+
prepare: async() => {
79+
await $('#hide').click();
80+
await $('#show-twenty-tabs').click();
81+
},
82+
work: async() => {
83+
const nextBtn = $('.mat-tab-header-pagination-after');
84+
while (!isTabPaginatorDisabled(nextBtn)) {
85+
await nextBtn.click();
86+
}
87+
}
5588
});
5689
});
5790
});

0 commit comments

Comments
 (0)