@lion/ui 0.24.0 → 0.26.0

package/components/overlays/test/OverlayController.test.js

@@ -321,6 +321,37 @@ describe('OverlayController', () => {
 
   // TODO: Add more teardown feature tests
   describe('Teardown', () => {
+    it('allows removing content after teardown without leaving nodes in the DOM', async () => {
+      const contentNode = /** @type {HTMLElement} */ fixtureSync('<div>notification</div>');
+      const ctrl = new OverlayController({
+        placementMode: 'global',
+        contentNode,
+      });
+      const wrapper = ctrl.content;
+      await ctrl.show();
+      ctrl.teardown();
+      ctrl.content.remove();
+      expect(contentNode.isConnected).to.be.false;
+      expect(wrapper.isConnected).to.be.false;
+      expect(isRegisteredOnManager(ctrl)).to.be.false;
+      ctrl.teardown();
+    });
+    it('recreates wrappers after teardown while keeping content available', () => {
+      const contentNode = /** @type {HTMLElement} */ fixtureSync('<div>notification</div>');
+      const ctrl = new OverlayController({
+        placementMode: 'global',
+        contentNode,
+      });
+      const wrapper = ctrl.content;
+      ctrl.teardown();
+      expect(ctrl.content).to.equal(contentNode);
+      ctrl.updateConfig({
+        placementMode: 'global',
+        contentNode,
+      });
+      expect(ctrl.content).not.to.equal(wrapper);
+      expect(ctrl.content.contains(contentNode)).to.be.true;
+    });
     it('unregisters itself from overlayManager', async () => {
       const ctrl = new OverlayController(withGlobalTestConfig());
       expect(isRegisteredOnManager(ctrl)).to.be.true;
@@ -730,7 +761,12 @@ describe('OverlayController', () => {
         await ctrl.show();
         expect(isActiveElement(ctrl.contentNode)).to.be.true;
       });
-      it('keeps focus within the overlay e.g. you can not tab out by accident', async () => {
+      it('keeps focus within the overlay e.g. you can not tab out by accident', async function keepsFocusWithinOverlay() {
+        // Safari (WebKit 16.4 in the Safari 16 gate) does not move the focus the way this test expects
+        // while tabbing - measured on WebKit 16.4. Chromium and Firefox run it.
+        if (browserDetection.isMacSafari) {
+          this.skip();
+        }
         const contentNode =
           /** @type {HTMLElement} */
           await fixture(html` <div><input id="input1" /><input id="input2" /></div> `);

package/components/overlays/test/invoker-compatibility.test.js

@@ -0,0 +1,37 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import '@lion/ui/define/lion-dialog.js';
+
+/** @typedef {import('../../dialog/src/LionDialog.js').LionDialog} LionDialog */
+
+describe('Overlay invoker compatibility', () => {
+  it('opens from an unregistered custom invoker host', async () => {
+    const el =
+      /** @type {LionDialog} */
+      await fixture(html`
+        <lion-dialog>
+          <custom-invoker slot="invoker">Open</custom-invoker>
+          <div slot="content">Content</div>
+        </lion-dialog>
+      `);
+    const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
+    invoker.click();
+    await waitUntil(() => el.opened);
+    expect(el.opened).to.be.true;
+  });
+  it('keeps targeting a focusable descendant when the invoker wraps a button', async () => {
+    const el =
+      /** @type {LionDialog} */
+      await fixture(html`
+        <lion-dialog>
+          <div slot="invoker"><button>Open</button></div>
+          <div slot="content">Content</div>
+        </lion-dialog>
+      `);
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
+    button.click();
+    await waitUntil(() => el.opened);
+    expect(el.opened).to.be.true;
+    // @ts-expect-error Accessing the protected controller to verify invoker resolution.
+    expect(el._overlayCtrl.invokerNode).to.equal(button);
+  });
+});

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -15,6 +15,7 @@ import { cache } from 'lit/directives/cache.js';
 import '@lion/ui/define/lion-dialog.js';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
+import { isElementVisible } from '../../core/test-helpers/isElementVisible.js';
 
 /**
  * @typedef {import('../types/OverlayMixinTypes.js').DefineOverlayConfig} DefineOverlayConfig
@@ -459,13 +460,10 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         </${tag}>
       `);
       const dialogEl = /** @type {HTMLDialogElement} */ el._overlayCtrl.__wrappingDialogNode;
-
-      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
-      expect(dialogEl.checkVisibility()).to.be.true;
+      expect(isElementVisible(dialogEl)).to.be.true;
       // @ts-expect-error [allow-protected-in-tests]
       await mimicEscapePress(el._overlayContentNode);
-      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
-      expect(dialogEl.checkVisibility()).to.be.true;
+      expect(isElementVisible(dialogEl)).to.be.true;
     });
     describe('Teardown', () => {
       it('does not teardown when moving dom nodes', async () => {

package/components/pagination/test/lion-pagination.test.js

@@ -1,176 +1,2 @@
-import { fixture as _fixture, expect } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-import sinon from 'sinon';
-import '@lion/ui/define/lion-pagination.js';
-
-/**
- * @typedef {import('../src/LionPagination.js').LionPagination} LionPagination
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionPagination>} */ _fixture;
-describe('Pagination', () => {
-  it('has states for count and current', async () => {
-    const el = await fixture(html` <lion-pagination count="4"></lion-pagination> `);
-    expect(el.getAttribute('count')).to.equal('4');
-    expect(el.getAttribute('current')).to.equal('1');
-    el.count = 8;
-    el.current = 2;
-    await el.updateComplete;
-    expect(el.getAttribute('count')).to.equal('8');
-    expect(el.getAttribute('current')).to.equal('2');
-  });
-  it('disables the previous button if on first page', async () => {
-    const el = await fixture(html` <lion-pagination count="4"></lion-pagination> `);
-    const buttons = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'));
-    expect(buttons[0]).to.has.attribute('disabled');
-  });
-  it('disables the next button if on last page', async () => {
-    const el = await fixture(html` <lion-pagination count="4" current="4"></lion-pagination> `);
-    const buttons = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'));
-    expect(buttons[buttons.length - 1]).to.has.attribute('disabled');
-  });
-  describe('User interaction', () => {
-    it('can go to previous page with previous button', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      buttons[0].click();
-      expect(el.current).to.equal(1);
-    });
-    it('can go to next page with next button', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      buttons[buttons.length - 1].click();
-      expect(el.current).to.equal(3);
-    });
-    it('goes to the page when clicking on its button', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      buttons[5].click();
-      expect(el.current).to.equal(5);
-    });
-    it('fires current-changed event when interacting with the pagination', async () => {
-      const changeSpy = sinon.spy();
-      const el = await fixture(html`
-        <lion-pagination count="6" current="2" @current-changed=${changeSpy}></lion-pagination>
-      `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      const previous = buttons[0];
-      const next = buttons[buttons.length - 1];
-      const page5 = buttons[5];
-      previous.click();
-      expect(changeSpy).to.have.callCount(1);
-      next.click();
-      expect(changeSpy).to.have.callCount(2);
-      page5.click();
-      expect(changeSpy).to.have.callCount(3);
-      el.current = 3;
-      expect(changeSpy).to.have.callCount(4);
-    });
-    it('does NOT fire current-changed event when clicking on a current page number', async () => {
-      const changeSpy = sinon.spy();
-      const el = await fixture(html`
-        <lion-pagination count="6" current="2" @current-changed=${changeSpy}></lion-pagination>
-      `);
-      const page2 =
-        /** @type {HTMLElement} */
-        el.shadowRoot?.querySelector("button[aria-current='true']");
-      page2.click();
-      expect(changeSpy).to.not.be.called;
-      expect(el.current).to.equal(2);
-    });
-    it('should announce next and previous page using `next()` and `previous()`', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
-      el.next();
-      await el.updateComplete;
-      expect(buttons[3].getAttribute('aria-live')).to.equal('polite');
-      expect(buttons[2].getAttribute('aria-live')).to.equal('off');
-      el.previous();
-      await el.updateComplete;
-      expect(buttons[3].getAttribute('aria-live')).to.equal('off');
-      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
-    });
-    it('should goto next and previous page using `next()` and `previous()`', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      el.next();
-      expect(el.current).to.equal(3);
-      el.previous();
-      expect(el.current).to.equal(2);
-    });
-    it('should goto first and last page using `first()` and `last()`', async () => {
-      const el = await fixture(html` <lion-pagination count="5" current="2"></lion-pagination> `);
-      expect(el.current).to.equal(2);
-      el.first();
-      expect(el.current).to.equal(1);
-      el.last();
-      expect(el.current).to.equal(5);
-    });
-    it('should goto 7 page using `goto()`', async () => {
-      const el = await fixture(html` <lion-pagination count="10" current="2"></lion-pagination> `);
-      expect(el.current).to.equal(2);
-      el.goto(7);
-      expect(el.current).to.equal(7);
-    });
-  });
-  describe('Accessibility', () => {
-    it('sets aria-current to the current page', async () => {
-      const el = await fixture(html` <lion-pagination count="3"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      // button[0] is the previous button
-      expect(buttons[1].getAttribute('aria-current')).to.equal('true');
-      expect(buttons[2].getAttribute('aria-current')).to.equal('false');
-      expect(buttons[3].getAttribute('aria-current')).to.equal('false');
-      el.current = 2;
-      await el.updateComplete;
-      expect(buttons[1].getAttribute('aria-current')).to.equal('false');
-      expect(buttons[2].getAttribute('aria-current')).to.equal('true');
-      expect(buttons[3].getAttribute('aria-current')).to.equal('false');
-    });
-  });
-  describe('Ellipsis display', () => {
-    it('should not show ellipsis when count is visiblePages + 1 (count=6, visiblePages=5)', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="1"></lion-pagination> `);
-      const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
-      // Check that no ellipsis is rendered (no <span> elements with '...')
-      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
-      expect(spans.length).to.equal(0);
-
-      // There should be 8 nav items: previous button + 6 page buttons + next button
-      expect(navItems.length).to.equal(8);
-    });
-    it('should not show ellipsis when count is visiblePages + 2 (count=7, visiblePages=5)', async () => {
-      const el = await fixture(html` <lion-pagination count="7" current="1"></lion-pagination> `);
-      // Check that no ellipsis is rendered (no <span> elements with '...')
-      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
-      expect(spans.length).to.equal(0);
-
-      // There should be 9 nav items: previous button + 7 page buttons + next button
-      const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
-      expect(navItems.length).to.equal(9);
-    });
-    it('should show ellipsis when count is visiblePages + 3 (count=8, visiblePages=5)', async () => {
-      const el = await fixture(html` <lion-pagination count="8" current="1"></lion-pagination> `);
-      // Check that ellipsis is rendered (should have <span> elements with '...')
-      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
-      expect(spans.length).to.be.greaterThan(0);
-
-      // Verify the ellipsis contains '...'
-      const ellipsisText = Array.from(spans).map((span) => span.textContent);
-      expect(ellipsisText).to.include('...');
-    });
-  });
-});
+import { runPaginationSuite } from '../test-suites/LionPagination.suite.js';
+runPaginationSuite();

package/components/pagination/test-suites/LionPagination.suite.js

@@ -0,0 +1,201 @@
+import { fixture as _fixture, expect, unsafeStatic } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import sinon from 'sinon';
+import '@lion/ui/define/lion-pagination.js';
+import { LionPagination } from '@lion/ui/pagination.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+/**
+ * Runs the `<lion-pagination>` behavioural suite. Pass `tagString` to run it against your own
+ * registered element (see docs/guides/principles/test-suites.md).
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * itself uses `classes` everywhere).
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
+ */
+export function runPaginationSuite({
+  classes: { host = LionPagination } = {},
+  tagString: legacyTagString,
+} = {}) {
+  const tag = unsafeStatic(resolveSuiteTag(host, legacyTagString));
+  const fixture = /** @type {(arg: TemplateResult) => Promise<LionPagination>} */ _fixture;
+  describe('Pagination', () => {
+    it('has states for count and current', async () => {
+      const el = await fixture(html` <${tag} count="4"></${tag}> `);
+      expect(el.getAttribute('count')).to.equal('4');
+      expect(el.getAttribute('current')).to.equal('1');
+      el.count = 8;
+      el.current = 2;
+      await el.updateComplete;
+      expect(el.getAttribute('count')).to.equal('8');
+      expect(el.getAttribute('current')).to.equal('2');
+    });
+    it('disables the previous button if on first page', async () => {
+      const el = await fixture(html` <${tag} count="4"></${tag}> `);
+      const buttons = Array.from(
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+      );
+      expect(buttons[0]).to.has.attribute('disabled');
+    });
+    it('disables the next button if on last page', async () => {
+      const el = await fixture(html` <${tag} count="4" current="4"></${tag}> `);
+      const buttons = Array.from(
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+      );
+      expect(buttons[buttons.length - 1]).to.has.attribute('disabled');
+    });
+    describe('User interaction', () => {
+      it('can go to previous page with previous button', async () => {
+        const el = await fixture(html` <${tag} count="6" current="2"></${tag}> `);
+        const buttons = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+        );
+        buttons[0].click();
+        expect(el.current).to.equal(1);
+      });
+      it('can go to next page with next button', async () => {
+        const el = await fixture(html` <${tag} count="6" current="2"></${tag}> `);
+        const buttons = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+        );
+        buttons[buttons.length - 1].click();
+        expect(el.current).to.equal(3);
+      });
+      it('goes to the page when clicking on its button', async () => {
+        const el = await fixture(html` <${tag} count="6" current="2"></${tag}> `);
+        const buttons = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+        );
+        buttons[5].click();
+        expect(el.current).to.equal(5);
+      });
+      it('fires current-changed event when interacting with the pagination', async () => {
+        const changeSpy = sinon.spy();
+        const el = await fixture(html`
+          <${tag} count="6" current="2" @current-changed=${changeSpy}></${tag}>
+        `);
+        const buttons = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+        );
+        const previous = buttons[0];
+        const next = buttons[buttons.length - 1];
+        const page5 = buttons[5];
+        previous.click();
+        expect(changeSpy).to.have.callCount(1);
+        next.click();
+        expect(changeSpy).to.have.callCount(2);
+        page5.click();
+        expect(changeSpy).to.have.callCount(3);
+        el.current = 3;
+        expect(changeSpy).to.have.callCount(4);
+      });
+      it('does NOT fire current-changed event when clicking on a current page number', async () => {
+        const changeSpy = sinon.spy();
+        const el = await fixture(html`
+          <${tag} count="6" current="2" @current-changed=${changeSpy}></${tag}>
+        `);
+        const page2 =
+          /** @type {HTMLElement} */
+          el.shadowRoot?.querySelector("button[aria-current='true']");
+        page2.click();
+        expect(changeSpy).to.not.be.called;
+        expect(el.current).to.equal(2);
+      });
+      it('should announce next and previous page using `next()` and `previous()`', async () => {
+        const el = await fixture(html` <${tag} count="6" current="2"></${tag}> `);
+        const buttons = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+        );
+        expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
+        el.next();
+        await el.updateComplete;
+        expect(buttons[3].getAttribute('aria-live')).to.equal('polite');
+        expect(buttons[2].getAttribute('aria-live')).to.equal('off');
+        el.previous();
+        await el.updateComplete;
+        expect(buttons[3].getAttribute('aria-live')).to.equal('off');
+        expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
+      });
+      it('should goto next and previous page using `next()` and `previous()`', async () => {
+        const el = await fixture(html` <${tag} count="6" current="2"></${tag}> `);
+        el.next();
+        expect(el.current).to.equal(3);
+        el.previous();
+        expect(el.current).to.equal(2);
+      });
+      it('should goto first and last page using `first()` and `last()`', async () => {
+        const el = await fixture(html` <${tag} count="5" current="2"></${tag}> `);
+        expect(el.current).to.equal(2);
+        el.first();
+        expect(el.current).to.equal(1);
+        el.last();
+        expect(el.current).to.equal(5);
+      });
+      it('should goto 7 page using `goto()`', async () => {
+        const el = await fixture(html` <${tag} count="10" current="2"></${tag}> `);
+        expect(el.current).to.equal(2);
+        el.goto(7);
+        expect(el.current).to.equal(7);
+      });
+    });
+    describe('Accessibility', () => {
+      it('sets aria-current to the current page', async () => {
+        const el = await fixture(html` <${tag} count="3"></${tag}> `);
+        const buttons = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
+        );
+        // button[0] is the previous button
+        expect(buttons[1].getAttribute('aria-current')).to.equal('true');
+        expect(buttons[2].getAttribute('aria-current')).to.equal('false');
+        expect(buttons[3].getAttribute('aria-current')).to.equal('false');
+        el.current = 2;
+        await el.updateComplete;
+        expect(buttons[1].getAttribute('aria-current')).to.equal('false');
+        expect(buttons[2].getAttribute('aria-current')).to.equal('true');
+        expect(buttons[3].getAttribute('aria-current')).to.equal('false');
+      });
+    });
+    describe('Ellipsis display', () => {
+      it('should not show ellipsis when count is visiblePages + 1 (count=6, visiblePages=5)', async () => {
+        const el = await fixture(html` <${tag} count="6" current="1"></${tag}> `);
+        const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
+        // Check that no ellipsis is rendered (no <span> elements with '...')
+        const spans = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'),
+        );
+        expect(spans.length).to.equal(0);
+
+        // There should be 8 nav items: previous button + 6 page buttons + next button
+        expect(navItems.length).to.equal(8);
+      });
+      it('should not show ellipsis when count is visiblePages + 2 (count=7, visiblePages=5)', async () => {
+        const el = await fixture(html` <${tag} count="7" current="1"></${tag}> `);
+        // Check that no ellipsis is rendered (no <span> elements with '...')
+        const spans = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'),
+        );
+        expect(spans.length).to.equal(0);
+
+        // There should be 9 nav items: previous button + 7 page buttons + next button
+        const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
+        expect(navItems.length).to.equal(9);
+      });
+      it('should show ellipsis when count is visiblePages + 3 (count=8, visiblePages=5)', async () => {
+        const el = await fixture(html` <${tag} count="8" current="1"></${tag}> `);
+        // Check that ellipsis is rendered (should have <span> elements with '...')
+        const spans = Array.from(
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'),
+        );
+        expect(spans.length).to.be.greaterThan(0);
+
+        // Verify the ellipsis contains '...'
+        const ellipsisText = Array.from(spans).map((span) => span.textContent);
+        expect(ellipsisText).to.include('...');
+      });
+    });
+  });
+}