@lion/ui 0.23.0 → 0.25.0

package/components/button/test-suites/LionButtonReset.suite.js

@@ -2,16 +2,14 @@
 import { LionButtonReset } from '@lion/ui/button.js';
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
-
 export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
   const tagStringButtonReset = defineCE(class extends klass {});
   const tagButtonReset = unsafeStatic(tagStringButtonReset);
-
   describe('LionButtonReset', () => {
     it('has .type="reset" and type="reset" by default', async () => {
-      const el = /** @type {LionButtonReset} */ (
-        await fixture(html`<${tagButtonReset}>foo</${tagButtonReset}>`)
-      );
+      const el =
+        /** @type {LionButtonReset} */
+        await fixture(html`<${tagButtonReset}>foo</${tagButtonReset}>`);
       expect(el.type).to.equal('reset');
       expect(el.getAttribute('type')).to.be.equal('reset');
     });
@@ -29,51 +27,54 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
     describe('Form integration', () => {
       describe('With submit event', () => {
         it('behaves like native `button` when clicked', async () => {
-          const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
+          const formSubmitSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
           const form = await fixture(html`
             <form @submit="${formSubmitSpy}">
               <${tagButtonReset} type="submit">foo</${tagButtonReset}>
             </form>
           `);
-          const button /** @type {LionButtonReset} */ = /** @type {LionButtonReset} */ (
-            form.querySelector(tagStringButtonReset)
-          );
+          const button /** @type {LionButtonReset} */ =
+            /** @type {LionButtonReset} */
+            form.querySelector(tagStringButtonReset);
           button.click();
           expect(formSubmitSpy).to.have.been.calledOnce;
         });
-
         it('behaves like native `button` when interacted with keyboard space', async () => {
-          const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
+          const formSubmitSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
           const form = await fixture(html`
             <form @submit="${formSubmitSpy}">
               <${tagButtonReset} type="submit">foo</${tagButtonReset}>
             </form>
           `);
-          const button /** @type {LionButtonReset} */ = /** @type {LionButtonReset} */ (
-            form.querySelector(tagStringButtonReset)
+          const button /** @type {LionButtonReset} */ =
+            /** @type {LionButtonReset} */
+            form.querySelector(tagStringButtonReset);
+          button.dispatchEvent(
+            new KeyboardEvent('keyup', {
+              key: ' ',
+            }),
           );
-          button.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
           await aTimeout(0);
           await aTimeout(0);
           expect(formSubmitSpy).to.have.been.calledOnce;
         });
-
         it('behaves like native `button` when interacted with keyboard enter', async () => {
-          const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
+          const formSubmitSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
           const form = await fixture(html`
             <form @submit="${formSubmitSpy}">
               <${tagButtonReset} type="submit">foo</${tagButtonReset}>
             </form>
           `);
-
-          const button = /** @type {LionButtonReset} */ (form.querySelector(tagStringButtonReset));
-          button.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+          const button = /** @type {LionButtonReset} */ form.querySelector(tagStringButtonReset);
+          button.dispatchEvent(
+            new KeyboardEvent('keyup', {
+              key: 'Enter',
+            }),
+          );
           await aTimeout(0);
           await aTimeout(0);
-
           expect(formSubmitSpy).to.have.been.calledOnce;
         });
-
         it('supports resetting form inputs in a native form', async () => {
           const form = await fixture(html`
             <form>
@@ -82,38 +83,33 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
               <${tagButtonReset} type="reset">reset</${tagButtonReset}>
             </form>
           `);
-          const btn /** @type {LionButtonReset} */ = /** @type {LionButtonReset} */ (
-            form.querySelector(tagStringButtonReset)
-          );
-          const firstName = /** @type {HTMLInputElement} */ (
-            form.querySelector('input[name=firstName]')
-          );
-          const lastName = /** @type {HTMLInputElement} */ (
-            form.querySelector('input[name=lastName]')
-          );
+          const btn /** @type {LionButtonReset} */ =
+            /** @type {LionButtonReset} */
+            form.querySelector(tagStringButtonReset);
+          const firstName =
+            /** @type {HTMLInputElement} */
+            form.querySelector('input[name=firstName]');
+          const lastName =
+            /** @type {HTMLInputElement} */
+            form.querySelector('input[name=lastName]');
           firstName.value = 'Foo';
           lastName.value = 'Bar';
-
           expect(firstName.value).to.equal('Foo');
           expect(lastName.value).to.equal('Bar');
-
           btn.click();
-
           expect(firstName.value).to.be.empty;
           expect(lastName.value).to.be.empty;
         });
       });
     });
-
     it('is fired once outside and inside the form', async () => {
-      const outsideSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-      const insideSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-      const formSpyEarly = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-      const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-
-      const el = /** @type {HTMLDivElement} */ (
-        await fixture(
-          html`
+      const outsideSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const insideSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const formSpyEarly = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const formSpyLater = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const el =
+        /** @type {HTMLDivElement} */
+        await fixture(html`
             <div @click="${outsideSpy}">
               <form @click="${formSpyEarly}">
                 <div @click="${insideSpy}">
@@ -121,67 +117,53 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
                 </div>
               </form>
             </div>
-          `,
-        )
-      );
-      const lionButton = /** @type {LionButtonReset} */ (el.querySelector(tagStringButtonReset));
-      const form = /** @type {HTMLFormElement} */ (el.querySelector('form'));
+          `);
+      const lionButton = /** @type {LionButtonReset} */ el.querySelector(tagStringButtonReset);
+      const form = /** @type {HTMLFormElement} */ el.querySelector('form');
       form.addEventListener('click', formSpyLater);
-
       lionButton.click();
       // trying to wait for other possible redispatched events
       await aTimeout(0);
       await aTimeout(0);
-
       expect(insideSpy).to.have.been.calledOnce;
       expect(outsideSpy).to.have.been.calledOnce;
       // A small sacrifice for event listeners registered early: we get the native button evt.
       expect(formSpyEarly).to.have.been.calledTwice;
       expect(formSpyLater).to.have.been.calledOnce;
     });
-
     it('works when connected to different form', async () => {
-      const form1El = /** @type {HTMLFormElement} */ (
-        await fixture(
-          html`
+      const form1El =
+        /** @type {HTMLFormElement} */
+        await fixture(html`
             <form>
               <${tagButtonReset}>foo</${tagButtonReset}>
             </form>
-          `,
-        )
-      );
-      const lionButton = /** @type {LionButtonReset} */ (
-        form1El.querySelector(tagStringButtonReset)
-      );
-
+          `);
+      const lionButton = /** @type {LionButtonReset} */ form1El.querySelector(tagStringButtonReset);
       expect(lionButton._form).to.equal(form1El);
 
       // Now we add the lionButton to a different form.
       // We disconnect and connect and check if everything still works as expected
-      const outsideSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-      const insideSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-      const formSpyEarly = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-      const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-
-      const form2El = /** @type {HTMLFormElement} */ (
+      const outsideSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const insideSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const formSpyEarly = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const formSpyLater = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
+      const form2El =
+        /** @type {HTMLFormElement} */
         await fixture(html`
           <div @click="${outsideSpy}">
             <form @click="${formSpyEarly}">
               <div @click="${insideSpy}">${lionButton}</div>
             </form>
           </div>
-        `)
-      );
-      const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form'));
-
+        `);
+      const form2Node = /** @type {HTMLFormElement} */ form2El.querySelector('form');
       expect(lionButton._form).to.equal(form2Node);
-
       form2Node.addEventListener('click', formSpyLater);
       lionButton.click();
       // trying to wait for other possible redispatched events
       await aTimeout(0);
       await aTimeout(0);
-
       expect(insideSpy).to.have.been.calledOnce;
       expect(outsideSpy).to.have.been.calledOnce;
       // A small sacrifice for event listeners registered early: we get the native button evt.

package/components/button/test-suites/LionButtonSubmit.suite.js

@@ -3,83 +3,73 @@ import { LionButtonSubmit } from '@lion/ui/button.js';
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-
 export function LionButtonSubmitSuite({ klass = LionButtonSubmit } = {}) {
   const tagStringButton = defineCE(class extends klass {});
   const tagButton = unsafeStatic(tagStringButton);
-
   describe('LionButtonSubmit', () => {
     it('has .type="submit" and type="submit" by default', async () => {
-      const el = /** @type {LionButtonSubmit} */ (
-        await fixture(html`<${tagButton}>foo</${tagButton}>`)
-      );
+      const el =
+        /** @type {LionButtonSubmit} */
+        await fixture(html`<${tagButton}>foo</${tagButton}>`);
       expect(el.type).to.equal('submit');
       expect(el.getAttribute('type')).to.be.equal('submit');
     });
-
     describe('Implicit form submission', () => {
       describe('Helper submit button', () => {
         it('creates a helper submit button when type is "submit"', async () => {
           let lionBtnEl;
-          const elTypeSubmit = /** @type {HTMLFormElement} */ (
-            await fixture(html`<form><${tagButton} type="submit">foo</${tagButton}></form>`)
-          );
-          lionBtnEl = /** @type {LionButtonSubmit} */ (elTypeSubmit.querySelector('[type=submit]'));
+          const elTypeSubmit =
+            /** @type {HTMLFormElement} */
+            await fixture(html`<form><${tagButton} type="submit">foo</${tagButton}></form>`);
+          lionBtnEl = /** @type {LionButtonSubmit} */ elTypeSubmit.querySelector('[type=submit]');
           // @ts-ignore [allow-protected] in test
           expect(lionBtnEl._nativeButtonNode instanceof HTMLButtonElement).to.be.true;
           // @ts-ignore [allow-protected] in test
           expect(lionBtnEl._nativeButtonNode.type).to.equal('submit');
-
-          const elTypeReset = /** @type {LionButtonSubmit} */ (
-            await fixture(html`<form><${tagButton} type="reset">foo</${tagButton}></form>`)
-          );
-          lionBtnEl = /** @type {LionButtonSubmit} */ (elTypeReset.querySelector('[type=reset]'));
+          const elTypeReset =
+            /** @type {LionButtonSubmit} */
+            await fixture(html`<form><${tagButton} type="reset">foo</${tagButton}></form>`);
+          lionBtnEl = /** @type {LionButtonSubmit} */ elTypeReset.querySelector('[type=reset]');
           // @ts-ignore [allow-protected] in test
           expect(lionBtnEl._nativeButtonNode).to.be.null;
-
-          const elTypeButton = /** @type {LionButtonSubmit} */ (
-            await fixture(html`<form><${tagButton} type="button">foo</${tagButton}></form>`)
-          );
-
-          lionBtnEl = /** @type {LionButtonSubmit} */ (elTypeButton.querySelector('[type=button]'));
+          const elTypeButton =
+            /** @type {LionButtonSubmit} */
+            await fixture(html`<form><${tagButton} type="button">foo</${tagButton}></form>`);
+          lionBtnEl = /** @type {LionButtonSubmit} */ elTypeButton.querySelector('[type=button]');
           // @ts-ignore [allow-protected] in test
           expect(lionBtnEl._nativeButtonNode).to.be.null;
         });
-
         it('only creates a helper submit button when LionButtonSubmit is inside a form', async () => {
-          const elForm = /** @type {HTMLFormElement} */ (await fixture(html`<form></form>`));
-          const el = /** @type {LionButtonSubmit} */ (
-            await fixture(html`<${tagButton} type="submit">foo</${tagButton}>`)
-          );
+          const elForm = /** @type {HTMLFormElement} */ await fixture(html`<form></form>`);
+          const el =
+            /** @type {LionButtonSubmit} */
+            await fixture(html`<${tagButton} type="submit">foo</${tagButton}>`);
           // @ts-ignore [allow-protected] in test
           expect(el._nativeButtonNode).to.be.null;
-
           elForm.appendChild(el);
           await el.updateComplete;
           // @ts-ignore [allow-protected] in test
           expect(el._nativeButtonNode).to.be.not.null;
-
           elForm.removeChild(el);
           // @ts-ignore [allow-protected] in test
           expect(el._nativeButtonNode).to.be.null;
         });
-
         it('puts helper submit button at the bottom of a form', async () => {
-          const elForm = /** @type {HTMLFormElement} */ (
+          const elForm =
+            /** @type {HTMLFormElement} */
             await fixture(
               html`<form><input /><${tagButton} type="submit">foo</${tagButton}><input /></form>`,
-            )
-          );
-          const lionBtnEl = /** @type {LionButtonSubmit} */ (elForm.querySelector('[type=submit]'));
+            );
+          const lionBtnEl = /** @type {LionButtonSubmit} */ elForm.querySelector('[type=submit]');
           expect(elForm.children.length).to.equal(4); // 3 + 1
           // @ts-ignore [allow-protected] in test
           expect(lionBtnEl._nativeButtonNode).to.be.not.null;
           // @ts-ignore [allow-protected] in test
           expect(elForm.children[3].firstChild).to.equal(lionBtnEl._nativeButtonNode);
         });
-
         it('creates max one helper submit button per form', async () => {
-          const elForm = /** @type {HTMLFormElement} */ (
+          const elForm =
+            /** @type {HTMLFormElement} */
             await fixture(html`
             <form>
               <input />
@@ -87,11 +77,10 @@ export function LionButtonSubmitSuite({ klass = LionButtonSubmit } = {}) {
               <${tagButton} type="submit">foo</${tagButton}>
               <input />
             </form>
-          `)
-          );
-          const [lionBtnEl1, lionBtnEl2] = /** @type {LionButtonSubmit[]} */ (
-            Array.from(elForm.querySelectorAll('[type=submit]'))
-          );
+          `);
+          const [lionBtnEl1, lionBtnEl2] =
+            /** @type {LionButtonSubmit[]} */
+            Array.from(elForm.querySelectorAll('[type=submit]'));
           const { children } = elForm;
           expect(children.length).to.equal(5); // 4 + 1
           // @ts-ignore [allow-protected] in test
@@ -103,58 +92,52 @@ export function LionButtonSubmitSuite({ klass = LionButtonSubmit } = {}) {
           // @ts-ignore [allow-protected] in test
           expect(children[children.length - 1].firstChild).to.equal(lionBtnEl2._nativeButtonNode);
         });
-
         it('helper submit button gets reconnected when external context changes (rerenders)', async () => {
-          const elForm = /** @type {HTMLFormElement} */ (
-            await fixture(html`<form><${tagButton} type="submit">foo</${tagButton}></form>`)
-          );
-          const helperBtnEl = /** @type {HTMLButtonElement} */ (
-            elForm.querySelector('button[type=submit]')
-          );
+          const elForm =
+            /** @type {HTMLFormElement} */
+            await fixture(html`<form><${tagButton} type="submit">foo</${tagButton}></form>`);
+          const helperBtnEl =
+            /** @type {HTMLButtonElement} */
+            elForm.querySelector('button[type=submit]');
           helperBtnEl.remove();
           expect(elForm).to.not.include(helperBtnEl);
           await aTimeout(0);
           expect(elForm).to.include(helperBtnEl);
         });
-
         it('helper submit button gets removed when last LionbuttonSubmit gets disconnected from form', async () => {
-          const elForm = /** @type {HTMLFormElement} */ (
+          const elForm =
+            /** @type {HTMLFormElement} */
             await fixture(
               html`<form><${tagButton} type="submit">foo</${tagButton}><${tagButton} type="submit">foo</${tagButton}></form>`,
-            )
-          );
-          const [lionBtnEl1, lionBtnEl2] = /** @type {LionButtonSubmit[]} */ (
-            Array.from(elForm.querySelectorAll('[type=submit]'))
-          );
+            );
+          const [lionBtnEl1, lionBtnEl2] =
+            /** @type {LionButtonSubmit[]} */
+            Array.from(elForm.querySelectorAll('[type=submit]'));
           const helperBtnEl = elForm.children[elForm.children.length - 1].firstChild;
           // @ts-ignore [allow-protected] in test
           expect(helperBtnEl).to.equal(lionBtnEl1._nativeButtonNode);
           // @ts-ignore [allow-protected] in test
           expect(helperBtnEl).to.equal(lionBtnEl2._nativeButtonNode);
-
           elForm.removeChild(lionBtnEl1);
           // @ts-ignore [allow-protected] in test
           expect(helperBtnEl).to.equal(lionBtnEl2._nativeButtonNode);
-
           elForm.removeChild(lionBtnEl2);
           // @ts-ignore [allow-protected] in test
           expect(helperBtnEl).to.not.equal(lionBtnEl2._nativeButtonNode);
           expect(Array.from(elForm.children)).to.not.include(helperBtnEl);
         });
-
         it('hides the helper submit button in the UI', async () => {
-          const el = /** @type {LionButtonSubmit} */ (
-            await fixture(html`<form><${tagButton}>foo</${tagButton}></form>`)
-          );
+          const el =
+            /** @type {LionButtonSubmit} */
+            await fixture(html`<form><${tagButton}>foo</${tagButton}></form>`);
           // @ts-ignore [allow-protected] in test
           const helperButtonEl = el.querySelector(tagStringButton)._nativeButtonNode;
           expect(helperButtonEl.getAttribute('tabindex')).to.equal('-1');
           expect(window.getComputedStyle(helperButtonEl).clip).to.equal('rect(0px, 0px, 0px, 0px)');
         });
       });
-
       it('works with implicit form submission on-enter inside an input', async () => {
-        const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
+        const formSubmitSpy = /** @type {EventListener} */ sinon.spy((e) => e.preventDefault());
         const form = await fixture(html`
             <form @submit="${formSubmitSpy}">
               <input name="foo" />
@@ -162,8 +145,7 @@ export function LionButtonSubmitSuite({ klass = LionButtonSubmit } = {}) {
               <${tagButton} type="submit">foo</${tagButton}>
             </form>
           `);
-
-        const input2 = /** @type {HTMLInputElement} */ (form.querySelector('input[name="foo2"]'));
+        const input2 = /** @type {HTMLInputElement} */ form.querySelector('input[name="foo2"]');
         input2.focus();
         await sendKeys({
           press: 'Enter',
@@ -171,12 +153,11 @@ export function LionButtonSubmitSuite({ klass = LionButtonSubmit } = {}) {
         expect(formSubmitSpy).to.have.been.calledOnce;
       });
     });
-
     describe('Accessibility', () => {
       it('the helper button has aria-hidden set to true', async () => {
-        const el = /** @type {LionButtonSubmit} */ (
-          await fixture(html`<form><${tagButton}></${tagButton}></form>`)
-        );
+        const el =
+          /** @type {LionButtonSubmit} */
+          await fixture(html`<form><${tagButton}></${tagButton}></form>`);
         // @ts-ignore [allow-protected] in test
         const helperButtonEl = el.querySelector(tagStringButton)._nativeButtonNode;
         expect(helperButtonEl.getAttribute('aria-hidden')).to.equal('true');