Skip to content

Commit 856f496

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 * Left a todo in the checkbox benchmark's BUILD file to remember to update the component_benchmark once the desired changes are made
1 parent 72c38f7 commit 856f496

File tree

6 files changed

+434
-11
lines changed

6 files changed

+434
-11
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: 5 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",
@@ -66,11 +66,13 @@
6666
"zone.js": "~0.10.3"
6767
},
6868
"devDependencies": {
69+
"@angular-devkit/build-optimizer": "^0.1000.0-rc.2",
6970
"@angular-devkit/core": "^10.0.0-rc.2",
7071
"@angular-devkit/schematics": "^10.0.0-rc.2",
7172
"@angular/bazel": "^10.0.0-rc.2",
73+
"@angular/benchpress": "^0.2.0",
7274
"@angular/compiler-cli": "^10.0.0-rc.2",
73-
"@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#2ac83eb462cb25c46a761d34dec030e360055016",
75+
"@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#54a5865a219e89202d6ca128775e6a2489b9dac1",
7476
"@angular/platform-browser-dynamic": "^10.0.0-rc.2",
7577
"@angular/platform-server": "^10.0.0-rc.2",
7678
"@angular/router": "^10.0.0-rc.2",
@@ -80,6 +82,7 @@
8082
"@bazel/jasmine": "^1.6.0",
8183
"@bazel/karma": "^1.6.0",
8284
"@bazel/protractor": "^1.6.0",
85+
"@bazel/terser": "^1.4.1",
8386
"@bazel/typescript": "^1.6.0",
8487
"@firebase/app-types": "^0.3.2",
8588
"@octokit/rest": "16.28.7",

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

‎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('renders a checked checkbox', 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('renders an unchecked checkbox', 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('renders an indeterminate checkbox', 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('updates from unchecked to 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('updates from checked to 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)