src/material/chips/testing/chip-harness.ts - main - githubmirror/components

src/material/chips/testing/chip-harness.ts
90 строк3 KB
Andrey Dolgachev
feat(material/chips): add (optional) edit icon to input chips (#31041)
30 май 2025, 22:06
30 май 2025, 22:062438454
/**
 * @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.dev/license
 */

import {
  ComponentHarnessConstructor,
  ContentContainerComponentHarness,
  HarnessPredicate,
  TestKey,
} from '@angular/cdk/testing';
import {MatChipAvatarHarness} from './chip-avatar-harness';
import {
  ChipAvatarHarnessFilters,
  ChipEditHarnessFilters,
  ChipHarnessFilters,
  ChipRemoveHarnessFilters,
} from './chip-harness-filters';
import {MatChipEditHarness} from './chip-edit-harness';
import {MatChipRemoveHarness} from './chip-remove-harness';

/** Harness for interacting with a mat-chip in tests. */
export class MatChipHarness extends ContentContainerComponentHarness {
  protected _primaryAction = this.locatorFor('.mdc-evolution-chip__action--primary');

  static hostSelector = '.mat-mdc-basic-chip, .mat-mdc-chip';

  /**
   * Gets a `HarnessPredicate` that can be used to search for a chip with specific attributes.
   * @param options Options for narrowing the search.
   * @return a `HarnessPredicate` configured with the given options.
   */
  static with<T extends MatChipHarness>(
    this: ComponentHarnessConstructor<T>,
    options: ChipHarnessFilters = {},
  ): HarnessPredicate<T> {
    return new HarnessPredicate(this, options)
      .addOption('text', options.text, (harness, label) => {
        return HarnessPredicate.stringMatches(harness.getText(), label);
      })
      .addOption('disabled', options.disabled, async (harness, disabled) => {
        return (await harness.isDisabled()) === disabled;
      });
  }

  /** Gets a promise for the text content the option. */
  async getText(): Promise<string> {
    return (await this.host()).text({
      exclude: '.mat-mdc-chip-avatar, .mat-mdc-chip-trailing-icon, .mat-icon',
    });
  }

  /** Whether the chip is disabled. */
  async isDisabled(): Promise<boolean> {
    return (await this.host()).hasClass('mat-mdc-chip-disabled');
  }

  /** Delete a chip from the set. */
  async remove(): Promise<void> {
    const hostEl = await this.host();
    await hostEl.sendKeys(TestKey.DELETE);
  }

  /**
   * Gets the edit button inside of a chip.
   * @param filter Optionally filters which chips are included.
   */
  async geEditButton(filter: ChipEditHarnessFilters = {}): Promise<MatChipEditHarness> {
    return this.locatorFor(MatChipEditHarness.with(filter))();
  }

  /**
   * Gets the remove button inside of a chip.
   * @param filter Optionally filters which chips are included.
   */
  async getRemoveButton(filter: ChipRemoveHarnessFilters = {}): Promise<MatChipRemoveHarness> {
    return this.locatorFor(MatChipRemoveHarness.with(filter))();
  }

  /**
   * 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))();
  }
}