feat(material-experimental/mdc-chips): add remove method to MDC chip harness

This allows MDC chips to be removed in testing environments.

Note that the harness must not only click on the remove button, but also dispatch a `transitionend` event. Without the
dispatch of this event, the chip would not fire it's `removed` output.

This PR also includes a basic MDC ChipRemoveHarness that mirrors the non-MDC version. This was necessary to find the
ChipRemove button in the chip harness' `remove` method.

Author: MatteoVH

src/material-experimental/mdc-chips/testing/chip-harness-filters.ts

@@ -23,3 +23,5 @@ export interface ChipOptionHarnessFilters extends ChipHarnessFilters {}
 export interface ChipRowHarnessFilters extends ChipHarnessFilters {}
 
 export interface ChipSetHarnessFilters extends BaseHarnessFilters {}
+
+export interface ChipRemoveHarnessFilters extends BaseHarnessFilters {}

src/material-experimental/mdc-chips/testing/chip-harness.spec.ts

@@ -22,7 +22,7 @@ describe('MatChipHarness', () => {
 
   it('should get correct number of chip harnesses', async () => {
     const harnesses = await loader.getAllHarnesses(MatChipHarness);
-    expect(harnesses.length).toBe(4);
+    expect(harnesses.length).toBe(5);
   });
 
   it('should get the chip text content', async () => {
@@ -31,6 +31,16 @@ describe('MatChipHarness', () => {
     expect(await harnesses[1].getText()).toBe('Chip');
     expect(await harnesses[2].getText()).toBe('Chip with avatar');
     expect(await harnesses[3].getText()).toBe('Disabled Chip');
+    expect(await harnesses[4].getText()).toBe('Chip Row');
+  });
+
+  it('should be able to remove a mat-chip-row', async () => {
+    const removeChipSpy = spyOn(fixture.componentInstance, 'removeChip');
+
+    const harnesses = await loader.getAllHarnesses(MatChipHarness);
+    await harnesses[4].remove();
+
+    expect(removeChipSpy).toHaveBeenCalledTimes(1);
   });
 });
 
@@ -40,7 +50,9 @@ describe('MatChipHarness', () => {
     <mat-chip>Chip <span matChipTrailingIcon>trailing_icon</span></mat-chip>
     <mat-chip><mat-chip-avatar>B</mat-chip-avatar>Chip with avatar</mat-chip>
     <mat-chip disabled>Disabled Chip <span matChipRemove>remove_icon</span></mat-chip>
+    <mat-chip-row (removed)="removeChip()">Chip Row</mat-chip-row>
   `
 })
-class ChipHarnessTest {}
-
+class ChipHarnessTest {
+  removeChip() {}
+}

src/material-experimental/mdc-chips/testing/chip-harness.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
 import {ChipHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a mat-chip in tests. */
@@ -30,4 +30,11 @@ export class MatChipHarness extends ComponentHarness {
       exclude: '.mat-mdc-chip-avatar, .mat-mdc-chip-trailing-icon, .mat-icon'
     });
   }
+
+  /** Delete a chip from the set. */
+  async remove(): Promise<void> {
+    const hostEl = await this.host();
+    await hostEl.sendKeys!(TestKey.DELETE);
+    await hostEl.dispatchEvent!('transitionend', {propertyName: 'width'});
+  }
 }