docs(material/chips): add chips harness example (#20942)

Author: annieyw

src/components-examples/material/chips/BUILD.bazel

@@ -12,11 +12,17 @@ ng_module(
     module_name = "@angular/components-examples/material/chips",
     deps = [
         "//src/cdk/drag-drop",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/autocomplete",
         "//src/material/chips",
+        "//src/material/chips/testing",
         "//src/material/form-field",
         "//src/material/icon",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/chips/chips-harness/chips-harness-example.html

@@ -0,0 +1,7 @@
+<mat-chip-list
+    [disabled]="isDisabled"
+    [aria-orientation]="'horizontal'">
+  <mat-chip (removed)="remove()">Chip 1</mat-chip>
+  <mat-chip (removed)="remove()">Chip 2 <span matChipRemove>remove_icon</span></mat-chip>
+  <mat-chip (removed)="remove()"><mat-chip-avatar>C</mat-chip-avatar>Chip 4</mat-chip>
+</mat-chip-list>

src/components-examples/material/chips/chips-harness/chips-harness-example.spec.ts

@@ -0,0 +1,63 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatChipHarness, MatChipListHarness} from '@angular/material/chips/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {ChipsHarnessExample} from './chips-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatChipsModule} from '@angular/material/chips';
+
+describe('ChipsHarnessExample', () => {
+  let fixture: ComponentFixture<ChipsHarnessExample>;
+  let loader: HarnessLoader;
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatChipsModule, NoopAnimationsModule],
+        declarations: [ChipsHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(ChipsHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should get whether a chip list is disabled', async () => {
+    const chipList = await loader.getHarness(MatChipListHarness);
+
+    expect(await chipList.isDisabled()).toBeFalse();
+
+    fixture.componentInstance.isDisabled = true;
+    fixture.detectChanges();
+
+    expect(await chipList.isDisabled()).toBeTrue();
+  });
+
+  it('should get the orientation of a chip list', async () => {
+    const chipList = await loader.getHarness(MatChipListHarness);
+
+    expect(await chipList.getOrientation()).toEqual('horizontal');
+  });
+
+  it('should be able to get the selected chips in a list', async () => {
+    const chipList = await loader.getHarness(MatChipListHarness);
+    const chips = await chipList.getChips();
+
+    expect((await chipList.getChips({selected: true})).length).toBe(0);
+    await chips[1].select();
+
+    const selectedChips = await chipList.getChips({selected: true});
+    expect(await Promise.all(selectedChips.map(chip => chip.getText()))).toEqual(['Chip 2']);
+  });
+
+  it('should be able to trigger chip removal', async () => {
+    const chip = await loader.getHarness(MatChipHarness);
+    expect(fixture.componentInstance.remove).not.toHaveBeenCalled();
+    await chip.remove();
+    expect(fixture.componentInstance.remove).toHaveBeenCalled();
+  });
+});

src/components-examples/material/chips/chips-harness/chips-harness-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatChipsHarness
+ */
+@Component({
+  selector: 'chips-harness-example',
+  templateUrl: 'chips-harness-example.html',
+})
+export class ChipsHarnessExample {
+  isDisabled = false;
+  remove = jasmine.createSpy('remove spy');
+  add = jasmine.createSpy('add spy');
+}

src/components-examples/material/chips/index.ts

@@ -11,13 +11,15 @@ import {ChipsDragDropExample} from './chips-drag-drop/chips-drag-drop-example';
 import {ChipsInputExample} from './chips-input/chips-input-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
+import {ChipsHarnessExample} from './chips-harness/chips-harness-example';
 
 export {
   ChipsAutocompleteExample,
   ChipsDragDropExample,
   ChipsInputExample,
   ChipsOverviewExample,
   ChipsStackedExample,
+  ChipsHarnessExample,
 };
 
 const EXAMPLES = [
@@ -26,6 +28,7 @@ const EXAMPLES = [
   ChipsInputExample,
   ChipsOverviewExample,
   ChipsStackedExample,
+  ChipsHarnessExample,
 ];
 
 @NgModule({