@crowdstrike/glide-core 0.7.0 → 0.9.0

package/dist/menu.test.interactions.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -7,7 +8,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import './menu.link.js';
 import './menu.options.js';
 import { LitElement } from 'lit';
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.js';
@@ -40,24 +41,114 @@ it('opens on click', async () => {
       </glide-core-menu-options>
     </glide-core-menu>`);
     component.querySelector('button')?.click();
-    await elementUpdated(component);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const target = component.querySelector('button');
+    const options = component.querySelector('glide-core-menu-options');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
+    expect(target?.ariaExpanded).to.equal('true');
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+});
+it('opens when `open` is set programmatically', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.open = true;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const target = component.querySelector('button');
+    const options = component.querySelector('glide-core-menu-options');
+    const link = component.querySelector('glide-core-menu-link');
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
+    expect(target?.ariaExpanded).to.equal('true');
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+});
+it('opens when `disabled` is set programmatically on its target', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target" disabled>Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const target = component.querySelector('button');
+    assert(target);
+    target.disabled = false;
+    target.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
     expect(target?.ariaExpanded).to.equal('true');
 });
+it('opens when `aria-disabled` is set programmatically on its target', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target" aria-disabled="true">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const target = component.querySelector('button');
+    assert(target);
+    target.ariaDisabled = 'false';
+    target.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('closes when `open` is set programmatically', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    // Wait for Floating UI.
+    await aTimeout(0);
+    component.open = false;
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const target = component.querySelector('button');
+    const options = component.querySelector('glide-core-menu-options');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
+    expect(target?.ariaExpanded).to.equal('false');
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+});
 it('does not open on click when there are no options', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
       <glide-core-menu-options> </glide-core-menu-options>
     </glide-core-menu>`);
     component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -70,11 +161,13 @@ it('does not open when `disabled` is set on its target', async () => {
       </glide-core-menu-options>
     </glide-core-menu>`);
     component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -88,13 +181,14 @@ it('does not open when `disabled` is set programmatically on its target', async
     </glide-core-menu>`);
     const target = component.querySelector('button');
     assert(target);
-    target.click();
     target.disabled = true;
-    await elementUpdated(component);
+    target.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -108,10 +202,12 @@ it('does not open when `aria-disabled` is set on its target', async () => {
     </glide-core-menu>`);
     const target = component.querySelector('button');
     target?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -125,14 +221,12 @@ it('does not open when `aria-disabled` is set programmatically on its target', a
     </glide-core-menu>`);
     const button = component.querySelector('button');
     assert(button);
-    button?.click();
     button.ariaDisabled = 'true';
-    await elementUpdated(component);
+    button?.click();
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
-    expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -151,7 +245,7 @@ it('opens on Enter', async () => {
     const target = component.querySelector('button');
     const link = component.querySelector('glide-core-menu-link');
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
     expect(target?.ariaExpanded).to.equal('true');
 });
@@ -170,7 +264,7 @@ it('opens on ArrowUp', async () => {
     const target = component.querySelector('button');
     const link = component.querySelector('glide-core-menu-link');
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
     expect(target?.ariaExpanded).to.equal('true');
 });
@@ -189,7 +283,7 @@ it('opens on ArrowDown', async () => {
     const target = component.querySelector('button');
     const link = component.querySelector('glide-core-menu-link');
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
     expect(target?.ariaExpanded).to.equal('true');
 });
@@ -208,7 +302,7 @@ it('opens on Space', async () => {
     const target = component.querySelector('button');
     const link = component.querySelector('glide-core-menu-link');
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
     expect(target?.ariaExpanded).to.equal('true');
 });
@@ -223,7 +317,7 @@ it('does not open on Space when there are no options', async () => {
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -236,12 +330,13 @@ it('opens when opened programmatically', async () => {
       </glide-core-menu-options>
     </glide-core-menu>`);
     component.open = true;
-    await elementUpdated(component);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     const link = component.querySelector('glide-core-menu-link');
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
     expect(target?.ariaExpanded).to.equal('true');
 });
@@ -259,13 +354,14 @@ it('opens when opened programmatically via the click handler of another element'
     anotherElement.addEventListener('click', () => (component.open = true));
     div.append(anotherElement);
     anotherElement.click();
-    await elementUpdated(component);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     const link = component.querySelector('glide-core-menu-link');
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
     expect(target?.ariaExpanded).to.equal('true');
 });
@@ -290,12 +386,11 @@ it('closes when clicked', async () => {
       </glide-core-menu-options>
     </glide-core-menu>`);
     component.querySelector('button')?.click();
-    await elementUpdated(component);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -313,7 +408,7 @@ it('closes when something outside of it is clicked', async () => {
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -325,13 +420,15 @@ it('closes on Escape when the button has focus', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
+    // Wait for it to open
+    await aTimeout(0);
     component.querySelector('button')?.click();
     await sendKeys({ press: 'Escape' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -344,12 +441,11 @@ it('closes when an option is selected via click', async () => {
       </glide-core-menu-options>
     </glide-core-menu>`);
     component.querySelector('glide-core-menu-link')?.click();
-    await elementUpdated(component);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -366,12 +462,11 @@ it('closes when an option is selected via Enter', async () => {
         .querySelector('glide-core-menu-link')
         ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     await sendKeys({ press: 'Enter' });
-    await elementUpdated(component);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
@@ -389,13 +484,13 @@ it('closes when an option is selected via Space', async () => {
     const options = component.querySelector('glide-core-menu-options');
     const target = component.querySelector('button');
     expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
 it('activates the first menu link by default', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -404,15 +499,15 @@ it('activates the first menu link by default', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
-    await elementUpdated(component);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     expect(links[0].privateActive).to.be.true;
     expect(links[1].privateActive).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(links[0]?.id);
 });
-it('activates the first menu button by default', async () => {
+it('activates the first menu button by default when opened via click', async () => {
     const component = await fixture(html `
     <glide-core-menu>
       <button slot="target">Target</button>
@@ -424,7 +519,8 @@ it('activates the first menu button by default', async () => {
     </glide-core-menu>
   `);
     component.querySelector('button')?.click();
-    await elementUpdated(component);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const buttons = component.querySelectorAll('glide-core-menu-button');
     const options = component.querySelector('glide-core-menu-options');
     expect(buttons[0].privateActive).to.be.true;
@@ -442,6 +538,8 @@ it('activates a menu link on "mouseover"', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -457,6 +555,8 @@ it('activates a menu link on "mouseover" when the link is in a nested slot', asy
       <glide-core-menu-link label="Two"></glide-core-menu-link>
     </glide-core-nested-slot>
   `);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.shadowRoot?.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -476,6 +576,8 @@ it('activates a menu button on "mouseover"', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const buttons = component.querySelectorAll('glide-core-menu-button');
     const options = component.querySelector('glide-core-menu-options');
     buttons[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -491,6 +593,8 @@ it('activates a menu button on "mouseover" when the button is in a nested slot',
       <glide-core-menu-button label="Two"></glide-core-menu-button>
     </glide-core-nested-slot>
   `);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const links = component.querySelectorAll('glide-core-menu-button');
     const options = component.shadowRoot?.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -501,7 +605,7 @@ it('activates a menu button on "mouseover" when the button is in a nested slot',
 });
 it('activates the next option on ArrowDown', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -511,7 +615,8 @@ it('activates the next option on ArrowDown', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -524,7 +629,7 @@ it('activates the next option on ArrowDown', async () => {
 });
 it('activates the previous option on ArrowUp', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -533,7 +638,8 @@ it('activates the previous option on ArrowUp', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -545,7 +651,7 @@ it('activates the previous option on ArrowUp', async () => {
 });
 it('activates the first option on Home', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -554,7 +660,8 @@ it('activates the first option on Home', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -566,7 +673,7 @@ it('activates the first option on Home', async () => {
 });
 it('activates the first option on PageUp', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -575,7 +682,8 @@ it('activates the first option on PageUp', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -585,9 +693,9 @@ it('activates the first option on PageUp', async () => {
     expect(links[1].privateActive).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(links[0].id);
 });
-it('activates the first option on ArrowUp + Meta', async () => {
+it('activates the first option on Meta + ArrowUp', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -596,7 +704,8 @@ it('activates the first option on ArrowUp + Meta', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -609,7 +718,7 @@ it('activates the first option on ArrowUp + Meta', async () => {
 });
 it('activates the last option on End', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -618,7 +727,8 @@ it('activates the last option on End', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     await sendKeys({ press: 'End' });
     const links = component.querySelectorAll('glide-core-menu-link');
@@ -639,6 +749,8 @@ it('activates the last option on PageDown', async () => {
     </glide-core-menu>
   `);
     component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -650,7 +762,7 @@ it('activates the last option on PageDown', async () => {
 });
 it('activates the last option on Meta + ArrowDown', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -659,7 +771,8 @@ it('activates the last option on Meta + ArrowDown', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -680,7 +793,8 @@ it('sets `aria-activedescendant` on open', async () => {
       </glide-core-menu-options>
     </glide-core-menu>`);
     component.querySelector('button')?.click();
-    await elementUpdated(component);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const link = component.querySelector('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
@@ -693,6 +807,8 @@ it('sets `aria-activedescendant` on close', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.querySelector('button')?.click();
     await elementUpdated(component);
     const options = component.querySelector('glide-core-menu-options');
@@ -707,6 +823,8 @@ it('sets `aria-expanded` on open', async () => {
       </glide-core-menu-options>
     </glide-core-menu>`);
     component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
     const button = component.querySelector('button');
     expect(button?.getAttribute('aria-expanded')).to.equal('true');
 });
@@ -724,7 +842,7 @@ it('sets `aria-expanded` on close', async () => {
 });
 it('does not wrap on ArrowUp', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -733,14 +851,33 @@ it('does not wrap on ArrowUp', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
+    await sendKeys({ press: 'ArrowUp' });
+    const link = component.querySelector('glide-core-menu-link');
+    expect(link?.privateActive).to.be.true;
+});
+it('does not wrap on Meta + ArrowUp', async () => {
+    const component = await fixture(html `
+    <glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="One"></glide-core-menu-link>
+        <glide-core-menu-link label="Two"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>
+  `);
+    // Wait for Floating UI.
+    await aTimeout(0);
+    await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
     const link = component.querySelector('glide-core-menu-link');
     expect(link?.privateActive).to.be.true;
 });
 it('does not wrap on ArrowDown', async () => {
     const component = await fixture(html `
-    <glide-core-menu>
+    <glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
@@ -749,9 +886,29 @@ it('does not wrap on ArrowDown', async () => {
       </glide-core-menu-options>
     </glide-core-menu>
   `);
-    component.querySelector('button')?.click();
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const options = component.querySelectorAll('glide-core-menu-link');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'ArrowDown' });
+    expect(options[1].privateActive).to.be.true;
+});
+it('does not wrap on ArrowDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="One"></glide-core-menu-link>
+        <glide-core-menu-link label="Two"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>
+  `);
+    // Wait for Floating UI.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-menu-link');
     options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowDown' });
     expect(options[1].privateActive).to.be.true;
 });

package/dist/modal.icon-button.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreModalIconButton from './modal.icon-button.js';
@@ -41,5 +42,5 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });