From 1f56f72e6ca5c0b023b01d45e335193933c69330 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 17 Jul 2020 11:35:13 -0700 Subject: [PATCH 1/4] fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink --- src/material-experimental/mdc-theming/BUILD.bazel | 1 + 1 file changed, 1 insertion(+) diff --git a/src/material-experimental/mdc-theming/BUILD.bazel b/src/material-experimental/mdc-theming/BUILD.bazel index 97e47f697dd3..34ea15e30d91 100644 --- a/src/material-experimental/mdc-theming/BUILD.bazel +++ b/src/material-experimental/mdc-theming/BUILD.bazel @@ -48,5 +48,6 @@ sass_binary( deps = [ ":all_themes", "//src/material-experimental/mdc-typography:all_typography", + "//src/material/core:theming_scss_lib", ], ) From 269ed1eb3c81be53c56f2a59a239747881367492 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 28 Jul 2020 15:49:18 -0700 Subject: [PATCH 2/4] fixup! fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink --- src/material-experimental/mdc-theming/BUILD.bazel | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material-experimental/mdc-theming/BUILD.bazel b/src/material-experimental/mdc-theming/BUILD.bazel index 34ea15e30d91..97e47f697dd3 100644 --- a/src/material-experimental/mdc-theming/BUILD.bazel +++ b/src/material-experimental/mdc-theming/BUILD.bazel @@ -48,6 +48,5 @@ sass_binary( deps = [ ":all_themes", "//src/material-experimental/mdc-typography:all_typography", - "//src/material/core:theming_scss_lib", ], ) From 6964642c60bab4cef8a7c93ef85611b9871b14c8 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 29 Jul 2020 12:18:18 -0700 Subject: [PATCH 3/4] test(mdc-radio): add performance tests for mdc-radio --- test/benchmarks/mdc/radio/BUILD.bazel | 22 +++++++ test/benchmarks/mdc/radio/app.module.ts | 66 ++++++++++++++++++++ test/benchmarks/mdc/radio/radio.perf-spec.ts | 50 +++++++++++++++ 3 files changed, 138 insertions(+) create mode 100644 test/benchmarks/mdc/radio/BUILD.bazel create mode 100644 test/benchmarks/mdc/radio/app.module.ts create mode 100755 test/benchmarks/mdc/radio/radio.perf-spec.ts diff --git a/test/benchmarks/mdc/radio/BUILD.bazel b/test/benchmarks/mdc/radio/BUILD.bazel new file mode 100644 index 000000000000..18f52f7b81ef --- /dev/null +++ b/test/benchmarks/mdc/radio/BUILD.bazel @@ -0,0 +1,22 @@ +load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark") + +# TODO(wagnermaciel): Update this target to provide indigo-pink in a way that doesn't require having to import it with +# stylesUrls inside the components once `component_benchmark` supports asset injection. + +component_benchmark( + name = "benchmark", + driver = ":radio.perf-spec.ts", + driver_deps = [ + "@npm//@angular/dev-infra-private", + "@npm//protractor", + "@npm//@types/jasmine", + ], + ng_deps = [ + "@npm//@angular/core", + "@npm//@angular/platform-browser", + "//src/material-experimental/mdc-radio", + ], + ng_srcs = [":app.module.ts"], + prefix = "", + styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"], +) diff --git a/test/benchmarks/mdc/radio/app.module.ts b/test/benchmarks/mdc/radio/app.module.ts new file mode 100644 index 000000000000..df29b54c0568 --- /dev/null +++ b/test/benchmarks/mdc/radio/app.module.ts @@ -0,0 +1,66 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Component, NgModule, ViewEncapsulation} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {MatRadioModule} from '@angular/material-experimental/mdc-radio'; + +/** component: mdc-radio-button */ + +@Component({ + selector: 'app-root', + template: ` + + + + + + + + Option 1 + Option 2 + + + + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + Option 6 + Option 7 + Option 8 + Option 9 + Option 10 + + `, + encapsulation: ViewEncapsulation.None, + styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'], +}) +export class RadioBenchmarkApp { + isTwoVisible = false; + isTenVisible = false; + + showTwo() { this.isTwoVisible = true; } + hideTwo() { this.isTwoVisible = false; } + + showTen() { this.isTenVisible = true; } + hideTen() { this.isTenVisible = false; } +} + + +@NgModule({ + declarations: [RadioBenchmarkApp], + imports: [ + BrowserModule, + MatRadioModule, + ], + providers: [], + bootstrap: [RadioBenchmarkApp], +}) +export class AppModule {} diff --git a/test/benchmarks/mdc/radio/radio.perf-spec.ts b/test/benchmarks/mdc/radio/radio.perf-spec.ts new file mode 100755 index 000000000000..37acd08808c7 --- /dev/null +++ b/test/benchmarks/mdc/radio/radio.perf-spec.ts @@ -0,0 +1,50 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {$, browser} from 'protractor'; +import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities'; + +describe('radio button performance benchmarks', () => { + beforeAll(() => { + browser.rootEl = '#root'; + }); + + it('renders two radio buttons', async() => { + await runBenchmark({ + id: 'render-two-radio-buttons', + url: '', + ignoreBrowserSynchronization: true, + params: [], + prepare: async () => await $('#hide-two').click(), + work: async () => await $('#show-two').click(), + }); + }); + + it('renders ten radio buttons', async() => { + await runBenchmark({ + id: 'render-ten-radio-buttons', + url: '', + ignoreBrowserSynchronization: true, + params: [], + prepare: async () => await $('#hide-ten').click(), + work: async () => await $('#show-ten').click(), + }); + }); + + it('changing between radio buttons', async() => { + await runBenchmark({ + id: 'click-radio-button', + url: '', + ignoreBrowserSynchronization: true, + params: [], + setup: async() => await $('#show-two').click(), + prepare: async() => await $('#btn-1').click(), + work: async () => await $('#btn-2').click(), + }); + }); +}); From a59606480f1ed32000fe151fbdd45986096aa41a Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 30 Jul 2020 09:14:49 -0700 Subject: [PATCH 4/4] fix(mdc-radio-benchmark): remove unnecessary provider --- test/benchmarks/mdc/radio/app.module.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/test/benchmarks/mdc/radio/app.module.ts b/test/benchmarks/mdc/radio/app.module.ts index df29b54c0568..d1a9b15a3a3a 100644 --- a/test/benchmarks/mdc/radio/app.module.ts +++ b/test/benchmarks/mdc/radio/app.module.ts @@ -60,7 +60,6 @@ export class RadioBenchmarkApp { BrowserModule, MatRadioModule, ], - providers: [], bootstrap: [RadioBenchmarkApp], }) export class AppModule {}