From f875904624394aa888ace79cb8ca74fd3fa2128d Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 17 Jul 2020 11:30:50 -0700 Subject: [PATCH 1/6] test(mdc-button): add performance tests for mdc-button --- test/benchmarks/mdc/button/button.perf-spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/benchmarks/mdc/button/button.perf-spec.ts b/test/benchmarks/mdc/button/button.perf-spec.ts index 7321b9a7f495..c51025e2c2aa 100644 --- a/test/benchmarks/mdc/button/button.perf-spec.ts +++ b/test/benchmarks/mdc/button/button.perf-spec.ts @@ -32,7 +32,11 @@ describe('button performance benchmarks', () => { ignoreBrowserSynchronization: true, params: [], setup: async () => await $('#show').click(), +<<<<<<< HEAD work: async () => await $('.mat-mdc-raised-button').click(), +======= + work: async () => await $('.mat-raised-button').click(), +>>>>>>> f1ae4d955... test(mdc-button): add performance tests for mdc-button }); }); }); From e5270184ff021a1b89df427c9400dbe8319378a7 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 17 Jul 2020 11:35:13 -0700 Subject: [PATCH 2/6] 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 def64344fc20b8e18cb2d96ce0f1928b42cb8c43 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 28 Jul 2020 15:49:18 -0700 Subject: [PATCH 3/6] 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 4434e16923fd60ffac6deeec072873e3912d3a3d Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 28 Jul 2020 16:02:59 -0700 Subject: [PATCH 4/6] fixup! test(mdc-button): add performance tests for mdc-button --- test/benchmarks/mdc/button/button.perf-spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/benchmarks/mdc/button/button.perf-spec.ts b/test/benchmarks/mdc/button/button.perf-spec.ts index c51025e2c2aa..25c06cc384a1 100644 --- a/test/benchmarks/mdc/button/button.perf-spec.ts +++ b/test/benchmarks/mdc/button/button.perf-spec.ts @@ -32,11 +32,15 @@ describe('button performance benchmarks', () => { ignoreBrowserSynchronization: true, params: [], setup: async () => await $('#show').click(), +<<<<<<< HEAD <<<<<<< HEAD work: async () => await $('.mat-mdc-raised-button').click(), ======= work: async () => await $('.mat-raised-button').click(), >>>>>>> f1ae4d955... test(mdc-button): add performance tests for mdc-button +======= + work: async () => await $('.mat-mdc-raised-button').click(), +>>>>>>> 63f2747fc... fixup! test(mdc-button): add performance tests for mdc-button }); }); }); From a142851931fe07e474d77590d10ed0b223bd1e69 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 29 Jul 2020 13:13:53 -0700 Subject: [PATCH 5/6] test(mdc-form-field): add performance tests for mdc-form-field --- test/benchmarks/mdc/form-field/BUILD.bazel | 23 +++++++ test/benchmarks/mdc/form-field/app.module.ts | 61 +++++++++++++++++++ .../mdc/form-field/form-field.perf-spec.ts | 35 +++++++++++ 3 files changed, 119 insertions(+) create mode 100644 test/benchmarks/mdc/form-field/BUILD.bazel create mode 100644 test/benchmarks/mdc/form-field/app.module.ts create mode 100755 test/benchmarks/mdc/form-field/form-field.perf-spec.ts diff --git a/test/benchmarks/mdc/form-field/BUILD.bazel b/test/benchmarks/mdc/form-field/BUILD.bazel new file mode 100644 index 000000000000..dbb36ee40a15 --- /dev/null +++ b/test/benchmarks/mdc/form-field/BUILD.bazel @@ -0,0 +1,23 @@ +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 = ":form-field.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-form-field", + "//src/material-experimental/mdc-input", + ], + ng_srcs = [":app.module.ts"], + prefix = "", + styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"], +) diff --git a/test/benchmarks/mdc/form-field/app.module.ts b/test/benchmarks/mdc/form-field/app.module.ts new file mode 100644 index 000000000000..3fe4efa8a41a --- /dev/null +++ b/test/benchmarks/mdc/form-field/app.module.ts @@ -0,0 +1,61 @@ +/** + * @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 {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; +import {MatInputModule} from '@angular/material-experimental/mdc-input'; + +/** component: mdc-form-field */ + +@Component({ + selector: 'app-root', + template: ` + + + + + + + Input + + + + + Textarea + + + `, + encapsulation: ViewEncapsulation.None, + styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'], +}) +export class FormFieldBenchmarkApp { + isInputVisible = false; + isTextareaVisible = false; + + showInput() { this.isInputVisible = true; } + showTextarea() { this.isTextareaVisible = true; } + + hide() { + this.isInputVisible = false; + this.isTextareaVisible = false; + } +} + + +@NgModule({ + declarations: [FormFieldBenchmarkApp], + imports: [ + BrowserModule, + MatFormFieldModule, + MatInputModule, + ], + providers: [], + bootstrap: [FormFieldBenchmarkApp], +}) +export class AppModule {} diff --git a/test/benchmarks/mdc/form-field/form-field.perf-spec.ts b/test/benchmarks/mdc/form-field/form-field.perf-spec.ts new file mode 100755 index 000000000000..e1b0af3eeda8 --- /dev/null +++ b/test/benchmarks/mdc/form-field/form-field.perf-spec.ts @@ -0,0 +1,35 @@ +/** + * @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'; + +function runFormFieldRenderBenchmark(testId: string, showBtnId: string) { + return runBenchmark({ + id: testId, + url: '', + ignoreBrowserSynchronization: true, + params: [], + prepare: async () => await $('#hide').click(), + work: async () => await $(showBtnId).click() + }); +} + +describe('form field performance benchmarks', () => { + beforeAll(() => { + browser.rootEl = '#root'; + }); + + it('renders an input in a form field', async() => { + await runFormFieldRenderBenchmark('input-form-field-render', '#show-input'); + }); + + it('renders an textarea in a form field', async() => { + await runFormFieldRenderBenchmark('textarea-form-field-render', '#show-textarea'); + }); +}); From db79c5f822ea37208e43af541ebcd35e350a409b Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 30 Jul 2020 09:44:05 -0700 Subject: [PATCH 6/6] fix(mdc-form-field-benchmark): remove unnecessary provider --- test/benchmarks/mdc/form-field/app.module.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/test/benchmarks/mdc/form-field/app.module.ts b/test/benchmarks/mdc/form-field/app.module.ts index 3fe4efa8a41a..29ca3b3b913c 100644 --- a/test/benchmarks/mdc/form-field/app.module.ts +++ b/test/benchmarks/mdc/form-field/app.module.ts @@ -55,7 +55,6 @@ export class FormFieldBenchmarkApp { MatFormFieldModule, MatInputModule, ], - providers: [], bootstrap: [FormFieldBenchmarkApp], }) export class AppModule {}