From 38d2010777982d2058fca56d52e0e64374191f18 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 17 Jul 2020 11:35:13 -0700 Subject: [PATCH 1/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 1381af77737ee6bf91c044d45c8e360eadf38022 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 28 Jul 2020 15:49:18 -0700 Subject: [PATCH 2/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 5dfbd0df3314bf575d22b1f2c623d90ed7deb790 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 29 Jul 2020 11:50:13 -0700 Subject: [PATCH 3/6] test(mdc-chips): add performance tests for mdc-chips --- test/benchmarks/mdc/chips/BUILD.bazel | 22 ++++++++ test/benchmarks/mdc/chips/app.module.ts | 59 ++++++++++++++++++++ test/benchmarks/mdc/chips/chips.perf-spec.ts | 49 ++++++++++++++++ 3 files changed, 130 insertions(+) create mode 100644 test/benchmarks/mdc/chips/BUILD.bazel create mode 100644 test/benchmarks/mdc/chips/app.module.ts create mode 100755 test/benchmarks/mdc/chips/chips.perf-spec.ts diff --git a/test/benchmarks/mdc/chips/BUILD.bazel b/test/benchmarks/mdc/chips/BUILD.bazel new file mode 100644 index 000000000000..5a6f65111722 --- /dev/null +++ b/test/benchmarks/mdc/chips/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 = ":chips.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-chips", + ], + ng_srcs = [":app.module.ts"], + prefix = "", + styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"], +) diff --git a/test/benchmarks/mdc/chips/app.module.ts b/test/benchmarks/mdc/chips/app.module.ts new file mode 100644 index 000000000000..844b58a89690 --- /dev/null +++ b/test/benchmarks/mdc/chips/app.module.ts @@ -0,0 +1,59 @@ +/** + * @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 {MatChipsModule} from '@angular/material-experimental/mdc-chips'; + +/** component: mdc-chip */ + +@Component({ + selector: 'app-root', + template: ` + + + + + + + One + + + One + Two + Three + Four + Five + Six + + `, + encapsulation: ViewEncapsulation.None, + styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'], +}) +export class ChipsBenchmarkApp { + isSingleVisible = false; + isMultipleVisible = false; + + showSingle() { this.isSingleVisible = true; } + hideSingle() { this.isSingleVisible = false; } + + showMultiple() { this.isMultipleVisible = true; } + hideMultiple() { this.isMultipleVisible = false; } +} + + +@NgModule({ + declarations: [ChipsBenchmarkApp], + imports: [ + BrowserModule, + MatChipsModule, + ], + providers: [], + bootstrap: [ChipsBenchmarkApp], +}) +export class AppModule {} diff --git a/test/benchmarks/mdc/chips/chips.perf-spec.ts b/test/benchmarks/mdc/chips/chips.perf-spec.ts new file mode 100755 index 000000000000..49cb6edd9b6d --- /dev/null +++ b/test/benchmarks/mdc/chips/chips.perf-spec.ts @@ -0,0 +1,49 @@ +/** + * @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('chip performance benchmarks', () => { + beforeAll(() => { + browser.rootEl = '#root'; + }); + + it('renders a single chip', async() => { + await runBenchmark({ + id: 'single-chip-render', + url: '', + ignoreBrowserSynchronization: true, + params: [], + prepare: async () => await $('#hide-single').click(), + work: async () => await $('#show-single').click(), + }); + }); + + it('renders multiple chips', async() => { + await runBenchmark({ + id: 'multiple-chip-render', + url: '', + ignoreBrowserSynchronization: true, + params: [], + prepare: async () => await $('#hide-multiple').click(), + work: async () => await $('#show-multiple').click(), + }); + }); + + it('clicks a chip', async() => { + await runBenchmark({ + id: 'chip-click', + url: '', + ignoreBrowserSynchronization: true, + params: [], + setup: async() => await $('#show-single').click(), + work: async () => await $('.mat-mdc-chip').click(), + }); + }); +}); From 67967b09cf10c2737a7ee0a22f4bd2516b2ae092 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 30 Jul 2020 09:13:50 -0700 Subject: [PATCH 4/6] fix(mdc-chips-benchmark): remove unnecessary providers --- test/benchmarks/mdc/chips/app.module.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/test/benchmarks/mdc/chips/app.module.ts b/test/benchmarks/mdc/chips/app.module.ts index 844b58a89690..5030537096ec 100644 --- a/test/benchmarks/mdc/chips/app.module.ts +++ b/test/benchmarks/mdc/chips/app.module.ts @@ -53,7 +53,6 @@ export class ChipsBenchmarkApp { BrowserModule, MatChipsModule, ], - providers: [], bootstrap: [ChipsBenchmarkApp], }) export class AppModule {} From f51f19bb87b4371d6091174def289172aa826ee1 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 30 Jul 2020 12:02:56 -0700 Subject: [PATCH 5/6] fix(mdc-chips-benchmark): add tests for grid and listbox --- test/benchmarks/mdc/chips/BUILD.bazel | 1 + test/benchmarks/mdc/chips/app.module.ts | 44 ++++++++------------ test/benchmarks/mdc/chips/chips.html | 35 ++++++++++++++++ test/benchmarks/mdc/chips/chips.perf-spec.ts | 43 ++++++++++--------- 4 files changed, 77 insertions(+), 46 deletions(-) create mode 100644 test/benchmarks/mdc/chips/chips.html diff --git a/test/benchmarks/mdc/chips/BUILD.bazel b/test/benchmarks/mdc/chips/BUILD.bazel index 5a6f65111722..cb6baae52ae0 100644 --- a/test/benchmarks/mdc/chips/BUILD.bazel +++ b/test/benchmarks/mdc/chips/BUILD.bazel @@ -16,6 +16,7 @@ component_benchmark( "@npm//@angular/platform-browser", "//src/material-experimental/mdc-chips", ], + ng_assets = [":chips.html"], ng_srcs = [":app.module.ts"], prefix = "", styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"], diff --git a/test/benchmarks/mdc/chips/app.module.ts b/test/benchmarks/mdc/chips/app.module.ts index 5030537096ec..d3245e7d01f3 100644 --- a/test/benchmarks/mdc/chips/app.module.ts +++ b/test/benchmarks/mdc/chips/app.module.ts @@ -14,39 +14,29 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips'; @Component({ selector: 'app-root', - template: ` - - - - - - - One - - - One - Two - Three - Four - Five - Six - - `, + templateUrl: './chips.html', encapsulation: ViewEncapsulation.None, styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'], }) export class ChipsBenchmarkApp { - isSingleVisible = false; - isMultipleVisible = false; - - showSingle() { this.isSingleVisible = true; } - hideSingle() { this.isSingleVisible = false; } - - showMultiple() { this.isMultipleVisible = true; } - hideMultiple() { this.isMultipleVisible = false; } + isSingleChipVisible = false; + isSetVisible = false; + isGridVisible = false; + isListboxVisible = false; + + showSingleChip() { this.isSingleChipVisible = true; } + showSet() { this.isSetVisible = true; } + showGrid() { this.isGridVisible = true; } + showListbox() { this.isListboxVisible = true; } + + hide() { + this.isSingleChipVisible = false; + this.isSetVisible = false; + this.isGridVisible = false; + this.isListboxVisible = false; + } } - @NgModule({ declarations: [ChipsBenchmarkApp], imports: [ diff --git a/test/benchmarks/mdc/chips/chips.html b/test/benchmarks/mdc/chips/chips.html new file mode 100644 index 000000000000..88656642ff3a --- /dev/null +++ b/test/benchmarks/mdc/chips/chips.html @@ -0,0 +1,35 @@ + + + + + + +One + + + One + Two + Three + Four + Five + Six + + + + One + Two + Three + Four + Five + Six + + + + + One + Two + Three + Four + Five + Six + diff --git a/test/benchmarks/mdc/chips/chips.perf-spec.ts b/test/benchmarks/mdc/chips/chips.perf-spec.ts index 49cb6edd9b6d..4c259bf036ae 100755 --- a/test/benchmarks/mdc/chips/chips.perf-spec.ts +++ b/test/benchmarks/mdc/chips/chips.perf-spec.ts @@ -9,31 +9,36 @@ import {$, browser} from 'protractor'; import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities'; +async function runRenderBenchmark(testId: string, showBtnId: string) { + return runBenchmark({ + id: testId, + url: '', + ignoreBrowserSynchronization: true, + params: [], + prepare: async () => await $('#hide').click(), + work: async () => await $(showBtnId).click(), + }); +} + describe('chip performance benchmarks', () => { beforeAll(() => { browser.rootEl = '#root'; }); it('renders a single chip', async() => { - await runBenchmark({ - id: 'single-chip-render', - url: '', - ignoreBrowserSynchronization: true, - params: [], - prepare: async () => await $('#hide-single').click(), - work: async () => await $('#show-single').click(), - }); + await runRenderBenchmark('single-chip-render', '#show-single-chip'); }); - it('renders multiple chips', async() => { - await runBenchmark({ - id: 'multiple-chip-render', - url: '', - ignoreBrowserSynchronization: true, - params: [], - prepare: async () => await $('#hide-multiple').click(), - work: async () => await $('#show-multiple').click(), - }); + it('renders a set', async() => { + await runRenderBenchmark('chip-set-render', '#show-chip-set'); + }); + + it('renders a grid', async() => { + await runRenderBenchmark('chip-grid-render', '#show-chip-grid'); + }); + + it('renders a listbox', async() => { + await runRenderBenchmark('chip-listbox-render', '#show-chip-listbox'); }); it('clicks a chip', async() => { @@ -42,8 +47,8 @@ describe('chip performance benchmarks', () => { url: '', ignoreBrowserSynchronization: true, params: [], - setup: async() => await $('#show-single').click(), - work: async () => await $('.mat-mdc-chip').click(), + setup: async() => await $('#show-single-chip').click(), + work: async () => await $('#single-chip').click(), }); }); }); From dac3d76288b1a14be1dffb61dc75d452c43a6578 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 30 Jul 2020 12:07:23 -0700 Subject: [PATCH 6/6] fixup! fix(mdc-chips-benchmark): add tests for grid and listbox --- test/benchmarks/mdc/chips/BUILD.bazel | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/benchmarks/mdc/chips/BUILD.bazel b/test/benchmarks/mdc/chips/BUILD.bazel index cb6baae52ae0..8b4fc3f2be05 100644 --- a/test/benchmarks/mdc/chips/BUILD.bazel +++ b/test/benchmarks/mdc/chips/BUILD.bazel @@ -11,12 +11,12 @@ component_benchmark( "@npm//protractor", "@npm//@types/jasmine", ], + ng_assets = [":chips.html"], ng_deps = [ "@npm//@angular/core", "@npm//@angular/platform-browser", "//src/material-experimental/mdc-chips", ], - ng_assets = [":chips.html"], ng_srcs = [":app.module.ts"], prefix = "", styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],