@lion/ui 0.18.0-menu-system.6 → 0.18.0-menu-system.7

package/components/menu/test-suites/InteractiveListMixin.suite.js

@@ -1,9 +1,7 @@
 import { LitElement } from 'lit';
 import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
-import { sendMouse, resetMouse } from '@web/test-runner-commands';
-import { useFakeTimers } from 'sinon';
-import { getDeepActiveElement } from '@lion/ui/overlays.js';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
+import { mimicKeyPress } from '../test-helpers/mimicKeyPress.js';
 
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
@@ -32,19 +30,6 @@ const supportedRoles = [
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
 
-const l1Config = {
-  isBar: true,
-  hasFullWidthFlyout: true,
-  openableConfig: {
-    // We want disclosure behavior
-    placementMode: 'custom',
-    // N.B. we don't have an invoker...
-    isActivated: false,
-    inheritsReferenceWidth: 'none',
-    focusContentOnOpen: true,
-  },
-};
-
 /**
  * @param {TestConfig} [customConfig]
  */
@@ -143,6 +128,28 @@ export function runInteractiveListMixinSuite(customConfig) {
       });
     });
 
+    describe('preselect', () => {
+      it('sets the checkedIndex to 0 by default when noPreselect is false', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <div role="menuitem" id="item1">Item 1</div>
+          </${tag}>
+        `);
+        if (!el.noPreselect) {
+          expect(el.checkedIndex).to.equal(0);
+        }
+      });
+
+      it('sets the checkedIndex to -1 when noPreselect is true', async () => {
+        const el = await fixture(html`
+          <${tag} no-preselect>
+            <div role="menuitem" id="item1">Item 1</div>
+          </${tag}>
+        `);
+        expect(el.checkedIndex).to.equal(-1);
+      });
+    });
+
     describe('Programmatic interaction', () => {
       // If we have the item line directly in the fixture the linting rule lit-a11y/role-has-required-aria-attrs
       // will fail. Inside our code we set the required aria attributes, but the linter doesn't know that.
@@ -226,7 +233,7 @@ export function runInteractiveListMixinSuite(customConfig) {
 
       it('set checked state sets aria-checked attribute with role="menuitemcheckbox"', async () => {
         const el = await fixture(html`
-          <${tag}>
+          <${tag} multiple-choice>
             ${item(1, 'menuitemcheckbox')}
             ${item(2, 'menuitemcheckbox')}
           </${tag}>
@@ -255,7 +262,7 @@ export function runInteractiveListMixinSuite(customConfig) {
 
       it('can set checked state to "mixed" for role="menuitemcheckbox"', async () => {
         const el = await fixture(html`
-          <${tag}>
+          <${tag} multiple-choice>
             ${item(1, 'menuitemcheckbox')}
             ${item(2, 'menuitemcheckbox')}
           </${tag}>
@@ -271,7 +278,7 @@ export function runInteractiveListMixinSuite(customConfig) {
 
       it('does not allow to set checkedIndex or activeIndex to be out of bound', async () => {
         const el = await fixture(html`
-          <${tag} has-no-default-selected autocomplete="list">
+          <${tag} no-preselect>
             <div role="menuitem" id="item1">Item 1</div>
           </${tag}>
         `);
@@ -299,344 +306,149 @@ export function runInteractiveListMixinSuite(customConfig) {
       });
     });
 
+    it('sets aria-current="page" when the location href matches the item href', async () => {
+      const el = await fixture(html`
+        <${tag}>
+          <div role="menuitem" id="item0">
+            <a href="${window.location.href}">Item 0</a>
+          </div>
+            <div role="menuitem" id="item1">
+              <a href="#bar">Item 1</a>
+          </div>
+        </${tag}>
+      `);
+      const item0 = el.listItems[0];
+      expect(item0.getAttribute('aria-current')).to.equal('page');
+    });
+
     // Copy tests from ListboxMixin. Later, make this mixin a fundament of the ListboxMixin
 
     // orientation
     // multipleChoice
     // selectionFollowsFocus
     // rotateKeyboardNavigation
-    // noPreselect
     // _scrollTargetNode
 
-    describe('Widget extensions', () => {
-      it('can be extended to [role=listbox]', async () => {});
-      it('can be extended to [role=menu]', async () => {});
-      it('can be extended to [role=menubar]', async () => {});
-      it('can be extended to [role=toolbar]', async () => {});
-      it('can be extended to [role=tree]', async () => {});
-    });
-
-    describe('Overflow handling', () => {
-      /** @type {import('sinon').SinonFakeTimers | null} */
-      let clock = null;
-
-      /** @param {HTMLElement} el */
-      const isMoreButtonShown = el => {
-        const wrapper = /** @type {HTMLElement | null} */ (
-          el.querySelector('[data-more-button-wrapper]')
-        );
-        return wrapper?.style.display !== 'none';
-      };
-
-      /** @param {HTMLElement} el */
-      const isMoreButtonMenuShown = el => {
-        const menu = el.querySelector('[data-more-button-menu]');
-        return menu ? getComputedStyle(menu).width !== '0px' : false;
-      };
-
-      /** @param {HTMLElement} el */
-      const getMoreButton = el =>
-        /** @type {HTMLElement | null} */ (el.querySelector('[data-more-button]'));
-      /** @param {HTMLElement} el */
-      const getMoreButtonMenu = el => el.querySelector('[data-more-button-menu]');
-
-      /**
-       * @param {HTMLElement} element
-       */
-      function getCoordinates(element) {
-        const { x, y, height } = element.getBoundingClientRect();
-
-        return {
-          x: Math.floor(x + window.pageXOffset),
-          y: Math.floor(y + window.pageYOffset + height / 2),
-        };
-      }
-      /** @param {HTMLElement} el */
-      const clickOnMoreButton = async el => {
-        const moreButton = getMoreButton(el);
-        if (!moreButton) {
-          return;
-        }
-        const { x, y } = getCoordinates(moreButton);
-        await sendMouse({ type: 'click', position: [x, y] });
-        clock?.tick(100);
-      };
-
-      /** @param {HTMLElement} el */
-      const getDirectListItemsUnderMoreButtonMenu = el => [
-        ...Array.from(
-          el.querySelectorAll('[data-more-button-menu] > [role="listitem"]'),
-          item => /** @type {HTMLElement} */ (item),
-        ),
-      ];
-
-      /** @param {HTMLElement} el */
-      const getDirectListItemsUnderMainMenu = el => [
-        ...Array.from(
-          el.querySelectorAll('[slot="list"] > [role="listitem"]'),
-          item => /** @type {HTMLElement} */ (item),
-        ),
-      ];
-
-      /** @param {HTMLElement & { updateComplete: Promise<unknown> }} el */
-      const waitResizeEventDebounce = async el => {
-        await el.updateComplete;
-        // wait for resize event debouncer
-        clock?.tick(55);
-      };
-
-      beforeEach(() => {
-        clock = useFakeTimers({
-          shouldAdvanceTime: true,
+    describe('Interactions', () => {
+      describe('Keyboard navigation', () => {
+        it('navigates between items on [ArrowDown] [ArrowUp] keys', async () => {
+          const el = await fixture(html`
+            <${tag}>
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 0;
+
+          mimicKeyPress(_listNode, 'ArrowDown');
+          expect(el.activeIndex).to.be.equal(1);
+          mimicKeyPress(_listNode, 'ArrowDown');
+          expect(el.activeIndex).to.be.equal(2);
+          mimicKeyPress(_listNode, 'ArrowUp');
+          expect(el.activeIndex).to.be.equal(1);
         });
-      });
-      afterEach(async () => {
-        clock?.restore();
-        await resetMouse();
-      });
-
-      it('should show no More button when all items fit', async () => {
-        const el = await fixture(html`
-          <${tag} name="foo" ._activeMode="${'tabbable-disclosure'}" .itemWrap="${true}" 
-            data-has-full-width-flyout orientation="horizontal" style="min-width: 170px; max-width: 170px;">
-            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 1</a>
-            </div>
-            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 2</a>
-            </div>
-            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 3</a>
-            </div>
-            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-              <button>More</button>
-            </div>
-          </${tag}>
-        `);
-        await waitResizeEventDebounce(el);
-        // 3 items is 150px. They fit into 170px parent
-        expect(isMoreButtonShown(el)).to.equal(false);
-      });
 
-      it('should show  More button when not all items fit', async () => {
-        const el = await fixture(html`
-          <${tag} 
-            .itemWrap="${true}"
-            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
-            .config="${l1Config.openableConfig}"
-            .bar="${l1Config.isBar}"
-            ._activeMode="${'tabbable-disclosure'}" 
-            style="min-width: 170px; max-width: 170px;"            
-          >
-            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 1</a>
-            </div>
-            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 2</a>
-            </div>
-            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 3</a>
-            </div>
-            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 4</a>
-            </div>
-            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-              <button>More</button>
-            </div>
-          </${tag}>
-          <style>
-            [orientation='horizontal'] ::slotted([slot='list']) {
-              display: flex;
-            }
-          </style>
-        `);
-
-        await waitResizeEventDebounce(el);
-        // 4 items is 200px. They don't fit into 170px parent. So More button should be shown
-        expect(isMoreButtonShown(el)).to.equal(true);
-      });
-
-      it('should show 2 items when clicking on `More` button', async () => {
-        const el = await fixture(html`
-          <${tag} 
-            .itemWrap="${true}"
-            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
-            .config="${l1Config.openableConfig}"
-            .bar="${l1Config.isBar}"
-            ._activeMode="${'tabbable-disclosure'}" 
-            style="min-width: 170px; max-width: 170px;"            
-          >          
-            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 1</a>
-            </div>
-            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 2</a>
-            </div>
-            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 3</a>
-            </div>
-            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 4</a>
-            </div>
-            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-              <button>More</button>
-            </div>
-          </${tag}>
-        `);
-
-        await waitResizeEventDebounce(el);
-        await clickOnMoreButton(el);
-
-        expect(isMoreButtonMenuShown(el)).to.equal(true);
-        const labels = getDirectListItemsUnderMoreButtonMenu(el).map(
-          item => item.textContent?.trim() ?? '',
-        );
-        expect(labels).to.deep.equal(['Item 3', 'Item 4']);
-      });
-
-      it('should focus more button menu container when clicking on `More` button', async () => {
-        const el = await fixture(html`
-          <${tag} 
-            .itemWrap="${true}"
-            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
-            .config="${l1Config.openableConfig}"
-            .bar="${l1Config.isBar}"
-            ._activeMode="${'tabbable-disclosure'}" 
-            style="min-width: 170px; max-width: 170px;"            
-          >          
-            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 1</a>
-            </div>
-            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 2</a>
-            </div>
-            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 3</a>
-            </div>
-            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 4</a>
-            </div>
-            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-              <button>More</button>
-            </div>
-          </${tag}>
-        `);
-
-        await waitResizeEventDebounce(el);
-        await clickOnMoreButton(el);
-
-        expect(isMoreButtonMenuShown(el)).to.equal(true);
-        expect(getDeepActiveElement() === getMoreButtonMenu(el)).to.equal(true);
-      });
-
-      it('should open and then close More button menu when clicking 2 times on the More button', async () => {
-        const el = await fixture(html`
-          <${tag} 
-            .itemWrap="${true}"
-            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
-            .config="${l1Config.openableConfig}"
-            .bar="${l1Config.isBar}"
-            ._activeMode="${'tabbable-disclosure'}" 
-            style="min-width: 170px; max-width: 170px;"            
-          > 
-            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 1</a>
-            </div>
-            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 2</a>
-            </div>
-            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 3</a>
-            </div>
-            <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 4</a>
-            </div>
-            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-              <button>More</button>
-            </div>
-          </${tag}>
-        `);
-
-        await waitResizeEventDebounce(el);
-        expect(isMoreButtonMenuShown(el)).to.equal(false);
-        await clickOnMoreButton(el);
-        expect(isMoreButtonMenuShown(el)).to.equal(true);
-        await clickOnMoreButton(el);
-        expect(isMoreButtonMenuShown(el)).to.equal(false);
-      });
+        it('navigates between items on [ArrowRight] [ArrowLeft] keys when orientation is "horizontal" and _activeMode="tabbable-disclosure"', async () => {
+          const el = await fixture(html`
+            <${tag} orientation="horizontal">
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+          el._activeMode = 'tabbable-disclosure';
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 0;
+
+          mimicKeyPress(_listNode, 'ArrowRight');
+          expect(el.activeIndex).to.be.equal(1);
+          mimicKeyPress(_listNode, 'ArrowRight');
+          expect(el.activeIndex).to.be.equal(2);
+          mimicKeyPress(_listNode, 'ArrowLeft');
+          expect(el.activeIndex).to.be.equal(1);
+        });
 
-      it('should remove `More` button when making font smaller', async () => {
-        const el = await fixture(html`
-          <${tag} name="foo" ._activeMode="${'tabbable-disclosure'}" .itemWrap="${true}" 
-            data-has-full-width-flyout orientation="horizontal" style="min-width: 170px; max-width: 170px;">
-            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 1</a>
-            </div>
-            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 2</a>
-            </div>
-            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 3</a>
-            </div>
-            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-              <button>More</button>
-            </div>
-          </${tag}>
-        `);
-        await waitResizeEventDebounce(el);
-
-        /**
-         * Make font smaller for first level items to force
-         * the menu render all 4 items and no `More` button
-         */
-        getDirectListItemsUnderMainMenu(el).forEach(item => {
-          // eslint-disable-next-line no-param-reassign
-          item.style.fontSize = '12px';
+        it('stops navigation by default at end of option list', async () => {
+          const el = await fixture(html`
+            <${tag}>
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 0;
+
+          mimicKeyPress(_listNode, 'ArrowUp');
+          expect(el.activeIndex).to.be.equal(0);
+
+          el.activeIndex = 2;
+          mimicKeyPress(_listNode, 'ArrowDown');
+          expect(el.activeIndex).to.be.equal(2);
         });
-        el?.dispatchEvent(new CustomEvent('resize', { composed: true, bubbles: true }));
-        await waitResizeEventDebounce(el);
-        expect(isMoreButtonShown(el)).to.equal(false);
-      });
 
-      it('should add `More` button when making font larger', async () => {
-        const el = await fixture(html`
-          <${tag} 
-            .itemWrap="${true}"
-            ?data-has-full-width-flyout="${l1Config.hasFullWidthFlyout}"
-            .config="${l1Config.openableConfig}"
-            .bar="${l1Config.isBar}"
-            ._activeMode="${'tabbable-disclosure'}" 
-            style="min-width: 170px; max-width: 170px;"            
-          > 
-            <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 1</a>
-            </div>
-            <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 2</a>
-            </div>
-            <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-              <a href="#">Item 3</a>
-            </div>
-            <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-              <button>More</button>
-            </div>
-          </${tag}>
-        `);
-        await waitResizeEventDebounce(el);
-
-        expect(getDirectListItemsUnderMainMenu(el).length).to.equal(3);
-        /**
-         * Make font larger for first level items to force
-         * the More button to appear
-         */
-        getDirectListItemsUnderMainMenu(el).forEach(item => {
-          // eslint-disable-next-line no-param-reassign
-          item.style.fontSize = '40px';
+        it('navigates to first and last option with [Home] and [End] keys', async () => {
+          const el = await fixture(html`
+            <${tag} orientation="horizontal">
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 2;
+
+          mimicKeyPress(_listNode, 'Home');
+          expect(el.activeIndex).to.equal(0);
+          mimicKeyPress(_listNode, 'End');
+          expect(el.activeIndex).to.equal(2);
         });
-        el?.dispatchEvent(new CustomEvent('resize', { composed: true, bubbles: true }));
-        await waitResizeEventDebounce(el);
-        expect(isMoreButtonShown(el)).to.equal(true);
       });
     });
+
+    describe('Widget extensions', () => {
+      it('can be extended to [role=listbox]', async () => {});
+      it('can be extended to [role=menu]', async () => {});
+      it('can be extended to [role=menubar]', async () => {});
+      it('can be extended to [role=toolbar]', async () => {});
+      it('can be extended to [role=tree]', async () => {});
+    });
   });
 }