@lion/ui 0.23.0 → 0.25.0

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

@@ -2,7 +2,6 @@ import { LitElement } from 'lit';
 import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
 import { mimicKeyPress } from '../test-helpers/mimicKeyPress.js';
-
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
 /**
@@ -28,7 +27,7 @@ const supportedRoles = [
  * @property {string} tagString
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
 
 /**
  * @param {TestConfig} [customConfig]
@@ -37,15 +36,13 @@ export function runInteractiveListMixinSuite(customConfig) {
   const cfg = {
     tagString: customConfig?.tagString || defineCE(InteractiveListClass),
   };
-
   const { tagString } = cfg;
   const tag = unsafeStatic(tagString);
-
   describe('InteractiveListMixin', () => {
     it(`supports items with role="${supportedRoles.join('|')}"`, async () => {
       const el = await fixture(html`
         <${tag} name="foo">
-          ${supportedRoles.map(role => html` <div role="${role}"></div> `)}
+          ${supportedRoles.map((role) => html` <div role="${role}"></div> `)}
         </${tag}>
       `);
       // @ts-ignore - test element with InteractiveListMixin properties
@@ -55,7 +52,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         expect(el.listItems[i].getAttribute('role')).to.equal(role);
       });
     });
-
     it('moves elements to a private [slot=list] for optimal DX and a11y', async () => {
       const el = await fixture(html`
         <${tag} name="foo">
@@ -64,7 +60,7 @@ export function runInteractiveListMixinSuite(customConfig) {
         </${tag}>
       `);
       // @ts-ignore - test element with InteractiveListMixin properties
-      const listSlotNode = Array.from(el.children).find(c => c.slot === 'list');
+      const listSlotNode = Array.from(el.children).find((c) => c.slot === 'list');
       // @ts-ignore - accessing children property
       const listItemEls = Array.from(listSlotNode.children);
       // @ts-ignore - test element with InteractiveListMixin properties
@@ -72,9 +68,7 @@ export function runInteractiveListMixinSuite(customConfig) {
       // @ts-ignore - test element with InteractiveListMixin properties
       expect(listItemEls.includes(el.listItems[1])).to.be.true;
     });
-
     it('inherits from DisclosureMixin', async () => {});
-
     describe('Active mode', async () => {
       it('supports "activedescendant" pattern', async () => {
         const el = await fixture(html`
@@ -86,7 +80,7 @@ export function runInteractiveListMixinSuite(customConfig) {
         // @ts-ignore - test element with InteractiveListMixin properties
         el.checkedIndex = 0;
         // @ts-ignore - test element with InteractiveListMixin properties
-        const listSlotNode = Array.from(el.children).find(c => c.slot === 'list');
+        const listSlotNode = Array.from(el.children).find((c) => c.slot === 'list');
 
         // @ts-ignore - test element with InteractiveListMixin properties
         // @ts-ignore - test element with InteractiveListMixin properties
@@ -98,7 +92,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         el.activeIndex = 1;
         expect(listSlotNode?.hasAttribute('aria-activedescendant')).to.be.true;
       });
-
       it('supports "roving-tabindex" pattern', async () => {
         const el = await fixture(html`
           <${tag} name="foo" ._activeMode="${'roving-tabindex'}">
@@ -127,7 +120,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         expect(document.activeElement).to.equal(el.listItems[1]);
       });
     });
-
     describe('default selected', () => {
       it('sets the checkedIndex to 0 by default when hasNoDefaultSelected is false', async () => {
         const el = await fixture(html`
@@ -139,7 +131,6 @@ export function runInteractiveListMixinSuite(customConfig) {
           expect(el.checkedIndex).to.equal(0);
         }
       });
-
       it('sets the checkedIndex to -1 when hasNoDefaultSelected is true', async () => {
         const el = await fixture(html`
           <${tag} has-no-default-selected>
@@ -149,14 +140,12 @@ export function runInteractiveListMixinSuite(customConfig) {
         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.
       const item = /** @param {number} i, @param {string} role */ (i, role) => html`
         <div role="${role}" id="item${i}">Item ${i}</div>
       `;
-
       it('set checked state sets aria-current attribute with role="listitem"', async () => {
         const el = await fixture(html`
           <${tag}>
@@ -170,7 +159,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         el.setCheckedIndex(0);
         expect(item1.getAttribute('aria-current')).to.equal('false');
       });
-
       it('set checked state sets aria-selected attribute with role="option"', async () => {
         const el = await fixture(html`
           <${tag}>
@@ -180,14 +168,11 @@ export function runInteractiveListMixinSuite(customConfig) {
         `);
         const item1 = el.listItems[1];
         expect(item1.getAttribute('aria-selected')).to.equal('false');
-
         el.setCheckedIndex(1);
         expect(item1.getAttribute('aria-selected')).to.equal('true');
-
         el.setCheckedIndex(0);
         expect(item1.getAttribute('aria-selected')).to.equal('false');
       });
-
       it('set checked state sets aria-selected attribute with role="treeitem"', async () => {
         const el = await fixture(html`
           <${tag}>
@@ -202,7 +187,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         el.setCheckedIndex(0);
         expect(item1.getAttribute('aria-selected')).to.equal('false');
       });
-
       it('set checked state sets aria-current attribute with role="menuitem"', async () => {
         const el = await fixture(html`
           <${tag}>
@@ -216,7 +200,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         el.setCheckedIndex(0);
         expect(item1.getAttribute('aria-current')).to.equal('false');
       });
-
       it('set checked state sets aria-checked attribute with role="menuitemradio"', async () => {
         const el = await fixture(html`
           <${tag}>
@@ -230,7 +213,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         el.setCheckedIndex(0);
         expect(item1.getAttribute('aria-checked')).to.equal('false');
       });
-
       it('set checked state sets aria-checked attribute with role="menuitemcheckbox"', async () => {
         const el = await fixture(html`
           <${tag} multiple>
@@ -245,7 +227,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         // As this is multiple choice it doesn't unset the checked state
         expect(item1.getAttribute('aria-checked')).to.equal('true');
       });
-
       it('can set checked state to "page" for role="listitem"', async () => {
         const el = await fixture(html`
           <${tag}>
@@ -259,7 +240,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         el.setCheckedIndex(0);
         expect(item1.getAttribute('aria-current')).to.equal('false');
       });
-
       it('can set checked state to "mixed" for role="menuitemcheckbox"', async () => {
         const el = await fixture(html`
           <${tag} multiple>
@@ -275,7 +255,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         el.setCheckedIndex(0);
         expect(item1.getAttribute('aria-checked')).to.equal('mixed');
       });
-
       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>
@@ -288,7 +267,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         }).to.not.throw();
         expect(el.checkedIndex).to.equal(-1);
       });
-
       it('unsets checked on other options when option becomes checked', async () => {
         const el = await fixture(html`
           <${tag}>
@@ -305,7 +283,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         expect(listItems[1].hasAttribute('checked')).to.be.true;
       });
     });
-
     it('sets aria-current="page" when the location href matches the item href', async () => {
       const el = await fixture(html`
         <${tag}>
@@ -341,7 +318,6 @@ export function runInteractiveListMixinSuite(customConfig) {
           <a href="#foobar">Item 2</a>
         </div>
       `;
-
       it('uses "block" as the default axis and navigates vertically', async () => {
         const el = await fixture(html`<${tag}>${itemTemplate}</${tag}>`);
         expect(el.axis).to.equal('block');
@@ -354,7 +330,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         mimicKeyPress(_listNode, 'ArrowRight');
         expect(el.activeIndex).to.equal(1);
       });
-
       it('navigates horizontally on axis="inline"', async () => {
         const el = await fixture(html`<${tag} axis="inline">${itemTemplate}</${tag}>`);
         expect(el.axis).to.equal('inline');
@@ -368,14 +343,12 @@ export function runInteractiveListMixinSuite(customConfig) {
         mimicKeyPress(_listNode, 'ArrowDown');
         expect(el.activeIndex).to.equal(1);
       });
-
       it('reflects the axis property to the attribute', async () => {
         const el = await fixture(html`<${tag}>${itemTemplate}</${tag}>`);
         el.axis = 'inline';
         await el.updateComplete;
         expect(el.getAttribute('axis')).to.equal('inline');
       });
-
       it('wraps around at the first/last item when "wrap" is set', async () => {
         const el = await fixture(html`<${tag} wrap>${itemTemplate}</${tag}>`);
         expect(el.wrap).to.be.true;
@@ -386,7 +359,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         mimicKeyPress(_listNode, 'ArrowDown');
         expect(el.activeIndex).to.equal(0);
       });
-
       it('does not wrap around when "wrap" is not set', async () => {
         const el = await fixture(html`<${tag}>${itemTemplate}</${tag}>`);
         expect(el.wrap).to.be.false;
@@ -397,7 +369,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         mimicKeyPress(_listNode, 'ArrowDown');
         expect(el.activeIndex).to.equal(2);
       });
-
       it('applies "wrap" when it changes after the first render', async () => {
         const el = await fixture(html`<${tag}>${itemTemplate}</${tag}>`);
         expect(el.wrap).to.be.false;
@@ -406,7 +377,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         expect(el.wrap).to.be.true;
       });
     });
-
     describe('Interactions', () => {
       describe('Keyboard navigation', () => {
         it('navigates between items on [ArrowDown] [ArrowUp] keys', async () => {
@@ -429,7 +399,6 @@ export function runInteractiveListMixinSuite(customConfig) {
 
           // Normalize
           el.activeIndex = 0;
-
           mimicKeyPress(_listNode, 'ArrowDown');
           expect(el.activeIndex).to.be.equal(1);
           mimicKeyPress(_listNode, 'ArrowDown');
@@ -437,7 +406,6 @@ export function runInteractiveListMixinSuite(customConfig) {
           mimicKeyPress(_listNode, 'ArrowUp');
           expect(el.activeIndex).to.be.equal(1);
         });
-
         it('navigates between items on [ArrowRight] [ArrowLeft] keys when axis is "inline" and _activeMode="tabbable-disclosure"', async () => {
           const el = await fixture(html`
             <${tag} axis="inline">
@@ -459,7 +427,6 @@ export function runInteractiveListMixinSuite(customConfig) {
 
           // Normalize
           el.activeIndex = 0;
-
           mimicKeyPress(_listNode, 'ArrowRight');
           expect(el.activeIndex).to.be.equal(1);
           mimicKeyPress(_listNode, 'ArrowRight');
@@ -467,7 +434,6 @@ export function runInteractiveListMixinSuite(customConfig) {
           mimicKeyPress(_listNode, 'ArrowLeft');
           expect(el.activeIndex).to.be.equal(1);
         });
-
         it('stops navigation by default at end of option list', async () => {
           const el = await fixture(html`
             <${tag}>
@@ -488,15 +454,12 @@ export function runInteractiveListMixinSuite(customConfig) {
 
           // 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);
         });
-
         it('navigates to first and last option with [Home] and [End] keys', async () => {
           const el = await fixture(html`
             <${tag} axis="inline">
@@ -517,7 +480,6 @@ export function runInteractiveListMixinSuite(customConfig) {
 
           // Normalize
           el.activeIndex = 2;
-
           mimicKeyPress(_listNode, 'Home');
           expect(el.activeIndex).to.equal(0);
           mimicKeyPress(_listNode, 'End');
@@ -525,7 +487,6 @@ export function runInteractiveListMixinSuite(customConfig) {
         });
       });
     });
-
     describe('Widget extensions', () => {
       it('can be extended to [role=listbox]', async () => {});
       it('can be extended to [role=menu]', async () => {});

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

@@ -9,7 +9,7 @@ import { LionMenu } from '../src/LionMenu.js';
  * @property {string} tagString
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
 
 /**
  * @param {TestConfig} [customConfig]
@@ -18,10 +18,8 @@ export function runLionMenuSuite(customConfig) {
   const cfg = {
     tagString: customConfig?.tagString || defineCE(LionMenu),
   };
-
   const { tagString } = cfg;
   const tag = unsafeStatic(tagString);
-
   describe('LionMenu', () => {
     it('sets the correct role to the listNode', async () => {
       const el = await fixture(html`
@@ -34,11 +32,9 @@ export function runLionMenuSuite(customConfig) {
           </div>
         </${tag}>
       `);
-
       const listNode = el.querySelector('[slot="list"]');
       expect(listNode?.getAttribute('role')).to.equal('menu');
     });
-
     it('sets the correct role to the listNode when activeMode is tabbable-disclosure', async () => {
       const el = await fixture(html`
         <${tag} ._activeMode=${'tabbable-disclosure'}>
@@ -53,7 +49,6 @@ export function runLionMenuSuite(customConfig) {
       const listNode = el.querySelector('[slot="list"]');
       expect(listNode?.getAttribute('role')).to.equal('list');
     });
-
     it('sets the correct roles when it is a bar', async () => {
       const el = await fixture(html`
         <${tag}>
@@ -65,7 +60,6 @@ export function runLionMenuSuite(customConfig) {
           </div>
         </${tag}>
       `);
-
       el._listRole = 'menu';
       expect(el._listRole).to.equal('menu');
       expect(el.axis).to.equal('block');
@@ -75,7 +69,6 @@ export function runLionMenuSuite(customConfig) {
       expect(el._listRole).to.equal('menubar');
       expect(el.axis).to.equal('inline');
     });
-
     describe('Programmatic interaction', () => {
       it('allows groups within one menu level', async () => {
         const el = await fixture(html`

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

@@ -5,7 +5,6 @@ import { useFakeTimers } from 'sinon';
 import { css } from 'lit';
 import { getDeepActiveElement } from '@lion/ui/overlays.js';
 import { LionMenu } from '../src/LionMenu.js';
-
 const l2Style = css`
   [level='2'] > [slot='list'] {
     position: absolute;
@@ -18,7 +17,6 @@ const l2Style = css`
     box-sizing: border-box;
   }
 `;
-
 const config = {
   l1: {
     isBar: true,
@@ -44,31 +42,29 @@ const config = {
     },
   },
 };
-
 export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
   const tagString = defineCE(class extends klass {});
   const tag = unsafeStatic(tagString);
-
   describe('LionMenu interactions', () => {
     /** @type {import('sinon').SinonFakeTimers | null} */
     let clock = null;
 
     /** @param {LionMenu} el */
-    const isMoreButtonMenuShown = el => {
+    const isMoreButtonMenuShown = (el) => {
       const menu = el.querySelector('[data-more-button-menu]');
       return menu ? getComputedStyle(menu).width !== '0px' : false;
     };
 
     /** @param {LionMenu} el */
-    const getMoreButton = el =>
-      /** @type {HTMLElement | null} */ (el.querySelector('[data-more-button]'));
+    const getMoreButton = (el) =>
+      /** @type {HTMLElement | null} */ el.querySelector('[data-more-button]');
 
     /** @param {LionMenu} el */
-    const isAnyL2MenuShown = el =>
-      Array.from(el.querySelectorAll('[level="2"]')).some(menu => menu.hasAttribute('opened'));
+    const isAnyL2MenuShown = (el) =>
+      Array.from(el.querySelectorAll('[level="2"]')).some((menu) => menu.hasAttribute('opened'));
 
     /** @param {LionMenu} el */
-    const focusLastVisibleItemInMainMenu = async el => {
+    const focusLastVisibleItemInMainMenu = async (el) => {
       const moreButton = el.querySelector('[data-more-button]');
       const previousElement = moreButton?.parentElement?.previousElementSibling;
       const anchor = previousElement?.querySelector('a');
@@ -77,7 +73,6 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       }
       await aTimeout(0);
     };
-
     const hitShiftTab = async () => {
       await sendKeys({
         down: 'Shift',
@@ -95,7 +90,6 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
      */
     function getCoordinates(element) {
       const { x, y, height } = element.getBoundingClientRect();
-
       return {
         x: Math.floor(x + window.pageXOffset),
         y: Math.floor(y + window.pageYOffset + height / 2),
@@ -109,19 +103,22 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
      * events and otherwise we need to emit those events programmatically
      * @param {LionMenu} el
      */
-    const clickOnMoreButton = async el => {
+    const clickOnMoreButton = async (el) => {
       const moreButton = getMoreButton(el);
       if (!moreButton) {
         return;
       }
       const { x, y } = getCoordinates(moreButton);
-      await sendMouse({ type: 'click', position: [x, y] });
+      await sendMouse({
+        type: 'click',
+        position: [x, y],
+      });
       clock?.tick(100);
       await aTimeout(0);
     };
 
     /** @param {LionMenu} el */
-    const waitResizeEventDebounce = async el => {
+    const waitResizeEventDebounce = async (el) => {
       await el.updateComplete;
       // wait for resize event debouncer
       clock?.tick(55);
@@ -137,7 +134,7 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
     };
 
     /** @param {LionMenu} el */
-    const getDirectListItemsUnderMoreButtonMenu = el => [
+    const getDirectListItemsUnderMoreButtonMenu = (el) => [
       ...Array.from(el.querySelectorAll('[data-more-button-menu] > [role="listitem"]')),
     ];
 
@@ -194,12 +191,10 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
           ${l2Style}
         </style>    
       `);
-
-      const hybridEl = /** @type {LionMenu} */ (el);
+      const hybridEl = /** @type {LionMenu} */ el;
       await waitResizeEventDebounce(hybridEl);
       return hybridEl;
     };
-
     beforeEach(() => {
       clock = useFakeTimers({
         shouldAdvanceTime: true,
@@ -209,7 +204,6 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       clock?.restore();
       await resetMouse();
     });
-
     it(`[
           {
             action: 'Click on More button',
@@ -227,7 +221,8 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       const el = await getFixture();
       expect(isAnyL2MenuShown(el)).to.be.false;
       await clickOnMoreButton(el);
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item4 > button'))?.click();
+      /** @type {HTMLButtonElement | null} */
+      el.querySelector('#item4 > button')?.click();
       await waitAfterMoreButtonMenuHides();
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.true;
@@ -235,7 +230,6 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       expect(isAnyL2MenuShown(el)).to.be.false;
       expect(isMoreButtonMenuShown(el)).to.be.true;
     });
-
     it(`[
       {
         action: 'Focus last visible L1 item in the main menu',
@@ -255,14 +249,12 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       await sendKeys({
         press: 'Tab',
       });
-
       expect(isMoreButtonMenuShown(el)).to.be.true;
 
       // make sure the first L1 inside More button menu is focused
       const firstItemInMoreMenu = getDirectListItemsUnderMoreButtonMenu(el)[0];
       expect(firstItemInMoreMenu.contains(getDeepActiveElement())).to.be.true;
     });
-
     it(`[
       {
         action: 'Click on the L1 item that has children in the *main* menu',
@@ -282,17 +274,15 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       expect(isAnyL2MenuShown(el)).to.be.false;
 
       // click on the first L1 item that has L2 children
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item1 > button'))?.click();
+      /** @type {HTMLButtonElement | null} */
+      el.querySelector('#item1 > button')?.click();
       await aTimeout(0);
-
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.true;
-
       await clickOnMoreButton(el);
       expect(isMoreButtonMenuShown(el)).to.be.true;
       expect(isAnyL2MenuShown(el)).to.be.false;
     });
-
     it(`[
       {
         action: 'Click on the L1 item that has children in the *main* menu',
@@ -320,7 +310,8 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       const el = await getFixture();
       expect(isAnyL2MenuShown(el)).to.be.false;
       // click on the first L1 item that has L2 children
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item1 > button'))?.click();
+      /** @type {HTMLButtonElement | null} */
+      el.querySelector('#item1 > button')?.click();
 
       // focus #item1.1
       await sendKeys({
@@ -337,11 +328,9 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       await sendKeys({
         press: 'Tab',
       });
-
       expect(isMoreButtonMenuShown(el)).to.be.true;
       expect(isAnyL2MenuShown(el)).to.be.false;
     });
-
     it(`[
       {
         action: 'Focus last visible L1 item in the main menu',
@@ -367,14 +356,12 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       await sendKeys({
         press: 'Tab',
       });
-
       expect(isMoreButtonMenuShown(el)).to.be.true;
       expect(isAnyL2MenuShown(el)).to.be.false;
       await clickOnMoreButton(el);
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.false;
     });
-
     it(`[
       {
         action: 'Focus last visible L1 item in the main menu',
@@ -401,18 +388,15 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       await sendKeys({
         press: 'Tab',
       });
-
       expect(isMoreButtonMenuShown(el)).to.be.true;
       expect(isAnyL2MenuShown(el)).to.be.false;
 
       // hit Shift + Tab
       await hitShiftTab();
       await waitAfterMoreButtonMenuHides();
-
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.false;
     });
-
     it(`[
       {
         action: 'Focus last visible L1 item in the main menu',
@@ -444,7 +428,6 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       await sendKeys({
         press: 'Tab',
       });
-
       expect(isMoreButtonMenuShown(el)).to.be.true;
       expect(isAnyL2MenuShown(el)).to.be.false;
 
@@ -453,11 +436,9 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
         press: 'Enter',
       });
       await waitAfterMoreButtonMenuHides();
-
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.true;
     });
-
     it(`[
       {
         action: 'Focus last visible L1 item in the main menu',
@@ -507,7 +488,6 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       await sendKeys({
         press: 'Tab',
       });
-
       expect(isMoreButtonMenuShown(el)).to.be.true;
       expect(isAnyL2MenuShown(el)).to.be.false;
 
@@ -516,7 +496,6 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
         press: 'Enter',
       });
       await waitAfterMoreButtonMenuHides();
-
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.true;
 
@@ -537,11 +516,9 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       // Focus #item2. It is the last visible item in the main menu
       await hitShiftTab();
       await waitAfterMoreButtonMenuHides();
-
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.false;
     });
-
     it(`[
       {
         action: 'Click on More button',
@@ -563,7 +540,8 @@ export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
       const el = await getFixture();
       await clickOnMoreButton(el);
       // Inside more button menu, click on L1 item that has L2
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item4 > button'))?.click();
+      /** @type {HTMLButtonElement | null} */
+      el.querySelector('#item4 > button')?.click();
       await waitAfterMoreButtonMenuHides();
       expect(isMoreButtonMenuShown(el)).to.be.false;
       expect(isAnyL2MenuShown(el)).to.be.true;