@lion/ui 0.22.0 → 0.24.0

package/components/form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js

@@ -21,60 +21,50 @@ export function runCustomChoiceGroupMixinSuite({
     childTagString: childTagString || 'custom-choice-input',
     choiceType: choiceType || 'single',
   };
-
   const parentTag = unsafeStatic(cfg.parentTagString);
   const childTag = unsafeStatic(cfg.childTagString);
-
   describe(`CustomChoiceGroupMixin: ${cfg.parentTagString}`, () => {
     if (cfg.choiceType === 'single') {
       it('has a single modelValue representing a custom value', async () => {
-        const el = /** @type {CustomChoiceGroup} */ (
+        const el =
+          /** @type {CustomChoiceGroup} */
           await fixture(html`
           <${parentTag} allow-custom-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} checked .choiceValue=${'female'}></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         await el.registrationComplete;
-
         expect(el.modelValue).to.equal('female');
         el.modelValue = 'male';
         expect(el.modelValue).to.equal('male');
-
         el.modelValue = 'other';
         expect(el.modelValue).to.equal('other');
-
         expect(el.formElements[0].checked).to.be.false;
         expect(el.formElements[1].checked).to.be.false;
       });
-
       it('has a single formattedValue representing a custom value', async () => {
-        const el = /** @type {CustomChoiceGroup} */ (
+        const el =
+          /** @type {CustomChoiceGroup} */
           await fixture(html`
           <${parentTag} allow-custom-choice name="gender">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         el.modelValue = 'other';
         expect(el.formattedValue).to.equal('other');
       });
     }
-
     it('can set initial custom modelValue on creation', async () => {
-      const el = /** @type {CustomChoiceGroup} */ (
+      const el =
+        /** @type {CustomChoiceGroup} */
         await fixture(html`
         <${parentTag} allow-custom-choice name="gender[]" .modelValue=${'other'}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.modelValue).to.equal('other');
       } else {
@@ -83,17 +73,15 @@ export function runCustomChoiceGroupMixinSuite({
       expect(el.formElements[0].checked).to.be.false;
       expect(el.formElements[1].checked).to.be.false;
     });
-
     it('can set initial custom serializedValue on creation', async () => {
-      const el = /** @type {CustomChoiceGroup} */ (
+      const el =
+        /** @type {CustomChoiceGroup} */
         await fixture(html`
         <${parentTag} allow-custom-choice name="gender[]" .serializedValue=${'other'}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.serializedValue).to.equal('other');
       } else {
@@ -102,17 +90,15 @@ export function runCustomChoiceGroupMixinSuite({
       expect(el.formElements[0].checked).to.be.false;
       expect(el.formElements[1].checked).to.be.false;
     });
-
     it('can set initial custom formattedValue on creation', async () => {
-      const el = /** @type {CustomChoiceGroup} */ (
+      const el =
+        /** @type {CustomChoiceGroup} */
         await fixture(html`
         <${parentTag} allow-custom-choice name="gender[]" .formattedValue=${'other'}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.formattedValue).to.equal('other');
       } else {
@@ -121,17 +107,15 @@ export function runCustomChoiceGroupMixinSuite({
       expect(el.formElements[0].checked).to.be.false;
       expect(el.formElements[1].checked).to.be.false;
     });
-
     it('correctly handles custom modelValue being set before registrationComplete', async () => {
-      const el = /** @type {CustomChoiceGroup} */ (
+      const el =
+        /** @type {CustomChoiceGroup} */
         fixtureSync(html`
         <${parentTag} allow-custom-choice name="gender[]" .modelValue=${null}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         el.modelValue = 'other';
         await el.registrationComplete;
@@ -142,17 +126,15 @@ export function runCustomChoiceGroupMixinSuite({
         expect(el.modelValue).to.deep.equal(['other']);
       }
     });
-
     it('correctly handles custom serializedValue being set before registrationComplete', async () => {
-      const el = /** @type {CustomChoiceGroup} */ (
+      const el =
+        /** @type {CustomChoiceGroup} */
         fixtureSync(html`
         <${parentTag} allow-custom-choice name="gender[]" .serializedValue=${null}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         // @ts-expect-error
         el.serializedValue = 'other';
@@ -165,97 +147,81 @@ export function runCustomChoiceGroupMixinSuite({
         expect(el.serializedValue).to.deep.equal(['other']);
       }
     });
-
     it('can be cleared, even when a custom value is selected', async () => {
-      const el = /** @type {CustomChoiceGroup} */ (
+      const el =
+        /** @type {CustomChoiceGroup} */
         await fixture(html`
         <${parentTag} allow-custom-choice name="gender[]">
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
+      `);
       if (cfg.choiceType === 'single') {
         el.modelValue = 'other';
       } else {
         el.modelValue = ['other'];
       }
-
       el.clear();
-
       if (cfg.choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('');
       } else {
         expect(el.serializedValue).to.deep.equal([]);
       }
     });
-
     describe('multipleChoice', () => {
       it('has a single modelValue representing all currently checked values, including custom values', async () => {
-        const el = /** @type {CustomChoiceGroup} */ (
+        const el =
+          /** @type {CustomChoiceGroup} */
           await fixture(html`
           <${parentTag} allow-custom-choice multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.modelValue).to.eql(['female']);
-
         el.modelValue = ['female', 'male'];
         expect(el.modelValue).to.eql(['male', 'female']);
-
         el.modelValue = ['female', 'male', 'other'];
         expect(el.modelValue).to.eql(['male', 'female', 'other']);
       });
-
       it('has a single serializedValue representing all currently checked values, including custom values', async () => {
-        const el = /** @type {CustomChoiceGroup} */ (
+        const el =
+          /** @type {CustomChoiceGroup} */
           await fixture(html`
           <${parentTag} allow-custom-choice multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.serializedValue).to.eql(['female']);
-
         el.modelValue = ['female', 'male', 'other'];
         expect(el.serializedValue).to.eql(['male', 'female', 'other']);
       });
-
       it('has a single formattedValue representing all currently checked values', async () => {
-        const el = /** @type {CustomChoiceGroup} */ (
+        const el =
+          /** @type {CustomChoiceGroup} */
           await fixture(html`
           <${parentTag} allow-custom-choice multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.formattedValue).to.eql(['female']);
-
         el.modelValue = ['female', 'male', 'other'];
         expect(el.formattedValue).to.eql(['male', 'female', 'other']);
       });
-
       it('unchecks non-matching checkboxes when setting the modelValue', async () => {
-        const el = /** @type {CustomChoiceGroup} */ (
+        const el =
+          /** @type {CustomChoiceGroup} */
           await fixture(html`
           <${parentTag} allow-custom-choice multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'} checked></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.modelValue).to.eql(['male', 'female']);
         expect(el.formElements[0].checked).to.be.true;
         expect(el.formElements[1].checked).to.be.true;
-
         el.modelValue = ['other'];
         expect(el.formElements[0].checked).to.be.false;
         expect(el.formElements[1].checked).to.be.false;

package/components/form-core/test-suites/form-group/FormGroupMixin-input.suite.js

@@ -22,9 +22,7 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
       };
     }
   };
-
   const childTagString = cfg.childTagString || defineCE(FormChild);
-
   const FormGroup = class extends FormGroupMixin(LitElement) {
     constructor() {
       super();
@@ -36,40 +34,34 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
       this._repropagationRole = 'fieldset'; // configures FormControlMixin
     }
   };
-
   const tagString = cfg.tagString || defineCE(FormGroup);
   const tag = unsafeStatic(tagString);
   const childTag = unsafeStatic(childTagString);
-
   beforeEach(() => {
     localizeTearDown();
   });
-
   describe('FormGroupMixin with LionField', () => {
     it('serializes undefined values as "" (nb radios/checkboxes are always serialized)', async () => {
-      const fieldset = /**  @type {InstanceType<typeof FormGroup>} */ (
+      const fieldset =
+        /**  @type {InstanceType<typeof FormGroup>} */
         await fixture(html`
         <${tag}>
           <${childTag} name="custom[]"></${childTag}>
           <${childTag} name="custom[]"></${childTag}>
         </${tag}>
-      `)
-      );
+      `);
       fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
       fieldset.formElements['custom[]'][1].modelValue = undefined;
-
       expect(fieldset.serializedValue).to.deep.equal({
         'custom[]': ['custom 1', ''],
       });
     });
   });
-
   describe('Screen reader relations (aria-describedby) for child inputs and fieldsets', () => {
     /** @type {Function} */
     let childAriaFixture;
     /** @type {Function} */
     let childAriaTest;
-
     before(() => {
       // Legend:
       // - l1 means level 1 (outer) fieldset
@@ -81,7 +73,8 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
       childAriaFixture = async (
         msgSlotType = 'feedback', // eslint-disable-line no-shadow
       ) => {
-        const dom = /**  @type {InstanceType<typeof FormGroup>} */ (
+        const dom =
+          /**  @type {InstanceType<typeof FormGroup>} */
           await fixture(html`
         <${tag} name="l1_g">
           <${childTag} name="l1_fa">
@@ -116,51 +109,49 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
           <div slot="${msgSlotType}" id="msg_l1_g"></div>
           <!-- group referred by: #msg_l1_g (local) -->
         </${tag}>
-      `)
-        );
+      `);
         return dom;
       };
-
       childAriaTest = async (
         // eslint-disable-next-line no-shadow
-        /** @type {InstanceType<typeof FormGroup>} */ childAriaFixture,
+        /** @type {InstanceType<typeof FormGroup>} */
+        childAriaFixture,
         { cleanupPhase = false } = {},
       ) => {
         /* eslint-disable camelcase */
         // Message elements: all elements pointed at by inputs
-        const msg_l1_g = /** @type {InstanceType<typeof FormGroup>} */ (
-          childAriaFixture.querySelector('#msg_l1_g')
-        );
-        const msg_l1_fa = /** @type {InstanceType<typeof FormChild>} */ (
-          childAriaFixture.querySelector('#msg_l1_fa')
-        );
-        const msg_l1_fb = /** @type {InstanceType<typeof FormChild>} */ (
-          childAriaFixture.querySelector('#msg_l1_fb')
-        );
-        const msg_l2_g = /** @type {InstanceType<typeof FormGroup>} */ (
-          childAriaFixture.querySelector('#msg_l2_g')
-        );
-        const msg_l2_fa = /** @type {InstanceType<typeof FormChild>} */ (
-          childAriaFixture.querySelector('#msg_l2_fa')
-        );
-        const msg_l2_fb = /** @type {InstanceType<typeof FormChild>} */ (
-          childAriaFixture.querySelector('#msg_l2_fb')
-        );
+        const msg_l1_g =
+          /** @type {InstanceType<typeof FormGroup>} */
+          childAriaFixture.querySelector('#msg_l1_g');
+        const msg_l1_fa =
+          /** @type {InstanceType<typeof FormChild>} */
+          childAriaFixture.querySelector('#msg_l1_fa');
+        const msg_l1_fb =
+          /** @type {InstanceType<typeof FormChild>} */
+          childAriaFixture.querySelector('#msg_l1_fb');
+        const msg_l2_g =
+          /** @type {InstanceType<typeof FormGroup>} */
+          childAriaFixture.querySelector('#msg_l2_g');
+        const msg_l2_fa =
+          /** @type {InstanceType<typeof FormChild>} */
+          childAriaFixture.querySelector('#msg_l2_fa');
+        const msg_l2_fb =
+          /** @type {InstanceType<typeof FormChild>} */
+          childAriaFixture.querySelector('#msg_l2_fb');
 
         // Field elements: all inputs pointing to message elements
-        const input_l1_fa = /** @type {HTMLInputElement} */ (
-          childAriaFixture.querySelector('input[name=l1_fa]')
-        );
-        const input_l1_fb = /** @type {HTMLInputElement} */ (
-          childAriaFixture.querySelector('input[name=l1_fb]')
-        );
-        const input_l2_fa = /** @type {HTMLInputElement} */ (
-          childAriaFixture.querySelector('input[name=l2_fa]')
-        );
-        const input_l2_fb = /** @type {HTMLInputElement} */ (
-          childAriaFixture.querySelector('input[name=l2_fb]')
-        );
-
+        const input_l1_fa =
+          /** @type {HTMLInputElement} */
+          childAriaFixture.querySelector('input[name=l1_fa]');
+        const input_l1_fb =
+          /** @type {HTMLInputElement} */
+          childAriaFixture.querySelector('input[name=l1_fb]');
+        const input_l2_fa =
+          /** @type {HTMLInputElement} */
+          childAriaFixture.querySelector('input[name=l2_fa]');
+        const input_l2_fb =
+          /** @type {HTMLInputElement} */
+          childAriaFixture.querySelector('input[name=l2_fb]');
         if (!cleanupPhase) {
           // 'L1' fields (inside lion-fieldset[name="l1_g"]) should point to l1(group) msg
           expect(input_l1_fa.getAttribute('aria-describedby')).to.contain(
@@ -195,7 +186,7 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
 
           // Check order: the nearest ('dom wise': so 1. local, 2. parent, 3. grandparent) message
           // should be read first by screen reader
-          const dA = /** @type {string} */ (input_l2_fa.getAttribute('aria-describedby'));
+          const dA = /** @type {string} */ input_l2_fa.getAttribute('aria-describedby');
           expect(
             // @ts-expect-error
             dA.indexOf(msg_l2_fa.id) < dA.indexOf(msg_l2_g.id) < dA.indexOf(msg_l1_g.id),
@@ -207,18 +198,18 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
           ).to.equal(true, 'order of ids');
         } else {
           // cleanupPhase
-          const control_l1_fa = /** @type {LionField} */ (
-            childAriaFixture.querySelector('[name=l1_fa]')
-          );
-          const control_l1_fb = /** @type {LionField} */ (
-            childAriaFixture.querySelector('[name=l1_fb]')
-          );
-          const control_l2_fa = /** @type {LionField} */ (
-            childAriaFixture.querySelector('[name=l2_fa]')
-          );
-          const control_l2_fb = /** @type {LionField} */ (
-            childAriaFixture.querySelector('[name=l2_fb]')
-          );
+          const control_l1_fa =
+            /** @type {LionField} */
+            childAriaFixture.querySelector('[name=l1_fa]');
+          const control_l1_fb =
+            /** @type {LionField} */
+            childAriaFixture.querySelector('[name=l1_fb]');
+          const control_l2_fa =
+            /** @type {LionField} */
+            childAriaFixture.querySelector('[name=l2_fa]');
+          const control_l2_fb =
+            /** @type {LionField} */
+            childAriaFixture.querySelector('[name=l2_fb]');
 
           // @ts-expect-error removeChild should always be inherited via LitElement?
           control_l1_fa._parentFormGroup.removeChild(control_l1_fa);
@@ -265,9 +256,9 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
           );
 
           // Check cleanup of FormGroup on disconnect
-          const l2_g = /** @type {InstanceType<typeof FormGroup>} */ (
-            childAriaFixture.querySelector('[name=l2_g]')
-          );
+          const l2_g =
+            /** @type {InstanceType<typeof FormGroup>} */
+            childAriaFixture.querySelector('[name=l2_g]');
           // @ts-ignore [allow-private] in test
           expect(l2_g.__descriptionElementsInParentChain.size).to.not.equal(0);
           // @ts-expect-error removeChild should always be inherited via LitElement?
@@ -279,7 +270,6 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
         /* eslint-enable camelcase */
       };
     });
-
     it(`reads feedback message belonging to fieldset when child input is focused
         (via aria-describedby)`, async () => {
       await childAriaTest(await childAriaFixture('feedback'));
@@ -288,7 +278,9 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
     // TODO: wait for updated on disconnected to be fixed: https://github.com/lit/lit/issues/1901
     it.skip(`cleans up feedback message belonging to fieldset on disconnect`, async () => {
       const el = await childAriaFixture('feedback');
-      await childAriaTest(el, { cleanupPhase: true });
+      await childAriaTest(el, {
+        cleanupPhase: true,
+      });
     });
   });
 }