Skip to content

Commit fd0cb24

Browse files
committed
fix(mdc-chips-benchmark): add tests for grid and listbox
1 parent ff89333 commit fd0cb24

File tree

4 files changed

+77
-46
lines changed

4 files changed

+77
-46
lines changed

test/benchmarks/mdc/chips/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ component_benchmark(
1616
"@npm//@angular/platform-browser",
1717
"//src/material-experimental/mdc-chips",
1818
],
19+
ng_assets = [":chips.html"],
1920
ng_srcs = [":app.module.ts"],
2021
prefix = "",
2122
styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],

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

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,39 +14,29 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
1414

1515
@Component({
1616
selector: 'app-root',
17-
template: `
18-
<button id="show-single" (click)="showSingle()">Show Single</button>
19-
<button id="hide-single" (click)="hideSingle()">Hide Single</button>
20-
21-
<button id="show-multiple" (click)="showMultiple()">Show Multiple</button>
22-
<button id="hide-multiple" (click)="hideMultiple()">Hide Multiple</button>
23-
24-
<mat-chip *ngIf="isSingleVisible">One</mat-chip>
25-
26-
<mat-chip-set *ngIf="isMultipleVisible">
27-
<mat-chip>One</mat-chip>
28-
<mat-chip>Two</mat-chip>
29-
<mat-chip>Three</mat-chip>
30-
<mat-chip>Four</mat-chip>
31-
<mat-chip>Five</mat-chip>
32-
<mat-chip>Six</mat-chip>
33-
</mat-chip-set>
34-
`,
17+
templateUrl: './chips.html',
3518
encapsulation: ViewEncapsulation.None,
3619
styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
3720
})
3821
export class ChipsBenchmarkApp {
39-
isSingleVisible = false;
40-
isMultipleVisible = false;
41-
42-
showSingle() { this.isSingleVisible = true; }
43-
hideSingle() { this.isSingleVisible = false; }
44-
45-
showMultiple() { this.isMultipleVisible = true; }
46-
hideMultiple() { this.isMultipleVisible = false; }
22+
isSingleChipVisible = false;
23+
isSetVisible = false;
24+
isGridVisible = false;
25+
isListboxVisible = false;
26+
27+
showSingleChip() { this.isSingleChipVisible = true; }
28+
showSet() { this.isSetVisible = true; }
29+
showGrid() { this.isGridVisible = true; }
30+
showListbox() { this.isListboxVisible = true; }
31+
32+
hide() {
33+
this.isSingleChipVisible = false;
34+
this.isSetVisible = false;
35+
this.isGridVisible = false;
36+
this.isListboxVisible = false;
37+
}
4738
}
4839

49-
5040
@NgModule({
5141
declarations: [ChipsBenchmarkApp],
5242
imports: [

test/benchmarks/mdc/chips/chips.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<button id="show-single-chip" (click)="showSingleChip()">Show Single Chip</button>
2+
<button id="show-chip-set" (click)="showSet()">Show Chip Set</button>
3+
<button id="show-chip-grid" (click)="showGrid()">Show Chip Grid</button>
4+
<button id="show-chip-listbox" (click)="showListbox()">Show Chip Listbox</button>
5+
<button id="hide" (click)="hide()">Hide</button>
6+
7+
<mat-chip id="single-chip" *ngIf="isSingleChipVisible">One</mat-chip>
8+
9+
<mat-chip-set *ngIf="isSetVisible">
10+
<mat-chip>One</mat-chip>
11+
<mat-chip>Two</mat-chip>
12+
<mat-chip>Three</mat-chip>
13+
<mat-chip>Four</mat-chip>
14+
<mat-chip>Five</mat-chip>
15+
<mat-chip>Six</mat-chip>
16+
</mat-chip-set>
17+
18+
<mat-chip-grid #chipGrid1 *ngIf="isGridVisible">
19+
<mat-chip-row>One</mat-chip-row>
20+
<mat-chip-row>Two</mat-chip-row>
21+
<mat-chip-row>Three</mat-chip-row>
22+
<mat-chip-row>Four</mat-chip-row>
23+
<mat-chip-row>Five</mat-chip-row>
24+
<mat-chip-row>Six</mat-chip-row>
25+
<input [matChipInputFor]="chipGrid1"/>
26+
</mat-chip-grid>
27+
28+
<mat-chip-listbox *ngIf="isListboxVisible">
29+
<mat-chip>One</mat-chip>
30+
<mat-chip>Two</mat-chip>
31+
<mat-chip>Three</mat-chip>
32+
<mat-chip>Four</mat-chip>
33+
<mat-chip>Five</mat-chip>
34+
<mat-chip>Six</mat-chip>
35+
</mat-chip-listbox>

test/benchmarks/mdc/chips/chips.perf-spec.ts

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,36 @@
99
import {$, browser} from 'protractor';
1010
import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
1111

12+
async function runRenderBenchmark(testId: string, showBtnId: string) {
13+
return runBenchmark({
14+
id: testId,
15+
url: '',
16+
ignoreBrowserSynchronization: true,
17+
params: [],
18+
prepare: async () => await $('#hide').click(),
19+
work: async () => await $(showBtnId).click(),
20+
});
21+
}
22+
1223
describe('chip performance benchmarks', () => {
1324
beforeAll(() => {
1425
browser.rootEl = '#root';
1526
});
1627

1728
it('renders a single chip', async() => {
18-
await runBenchmark({
19-
id: 'single-chip-render',
20-
url: '',
21-
ignoreBrowserSynchronization: true,
22-
params: [],
23-
prepare: async () => await $('#hide-single').click(),
24-
work: async () => await $('#show-single').click(),
25-
});
29+
await runRenderBenchmark('single-chip-render', '#show-single-chip');
2630
});
2731

28-
it('renders multiple chips', async() => {
29-
await runBenchmark({
30-
id: 'multiple-chip-render',
31-
url: '',
32-
ignoreBrowserSynchronization: true,
33-
params: [],
34-
prepare: async () => await $('#hide-multiple').click(),
35-
work: async () => await $('#show-multiple').click(),
36-
});
32+
it('renders a set', async() => {
33+
await runRenderBenchmark('chip-set-render', '#show-chip-set');
34+
});
35+
36+
it('renders a grid', async() => {
37+
await runRenderBenchmark('chip-grid-render', '#show-chip-grid');
38+
});
39+
40+
it('renders a listbox', async() => {
41+
await runRenderBenchmark('chip-listbox-render', '#show-chip-listbox');
3742
});
3843

3944
it('clicks a chip', async() => {
@@ -42,8 +47,8 @@ describe('chip performance benchmarks', () => {
4247
url: '',
4348
ignoreBrowserSynchronization: true,
4449
params: [],
45-
setup: async() => await $('#show-single').click(),
46-
work: async () => await $('.mat-mdc-chip').click(),
50+
setup: async() => await $('#show-single-chip').click(),
51+
work: async () => await $('#single-chip').click(),
4752
});
4853
});
4954
});

0 commit comments

Comments
 (0)