@crowdstrike/glide-core 0.8.0 → 0.9.0

package/dist/menu.test.basics.js

@@ -1,13 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import './menu.button.js';
-import './menu.link.js';
 import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreMenu from './menu.js';
+import GlideCoreMenuButton from './menu.button.js';
+import GlideCoreMenuLink from './menu.link.js';
 import GlideCoreMenuOptions from './menu.options.js';
 import expectArgumentError from './library/expect-argument-error.js';
 import sinon from 'sinon';
 GlideCoreMenu.shadowRootOptions.mode = 'open';
+GlideCoreMenuButton.shadowRootOptions.mode = 'open';
+GlideCoreMenuLink.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-menu')).to.equal(GlideCoreMenu);
 });
@@ -38,6 +40,7 @@ it('is accessible', async () => {
     const target = component.querySelector('button');
     const options = component.querySelector('glide-core-menu-options');
     expect(target?.getAttribute('aria-controls')).to.equal(options?.id);
+    expect(target?.getAttribute('aria-haspopup')).to.equal('true');
     expect(options?.ariaLabelledby).to.equal(target?.id);
     await expect(component).to.be.accessible();
 });
@@ -49,11 +52,16 @@ it('can be opened', 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);
     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(target?.ariaExpanded).to.equal('true');
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
 });
 it('can have a default slot', async () => {
     const component = await fixture(html `<glide-core-menu>
@@ -92,6 +100,8 @@ it('activates the first menu link by default', 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');
     expect(links[0].privateActive).to.be.true;
@@ -109,6 +119,8 @@ it('activates the first menu button by default', 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');
     expect(buttons[0].privateActive).to.be.true;
@@ -123,10 +135,14 @@ it('is not opened when initially `open` and its target is `disabled`', 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);
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const target = component.querySelector('button');
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.be.ok;
+    const options = component.querySelector('glide-core-menu-options');
+    expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(target?.ariaExpanded).to.equal('false');
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
 });
 it('throws if it does not have a default slot', async () => {
     await expectArgumentError(() => {
@@ -157,7 +173,7 @@ it('throws if it does not have a "target" slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('sets accessibility attributes', async () => {
     const component = await fixture(html `<glide-core-menu>

package/dist/menu.test.focus.d.ts

@@ -1 +1,2 @@
 import './menu.link.js';
+import './menu.options.js';

package/dist/menu.test.focus.js

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './menu.link.js';
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import './menu.options.js';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.js';
-import GlideCoreMenuOptions from './menu.options.js';
 GlideCoreMenu.shadowRootOptions.mode = 'open';
 it('focuses the target on `focus()`', async () => {
     const component = await fixture(html `<glide-core-menu>
@@ -31,7 +31,7 @@ it('closes when it loses focus', async () => {
     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 })).be.false;
+    expect(defaultSlot?.checkVisibility()).be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
 });
 it('remains open when the options component is focused', async () => {
@@ -42,13 +42,14 @@ it('remains open when the options component is focused', 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.focus();
     const options = component.querySelector('glide-core-menu-options');
-    assert(options instanceof GlideCoreMenuOptions);
-    options.focus();
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    options?.focus();
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
 });
 it('remains open when an option is focused', async () => {
     const component = await fixture(html `<glide-core-menu open>
@@ -58,11 +59,15 @@ it('remains open when an option is focused', 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.focus();
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const option = component.querySelector('glide-core-menu-link');
     assert(option);
     option?.focus();
     expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility()).to.be.true;
 });
 it('sets the focused option as active', async () => {
     const component = await fixture(html `<glide-core-menu open>
@@ -73,6 +78,8 @@ it('sets the focused option as active', 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.focus();
     const target = component.querySelector('glide-core-menu-button');
     const link = component.querySelector('glide-core-menu-link');