@lion/ui 0.22.0 → 0.24.0

package/components/core/test/DisabledMixin.test.js

@@ -3,104 +3,89 @@ import { DisabledMixin } from '@lion/ui/core.js';
 import { html } from 'lit/static-html.js';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
-
 describe('DisabledMixin', () => {
   class CanBeDisabled extends DisabledMixin(LitElement) {}
   before(() => {
     customElements.define('can-be-disabled', CanBeDisabled);
   });
-
   it('reflects disabled to attribute', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled></can-be-disabled>`);
     expect(el.hasAttribute('disabled')).to.be.false;
     el.makeRequestToBeDisabled();
     el.disabled = true;
     await el.updateComplete;
     expect(el.hasAttribute('disabled')).to.be.true;
   });
-
   it('can be requested to be disabled', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled></can-be-disabled>`);
     el.makeRequestToBeDisabled();
     expect(el.disabled).to.be.true;
     await el.updateComplete;
     expect(el.hasAttribute('disabled')).to.be.true;
   });
-
   it('will not allow to become enabled after makeRequestToBeDisabled()', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled></can-be-disabled>`);
     el.makeRequestToBeDisabled();
     expect(el.disabled).to.be.true;
-
     el.disabled = false;
     expect(el.disabled).to.be.true;
   });
-
   it('will stay disabled after retractRequestToBeDisabled() if it was disabled before', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled disabled></can-be-disabled>`);
     el.makeRequestToBeDisabled();
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.true;
   });
-
   it('will become enabled after retractRequestToBeDisabled() if it was enabled before', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled></can-be-disabled>`);
     el.makeRequestToBeDisabled();
     expect(el.disabled).to.be.true;
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.false;
   });
-
   it('may allow multiple calls to makeRequestToBeDisabled()', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled></can-be-disabled>`);
     el.makeRequestToBeDisabled();
     el.makeRequestToBeDisabled();
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.false;
   });
-
   it('will restore last state after retractRequestToBeDisabled()', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled></can-be-disabled>`);
     el.makeRequestToBeDisabled();
     el.disabled = true;
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.true;
-
     el.makeRequestToBeDisabled();
     el.disabled = false;
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.false;
   });
-
   it('will not perform click when disabled', async () => {
-    const el = /** @type {CanBeDisabled} */ (
-      await fixture(html`<can-be-disabled></can-be-disabled>`)
-    );
+    const el =
+      /** @type {CanBeDisabled} */
+      await fixture(html`<can-be-disabled></can-be-disabled>`);
     const spy = sinon.spy();
     el.addEventListener('click', spy);
-
     el.click();
-
     expect(spy.callCount).to.equal(1);
-
     el.disabled = true;
     el.click();
     expect(spy.callCount).to.equal(1);
-
     el.disabled = false;
     el.click();
     expect(spy.callCount).to.equal(2);

package/components/core/test/DisabledWithTabIndexMixin.test.js

@@ -3,80 +3,70 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import { LitElement } from 'lit';
 import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
-
 describe('DisabledWithTabIndexMixin', () => {
   class WithTabIndex extends DisabledWithTabIndexMixin(LitElement) {}
   before(() => {
     customElements.define('can-be-disabled-with-tab-index', WithTabIndex);
   });
-
   it('has an initial tabIndex of 0', async () => {
-    const el = /** @type {WithTabIndex} */ (
-      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `)
-    );
+    const el =
+      /** @type {WithTabIndex} */
+      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `);
     expect(el.tabIndex).to.equal(0);
     expect(el.getAttribute('tabindex')).to.equal('0');
   });
-
   it('sets tabIndex to -1 if disabled', async () => {
-    const el = /** @type {WithTabIndex} */ (
-      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `)
-    );
+    const el =
+      /** @type {WithTabIndex} */
+      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `);
     el.disabled = true;
     expect(el.tabIndex).to.equal(-1);
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('-1');
   });
-
   it('disabled does not override user provided tabindex', async () => {
-    const el = /** @type {WithTabIndex} */ (
+    const el =
+      /** @type {WithTabIndex} */
       await fixture(html`
         <can-be-disabled-with-tab-index tabindex="5" disabled></can-be-disabled-with-tab-index>
-      `)
-    );
+      `);
     expect(el.getAttribute('tabindex')).to.equal('-1');
     el.disabled = false;
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('5');
   });
-
   it('can be disabled imperatively', async () => {
-    const el = /** @type {WithTabIndex} */ (
+    const el =
+      /** @type {WithTabIndex} */
       await fixture(html`
         <can-be-disabled-with-tab-index disabled></can-be-disabled-with-tab-index>
-      `)
-    );
+      `);
     expect(el.getAttribute('tabindex')).to.equal('-1');
-
     el.disabled = false;
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('0');
     expect(el.hasAttribute('disabled')).to.equal(false);
-
     el.disabled = true;
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('-1');
     expect(el.hasAttribute('disabled')).to.equal(true);
   });
-
   it('will not allow to change tabIndex after makeRequestToBeDisabled()', async () => {
-    const el = /** @type {WithTabIndex} */ (
-      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `)
-    );
+    const el =
+      /** @type {WithTabIndex} */
+      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `);
     el.makeRequestToBeDisabled();
-
     el.tabIndex = 5;
     expect(el.tabIndex).to.equal(-1);
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('-1');
   });
-
   it('will restore last tabIndex after retractRequestToBeDisabled()', async () => {
-    const el = /** @type {WithTabIndex} */ (
+    const el =
+      /** @type {WithTabIndex} */
       await fixture(html`
         <can-be-disabled-with-tab-index tabindex="5"></can-be-disabled-with-tab-index>
-      `)
-    );
+      `);
     el.makeRequestToBeDisabled();
     expect(el.tabIndex).to.equal(-1);
     await el.updateComplete;
@@ -85,14 +75,12 @@ describe('DisabledWithTabIndexMixin', () => {
     expect(el.tabIndex).to.equal(5);
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('5');
-
     el.makeRequestToBeDisabled();
     el.tabIndex = 12;
     el.retractRequestToBeDisabled();
     expect(el.tabIndex).to.equal(12);
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('12');
-
     el.makeRequestToBeDisabled();
     el.tabIndex = 13;
     el.tabIndex = 14;
@@ -101,13 +89,12 @@ describe('DisabledWithTabIndexMixin', () => {
     await el.updateComplete;
     expect(el.getAttribute('tabindex')).to.equal('14');
   });
-
   it('may allow multiple calls to retractRequestToBeDisabled', async () => {
-    const el = /** @type {WithTabIndex} */ (
+    const el =
+      /** @type {WithTabIndex} */
       await fixture(html`
         <can-be-disabled-with-tab-index disabled></can-be-disabled-with-tab-index>
-      `)
-    );
+      `);
     el.retractRequestToBeDisabled();
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.true;

package/components/core/test/EventTargetShim.test.js

@@ -1,38 +1,30 @@
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 import { EventTargetShim } from '@lion/ui/core.js';
-
 describe('EventTargetShim', () => {
   class NonElementClass extends EventTargetShim {}
-
   it('implements "addEventListener"', async () => {
     const nonElementClass = new NonElementClass();
     const cb = sinon.spy();
-
     nonElementClass.addEventListener('my-event', cb);
     expect(cb).to.not.have.been.called;
     nonElementClass.dispatchEvent(new Event('my-event'));
     expect(cb).to.have.been.called;
   });
-
   it('implements "removeEventListener"', async () => {
     const nonElementClass = new NonElementClass();
     const cb = sinon.spy();
-
     nonElementClass.addEventListener('my-event', cb);
     expect(cb).to.not.have.been.called;
     nonElementClass.dispatchEvent(new Event('my-event'));
     expect(cb).to.have.been.calledOnce;
-
     nonElementClass.removeEventListener('my-event', cb);
     nonElementClass.dispatchEvent(new Event('my-event'));
     expect(cb).to.have.been.calledOnce;
   });
-
   it('implements "dispatchEvent"', async () => {
     const nonElementClass = new NonElementClass();
     const cb = sinon.spy();
-
     nonElementClass.addEventListener('my-event', cb);
     expect(cb).to.not.have.been.called;
     nonElementClass.dispatchEvent(new Event('my-event'));

package/components/core/test/ScopedElementsMixin.test.js

@@ -6,10 +6,8 @@ import {
 } from '@lit-labs/testing/fixtures.js';
 import { LitElement, html } from 'lit';
 import sinon from 'sinon';
-
 import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
 import { browserDetection } from '../src/browserDetection.js';
-
 const hasRealScopedRegistrySupport = supportsScopedRegistry();
 const originalShadowRootProps = {
   // @ts-expect-error
@@ -25,11 +23,12 @@ function mockNoRegistrySupport() {
   if (!hasRealScopedRegistrySupport) return;
 
   // This will be enough to make the `supportsScopedRegistry()` check fail inside ScopedElementsMixin and bypass scoped registries
-  globalThis.ShadowRoot = globalThis.ShadowRoot || { prototype: {} };
+  globalThis.ShadowRoot = globalThis.ShadowRoot || {
+    prototype: {},
+  };
   // @ts-expect-error
   globalThis.ShadowRoot.prototype.createElement = null;
 }
-
 mockNoRegistrySupport.restore = () => {
   // Are we on a server or do we have no polyfill? Nothing to be done here...
   if (!hasRealScopedRegistrySupport) return;
@@ -39,22 +38,20 @@ mockNoRegistrySupport.restore = () => {
   // @ts-expect-error
   globalThis.ShadowRoot.prototype.importNode = originalShadowRootProps.importNode;
 };
-
 class ScopedElementsChild extends LitElement {
   render() {
     return html`<span>I'm a child</span>`;
   }
 }
-
 class ScopedElementsHost extends ScopedElementsMixin(LitElement) {
-  static scopedElements = { 'scoped-elements-child': ScopedElementsChild };
-
+  static scopedElements = {
+    'scoped-elements-child': ScopedElementsChild,
+  };
   render() {
     return html`<scoped-elements-child></scoped-elements-child>`;
   }
 }
 customElements.define('scoped-elements-host', ScopedElementsHost);
-
 describe('ScopedElementsMixin', () => {
   it('renders child elements correctly (that were not registered yet on global registry)', async () => {
     // customElements.define('scoped-elements-child', ScopedElementsChild);
@@ -75,36 +72,31 @@ describe('ScopedElementsMixin', () => {
       expect(el.registry.get('scoped-elements-child')).to.not.be.undefined;
     }
   });
-
   describe('When scoped registries are supported', () => {
     it('registers elements on local registry', async () => {
       if (!hasRealScopedRegistrySupport) return;
-
       const ceDefineSpy = sinon.spy(customElements, 'define');
-
-      const el = /** @type {ScopedElementsHost} */ (
-        await fixture(html`<scoped-elements-host></scoped-elements-host>`)
-      );
+      const el =
+        /** @type {ScopedElementsHost} */
+        await fixture(html`<scoped-elements-host></scoped-elements-host>`);
 
       // @ts-expect-error
       expect(el.registry.get('scoped-elements-child')).to.equal(ScopedElementsChild);
       expect(el.registry).to.not.equal(customElements);
       expect(ceDefineSpy.calledWith('scoped-elements-child')).to.be.false;
-
       ceDefineSpy.restore();
     });
   });
-
   describe('When scoped registries are not supported', () => {
     class ScopedElementsChildNoReg extends LitElement {
       render() {
         return html`<span>I'm a child</span>`;
       }
     }
-
     class ScopedElementsHostNoReg extends ScopedElementsMixin(LitElement) {
-      static scopedElements = { 'scoped-elements-child-no-reg': ScopedElementsChildNoReg };
-
+      static scopedElements = {
+        'scoped-elements-child-no-reg': ScopedElementsChildNoReg,
+      };
       render() {
         return html`<scoped-elements-child-no-reg></scoped-elements-child-no-reg>`;
       }
@@ -113,41 +105,33 @@ describe('ScopedElementsMixin', () => {
       mockNoRegistrySupport();
       customElements.define('scoped-elements-host-no-reg', ScopedElementsHostNoReg);
     });
-
     after(() => {
       mockNoRegistrySupport.restore();
     });
-
     it('registers elements', async () => {
       const ceDefineSpy = sinon.spy(customElements, 'define');
-
-      const el = /** @type {ScopedElementsHostNoReg} */ (
-        await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
-      );
-
+      const el =
+        /** @type {ScopedElementsHostNoReg} */
+        await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`);
       expect(el.registry).to.equal(customElements);
       expect(ceDefineSpy.calledWith('scoped-elements-child-no-reg')).to.be.true;
       ceDefineSpy.restore();
     });
-
     it('fails when different classes are registered under different name', async () => {
       class ScopedElementsHostNoReg2 extends ScopedElementsMixin(LitElement) {
-        static scopedElements = { 'scoped-elements-child-no-reg': class extends HTMLElement {} };
-
+        static scopedElements = {
+          'scoped-elements-child-no-reg': class extends HTMLElement {},
+        };
         render() {
           return html`<scoped-elements-child-no-reg></scoped-elements-child-no-reg>`;
         }
       }
       customElements.define('scoped-elements-host-no-reg-2', ScopedElementsHostNoReg2);
-
       const errorStub = sinon.stub(console, 'error');
-      /** @type {ScopedElementsHostNoReg2} */ (
-        await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
-      );
-      /** @type {ScopedElementsHostNoReg2} */ (
-        await fixture(html`<scoped-elements-host-no-reg-2></scoped-elements-host-no-reg-2>`)
-      );
-
+      /** @type {ScopedElementsHostNoReg2} */
+      await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`);
+      /** @type {ScopedElementsHostNoReg2} */
+      await fixture(html`<scoped-elements-host-no-reg-2></scoped-elements-host-no-reg-2>`);
       expect(errorStub.args[0][0]).to.equal(
         [
           'You are trying to re-register the "scoped-elements-child-no-reg" custom element with a different class via ScopedElementsMixin.',

package/components/core/test/ScopedStylesController.test.js

@@ -2,7 +2,6 @@ import { expect, fixture } from '@open-wc/testing';
 // import { html as _html } from 'lit/static-html.js';
 import { LitElement, css, html } from 'lit';
 import { ScopedStylesController } from '@lion/ui/core.js';
-
 describe('ScopedStylesMixin', () => {
   class Scoped extends LitElement {
     /**
@@ -16,50 +15,42 @@ describe('ScopedStylesMixin', () => {
         }
       `;
     }
-
     constructor() {
       super();
       this.scopedStylesController = new ScopedStylesController(this);
     }
-
     render() {
       return html` <p class="test">Some Text</p> `;
     }
-
     createRenderRoot() {
       return this;
     }
   }
-
   before(() => {
     customElements.define('scoped-el', Scoped);
   });
-
   it('contains the scoped css class for the slotted input style', async () => {
-    const el = /** @type {Scoped & ScopedStylesController} */ (
-      await fixture(html`<scoped-el></scoped-el>`)
-    );
+    const el =
+      /** @type {Scoped & ScopedStylesController} */
+      await fixture(html`<scoped-el></scoped-el>`);
     expect(el.classList.contains(el.scopedStylesController.scopedClass)).to.equal(true);
   });
-
   it('adds a style tag as the first child which contains a class selector to the element', async () => {
-    const el = /** @type {Scoped & ScopedStylesController} */ (
-      await fixture(html` <scoped-el></scoped-el> `)
-    );
+    const el =
+      /** @type {Scoped & ScopedStylesController} */
+      await fixture(html` <scoped-el></scoped-el> `);
     expect(el.children[0].tagName).to.equal('STYLE');
     expect(el.children[0].innerHTML).to.contain(el.scopedStylesController.scopedClass);
   });
-
   it('the scoped styles are applied correctly to the DOM elements', async () => {
-    const el = /** @type {Scoped & ScopedStylesController} */ (
-      await fixture(html`<scoped-el></scoped-el>`)
-    );
-    const testText = /** @type {HTMLElement} */ (el.querySelector('.test'));
+    const el =
+      /** @type {Scoped & ScopedStylesController} */
+      await fixture(html`<scoped-el></scoped-el>`);
+    const testText = /** @type {HTMLElement} */ el.querySelector('.test');
     const cl = Array.from(el.classList);
-    expect(cl.find(item => item.startsWith('scoped-el-'))).to.not.be.undefined;
+    expect(cl.find((item) => item.startsWith('scoped-el-'))).to.not.be.undefined;
     expect(getComputedStyle(testText).getPropertyValue('color')).to.equal('rgb(255, 240, 0)');
   });
-
   it('does cleanup of the style tag when moving or deleting the el', async () => {
     const wrapper = await fixture(`
       <div></div>