@lion/ui 0.23.0 → 0.24.0

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

@@ -11,7 +11,6 @@ import { LionInput } from '@lion/ui/input.js';
 import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
-
 class ChoiceInputFoo extends ChoiceInputMixin(LionInput) {}
 customElements.define('choice-input-foo', ChoiceInputFoo);
 class ChoiceInputBar extends ChoiceInputMixin(LionInput) {
@@ -37,64 +36,58 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
     childTagStringBar: 'choice-input-bar',
     choiceType: choiceType || 'single',
   };
-
   const parentTag = unsafeStatic(cfg.parentTagString);
   const childTag = unsafeStatic(cfg.childTagString);
   const childTagFoo = unsafeStatic(cfg.childTagStringFoo);
   const childTagBar = unsafeStatic(cfg.childTagStringBar);
-
   describe(`ChoiceGroupMixin: ${cfg.parentTagString}`, () => {
     if (cfg.choiceType === 'single') {
       it('has a single modelValue representing initial checked values', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
             <${childTag} .choiceValue=${'other'}></${childTag}>
           </${parentTag}>
-        `)
-        );
+        `);
 
         // @ts-ignore protected members allowed in test
         expect(el._initialModelValue).to.eql('female');
         expect(el.modelValue).to.eql('female');
-
         el.formElements[0].checked = true;
 
         // @ts-ignore protected members allowed in test
         expect(el._initialModelValue).to.eql('female');
         expect(el.modelValue).to.eql('male');
       });
-
       it('has a single modelValue representing the currently checked radio value', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
             <${childTag} .choiceValue=${'other'}></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.modelValue).to.equal('female');
         el.formElements[0].checked = true;
         expect(el.modelValue).to.equal('male');
         el.formElements[2].checked = true;
         expect(el.modelValue).to.equal('other');
       });
-
       it('has a single formattedValue representing the currently checked radio value', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} name="gender">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
             <${childTag} .choiceValue=${'other'}></${childTag}>
           </${parentTag}>
-        `)
-        );
+        `);
         expect(el.formattedValue).to.equal('female');
         el.formElements[0].checked = true;
         expect(el.formattedValue).to.equal('male');
@@ -102,162 +95,135 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         expect(el.formattedValue).to.equal('other');
       });
     }
-
     it('throws if a child element without a modelValue like { value: "foo", checked: false } tries to register', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'} checked></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-      const invalidChild = /** @type {ChoiceInputGroup} */ (
+      `);
+      const invalidChild =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${childTag} .modelValue=${'Lara'}></${childTag}>
-      `)
-      );
-
+      `);
       expect(() => {
         el.addFormElement(invalidChild);
       }).to.throw(
         `The ${cfg.parentTagString} name="gender[]" does not allow to register ${cfg.childTagString} with .modelValue="Lara" - The modelValue should represent an Object { value: "foo", checked: false }`,
       );
     });
-
     it('automatically sets the name property of child fields to its own name', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag} .choiceValue=${'female'} checked></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       expect(el.formElements[0].name).to.equal('gender[]');
       expect(el.formElements[1].name).to.equal('gender[]');
-
-      const validChild = /** @type {ChoiceInputGroup} */ (
+      const validChild =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${childTag} .choiceValue=${'male'}></${childTag}>
-      `)
-      );
+      `);
       el.appendChild(validChild);
-
       expect(el.formElements[2].name).to.equal('gender[]');
     });
-
     it('automatically updates the name property of child fields to its own name', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag}></${childTag}>
           <${childTag}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       expect(el.formElements[0].name).to.equal('gender[]');
       expect(el.formElements[1].name).to.equal('gender[]');
-
       el.name = 'gender2[]';
-
       await el.updateComplete;
-
       expect(el.formElements[0].name).to.equal('gender2[]');
       expect(el.formElements[1].name).to.equal('gender2[]');
     });
-
     it('prevents updating the name property of a child if it is different from its parent', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag}></${childTag}>
           <${childTag}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       expect(el.formElements[0].name).to.equal('gender[]');
       expect(el.formElements[1].name).to.equal('gender[]');
-
       el.formElements[0].name = 'gender2[]';
-
       await el.formElements[0].updateComplete;
       expect(el.formElements[0].name).to.equal('gender[]');
     });
-
     it('allows updating the name property of a child if parent tagName does not include childTagname', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTagFoo}></${childTagFoo}>
           <${childTagFoo}></${childTagFoo}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       expect(el.formElements[0].name).to.equal('gender[]');
       expect(el.formElements[1].name).to.equal('gender[]');
-
       el.formElements[0].name = 'gender2[]';
-
       await el.formElements[0].updateComplete;
       expect(el.formElements[0].name).to.equal('gender2[]');
     });
-
     it('allows setting the condition for syncing the name property of a child to parent', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTagBar}></${childTagBar}>
           <${childTagBar}></${childTagBar}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       expect(el.formElements[0].name).to.equal('gender[]');
       expect(el.formElements[1].name).to.equal('gender[]');
-
       el.formElements[0].name = 'gender2[]';
-
       await el.formElements[0].updateComplete;
       expect(el.formElements[0].name).to.equal('gender[]');
     });
-
     it('adjusts the name of a child element if it has a different name than the group', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag} .choiceValue=${'female'} checked></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
-      const invalidChild = /** @type {ChoiceInputGroup} */ (
+      `);
+      const invalidChild =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${childTag} name="foo" .choiceValue=${'male'}></${childTag}>
-      `)
-      );
+      `);
       el.addFormElement(invalidChild);
       await invalidChild.updateComplete;
       expect(invalidChild.name).to.equal('gender[]');
     });
-
     it('can set initial modelValue on creation', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]" .modelValue=${'other'}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.modelValue).to.equal('other');
       } else {
@@ -265,18 +231,16 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       }
       expect(el.formElements[2].checked).to.be.true;
     });
-
     it('can set initial serializedValue on creation', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]" .serializedValue=${'other'}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.serializedValue).to.equal('other');
       } else {
@@ -284,18 +248,16 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       }
       expect(el.formElements[2].checked).to.be.true;
     });
-
     it('can set initial formattedValue on creation', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]" .formattedValue=${'other'}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.formattedValue).to.equal('other');
       } else {
@@ -303,18 +265,16 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       }
       expect(el.formElements[2].checked).to.be.true;
     });
-
     it('correctly handles modelValue being set before registrationComplete', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         fixtureSync(html`
         <${parentTag} name="gender[]" .modelValue=${null}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         el.modelValue = 'other';
         await el.registrationComplete;
@@ -325,18 +285,16 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         expect(el.modelValue).to.deep.equal(['other']);
       }
     });
-
     it('correctly handles serializedValue being set before registrationComplete', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         fixtureSync(html`
         <${parentTag} name="gender[]" .serializedValue=${null}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         // @ts-expect-error
         el.serializedValue = 'other';
@@ -349,24 +307,21 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         expect(el.serializedValue).to.deep.equal(['other']);
       }
     });
-
     it('can handle null and undefined modelValues', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]" .modelValue=${null}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.modelValue).to.equal('');
       } else {
         expect(el.modelValue).to.deep.equal([]);
       }
-
       el.modelValue = undefined;
       await el.updateComplete;
       if (cfg.choiceType === 'single') {
@@ -375,40 +330,44 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         expect(el.modelValue).to.deep.equal([]);
       }
     });
-
     it('can handle complex data via choiceValue', async () => {
       const date = new Date(2018, 11, 24, 10, 33, 30, 0);
-
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="data[]">
-          <${childTag} .choiceValue=${{ some: 'data' }}></${childTag}>
+          <${childTag} .choiceValue=${{
+            some: 'data',
+          }}></${childTag}>
           <${childTag} .choiceValue=${date} checked></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.modelValue).to.equal(date);
         el.formElements[0].checked = true;
-        expect(el.modelValue).to.deep.equal({ some: 'data' });
+        expect(el.modelValue).to.deep.equal({
+          some: 'data',
+        });
       } else {
         expect(el.modelValue).to.deep.equal([date]);
         el.formElements[0].checked = true;
-        expect(el.modelValue).to.deep.equal([{ some: 'data' }, date]);
+        expect(el.modelValue).to.deep.equal([
+          {
+            some: 'data',
+          },
+          date,
+        ]);
       }
     });
-
     it('can handle 0 and empty string as valid values', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="data[]">
           <${childTag} .choiceValue=${0} checked></${childTag}>
           <${childTag} .choiceValue=${''}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.modelValue).to.equal(0);
         el.formElements[1].checked = true;
@@ -419,24 +378,31 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         expect(el.modelValue).to.deep.equal([0, '']);
       }
     });
-
     it('can check a choice by supplying an available modelValue', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag}
-            .modelValue="${{ value: 'male', checked: false }}"
+            .modelValue="${{
+              value: 'male',
+              checked: false,
+            }}"
           ></${childTag}>
           <${childTag}
-            .modelValue="${{ value: 'female', checked: true }}"
+            .modelValue="${{
+              value: 'female',
+              checked: true,
+            }}"
           ></${childTag}>
           <${childTag}
-            .modelValue="${{ value: 'other', checked: false }}"
+            .modelValue="${{
+              value: 'other',
+              checked: false,
+            }}"
           ></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.modelValue).to.equal('female');
       } else {
@@ -445,41 +411,65 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       el.modelValue = 'other';
       expect(el.formElements[2].checked).to.be.true;
     });
-
     it('can check a choice by supplying an available modelValue even if this modelValue is an array or object', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag}
-            .modelValue="${{ value: { v: 'male' }, checked: false }}"
+            .modelValue="${{
+              value: {
+                v: 'male',
+              },
+              checked: false,
+            }}"
           ></${childTag}>
           <${childTag}
-            .modelValue="${{ value: { v: 'female' }, checked: true }}"
+            .modelValue="${{
+              value: {
+                v: 'female',
+              },
+              checked: true,
+            }}"
           ></${childTag}>
           <${childTag}
-            .modelValue="${{ value: { v: 'other' }, checked: false }}"
+            .modelValue="${{
+              value: {
+                v: 'other',
+              },
+              checked: false,
+            }}"
           ></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
-        expect(el.modelValue).to.eql({ v: 'female' });
+        expect(el.modelValue).to.eql({
+          v: 'female',
+        });
       } else {
-        expect(el.modelValue).to.deep.equal([{ v: 'female' }]);
+        expect(el.modelValue).to.deep.equal([
+          {
+            v: 'female',
+          },
+        ]);
       }
-
       if (cfg.choiceType === 'single') {
-        el.modelValue = { v: 'other' };
+        el.modelValue = {
+          v: 'other',
+        };
       } else {
-        el.modelValue = [{ v: 'other' }];
+        el.modelValue = [
+          {
+            v: 'other',
+          },
+        ];
       }
       expect(el.formElements[2].checked).to.be.true;
     });
-
     it('expect child nodes to only fire one model-value-changed event per instance', async () => {
       let counter = 0;
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag}
           name="gender[]"
@@ -489,13 +479,14 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         >
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag}
-            .modelValue=${{ value: 'female', checked: true }}
+            .modelValue=${{
+              value: 'female',
+              checked: true,
+            }}
           ></${childTag}>
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       counter = 0; // reset after setup which may result in different results
 
       el.formElements[0].checked = true;
@@ -504,7 +495,6 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       // not changed values trigger no event
       el.formElements[0].checked = true;
       expect(counter).to.equal(1);
-
       el.formElements[2].checked = true;
       expect(counter).to.equal(2); // other becomes checked
 
@@ -512,56 +502,51 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         // not found values trigger no event
         el.modelValue = 'foo';
         expect(counter).to.equal(2);
-
         el.modelValue = 'male';
         expect(counter).to.equal(3); // male becomes checked, other becomes unchecked
       }
-
       if (choiceType === 'multiple') {
         // not found values trigger no event
         el.modelValue = ['foo', 'male', 'female', 'other'];
         expect(counter).to.equal(2);
-
         el.modelValue = ['female', 'other'];
         expect(counter).to.equal(3); // male becomes unchecked
       }
     });
-
     it('can be required', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]" .validators=${[new Required()]}>
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag}
-            .choiceValue=${{ subObject: 'satisfies required' }}
+            .choiceValue=${{
+              subObject: 'satisfies required',
+            }}
           ></${childTag}>
         </${parentTag}>
-      `)
-      );
+      `);
       expect(el.hasFeedbackFor).to.include('error');
       expect(el.validationStates.error).to.exist;
       expect(el.validationStates.error.Required).to.exist;
-
       el.formElements[0].checked = true;
       expect(el.hasFeedbackFor).not.to.include('error');
       expect(el.validationStates.error).to.exist;
       expect(el.validationStates.error.Required).to.not.exist;
-
       el.formElements[1].checked = true;
       expect(el.hasFeedbackFor).not.to.include('error');
       expect(el.validationStates.error).to.exist;
       expect(el.validationStates.error.Required).to.not.exist;
     });
-
     it('returns serialized value', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
+      `);
       el.formElements[0].checked = true;
       if (cfg.choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('male');
@@ -569,162 +554,145 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         expect(el.serializedValue).to.deep.equal(['male']);
       }
     });
-
     it('returns serialized value on unchecked state', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
-
+      `);
       if (cfg.choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('');
       } else {
         expect(el.serializedValue).to.deep.equal([]);
       }
     });
-
     it('can be cleared', async () => {
-      const el = /** @type {ChoiceInputGroup} */ (
+      const el =
+        /** @type {ChoiceInputGroup} */
         await fixture(html`
         <${parentTag} name="gender[]">
           <${childTag} .choiceValue=${'male'}></${childTag}>
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
-      `)
-      );
+      `);
       el.formElements[0].checked = true;
       el.clear();
-
       if (cfg.choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('');
       } else {
         expect(el.serializedValue).to.deep.equal([]);
       }
     });
-
     describe('multipleChoice', () => {
       it('has multiple _initialModelValue representing initial checked values', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} multiple-choice name="animals[]">
             <${childTag} .choiceValue=${'dog'} checked></${childTag}>
             <${childTag} .choiceValue=${'cat'} checked></${childTag}>
             <${childTag} .choiceValue=${'lion'}></${childTag}>
           </${parentTag}>
-        `)
-        );
+        `);
 
         // @ts-ignore protected members allowed in test
         expect(el._initialModelValue).to.eql(['dog', 'cat']);
         expect(el.modelValue).to.eql(['dog', 'cat']);
-
         el.formElements[2].checked = true;
 
         // @ts-ignore protected members allowed in test
         expect(el._initialModelValue).to.eql(['dog', 'cat']);
         expect(el.modelValue).to.eql(['dog', 'cat', 'lion']);
       });
-
       it('has a single modelValue representing all currently checked values', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
             <${childTag} .choiceValue=${'other'}></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.modelValue).to.eql(['female']);
         el.formElements[0].checked = true;
         expect(el.modelValue).to.eql(['male', 'female']);
         el.formElements[2].checked = true;
         expect(el.modelValue).to.eql(['male', 'female', 'other']);
       });
-
       it('has a single serializedValue representing all currently checked values', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
             <${childTag} .choiceValue=${'other'}></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.serializedValue).to.eql(['female']);
         el.formElements[0].checked = true;
         expect(el.serializedValue).to.eql(['male', 'female']);
         el.formElements[2].checked = true;
         expect(el.serializedValue).to.eql(['male', 'female', 'other']);
       });
-
       it('has a single formattedValue representing all currently checked values', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'} checked></${childTag}>
             <${childTag} .choiceValue=${'other'}></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.formattedValue).to.eql(['female']);
         el.formElements[0].checked = true;
         expect(el.formattedValue).to.eql(['male', 'female']);
         el.formElements[2].checked = true;
         expect(el.formattedValue).to.eql(['male', 'female', 'other']);
       });
-
       it('can check multiple checkboxes by setting the modelValue', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'}></${childTag}>
             <${childTag} .choiceValue=${'female'}></${childTag}>
             <${childTag} .choiceValue=${'other'}></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         el.modelValue = ['male', 'other'];
         expect(el.modelValue).to.eql(['male', 'other']);
         expect(el.formElements[0].checked).to.be.true;
         expect(el.formElements[2].checked).to.be.true;
       });
-
       it('unchecks non-matching checkboxes when setting the modelValue', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <${parentTag} multiple-choice name="gender[]">
             <${childTag} .choiceValue=${'male'} checked></${childTag}>
             <${childTag} .choiceValue=${'female'}></${childTag}>
             <${childTag} .choiceValue=${'other'} checked></${childTag}>
           </${parentTag}>
-        `)
-        );
-
+        `);
         expect(el.modelValue).to.eql(['male', 'other']);
         expect(el.formElements[0].checked).to.be.true;
         expect(el.formElements[2].checked).to.be.true;
-
         el.modelValue = ['female'];
         expect(el.formElements[0].checked).to.be.false;
         expect(el.formElements[1].checked).to.be.true;
         expect(el.formElements[2].checked).to.be.false;
       });
     });
-
     describe('Integration with a parent form/fieldset', () => {
       it('will serialize all children with their serializedValue', async () => {
-        const el = /** @type {ChoiceInputGroup} */ (
+        const el =
+          /** @type {ChoiceInputGroup} */
           await fixture(html`
           <lion-fieldset>
             <${parentTag} name="gender[]">
@@ -733,17 +701,18 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
               <${childTag} .choiceValue=${'other'}></${childTag}>
             </${parentTag}>
           </lion-fieldset>
-        `)
-        );
-
+        `);
         if (cfg.choiceType === 'single') {
-          expect(el.serializedValue).to.deep.equal({ 'gender[]': ['female'] });
+          expect(el.serializedValue).to.deep.equal({
+            'gender[]': ['female'],
+          });
         } else {
-          expect(el.serializedValue).to.deep.equal({ 'gender[]': [['female']] });
+          expect(el.serializedValue).to.deep.equal({
+            'gender[]': [['female']],
+          });
         }
       });
     });
-
     describe('Modelvalue event propagation', () => {
       it('sends one event for single select choice-groups', async () => {
         const formSpy = sinon.spy();
@@ -756,20 +725,19 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           </${parentTag}>
         </lion-fieldset>
       `);
-
-        const choiceGroupEl = /** @type {ChoiceInputGroup} */ (
-          formEl.querySelector('[name=choice-group]')
-        );
+        const choiceGroupEl =
+          /** @type {ChoiceInputGroup} */
+          formEl.querySelector('[name=choice-group]');
         if (choiceGroupEl.multipleChoice) {
           return;
         }
         /** @typedef {{ checked: boolean }} checkedInterface */
-        const option1El = /** @type {HTMLElement & checkedInterface} */ (
-          formEl.querySelector('#option1')
-        );
-        const option2El = /** @type {HTMLElement & checkedInterface} */ (
-          formEl.querySelector('#option2')
-        );
+        const option1El =
+          /** @type {HTMLElement & checkedInterface} */
+          formEl.querySelector('#option1');
+        const option2El =
+          /** @type {HTMLElement & checkedInterface} */
+          formEl.querySelector('#option2');
         formEl.addEventListener('model-value-changed', formSpy);
         choiceGroupEl?.addEventListener('model-value-changed', choiceGroupSpy);
 
@@ -784,7 +752,6 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         expect(choiceGroupEv.target).to.equal(choiceGroupEl);
         expect(choiceGroupEv.detail.formPath).to.eql([choiceGroupEl]);
         expect(choiceGroupEv.detail.isTriggeredByUser).to.be.false;
-
         expect(formSpy.callCount).to.equal(1);
         const formEv = formSpy.firstCall.args[0];
         expect(formEv.target).to.equal(formEl);