test(chips): add harness and filter unit tests

PiperOrigin-RevId: 540709968

Author: asyncliz

chips/filter-chip_test.ts

@@ -6,12 +6,145 @@
 
 // import 'jasmine'; (google3-only)
 
+import {html} from 'lit';
+
+import {Environment} from '../testing/environment.js';
 import {createTokenTests} from '../testing/tokens.js';
 
 import {MdFilterChip} from './filter-chip.js';
+import {ChipHarness} from './harness.js';
 
 describe('<md-filter-chip>', () => {
   describe('.styles', () => {
     createTokenTests(MdFilterChip.styles);
   });
+
+  const env = new Environment();
+
+  async function setupTest() {
+    const chip = new MdFilterChip();
+    env.render(html`${chip}`);
+    await env.waitForStability();
+    return {chip, harness: new ChipHarness(chip)};
+  }
+
+  describe('selection', () => {
+    it('should select on click', async () => {
+      const {chip, harness} = await setupTest();
+
+      await harness.clickWithMouse();
+      expect(chip.selected).withContext('chip.selected').toBeTrue();
+    });
+
+    it('should deselect on click', async () => {
+      const {chip, harness} = await setupTest();
+      chip.selected = true;
+
+      await harness.clickWithMouse();
+      expect(chip.selected).withContext('chip.selected').toBeFalse();
+    });
+
+    it('should not select on click when disabled', async () => {
+      const {chip, harness} = await setupTest();
+      chip.disabled = true;
+
+      await harness.clickWithMouse();
+      expect(chip.selected).withContext('chip.selected').toBeFalse();
+    });
+
+    it('should dispatch "selected" event when selected changes programmatically',
+       async () => {
+         const {chip} = await setupTest();
+         const handler = jasmine.createSpy();
+         chip.addEventListener('selected', handler);
+
+         chip.selected = true;
+         await env.waitForStability();
+         chip.selected = false;
+         await env.waitForStability();
+         expect(handler).toHaveBeenCalledTimes(2);
+       });
+
+    it('should dispatch "selected" event when selected changes by click',
+       async () => {
+         const {chip, harness} = await setupTest();
+         const handler = jasmine.createSpy();
+         chip.addEventListener('selected', handler);
+
+         await harness.clickWithMouse();
+         await harness.clickWithMouse();
+         expect(handler).toHaveBeenCalledTimes(2);
+       });
+  });
+
+  describe('removable', () => {
+    it('should remove chip from DOM when remove button clicked', async () => {
+      const {chip, harness} = await setupTest();
+      chip.removable = true;
+      await env.waitForStability();
+
+      expect(chip.parentElement)
+          .withContext('chip should be attached before removing')
+          .not.toBeNull();
+      harness.action = 'trailing';
+      await harness.clickWithMouse();
+      expect(chip.parentElement)
+          .withContext('chip should be detached after removing')
+          .toBeNull();
+    });
+
+    it('should dispatch a "remove" event when removed', async () => {
+      const {chip, harness} = await setupTest();
+      chip.removable = true;
+      await env.waitForStability();
+      const handler = jasmine.createSpy();
+      chip.addEventListener('remove', handler);
+
+      harness.action = 'trailing';
+      await harness.clickWithMouse();
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not remove chip if "remove" event is default prevented',
+       async () => {
+         const {chip, harness} = await setupTest();
+         chip.removable = true;
+         await env.waitForStability();
+         chip.addEventListener('remove', event => {
+           event.preventDefault();
+         });
+
+         harness.action = 'trailing';
+         await harness.clickWithMouse();
+         expect(chip.parentElement)
+             .withContext('chip should still be attached')
+             .not.toBeNull();
+       });
+
+    it('should provide a default "ariaLabelRemove" value', async () => {
+      const {chip} = await setupTest();
+      chip.label = 'Label';
+
+      expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.label}`);
+    });
+
+    it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided',
+       async () => {
+         const {chip} = await setupTest();
+         chip.label = 'Label';
+         chip.ariaLabel = 'Descriptive label';
+
+         expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.ariaLabel}`);
+       });
+
+    it('should allow setting a custom "ariaLabelRemove"', async () => {
+      const {chip} = await setupTest();
+      chip.label = 'Label';
+      chip.ariaLabel = 'Descriptive label';
+      const customAriaLabelRemove = 'Remove custom label';
+      chip.ariaLabelRemove = customAriaLabelRemove;
+
+      expect(chip.ariaLabelRemove).toEqual(customAriaLabelRemove);
+    });
+  });
 });

chips/harness.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Harness} from '../testing/harness.js';
+
+import {MdAssistChip} from './assist-chip.js';
+import {MdFilterChip} from './filter-chip.js';
+import {MdInputChip} from './input-chip.js';
+import {MdSuggestionChip} from './suggestion-chip.js';
+
+/**
+ * Test harness for chips.
+ */
+export class ChipHarness extends
+    Harness<MdAssistChip|MdFilterChip|MdInputChip|MdSuggestionChip> {
+  action: 'primary'|'trailing' = 'primary';
+
+  protected override async getInteractiveElement() {
+    await this.element.updateComplete;
+    if (this.action === 'trailing') {
+      // Retrieve MultiActionChip's trailingAction
+      const {trailingAction} =
+          this.element as {trailingAction?: HTMLElement | null};
+      if (!trailingAction) {
+        throw new Error(
+            '`ChipHarness.action` is "trailing", but the chip does not have a trailing action.');
+      }
+
+      return trailingAction;
+    }
+
+    const {primaryId} = this.element as unknown as {primaryId: string};
+    const primaryAction = primaryId &&
+        this.element.renderRoot.querySelector<HTMLElement>(`#${primaryId}`);
+    if (!primaryAction) {
+      throw new Error(
+          '`ChipHarness.action` is "primary", but the chip does not have a primary action.');
+    }
+
+    return primaryAction;
+  }
+}

chips/lib/trailing-icons.ts

@@ -41,7 +41,8 @@ function handleRemoveClick(this: Chip, event: Event) {
   }
 
   event.stopPropagation();
-  const preventDefault = !this.dispatchEvent(new Event('remove'));
+  const preventDefault =
+      !this.dispatchEvent(new Event('remove', {cancelable: true}));
   if (preventDefault) {
     return;
   }