feat(material/testing): MatChipHarness getAvatar

Author: tamas-nemeth

src/material-experimental/mdc-chips/testing/BUILD.bazel

@@ -23,6 +23,8 @@ ng_test_library(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material-experimental/mdc-chips",
+        "//src/material/icon",
+        "//src/material/icon/testing",
         "@npm//@angular/forms",
     ],
 )

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HarnessPredicate, ComponentHarness} from '@angular/cdk/testing';
+import {ChipAvatarHarnessFilters} from './chip-harness-filters';
+
+/** Harness for interacting with a standard Material chip avatar in tests. */
+export class MatChipAvatarHarness extends ComponentHarness {
+  static hostSelector = '.mat-mdc-chip-avatar';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatChipAvatarHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which input instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ChipAvatarHarnessFilters = {}): HarnessPredicate<MatChipAvatarHarness> {
+    return new HarnessPredicate(MatChipAvatarHarness, options);
+  }
+}

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

@@ -11,6 +11,8 @@ import {BaseHarnessFilters} from '@angular/cdk/testing';
 export interface ChipHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose text matches the given value. */
   text?: string | RegExp;
+  /** Only find instances that have an avatar inside */
+  hasAvatar?: boolean;
 }
 
 export interface ChipInputHarnessFilters extends BaseHarnessFilters {
@@ -34,3 +36,5 @@ export interface ChipRowHarnessFilters extends ChipHarnessFilters {}
 export interface ChipSetHarnessFilters extends BaseHarnessFilters {}
 
 export interface ChipRemoveHarnessFilters extends BaseHarnessFilters {}
+
+export interface ChipAvatarHarnessFilters extends BaseHarnessFilters {}

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

@@ -2,6 +2,8 @@ import {HarnessLoader, parallel} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatIconModule} from '@angular/material/icon';
+import {MatIconHarness} from '@angular/material/icon/testing';
 import {MatChipsModule} from '../index';
 import {MatChipHarness} from './chip-harness';
 
@@ -12,7 +14,7 @@ describe('MatChipHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatChipsModule],
+      imports: [MatChipsModule, MatIconModule],
       declarations: [ChipHarnessTest],
     }).compileComponents();
 
@@ -55,13 +57,49 @@ describe('MatChipHarness', () => {
     expect(await harness.getRemoveButton()).toBeTruthy();
   });
 
+  it('should find chips with avatar', async () => {
+    const chips = await loader.getAllHarnesses(MatChipHarness.with({
+      hasAvatar: true
+    }));
+    expect(chips.length).toBe(1);
+  });
+
+  it('should find chips without avatar', async () => {
+    const chips = await loader.getAllHarnesses(MatChipHarness.with({
+      hasAvatar: false
+    }));
+    expect(chips.length).toBe(4);
+  });
+
+  it('should find avatar in chip', async () => {
+    const chip = await loader.getHarness(MatChipHarness.with({
+      hasAvatar: true
+    }));
+    const avatar = await chip.getAvatar();
+    expect(avatar).toBeTruthy();
+    const avatarHost = await avatar?.host();
+    expect(await avatarHost?.getAttribute('aria-label')).toBe('Coronavirus');
+  });
+
+  it('should find icon in chip', async () => {
+    const chip = await loader.getHarness(MatChipHarness.with({
+      selector: '.mat-chip--with-icon-avatar'
+    }));
+    expect(chip).toBeTruthy();
+    const icon = await chip.getHarness(MatIconHarness);
+    expect(icon).toBeTruthy();
+    expect(await icon.getName()).toBe('coronavirus');
+  });
 });
 
 @Component({
   template: `
     <mat-basic-chip>Basic Chip</mat-basic-chip>
     <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 class="mat-chip--with-icon-avatar">
+      <mat-icon matChipAvatar aria-label="Coronavirus" aria-hidden="false">coronavirus</mat-icon>
+      Chip with avatar
+    </mat-chip>
     <mat-chip
       class="has-remove-button"
       disabled>Disabled Chip <span matChipRemove>remove_icon</span>

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

@@ -6,12 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
-import {ChipHarnessFilters, ChipRemoveHarnessFilters} from './chip-harness-filters';
+import {ContentContainerComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
+import {MatChipAvatarHarness} from './chip-avatar-harness';
+import {
+  ChipAvatarHarnessFilters,
+  ChipHarnessFilters,
+  ChipRemoveHarnessFilters
+} from './chip-harness-filters';
 import {MatChipRemoveHarness} from './chip-remove-harness';
 
 /** Harness for interacting with a mat-chip in tests. */
-export class MatChipHarness extends ComponentHarness {
+export class MatChipHarness extends ContentContainerComponentHarness {
   static hostSelector = '.mat-mdc-basic-chip, .mat-mdc-chip';
 
   /**
@@ -22,6 +27,11 @@ export class MatChipHarness extends ComponentHarness {
   static with<T extends typeof MatChipHarness>(this: T, options: ChipHarnessFilters = {}):
       HarnessPredicate<InstanceType<T>> {
     return new HarnessPredicate(MatChipHarness, options)
+      .addOption(
+        'hasAvatar',
+        options.hasAvatar,
+        async (harness, hasAvatar) => (await harness.hasAvatar()) === hasAvatar
+      )
       .addOption('text', options.text, (harness, label) => {
         return HarnessPredicate.stringMatches(harness.getText(), label);
       }) as unknown as HarnessPredicate<InstanceType<T>>;
@@ -52,4 +62,19 @@ export class MatChipHarness extends ComponentHarness {
   async getRemoveButton(filter: ChipRemoveHarnessFilters = {}): Promise<MatChipRemoveHarness> {
     return this.locatorFor(MatChipRemoveHarness.with(filter))();
   }
+
+  /**
+   * Whether the chip has an avatar
+   */
+   async hasAvatar() {
+    return (await this.host()).hasClass('mat-mdc-chip-with-avatar');
+  }
+
+  /**
+   * Gets the avatar inside a chip.
+   * @param filter Optionally filters which avatars are included.
+   */
+  async getAvatar(filter: ChipAvatarHarnessFilters = {}): Promise<MatChipAvatarHarness | null> {
+    return this.locatorForOptional(MatChipAvatarHarness.with(filter))();
+  }
 }

src/material/chips/testing/BUILD.bazel

@@ -29,6 +29,8 @@ ng_test_library(
         "//src/cdk/testing/testbed",
         "//src/material/chips",
         "//src/material/form-field",
+        "//src/material/icon",
+        "//src/material/icon/testing",
         "@npm//@angular/platform-browser",
     ],
 )
@@ -43,6 +45,8 @@ ng_test_library(
         ":harness_tests_lib",
         ":testing",
         "//src/material/chips",
+        "//src/material/icon",
+        "//src/material/icon/testing",
     ],
 )
 

src/material/chips/testing/chip-avatar-harness.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HarnessPredicate, ComponentHarness} from '@angular/cdk/testing';
+import {ChipAvatarHarnessFilters} from './chip-harness-filters';
+
+/** Harness for interacting with a standard Material chip avatar in tests. */
+export class MatChipAvatarHarness extends ComponentHarness {
+  static hostSelector = '.mat-chip-avatar';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatChipAvatarHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which input instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ChipAvatarHarnessFilters = {}): HarnessPredicate<MatChipAvatarHarness> {
+    return new HarnessPredicate(MatChipAvatarHarness, options);
+  }
+}

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

@@ -11,6 +11,8 @@ import {BaseHarnessFilters} from '@angular/cdk/testing';
 export interface ChipHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose text matches the given value. */
   text?: string | RegExp;
+  /** Only find instances that have an avatar inside */
+  hasAvatar?: boolean;
   /**
    * Only find chip instances whose selected state matches the given value.
    * @deprecated Use `MatChipOptionHarness` together with `ChipOptionHarnessFilters`.
@@ -41,3 +43,6 @@ export interface ChipInputHarnessFilters extends BaseHarnessFilters {
 
 /** A set of criteria that can be used to filter a list of `MatChipRemoveHarness` instances. */
 export interface ChipRemoveHarnessFilters extends BaseHarnessFilters {}
+
+/** A set of criteria that can be used to filter a list of `MatChipAvatarHarness` instances. */
+export interface ChipAvatarHarnessFilters extends BaseHarnessFilters {}

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

@@ -6,12 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
-import {ChipHarnessFilters, ChipRemoveHarnessFilters} from './chip-harness-filters';
+import {ContentContainerComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
+import {MatChipAvatarHarness} from './chip-avatar-harness';
+import {
+  ChipAvatarHarnessFilters,
+  ChipHarnessFilters,
+  ChipRemoveHarnessFilters
+} from './chip-harness-filters';
 import {MatChipRemoveHarness} from './chip-remove-harness';
 
 /** Harness for interacting with a standard selectable Angular Material chip in tests. */
-export class MatChipHarness extends ComponentHarness {
+export class MatChipHarness extends ContentContainerComponentHarness {
   /** The selector for the host element of a `MatChip` instance. */
   static hostSelector = '.mat-chip';
 
@@ -26,7 +31,9 @@ export class MatChipHarness extends ComponentHarness {
         .addOption('text', options.text,
             (harness, label) => HarnessPredicate.stringMatches(harness.getText(), label))
         .addOption('selected', options.selected,
-            async (harness, selected) => (await harness.isSelected()) === selected);
+            async (harness, selected) => (await harness.isSelected()) === selected)
+        .addOption('hasAvatar', options.hasAvatar,
+            async (harness, hasAvatar) => (await harness.hasAvatar()) === hasAvatar);
   }
 
   /** Gets the text of the chip. */
@@ -88,9 +95,24 @@ export class MatChipHarness extends ComponentHarness {
 
   /**
    * Gets the remove button inside of a chip.
-   * @param filter Optionally filters which chips are included.
+   * @param filter Optionally filters which remove buttons are included.
    */
   async getRemoveButton(filter: ChipRemoveHarnessFilters = {}): Promise<MatChipRemoveHarness> {
     return this.locatorFor(MatChipRemoveHarness.with(filter))();
   }
+
+  /**
+   * Whether the chip has an avatar
+   */
+     async hasAvatar() {
+      return (await this.host()).hasClass('mat-chip-with-avatar');
+    }
+
+  /**
+   * Gets the avatar inside a chip.
+   * @param filter Optionally filters which avatars are included.
+   */
+  async getAvatar(filter: ChipAvatarHarnessFilters = {}): Promise<MatChipAvatarHarness | null> {
+    return this.locatorForOptional(MatChipAvatarHarness.with(filter))();
+  }
 }

src/material/chips/testing/chip-list-harness.spec.ts

@@ -1,5 +1,7 @@
 import {MatChipsModule} from '@angular/material/chips';
 import {runHarnessTests} from '@angular/material/chips/testing/shared.spec';
+import {MatIconModule} from '@angular/material/icon';
+import {MatIconHarness} from '@angular/material/icon/testing';
 import {MatChipListHarness} from './chip-list-harness';
 import {MatChipHarness} from './chip-harness';
 import {MatChipInputHarness} from './chip-input-harness';
@@ -8,6 +10,15 @@ import {MatChipListboxHarness} from './chip-listbox-harness';
 import {MatChipOptionHarness} from './chip-option-harness';
 
 describe('Non-MDC-based MatChipListHarness', () => {
-  runHarnessTests(MatChipsModule, MatChipListHarness, MatChipListboxHarness, MatChipHarness,
-      MatChipOptionHarness, MatChipInputHarness, MatChipRemoveHarness);
+  runHarnessTests(
+    MatChipsModule,
+    MatChipListHarness,
+    MatChipListboxHarness,
+    MatChipHarness,
+    MatChipOptionHarness,
+    MatChipInputHarness,
+    MatChipRemoveHarness,
+    MatIconModule,
+    MatIconHarness
+  );
 });