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

Author: wagnermaciel

WORKSPACE

@@ -129,3 +129,7 @@ rbe_autoconfig(
     # a specific Linux kernel that comes with "libx11" in order to run headless browser tests.
     repository = "google/rbe-ubuntu16-04-webtest",
 )
+
+load("@npm_angular_dev_infra_private//benchmark/browsers:browser_repositories.bzl", "browser_repositories")
+
+browser_repositories()

package.json

@@ -13,7 +13,7 @@
     "yarn": ">= 1.0.0"
   },
   "scripts": {
-    "postinstall": "node tools/postinstall/apply-patches.js && ngcc --properties main --create-ivy-entry-points && node tools/postinstall/update-ngcc-main-fields.js",
+    "postinstall": "node tools/postinstall/apply-patches.js && ngcc --properties module main --create-ivy-entry-points && node tools/postinstall/update-ngcc-main-fields.js",
     "build": "node ./scripts/build-packages-dist.js",
     "bazel": "bazelisk",
     "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",
@@ -45,18 +45,23 @@
   },
   "version": "9.2.0-next.0",
   "dependencies": {
+    "@angular/benchpress": "^0.2.0",
+    "@angular/dev-infra": "file:../dev-infra",
+    "@angular-devkit/build-optimizer": "^0.900.6",
     "@angular/animations": "^9.1.0-next.4",
     "@angular/common": "^9.1.0-next.4",
     "@angular/compiler": "^9.1.0-next.4",
     "@angular/core": "^9.1.0-next.4",
     "@angular/elements": "^9.1.0-next.4",
     "@angular/forms": "^9.1.0-next.4",
     "@angular/platform-browser": "^9.1.0-next.4",
+    "@bazel/terser": "^1.4.1",
     "@types/googlemaps": "^3.37.0",
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
     "material-components-web": "6.0.0-canary.d5808057f.0",
+    "node-uuid": "^1.4.8",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",

src/components-examples/material/checkbox/benchmark-driver.ts

@@ -0,0 +1,28 @@
+load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
+
+genrule(
+    name = "indigo-pink",
+    srcs = ["//src/material/core:theming/prebuilt/indigo-pink.css"],
+    outs = ["styles.css"],
+    cmd = "cp $< $@",
+)
+
+# todo(wagnermaciel): If assets are defined and no index.html is provided, throw error with clear error message.
+component_benchmark(
+    name = "benchmark",
+    driver = ":checkbox.perf-spec.ts",
+    driver_deps = [
+      "@npm//@angular/dev-infra",
+      "@npm//protractor",
+      "@npm//@types/jasmine",
+    ],
+    ng_deps = [
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "//src/components-examples/material/checkbox",
+				"//src/cdk/a11y",
+    ],
+		ng_srcs = [":app.module.ts"],
+    styles = [":indigo-pink"],
+    prefix = "",
+)

test/benchmarks/material/checkbox/BUILD.bazel

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 { A11yModule } from '@angular/cdk/a11y';
+import { Component, NgModule, ViewChild } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
+
+/**
+ * @title Checkbox benchmark component.
+ */
+@Component({
+  selector: 'app-root',
+  template: `
+    <button id="show" (click)="show()">Show</button>
+    <button id="hide" (click)="hide()">Hide</button>
+    <button id="indeterminate" (click)="indeterminate()">Indeterminate</button>
+
+    <ng-container *ngIf="isVisible">
+      <mat-checkbox
+        [checked]="isChecked"
+        [(indeterminate)]="isIndeterminate"
+        (change)="toggleIsChecked()"
+        >Check me!</mat-checkbox>
+    </ng-container>
+  `,
+  styles: [],
+})
+export class CheckboxBenchmarkApp {
+  isChecked = false;
+  isVisible = false;
+  isIndeterminate = false;
+
+  show() { this.isVisible = true; }
+  hide() { this.isVisible = false; }
+  indeterminate() { this.isIndeterminate = true; }
+  toggleIsChecked() { this.isChecked = !this.isChecked; }
+}
+
+
+@NgModule({
+  declarations: [CheckboxBenchmarkApp],
+  imports: [
+    A11yModule,
+    BrowserModule,
+    MatCheckboxModule,
+  ],
+  providers: [],
+  bootstrap: [CheckboxBenchmarkApp]
+})
+export class AppModule {}

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

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright Google Inc. 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/benchmark/driver-utilities';
+
+describe('checkbox overview performance benchmarks', () => {
+  beforeAll(() => {
+    browser.rootEl = '#root';
+  });
+
+  it('render (checked)', async() => {
+    await runBenchmark({
+      id: 'checkbox-overview-render-checked',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => {
+        await $('#show').click();
+        await $('mat-checkbox').click();
+      },
+      prepare: async () => {
+        expect(await $('mat-checkbox input').isSelected())
+          .toBe(true, 'The checkbox should be in a selected state.');
+        await $('#hide').click();
+      },
+      work: async () => await $('#show').click()
+    });
+  });
+
+  it('render (unchecked)', async() => {
+    await runBenchmark({
+      id: 'checkbox-overview-render-unchecked',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async() => await $('#show').click(),
+      prepare: async () => {
+        expect(await $('mat-checkbox input').isSelected())
+          .toBe(false, 'The checkbox should be in an unselected state.');
+        await $('#hide').click();
+      },
+      work: async () => await $('#show').click()
+    });
+  });
+
+  it('render (indeterminate)', async() => {
+    await runBenchmark({
+      id: 'checkbox-overview-render-indeterminate',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async() => {
+        await $('#show').click();
+        await $('#indeterminate').click();
+      },
+      prepare: async () => {
+        expect(await $('mat-checkbox input').getAttribute('indeterminate'))
+          .toBe('true', 'The checkbox should be in an indeterminate state');
+        await $('#hide').click();
+      },
+      work: async () => await $('#show').click()
+    });
+  });
+
+  it('click (unchecked -> checked)', async() => {
+    await runBenchmark({
+      id: 'checkbox-overview-click-unchecked-to-checked',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => {
+        await $('#show').click();
+        await $('mat-checkbox').click();
+      },
+      prepare: async () => {
+        await $('mat-checkbox').click();
+        expect(await $('mat-checkbox input').isSelected())
+          .toBe(false, 'The checkbox should be in an unchecked state.');
+      },
+      work: async () => await $('mat-checkbox').click(),
+    });
+  });
+
+  it('click (checked -> unchecked)', async() => {
+    await runBenchmark({
+      id: 'checkbox-overview-click-checked-to-unchecked',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => await $('#show').click(),
+      prepare: async () => {
+        await $('mat-checkbox').click();
+        expect(await $('mat-checkbox input').isSelected())
+          .toBe(true, 'The checkbox should be in a checked state.');
+      },
+      work: async () => await $('mat-checkbox').click(),
+    });
+  });
+});