test(chips): add multi-action navigation tests

PiperOrigin-RevId: 540978409

chips/lib/multi-action-chip_test.ts

@@ -6,8 +6,8 @@
 
 // import 'jasmine'; (google3-only)
 
-import {html} from 'lit';
-import {customElement, query} from 'lit/decorators.js';
+import {html, nothing} from 'lit';
+import {customElement, property, query} from 'lit/decorators.js';
 
 import {Environment} from '../../testing/environment.js';
 import {Harness} from '../../testing/harness.js';
@@ -19,6 +19,7 @@ import {renderRemoveButton} from './trailing-icons.js';
 class TestMultiActionChip extends MultiActionChip {
  @query('#primary') primaryAction!: HTMLElement;
  @query('.trailing.action') trailingAction!: HTMLElement;
+ @property() noTrailingAction = false;
 
  protected primaryId = 'primary';
 
@@ -27,6 +28,10 @@ class TestMultiActionChip extends MultiActionChip {
  }
 
  protected override renderTrailingAction() {
+ if (this.noTrailingAction) {
+ return nothing;
+ }
+
  return renderRemoveButton(
  {ariaLabel: this.ariaLabelRemove, disabled: this.disabled});
  }
@@ -42,6 +47,130 @@ describe('Multi-action chips', () => {
  return chip;
  }
 
+ describe('navigation', () => {
+ it('should move internal focus forwards', async () => {
+ const chip = await setupTest();
+ const primaryHarness = new Harness(chip.primaryAction);
+
+ await primaryHarness.focusWithKeyboard();
+ expect(chip.primaryAction.matches(':focus'))
+ .withContext('primary action is focused')
+ .toBeTrue();
+
+ await primaryHarness.keypress('ArrowRight');
+ expect(chip.trailingAction.matches(':focus'))
+ .withContext('trailing action is focused')
+ .toBeTrue();
+ });
+
+ it('should move internal focus forwards in rtl', async () => {
+ const chip = await setupTest();
+ chip.style.direction = 'rtl';
+ const primaryHarness = new Harness(chip.primaryAction);
+
+ await primaryHarness.focusWithKeyboard();
+ expect(chip.primaryAction.matches(':focus'))
+ .withContext('primary action is focused')
+ .toBeTrue();
+
+ await primaryHarness.keypress('ArrowLeft');
+ expect(chip.trailingAction.matches(':focus'))
+ .withContext('trailing action is focused')
+ .toBeTrue();
+ });
+
+ it('should move internal focus backwards', async () => {
+ const chip = await setupTest();
+ const trailingHarness = new Harness(chip.trailingAction);
+
+ await trailingHarness.focusWithKeyboard();
+ expect(chip.trailingAction.matches(':focus'))
+ .withContext('trailing action is focused')
+ .toBeTrue();
+
+ await trailingHarness.keypress('ArrowLeft');
+ expect(chip.primaryAction.matches(':focus'))
+ .withContext('primary action is focused')
+ .toBeTrue();
+ });
+
+ it('should move internal focus backwards in rtl', async () => {
+ const chip = await setupTest();
+ chip.style.direction = 'rtl';
+ const trailingHarness = new Harness(chip.trailingAction);
+
+ await trailingHarness.focusWithKeyboard();
+ expect(chip.trailingAction.matches(':focus'))
+ .withContext('trailing action is focused')
+ .toBeTrue();
+
+ await trailingHarness.keypress('ArrowRight');
+ expect(chip.primaryAction.matches(':focus'))
+ .withContext('primary action is focused')
+ .toBeTrue();
+ });
+
+ it('should not bubble when navigating internally', async () => {
+ const chip = await setupTest();
+ const primaryHarness = new Harness(chip.primaryAction);
+ const keydownHandler = jasmine.createSpy();
+ if (!chip.parentElement) {
+ throw new Error('Expected chip to have a parentElement for test.');
+ }
+
+ chip.parentElement.addEventListener('keydown', keydownHandler);
+
+ await primaryHarness.focusWithKeyboard();
+ await primaryHarness.keypress('ArrowRight');
+ expect(keydownHandler).not.toHaveBeenCalled();
+ });
+
+ it('should bubble event when navigating forward past trailing action',
+ async () => {
+ const chip = await setupTest();
+ const trailingHarness = new Harness(chip.trailingAction);
+ const keydownHandler = jasmine.createSpy();
+ if (!chip.parentElement) {
+ throw new Error('Expected chip to have a parentElement for test.');
+ }
+
+ chip.parentElement.addEventListener('keydown', keydownHandler);
+
+ await trailingHarness.focusWithKeyboard();
+ await trailingHarness.keypress('ArrowRight');
+ expect(keydownHandler).toHaveBeenCalledTimes(1);
+ });
+
+ it('should bubble event when navigating backward before primary action',
+ async () => {
+ const chip = await setupTest();
+ const primaryHarness = new Harness(chip.primaryAction);
+ const keydownHandler = jasmine.createSpy();
+ if (!chip.parentElement) {
+ throw new Error('Expected chip to have a parentElement for test.');
+ }
+
+ chip.parentElement.addEventListener('keydown', keydownHandler);
+
+ await primaryHarness.focusWithKeyboard();
+ await primaryHarness.keypress('ArrowLeft');
+ expect(keydownHandler).toHaveBeenCalledTimes(1);
+ });
+
+ it('should do nothing if it does not have multiple actions', async () => {
+ const chip = await setupTest();
+ chip.noTrailingAction = true;
+ await env.waitForStability();
+
+ const primaryHarness = new Harness(chip.primaryAction);
+ await primaryHarness.focusWithKeyboard();
+ await primaryHarness.keypress('ArrowLeft');
+ expect(chip.primaryAction.matches(':focus'))
+ .withContext('primary action is still focused')
+ .toBeTrue();
+ });
+ });
+
  describe('remove action', () => {
  it('should remove chip from DOM when remove button clicked', async () => {
  const chip = await setupTest();