Skip to content

Commit f298de3

Browse files
wagnermacielwagnermaciel
authored
test(mdc-menu): add performance tests for mdc-menu (#20494)
* test(mdc-menu): add performance tests for mdc-menu * Also cleaned up a small ts error I was getting from the material menu's driver. * fix ts errors and reword test ids * change tabs to spaces
1 parent ca464bd commit f298de3

File tree

6 files changed

+196
-26
lines changed

6 files changed

+196
-26
lines changed

‎test/benchmarks/material/menu/menu.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,32 @@
22
<button mat-button [matMenuTriggerFor]="nested">Nested Menu</button>
33

44
<mat-menu #basic="matMenu">
5-
<button mat-menu-item>Item 1</button>
6-
<button mat-menu-item>Item 2</button>
7-
<button mat-menu-item>Item 3</button>
8-
<button mat-menu-item>Item 4</button>
9-
<button mat-menu-item>Item 5</button>
10-
<button mat-menu-item>Item 6</button>
11-
<button mat-menu-item>Item 7</button>
12-
<button mat-menu-item>Item 8</button>
13-
<button mat-menu-item>Item 9</button>
14-
<button mat-menu-item>Item 10</button>
5+
<button mat-menu-item>Item 1</button>
6+
<button mat-menu-item>Item 2</button>
7+
<button mat-menu-item>Item 3</button>
8+
<button mat-menu-item>Item 4</button>
9+
<button mat-menu-item>Item 5</button>
10+
<button mat-menu-item>Item 6</button>
11+
<button mat-menu-item>Item 7</button>
12+
<button mat-menu-item>Item 8</button>
13+
<button mat-menu-item>Item 9</button>
14+
<button mat-menu-item>Item 10</button>
1515
</mat-menu>
1616

1717
<!-- Nested Menu with 3 Levels -->
1818

1919
<mat-menu #nested="matMenu">
20-
<button mat-menu-item [matMenuTriggerFor]="sub1">Sub Menu 1</button>
20+
<button mat-menu-item [matMenuTriggerFor]="sub1">Sub Menu 1</button>
2121
</mat-menu>
2222

2323
<mat-menu #sub1="matMenu">
24-
<button mat-menu-item [matMenuTriggerFor]="sub2">Sub Menu 2</button>
24+
<button mat-menu-item [matMenuTriggerFor]="sub2">Sub Menu 2</button>
2525
</mat-menu>
2626

2727
<mat-menu #sub2="matMenu">
28-
<button mat-menu-item>Item 1</button>
29-
<button mat-menu-item>Item 2</button>
30-
<button mat-menu-item>Item 3</button>
31-
<button mat-menu-item>Item 4</button>
32-
<button mat-menu-item>Item 5</button>
28+
<button mat-menu-item>Item 1</button>
29+
<button mat-menu-item>Item 2</button>
30+
<button mat-menu-item>Item 3</button>
31+
<button mat-menu-item>Item 4</button>
32+
<button mat-menu-item>Item 5</button>
3333
</mat-menu>

‎test/benchmarks/material/menu/menu.perf-spec.ts

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,44 +20,50 @@ async function closeMenu(trigger: ElementFinder) {
2020
}
2121

2222
describe('menu performance benchmarks', () => {
23-
it('opens a basic menu', async () => {
23+
it('opens and closes a basic menu', async () => {
2424
let trigger: ElementFinder;
2525
await runBenchmark({
26-
id: 'basic-menu-open',
26+
id: 'open-and-close-basic-menu',
2727
url: '',
2828
ignoreBrowserSynchronization: true,
2929
params: [],
30-
setup: async () => trigger = element(by.buttonText('Basic Menu')),
30+
setup: async () => {
31+
trigger = element(by.buttonText('Basic Menu'));
32+
},
3133
work: async () => {
3234
await trigger.click();
3335
await closeMenu(trigger);
3436
}
3537
});
3638
});
3739

38-
it('opens the root menu of a set of nested menus', async () => {
40+
it('opens and closes the root menu of a set of nested menus', async () => {
3941
let trigger: ElementFinder;
4042
await runBenchmark({
41-
id: 'nested-menu-open-shallow',
43+
id: 'shallow-open-and-close-nested-menu',
4244
url: '',
4345
ignoreBrowserSynchronization: true,
4446
params: [],
45-
setup: async () => trigger = element(by.buttonText('Nested Menu')),
47+
setup: async () => {
48+
trigger = element(by.buttonText('Nested Menu'));
49+
},
4650
work: async () => {
4751
await trigger.click();
4852
await closeMenu(trigger);
4953
},
5054
});
5155
});
5256

53-
it('fully opens a menu with nested menus', async () => {
57+
it('fully opens and closes a menu with nested menus', async () => {
5458
let trigger: ElementFinder;
5559
await runBenchmark({
56-
id: 'menu-open-deep',
60+
id: 'deep-open-and-close-nested-menus',
5761
url: '',
5862
ignoreBrowserSynchronization: true,
5963
params: [],
60-
setup: async () => trigger = element(by.buttonText('Nested Menu')),
64+
setup: () => {
65+
trigger = element(by.buttonText('Nested Menu'));
66+
},
6167
work: async () => {
6268
await trigger.click();
6369
await element(by.buttonText('Sub Menu 1')).click();

‎test/benchmarks/mdc/menu/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+
# 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 = ":menu.perf-spec.ts",
9+
driver_deps = [
10+
"@npm//@angular/dev-infra-private",
11+
"@npm//protractor",
12+
"@npm//@types/jasmine",
13+
],
14+
ng_assets = [":menu.html"],
15+
ng_deps = [
16+
"@npm//@angular/core",
17+
"@npm//@angular/platform-browser",
18+
"//src/material-experimental/mdc-menu",
19+
],
20+
ng_srcs = [":app.module.ts"],
21+
prefix = "",
22+
styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
23+
)

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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 {MatMenuModule} from '@angular/material-experimental/mdc-menu';
12+
13+
/** component: mdc-menu */
14+
15+
@Component({
16+
selector: 'app-root',
17+
templateUrl: './menu.html',
18+
encapsulation: ViewEncapsulation.None,
19+
styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
20+
})
21+
export class MenuBenchmarkApp {
22+
}
23+
24+
25+
@NgModule({
26+
declarations: [MenuBenchmarkApp],
27+
imports: [
28+
BrowserModule,
29+
MatMenuModule,
30+
],
31+
bootstrap: [MenuBenchmarkApp]
32+
})
33+
export class AppModule {}

‎test/benchmarks/mdc/menu/menu.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<button mat-button [matMenuTriggerFor]="basic">Basic Menu</button>
2+
<button mat-button [matMenuTriggerFor]="nested">Nested Menu</button>
3+
4+
<mat-menu #basic="matMenu">
5+
<button mat-menu-item>Item 1</button>
6+
<button mat-menu-item>Item 2</button>
7+
<button mat-menu-item>Item 3</button>
8+
<button mat-menu-item>Item 4</button>
9+
<button mat-menu-item>Item 5</button>
10+
<button mat-menu-item>Item 6</button>
11+
<button mat-menu-item>Item 7</button>
12+
<button mat-menu-item>Item 8</button>
13+
<button mat-menu-item>Item 9</button>
14+
<button mat-menu-item>Item 10</button>
15+
</mat-menu>
16+
17+
<!-- Nested Menu with 3 Levels -->
18+
19+
<mat-menu #nested="matMenu">
20+
<button mat-menu-item [matMenuTriggerFor]="sub1">Sub Menu 1</button>
21+
</mat-menu>
22+
23+
<mat-menu #sub1="matMenu">
24+
<button mat-menu-item [matMenuTriggerFor]="sub2">Sub Menu 2</button>
25+
</mat-menu>
26+
27+
<mat-menu #sub2="matMenu">
28+
<button mat-menu-item>Item 1</button>
29+
<button mat-menu-item>Item 2</button>
30+
<button mat-menu-item>Item 3</button>
31+
<button mat-menu-item>Item 4</button>
32+
<button mat-menu-item>Item 5</button>
33+
</mat-menu>

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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 {$, by, element, ElementFinder, Key} from 'protractor';
10+
import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
11+
12+
// Clicking to close a menu is problematic. This is a solution that uses `.sendKeys()` avoids
13+
// issues with `.click()`.
14+
15+
async function closeMenu(trigger: ElementFinder) {
16+
const backdropId = await trigger.getAttribute('aria-controls');
17+
if (await $(`#${backdropId}`).isPresent()) {
18+
await $(`#${backdropId}`).sendKeys(Key.ESCAPE);
19+
}
20+
}
21+
22+
describe('menu performance benchmarks', () => {
23+
it('opens and closes a basic menu', async () => {
24+
let trigger: ElementFinder;
25+
await runBenchmark({
26+
id: 'open-and-close-basic-menu',
27+
url: '',
28+
ignoreBrowserSynchronization: true,
29+
params: [],
30+
setup: async () => {
31+
trigger = element(by.buttonText('Basic Menu'));
32+
},
33+
work: async () => {
34+
await trigger.click();
35+
await closeMenu(trigger);
36+
}
37+
});
38+
});
39+
40+
it('opens and closes the root menu of a set of nested menus', async () => {
41+
let trigger: ElementFinder;
42+
await runBenchmark({
43+
id: 'shallow-open-and-close-nested-menu',
44+
url: '',
45+
ignoreBrowserSynchronization: true,
46+
params: [],
47+
setup: async () => {
48+
trigger = element(by.buttonText('Nested Menu'));
49+
},
50+
work: async () => {
51+
await trigger.click();
52+
await closeMenu(trigger);
53+
},
54+
});
55+
});
56+
57+
it('fully opens and closes a menu with nested menus', async () => {
58+
let trigger: ElementFinder;
59+
await runBenchmark({
60+
id: 'deep-open-and-close-nested-menus',
61+
url: '',
62+
ignoreBrowserSynchronization: true,
63+
params: [],
64+
setup: async () => {
65+
trigger = element(by.buttonText('Nested Menu'));
66+
},
67+
work: async () => {
68+
await trigger.click();
69+
await element(by.buttonText('Sub Menu 1')).click();
70+
await element(by.buttonText('Sub Menu 2')).click();
71+
await closeMenu(trigger);
72+
},
73+
});
74+
});
75+
});

0 commit comments

Comments
 (0)