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

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'});
+  }
 }