@lion/ui 0.23.0 → 0.24.0

package/components/form-core/test/FormControlMixin.test.js

@@ -15,12 +15,9 @@ import {
 
 describe('FormControlMixin', () => {
   const inputSlot = html`<input slot="input" />`;
-
   class FormControlMixinClass extends FormControlMixin(LitElement) {}
-
   const tagString = defineCE(FormControlMixinClass);
   const tag = unsafeStatic(tagString);
-
   it('is hidden when attribute hidden is true', async () => {
     const el = await fixture(html`
     <${tag} hidden>
@@ -29,77 +26,67 @@ describe('FormControlMixin', () => {
     </${tag}>`);
     expect(el).not.to.be.displayed;
   });
-
   describe('Label and helpText api', () => {
     it('has a label', async () => {
-      const elAttr = /** @type {FormControlMixinClass} */ (
+      const elAttr =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag} label="Email address">${inputSlot}</${tag}>
-      `)
-      );
-
+      `);
       expect(elAttr.label).to.equal('Email address', 'as an attribute');
-
-      const elProp = /** @type {FormControlMixinClass} */ (
+      const elProp =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}
           .label=${'Email address'}
         >${inputSlot}
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(elProp.label).to.equal('Email address', 'as a property');
-
-      const elElem = /** @type {FormControlMixinClass} */ (
+      const elElem =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}>
           <label slot="label"><b>Email</b> address</label>
           ${inputSlot}
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(elElem.label).to.equal('Email address', 'as an element');
       // @ts-expect-error
       expect(elElem._labelNode.innerHTML).to.equal('<b>Email</b> address', 'html as an element');
     });
-
     it('has a label that supports inner html', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}>
           <label slot="label">Email <span>address</span></label>
           ${inputSlot}
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(el.label).to.equal('Email address');
       // @ts-expect-error
       expect(el._labelNode.innerHTML).to.equal('Email <span>address</span>');
     });
-
     it('only takes label of direct child', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}>
           <${tag} label="Email address">
             ${inputSlot}
           </${tag}>
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(el.label).to.equal('');
     });
-
     it('supports empty string as label', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag} label="With Value">${inputSlot}</${tag}>
-      `)
-      );
-
+      `);
       expect(el.label).to.equal('With Value');
       // @ts-expect-error
       expect(el._labelNode.innerHTML).to.equal('With Value');
-
       el.label = '';
       await el.updateComplete;
-
       expect(el.label).to.equal('');
       // @ts-expect-error
       expect(el._labelNode.innerHTML).to.equal('');
@@ -107,14 +94,11 @@ describe('FormControlMixin', () => {
       // Reset
       el.label = 'With Value';
       await el.updateComplete;
-
       expect(el.label).to.equal('With Value');
       // @ts-expect-error
       expect(el._labelNode.innerHTML).to.equal('With Value');
-
       el.setAttribute('label', '');
       await el.updateComplete;
-
       expect(el.label).to.equal('');
       // @ts-expect-error
       expect(el._labelNode.innerHTML).to.equal('');
@@ -126,14 +110,13 @@ describe('FormControlMixin', () => {
      * will not have the desired effect on for instance lion-input
      */
     it('supports "label-sr-only" to make label visually hidden, but accessible for screen reader users', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag} label-sr-only>
           <label slot="label">Email <span>address</span></label>
           ${inputSlot}
-        </${tag}>`)
-      );
-
+        </${tag}>`);
       const expectedValues = {
         position: 'absolute',
         top: '0px',
@@ -147,7 +130,6 @@ describe('FormControlMixin', () => {
         margin: '0px',
         padding: '0px',
       };
-
       const labelStyle = window.getComputedStyle(
         // @ts-ignore
         el.shadowRoot?.querySelector('.form-field__label'),
@@ -157,75 +139,66 @@ describe('FormControlMixin', () => {
         expect(labelStyle[key]).to.equal(val);
       });
     });
-
     it('can have a help-text', async () => {
-      const elAttr = /** @type {FormControlMixinClass} */ (
+      const elAttr =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
-      `)
-      );
+      `);
       expect(elAttr.helpText).to.equal('We will not send you any spam', 'as an attribute');
-
-      const elProp = /** @type {FormControlMixinClass} */ (
+      const elProp =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}
           .helpText=${'We will not send you any spam'}
         >${inputSlot}
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(elProp.helpText).to.equal('We will not send you any spam', 'as a property');
-
-      const elElem = /** @type {FormControlMixinClass} */ (
+      const elElem =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}>
           <div slot="help-text">We will <b>not</b> send you any spam</div>
           ${inputSlot}
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element');
       // @ts-expect-error
       expect(elElem._helpTextNode.innerHTML).to.equal('We will <b>not</b> send you any spam');
     });
-
     it('can have a help-text that supports inner html', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}>
           <div slot="help-text">We will not send you any <span>spam</span></div>
           ${inputSlot}
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(el.helpText).to.equal('We will not send you any spam');
       // @ts-expect-error
       expect(el._helpTextNode.innerHTML).to.equal('We will not send you any <span>spam</span>');
     });
-
     it('only takes help-text of direct child', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag}>
           <${tag} help-text="We will not send you any spam">
             ${inputSlot}
           </${tag}>
-        </${tag}>`)
-      );
+        </${tag}>`);
       expect(el.helpText).to.equal('');
     });
-
     it('supports empty string as help-text', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag} help-text="With Value">${inputSlot}</${tag}>
-      `)
-      );
-
+      `);
       expect(el.helpText).to.equal('With Value');
       // @ts-expect-error
       expect(el._helpTextNode.innerHTML).to.equal('With Value');
-
       el.helpText = '';
       await el.updateComplete;
-
       expect(el.helpText).to.equal('');
       // @ts-expect-error
       expect(el._helpTextNode.innerHTML).to.equal('');
@@ -233,88 +206,72 @@ describe('FormControlMixin', () => {
       // Reset
       el.helpText = 'With Value';
       await el.updateComplete;
-
       expect(el.helpText).to.equal('With Value');
       // @ts-expect-error
       expect(el._helpTextNode.innerHTML).to.equal('With Value');
-
       el.setAttribute('help-text', '');
       await el.updateComplete;
-
       expect(el.helpText).to.equal('');
       // @ts-expect-error
       expect(el._helpTextNode.innerHTML).to.equal('');
     });
   });
-
   describe('Accessibility', () => {
     it('does not duplicate aria-describedby and aria-labelledby ids on reconnect', async () => {
-      const wrapper = /** @type {HTMLElement} */ (
+      const wrapper =
+        /** @type {HTMLElement} */
         await fixture(html`
         <div id="wrapper">
           <${tag} help-text="This element will be disconnected/reconnected">${inputSlot}</${tag}>
         </div>
-      `)
-      );
-      const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
+      `);
+      const el = /** @type {FormControlMixinClass} */ wrapper.querySelector(tagString);
       const { _inputNode } = getFormControlMembers(el);
-
-      const labelIdsBefore = /** @type {string} */ (_inputNode.getAttribute('aria-labelledby'));
-      const descriptionIdsBefore = /** @type {string} */ (
-        _inputNode.getAttribute('aria-describedby')
-      );
+      const labelIdsBefore = /** @type {string} */ _inputNode.getAttribute('aria-labelledby');
+      const descriptionIdsBefore =
+        /** @type {string} */
+        _inputNode.getAttribute('aria-describedby');
       // Reconnect
       wrapper.removeChild(el);
       wrapper.appendChild(el);
-      const labelIdsAfter = /** @type {string} */ (_inputNode.getAttribute('aria-labelledby'));
-      const descriptionIdsAfter = /** @type {string} */ (
-        _inputNode.getAttribute('aria-describedby')
-      );
-
+      const labelIdsAfter = /** @type {string} */ _inputNode.getAttribute('aria-labelledby');
+      const descriptionIdsAfter = /** @type {string} */ _inputNode.getAttribute('aria-describedby');
       expect(labelIdsBefore).to.equal(labelIdsAfter);
       expect(descriptionIdsBefore).to.equal(descriptionIdsAfter);
     });
-
     it('sets aria-disabled on inputNode based on disabled property', async () => {
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
           <${tag}>${inputSlot}</${tag}>
-      `)
-      );
+      `);
       const { _inputNode } = getFormControlMembers(el);
       expect(_inputNode.hasAttribute('aria-disabled')).to.be.true;
       expect(_inputNode.getAttribute('aria-disabled')).to.equal('false');
-
       el.disabled = true;
-
       expect(_inputNode.getAttribute('aria-disabled')).to.equal('false');
     });
-
     it('clicking the label should call `_onLabelClick`', async () => {
       const spy = sinon.spy();
-      const el = /** @type {FormControlMixinClass} */ (
+      const el =
+        /** @type {FormControlMixinClass} */
         await fixture(html`
         <${tag} ._onLabelClick="${spy}">
           ${inputSlot}
         </${tag}>
-      `)
-      );
+      `);
       const { _labelNode } = getFormControlMembers(el);
-
       expect(spy).to.not.have.been.called;
       _labelNode.click();
       expect(spy).to.have.been.calledOnce;
     });
-
     describe('Feedback slot aria-live', () => {
       // See: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
       it(`adds aria-live="polite" to the feedback slot on focus, aria-live="assertive" to the feedback slot on blur,
         so error messages appearing on blur will be read before those of the next input`, async () => {
         const FormControlWithRegistrarMixinClass = class extends FormGroupMixin(LitElement) {};
-
         const groupTagString = defineCE(FormControlWithRegistrarMixinClass);
         const groupTag = unsafeStatic(groupTagString);
-
         const focusableTagString = defineCE(
           class extends FocusMixin(FormControlMixin(LitElement)) {
             /**
@@ -326,7 +283,6 @@ describe('FormControlMixin', () => {
           },
         );
         const focusableTag = unsafeStatic(focusableTagString);
-
         const formEl = await fixture(html`
           <${groupTag} name="form">
             <${groupTag} name="fieldset">
@@ -361,19 +317,16 @@ describe('FormControlMixin', () => {
         /**
          * @typedef {* & import('../types/FormControlMixinTypes.js').FormControlHost} FormControl
          */
-        const field1El = /** @type {FormControl} */ (formEl.querySelector('[name=field1]'));
-        const field2El = /** @type {FormControl} */ (formEl.querySelector('[name=field2]'));
-        const field3El = /** @type {FormControl} */ (formEl.querySelector('[name=field3]'));
-        const fieldsetEl = /** @type {FormControl} */ (formEl.querySelector('[name=fieldset]'));
-
+        const field1El = /** @type {FormControl} */ formEl.querySelector('[name=field1]');
+        const field2El = /** @type {FormControl} */ formEl.querySelector('[name=field2]');
+        const field3El = /** @type {FormControl} */ formEl.querySelector('[name=field3]');
+        const fieldsetEl = /** @type {FormControl} */ formEl.querySelector('[name=fieldset]');
         field1El.focus();
         expect(field1El._feedbackNode.getAttribute('aria-live')).to.equal('polite');
-
         field2El.focus();
         // field1El just blurred
         expect(field1El._feedbackNode.getAttribute('aria-live')).to.equal('assertive');
         expect(field2El._feedbackNode.getAttribute('aria-live')).to.equal('polite');
-
         field3El.focus();
         // field2El just blurred
         expect(field2El._feedbackNode.getAttribute('aria-live')).to.equal('assertive');
@@ -383,11 +336,11 @@ describe('FormControlMixin', () => {
         expect(field3El._feedbackNode.getAttribute('aria-live')).to.equal('polite');
       });
     });
-
     describe('Adding extra labels and descriptions', () => {
       it(`supports centrally orchestrated labels/descriptions via addToAriaLabelledBy() /
       removeFromAriaLabelledBy() / addToAriaDescribedBy() / removeFromAriaDescribedBy()`, async () => {
-        const wrapper = /** @type {HTMLElement} */ (
+        const wrapper =
+          /** @type {HTMLElement} */
           await fixture(html`
           <div id="wrapper">
             <${tag}>
@@ -397,9 +350,8 @@ describe('FormControlMixin', () => {
             </${tag}>
             <div id="additionalLabel"> This also needs to be read whenever the input has focus</div>
             <div id="additionalDescription"> Same for this </div>
-          </div>`)
-        );
-        const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
+          </div>`);
+        const el = /** @type {FormControlMixinClass} */ wrapper.querySelector(tagString);
         const { _inputNode } = getFormControlMembers(el);
 
         // wait until the field element is done rendering
@@ -411,15 +363,15 @@ describe('FormControlMixin', () => {
 
         // 1a. addToAriaLabelledBy()
         // Check if the aria attr is filled initially
-        expect(/** @type {string} */ (_inputNode.getAttribute('aria-labelledby'))).to.contain(
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-labelledby')).to.contain(
           `label-${inputId}`,
         );
-        const additionalLabel = /** @type {HTMLElement} */ (
-          wrapper.querySelector('#additionalLabel')
-        );
+        const additionalLabel =
+          /** @type {HTMLElement} */
+          wrapper.querySelector('#additionalLabel');
         el.addToAriaLabelledBy(additionalLabel);
         await el.updateComplete;
-        let labelledbyAttr = /** @type {string} */ (_inputNode.getAttribute('aria-labelledby'));
+        let labelledbyAttr = /** @type {string} */ _inputNode.getAttribute('aria-labelledby');
         // Now check if ids are added to the end (not overridden)
         expect(labelledbyAttr).to.contain(`additionalLabel`);
         // Should be placed in the end
@@ -430,17 +382,16 @@ describe('FormControlMixin', () => {
         // 1b. removeFromAriaLabelledBy()
         el.removeFromAriaLabelledBy(additionalLabel);
         await el.updateComplete;
-        labelledbyAttr = /** @type {string} */ (_inputNode.getAttribute('aria-labelledby'));
+        labelledbyAttr = /** @type {string} */ _inputNode.getAttribute('aria-labelledby');
         // Now check if ids are added to the end (not overridden)
         expect(labelledbyAttr).to.not.contain(`additionalLabel`);
 
         // 2a. addToAriaDescribedBy()
         // Check if the aria attr is filled initially
-        expect(/** @type {string} */ (_inputNode.getAttribute('aria-describedby'))).to.contain(
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-describedby')).to.contain(
           `feedback-${inputId}`,
         );
       });
-
       it('sorts internal elements based on assigned slots, and allows opt-out', async () => {
         const wrapper = await fixture(html`
           <div id="wrapper">
@@ -453,30 +404,29 @@ describe('FormControlMixin', () => {
             </${tag}>
           </div>
         `);
-        const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
+        const el = /** @type {FormControlMixinClass} */ wrapper.querySelector(tagString);
         const { _inputNode } = getFormControlMembers(el);
 
         // N.B. in real life we would never add the input to aria-describedby or -labelledby,
         // but this example purely demonstrates dom order is respected.
         // A real life scenario would be for instance when
         // a Field or FormGroup would be extended and an extra slot would be added in the template
-        const myInput = /** @type {HTMLElement} */ (wrapper.querySelector('#myInput'));
-        const internalLabel = /** @type {HTMLElement} */ (wrapper.querySelector('#internalLabel'));
-        const internalDescription = /** @type {HTMLElement} */ (
-          wrapper.querySelector('#internalDescription')
-        );
-
+        const myInput = /** @type {HTMLElement} */ wrapper.querySelector('#myInput');
+        const internalLabel = /** @type {HTMLElement} */ wrapper.querySelector('#internalLabel');
+        const internalDescription =
+          /** @type {HTMLElement} */
+          wrapper.querySelector('#internalDescription');
         el.addToAriaLabelledBy(myInput);
         await el.updateComplete;
         el.addToAriaDescribedBy(myInput);
         await el.updateComplete;
-
-        expect(
-          /** @type {string} */ (_inputNode.getAttribute('aria-labelledby')).split(' '),
-        ).to.eql(['internalLabel', 'myInput']);
-        expect(
-          /** @type {string} */ (_inputNode.getAttribute('aria-describedby')).split(' '),
-        ).to.eql(['internalDescription', 'myInput']);
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-labelledby').split(' ')).to.eql([
+          'internalLabel',
+          'myInput',
+        ]);
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-describedby').split(' ')).to.eql(
+          ['internalDescription', 'myInput'],
+        );
 
         // cleanup
         el.removeFromAriaLabelledBy(internalLabel);
@@ -485,19 +435,22 @@ describe('FormControlMixin', () => {
         await el.updateComplete;
 
         // opt-out of reorder
-        el.addToAriaLabelledBy(internalLabel, { reorder: false });
+        el.addToAriaLabelledBy(internalLabel, {
+          reorder: false,
+        });
         await el.updateComplete;
-        el.addToAriaDescribedBy(internalDescription, { reorder: false });
+        el.addToAriaDescribedBy(internalDescription, {
+          reorder: false,
+        });
         await el.updateComplete;
-
-        expect(
-          /** @type {string} */ (_inputNode.getAttribute('aria-labelledby')).split(' '),
-        ).to.eql(['myInput', 'internalLabel']);
-        expect(
-          /** @type {string} */ (_inputNode.getAttribute('aria-describedby')).split(' '),
-        ).to.eql(['myInput', 'internalDescription']);
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-labelledby').split(' ')).to.eql([
+          'myInput',
+          'internalLabel',
+        ]);
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-describedby').split(' ')).to.eql(
+          ['myInput', 'internalDescription'],
+        );
       });
-
       it('respects provided order for external elements', async () => {
         const wrapper = await fixture(html`
         <div id="wrapper">
@@ -511,65 +464,59 @@ describe('FormControlMixin', () => {
           <div id="externalLabelB">should go after input internals</div>
           <div id="externalDescriptionB">should go after input internals</div>
         </div>`);
-        const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
+        const el = /** @type {FormControlMixinClass} */ wrapper.querySelector(tagString);
         const { _inputNode } = getFormControlMembers(el);
 
         // 1. addToAriaLabelledBy()
-        const labelA = /** @type {HTMLElement} */ (wrapper.querySelector('#externalLabelA'));
-        const labelB = /** @type {HTMLElement} */ (wrapper.querySelector('#externalLabelB'));
+        const labelA = /** @type {HTMLElement} */ wrapper.querySelector('#externalLabelA');
+        const labelB = /** @type {HTMLElement} */ wrapper.querySelector('#externalLabelB');
         // external inputs should go in order defined by user
         el.addToAriaLabelledBy(labelA);
         el.addToAriaLabelledBy(labelB);
         await el.updateComplete;
-
-        expect(
-          /** @type {string} */ (_inputNode.getAttribute('aria-labelledby')).split(' '),
-        ).to.eql(['internalLabel', 'externalLabelA', 'externalLabelB']);
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-labelledby').split(' ')).to.eql([
+          'internalLabel',
+          'externalLabelA',
+          'externalLabelB',
+        ]);
 
         // 2. addToAriaDescribedBy()
-        const descrA = /** @type {HTMLElement} */ (wrapper.querySelector('#externalDescriptionA'));
-        const descrB = /** @type {HTMLElement} */ (wrapper.querySelector('#externalDescriptionB'));
-
+        const descrA = /** @type {HTMLElement} */ wrapper.querySelector('#externalDescriptionA');
+        const descrB = /** @type {HTMLElement} */ wrapper.querySelector('#externalDescriptionB');
         el.addToAriaDescribedBy(descrA);
         el.addToAriaDescribedBy(descrB);
         await el.updateComplete;
-
-        expect(
-          /** @type {string} */ (_inputNode.getAttribute('aria-describedby')).split(' '),
-        ).to.eql(['internalDescription', 'externalDescriptionA', 'externalDescriptionB']);
+        expect(/** @type {string} */ _inputNode.getAttribute('aria-describedby').split(' ')).to.eql(
+          ['internalDescription', 'externalDescriptionA', 'externalDescriptionB'],
+        );
       });
     });
   });
-
   describe('Model-value-changed event propagation', () => {
     const FormControlWithRegistrarMixinClass = class extends FormControlMixin(
       FormRegistrarMixin(LitElement),
     ) {};
-
     const groupElem = defineCE(FormControlWithRegistrarMixinClass);
     const groupTag = unsafeStatic(groupElem);
-
     describe('On initialization', () => {
       it('redispatches one event from host', async () => {
         const formSpy = sinon.spy();
         const fieldsetSpy = sinon.spy();
-        const formEl = /** @type {FormControlMixinClass} */ (
+        const formEl =
+          /** @type {FormControlMixinClass} */
           await fixture(html`
           <${groupTag} name="form" ._repropagationRole=${'form-group'} @model-value-changed=${formSpy}>
             <${groupTag} name="fieldset" ._repropagationRole=${'form-group'} @model-value-changed=${fieldsetSpy}>
               <${tag} name="field"></${tag}>
             </${groupTag}>
           </${groupTag}>
-        `)
-        );
+        `);
         const fieldsetEl = formEl.querySelector('[name=fieldset]');
-
         expect(fieldsetSpy.callCount).to.equal(1);
         const fieldsetEv = fieldsetSpy.firstCall.args[0];
         expect(fieldsetEv.target).to.equal(fieldsetEl);
         expect(fieldsetEv.detail.formPath).to.eql([fieldsetEl]);
         expect(fieldsetEv.detail.initialize).to.be.true;
-
         expect(formSpy.callCount).to.equal(1);
         const formEv = formSpy.firstCall.args[0];
         expect(formEv.target).to.equal(formEl);
@@ -595,24 +542,23 @@ describe('FormControlMixin', () => {
         `);
         const fieldEl = formEl.querySelector('[name=field]');
         const fieldsetEl = formEl.querySelector('[name=fieldset]');
-
         formEl.addEventListener('model-value-changed', formSpy);
         fieldsetEl?.addEventListener('model-value-changed', fieldsetSpy);
         fieldEl?.addEventListener('model-value-changed', fieldSpy);
-
-        fieldEl?.dispatchEvent(new Event('model-value-changed', { bubbles: true }));
-
+        fieldEl?.dispatchEvent(
+          new Event('model-value-changed', {
+            bubbles: true,
+          }),
+        );
         expect(fieldsetSpy.callCount).to.equal(1);
         const fieldsetEv = fieldsetSpy.firstCall.args[0];
         expect(fieldsetEv.target).to.equal(fieldsetEl);
         expect(fieldsetEv.detail.formPath).to.eql([fieldEl, fieldsetEl]);
-
         expect(formSpy.callCount).to.equal(1);
         const formEv = formSpy.firstCall.args[0];
         expect(formEv.target).to.equal(formEl);
         expect(formEv.detail.formPath).to.eql([fieldEl, fieldsetEl, formEl]);
       });
-
       it('sets "isTriggeredByUser" event detail when event triggered by user', async () => {
         const formSpy = sinon.spy();
         const fieldsetSpy = sinon.spy();
@@ -626,21 +572,19 @@ describe('FormControlMixin', () => {
         `);
         const fieldEl = formEl.querySelector('[name=field]');
         const fieldsetEl = formEl.querySelector('[name=fieldset]');
-
         formEl.addEventListener('model-value-changed', formSpy);
         fieldsetEl?.addEventListener('model-value-changed', fieldsetSpy);
         fieldEl?.addEventListener('model-value-changed', fieldSpy);
-
         fieldEl?.dispatchEvent(
           new CustomEvent('model-value-changed', {
             bubbles: true,
-            detail: { isTriggeredByUser: true },
+            detail: {
+              isTriggeredByUser: true,
+            },
           }),
         );
-
         const fieldsetEv = fieldsetSpy.firstCall.args[0];
         expect(fieldsetEv.detail.isTriggeredByUser).to.be.true;
-
         const formEv = formSpy.firstCall.args[0];
         expect(formEv.detail.isTriggeredByUser).to.be.true;
       });

package/components/form-core/test/FormRegistrationMixins.test.js

@@ -1,12 +1,10 @@
 import { LitElement } from 'lit';
 import { html } from 'lit/static-html.js';
 import { runRegistrationSuite } from '../test-suites/FormRegistrationMixins.suite.js';
-
 runRegistrationSuite({
   suffix: 'with LitElement',
   baseElement: LitElement,
 });
-
 runRegistrationSuite({
   suffix: 'with LitElement, using shadow dom',
   baseElement: class ShadowElement extends LitElement {