fix(mdc-chips-benchmark): add tests for grid and listbox

Author: wagnermaciel

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"],

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

@@ -14,39 +14,29 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 
 @Component({
   selector: 'app-root',
-  template: `
-    <button id="show-single" (click)="showSingle()">Show Single</button>
-    <button id="hide-single" (click)="hideSingle()">Hide Single</button>
-
-    <button id="show-multiple" (click)="showMultiple()">Show Multiple</button>
-    <button id="hide-multiple" (click)="hideMultiple()">Hide Multiple</button>
-
-    <mat-chip *ngIf="isSingleVisible">One</mat-chip>
-
-    <mat-chip-set *ngIf="isMultipleVisible">
-      <mat-chip>One</mat-chip>
-      <mat-chip>Two</mat-chip>
-      <mat-chip>Three</mat-chip>
-      <mat-chip>Four</mat-chip>
-      <mat-chip>Five</mat-chip>
-      <mat-chip>Six</mat-chip>
-    </mat-chip-set>
-  `,
+  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: [

test/benchmarks/mdc/chips/chips.html

@@ -0,0 +1,35 @@
+<button id="show-single-chip" (click)="showSingleChip()">Show Single Chip</button>
+<button id="show-chip-set" (click)="showSet()">Show Chip Set</button>
+<button id="show-chip-grid" (click)="showGrid()">Show Chip Grid</button>
+<button id="show-chip-listbox" (click)="showListbox()">Show Chip Listbox</button>
+<button id="hide" (click)="hide()">Hide</button>
+
+<mat-chip id="single-chip" *ngIf="isSingleChipVisible">One</mat-chip>
+
+<mat-chip-set *ngIf="isSetVisible">
+	<mat-chip>One</mat-chip>
+	<mat-chip>Two</mat-chip>
+	<mat-chip>Three</mat-chip>
+	<mat-chip>Four</mat-chip>
+	<mat-chip>Five</mat-chip>
+	<mat-chip>Six</mat-chip>
+</mat-chip-set>
+
+<mat-chip-grid #chipGrid1 *ngIf="isGridVisible">
+	<mat-chip-row>One</mat-chip-row>
+	<mat-chip-row>Two</mat-chip-row>
+	<mat-chip-row>Three</mat-chip-row>
+	<mat-chip-row>Four</mat-chip-row>
+	<mat-chip-row>Five</mat-chip-row>
+	<mat-chip-row>Six</mat-chip-row>
+	<input [matChipInputFor]="chipGrid1"/>
+</mat-chip-grid>
+
+<mat-chip-listbox *ngIf="isListboxVisible">
+	<mat-chip>One</mat-chip>
+	<mat-chip>Two</mat-chip>
+	<mat-chip>Three</mat-chip>
+	<mat-chip>Four</mat-chip>
+	<mat-chip>Five</mat-chip>
+	<mat-chip>Six</mat-chip>
+</mat-chip-listbox>

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(),
     });
   });
 });