Skip to content

Commit 0f41f98

Browse files
wagnermacielwagnermaciel
committed
feat(benchmarks): setup for benchmarking components
* Set up components repo to use dev-infra benchmarking tools * Created first set of benchmark tests for mat-checkbox * Import indigo-pink.scss via the components styleUrls * Set the view encapsulation of the component to none so that the styles from indigo-pink.scss are applied to the whole page * Left a todo in WORKSPACE to remember to deduplicate browsers
1 parent 72c38f7 commit 0f41f98

File tree

6 files changed

+442
-7
lines changed

6 files changed

+442
-7
lines changed

‎WORKSPACE

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,12 @@ rbe_autoconfig(
129129
# a specific Linux kernel that comes with "libx11" in order to run headless browser tests.
130130
repository = "google/rbe-ubuntu16-04-webtest",
131131
)
132+
133+
# Load pinned rules_webtesting browser versions for tests.
134+
#
135+
# todo(wagnermaciel): deduplicate browsers - this will load another version of chromium in the
136+
# repository. We probably want to use the chromium version loaded here (from dev-infra) as that
137+
# one has RBE improvements.
138+
load("@npm_angular_dev_infra_private//browsers:browser_repositories.bzl", _dev_infra_browser_repositories = "browser_repositories")
139+
140+
_dev_infra_browser_repositories()

‎package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"yarn": ">= 1.0.0"
1414
},
1515
"scripts": {
16-
"postinstall": "node tools/postinstall/apply-patches.js && ngcc --properties main --create-ivy-entry-points && node tools/postinstall/update-ngcc-main-fields.js",
16+
"postinstall": "node tools/postinstall/apply-patches.js && ngcc --properties module main --create-ivy-entry-points && node tools/postinstall/update-ngcc-main-fields.js",
1717
"build": "node ./scripts/build-packages-dist.js",
1818
"bazel:buildifier": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,output-group,package-name,package-on-top,redefined-variable,repository-name,same-origin-load,string-iteration,unused-variable,unsorted-dict-items,out-of-order-load",
1919
"bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",
@@ -49,12 +49,15 @@
4949
"version": "10.0.0-rc.0",
5050
"dependencies": {
5151
"@angular/animations": "^10.0.0-rc.2",
52+
"@angular/benchpress": "^0.2.0",
5253
"@angular/common": "^10.0.0-rc.2",
5354
"@angular/compiler": "^10.0.0-rc.2",
5455
"@angular/core": "^10.0.0-rc.2",
56+
"@angular-devkit/build-optimizer": "^0.900.6",
5557
"@angular/elements": "^10.0.0-rc.2",
5658
"@angular/forms": "^10.0.0-rc.2",
5759
"@angular/platform-browser": "^10.0.0-rc.2",
60+
"@bazel/terser": "^1.4.1",
5861
"@types/googlemaps": "^3.39.3",
5962
"@types/youtube": "^0.0.38",
6063
"@webcomponents/custom-elements": "^1.1.0",
@@ -69,8 +72,9 @@
6972
"@angular-devkit/core": "^10.0.0-rc.2",
7073
"@angular-devkit/schematics": "^10.0.0-rc.2",
7174
"@angular/bazel": "^10.0.0-rc.2",
75+
"@angular/benchpress": "^0.2.0",
7276
"@angular/compiler-cli": "^10.0.0-rc.2",
73-
"@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#2ac83eb462cb25c46a761d34dec030e360055016",
77+
"@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds#54a5865a219e89202d6ca128775e6a2489b9dac1",
7478
"@angular/platform-browser-dynamic": "^10.0.0-rc.2",
7579
"@angular/platform-server": "^10.0.0-rc.2",
7680
"@angular/router": "^10.0.0-rc.2",

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
2+
3+
# todo(wagnermaciel): If assets are defined and no index.html is provided, throw error with clear error message.
4+
component_benchmark(
5+
name = "benchmark",
6+
driver = ":checkbox.perf-spec.ts",
7+
driver_deps = [
8+
"@npm//@angular/dev-infra-private",
9+
"@npm//protractor",
10+
"@npm//@types/jasmine",
11+
],
12+
ng_deps = [
13+
"@npm//@angular/core",
14+
"@npm//@angular/platform-browser",
15+
"//src/components-examples/material/checkbox",
16+
"//src/cdk/a11y",
17+
],
18+
ng_srcs = [":app.module.ts"],
19+
prefix = "",
20+
styles = ["//src/material/prebuilt-themes:indigo-pink"],
21+
)

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. 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+
import {A11yModule} from '@angular/cdk/a11y';
9+
import {Component, NgModule, ViewEncapsulation} from '@angular/core';
10+
import {BrowserModule} from '@angular/platform-browser';
11+
import {MatCheckboxModule} from '@angular/material/checkbox';
12+
13+
/**
14+
* @title Checkbox benchmark component.
15+
*/
16+
@Component({
17+
selector: 'app-root',
18+
template: `
19+
<button id="show" (click)="show()">Show</button>
20+
<button id="hide" (click)="hide()">Hide</button>
21+
<button id="indeterminate" (click)="indeterminate()">Indeterminate</button>
22+
23+
<ng-container *ngIf="isVisible">
24+
<mat-checkbox
25+
[checked]="isChecked"
26+
[indeterminate]="isIndeterminate"
27+
(change)="toggleIsChecked()"
28+
>Check me!</mat-checkbox>
29+
</ng-container>
30+
`,
31+
encapsulation: ViewEncapsulation.None,
32+
styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
33+
})
34+
export class CheckboxBenchmarkApp {
35+
isChecked = false;
36+
isVisible = false;
37+
isIndeterminate = false;
38+
39+
show() { this.isVisible = true; }
40+
hide() { this.isVisible = false; }
41+
indeterminate() { this.isIndeterminate = true; }
42+
toggleIsChecked() { this.isChecked = !this.isChecked; }
43+
}
44+
45+
46+
@NgModule({
47+
declarations: [CheckboxBenchmarkApp],
48+
imports: [
49+
A11yModule,
50+
BrowserModule,
51+
MatCheckboxModule,
52+
],
53+
providers: [],
54+
bootstrap: [CheckboxBenchmarkApp]
55+
})
56+
export class AppModule {}

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. 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} from 'protractor';
10+
import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
11+
12+
describe('checkbox overview performance benchmarks', () => {
13+
beforeAll(() => {
14+
browser.rootEl = '#root';
15+
});
16+
17+
it('render (checked)', async() => {
18+
await runBenchmark({
19+
id: 'checkbox-overview-render-checked',
20+
url: '',
21+
ignoreBrowserSynchronization: true,
22+
params: [],
23+
setup: async () => {
24+
await $('#show').click();
25+
await $('mat-checkbox').click();
26+
},
27+
prepare: async () => {
28+
expect(await $('mat-checkbox input').isSelected())
29+
.toBe(true, 'The checkbox should be in a selected state.');
30+
await $('#hide').click();
31+
},
32+
work: async () => await $('#show').click()
33+
});
34+
});
35+
36+
it('render (unchecked)', async() => {
37+
await runBenchmark({
38+
id: 'checkbox-overview-render-unchecked',
39+
url: '',
40+
ignoreBrowserSynchronization: true,
41+
params: [],
42+
setup: async() => await $('#show').click(),
43+
prepare: async () => {
44+
expect(await $('mat-checkbox input').isSelected())
45+
.toBe(false, 'The checkbox should be in an unselected state.');
46+
await $('#hide').click();
47+
},
48+
work: async () => await $('#show').click()
49+
});
50+
});
51+
52+
it('render (indeterminate)', async() => {
53+
await runBenchmark({
54+
id: 'checkbox-overview-render-indeterminate',
55+
url: '',
56+
ignoreBrowserSynchronization: true,
57+
params: [],
58+
setup: async() => {
59+
await $('#show').click();
60+
await $('#indeterminate').click();
61+
},
62+
prepare: async () => {
63+
expect(await $('mat-checkbox input').getAttribute('indeterminate'))
64+
.toBe('true', 'The checkbox should be in an indeterminate state');
65+
await $('#hide').click();
66+
},
67+
work: async () => await $('#show').click()
68+
});
69+
});
70+
71+
it('click (unchecked -> checked)', async() => {
72+
await runBenchmark({
73+
id: 'checkbox-overview-click-unchecked-to-checked',
74+
url: '',
75+
ignoreBrowserSynchronization: true,
76+
params: [],
77+
setup: async () => {
78+
await $('#show').click();
79+
await $('mat-checkbox').click();
80+
},
81+
prepare: async () => {
82+
await $('mat-checkbox').click();
83+
expect(await $('mat-checkbox input').isSelected())
84+
.toBe(false, 'The checkbox should be in an unchecked state.');
85+
},
86+
work: async () => await $('mat-checkbox').click(),
87+
});
88+
});
89+
90+
it('click (checked -> unchecked)', async() => {
91+
await runBenchmark({
92+
id: 'checkbox-overview-click-checked-to-unchecked',
93+
url: '',
94+
ignoreBrowserSynchronization: true,
95+
params: [],
96+
setup: async () => await $('#show').click(),
97+
prepare: async () => {
98+
await $('mat-checkbox').click();
99+
expect(await $('mat-checkbox input').isSelected())
100+
.toBe(true, 'The checkbox should be in a checked state.');
101+
},
102+
work: async () => await $('mat-checkbox').click(),
103+
});
104+
});
105+
});

0 commit comments

Comments
 (0)