Skip to content

Commit f4da874

Browse files
wagnermacielandrewseguin
authored andcommitted
test(mdc-checkbox): add performance tests for mdc-checkbox (#20129)
* fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink * fixup! fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink * test(mdc-checkbox): add performance tests for mdc-checkbox * fix(benchmarks): remove unnecessary providers * fixup! test(mdc-checkbox): add performance tests for mdc-checkbox * fixup! test(mdc-checkbox): add performance tests for mdc-checkbox * fixup! test(mdc-checkbox): add performance tests for mdc-checkbox (cherry picked from commit df516c5)
1 parent e84374d commit f4da874

File tree

12 files changed

+185
-10
lines changed

12 files changed

+185
-10
lines changed

test/benchmarks/material/card/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export class CardBenchmarkApp {
3030
hide() { this.isVisible = false; }
3131
}
3232

33-
3433
@NgModule({
3534
declarations: [CardBenchmarkApp],
3635
imports: [

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
2929
styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
3030
})
3131
export class CheckboxBenchmarkApp {
32+
33+
// isChecked is used to maintain the buttons checked state even after it has been hidden. This is
34+
// used, for example, when we want to test the render speed of a checked vs unchecked checkbox.
35+
3236
isChecked = false;
3337
isVisible = false;
3438
isIndeterminate = false;
@@ -39,7 +43,6 @@ export class CheckboxBenchmarkApp {
3943
toggleIsChecked() { this.isChecked = !this.isChecked; }
4044
}
4145

42-
4346
@NgModule({
4447
declarations: [CheckboxBenchmarkApp],
4548
imports: [

test/benchmarks/material/chips/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ export class ChipsBenchmarkApp {
4646
hideMultiple() { this.isMultipleVisible = false; }
4747
}
4848

49-
5049
@NgModule({
5150
declarations: [ChipsBenchmarkApp],
5251
imports: [

test/benchmarks/material/form-field/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ export class FormFieldBenchmarkApp {
5959
}
6060
}
6161

62-
6362
@NgModule({
6463
declarations: [FormFieldBenchmarkApp],
6564
imports: [

test/benchmarks/material/radio/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ export class RadioBenchmarkApp {
5353
hideTen() { this.isTenVisible = false; }
5454
}
5555

56-
5756
@NgModule({
5857
declarations: [RadioBenchmarkApp],
5958
imports: [

test/benchmarks/material/slide-toggle/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export class SlideToggleBenchmarkApp {
3131
hide() { this.isVisible = false; }
3232
}
3333

34-
3534
@NgModule({
3635
declarations: [SlideToggleBenchmarkApp],
3736
imports: [

test/benchmarks/material/table/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ export class TableBenchmarkApp {
5454
showTenRowsTwentyCols() { this.isTenRowsTwentyColsVisible = true; }
5555
}
5656

57-
5857
@NgModule({
5958
declarations: [BasicTable, TableBenchmarkApp],
6059
imports: [

test/benchmarks/mdc/button/app.module.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,12 @@ export class ButtonBenchmarkApp {
3030
hide() { this.isVisible = false; }
3131
}
3232

33-
3433
@NgModule({
3534
declarations: [ButtonBenchmarkApp],
3635
imports: [
3736
BrowserModule,
3837
MatButtonModule,
3938
],
40-
providers: [],
4139
bootstrap: [ButtonBenchmarkApp],
4240
})
4341
export class AppModule {}

test/benchmarks/mdc/card/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export class CardBenchmarkApp {
3030
hide() { this.isVisible = false; }
3131
}
3232

33-
3433
@NgModule({
3534
declarations: [CardBenchmarkApp],
3635
imports: [
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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-experimental/mdc-checkbox",
18+
],
19+
ng_srcs = [":app.module.ts"],
20+
prefix = "",
21+
styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
22+
)
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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 {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
12+
13+
/** component: mdc-checkbox */
14+
15+
@Component({
16+
selector: 'app-root',
17+
template: `
18+
<button id="show" (click)="show()">Show</button>
19+
<button id="hide" (click)="hide()">Hide</button>
20+
<button id="indeterminate" (click)="indeterminate()">Indeterminate</button>
21+
22+
<mat-checkbox *ngIf="isVisible"
23+
[checked]="isChecked"
24+
[indeterminate]="isIndeterminate"
25+
(change)="toggleIsChecked()">
26+
Check me!</mat-checkbox>
27+
`,
28+
encapsulation: ViewEncapsulation.None,
29+
styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
30+
})
31+
export class CheckboxBenchmarkApp {
32+
33+
// isChecked is used to maintain the buttons checked state even after it has been hidden. This is
34+
// used, for example, when we want to test the render speed of a checked vs unchecked checkbox.
35+
36+
isChecked = false;
37+
isVisible = false;
38+
isIndeterminate = false;
39+
40+
show() { this.isVisible = true; }
41+
hide() { this.isVisible = false; }
42+
indeterminate() { this.isIndeterminate = true; }
43+
toggleIsChecked() { this.isChecked = !this.isChecked; }
44+
}
45+
46+
@NgModule({
47+
declarations: [CheckboxBenchmarkApp],
48+
imports: [
49+
BrowserModule,
50+
MatCheckboxModule,
51+
],
52+
bootstrap: [CheckboxBenchmarkApp],
53+
})
54+
export class AppModule {}
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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} from 'protractor';
10+
import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
11+
12+
describe('checkbox performance benchmarks', () => {
13+
beforeAll(() => {
14+
browser.rootEl = '#root';
15+
});
16+
17+
it('renders a checked checkbox', async() => {
18+
await runBenchmark({
19+
id: 'checkbox-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-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-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-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-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)