@lion/ui 0.23.0 → 0.25.0

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

@@ -1,10 +1,8 @@
 import { Required, ChoiceInputMixin } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
 import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
-
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import sinon from 'sinon';
-
 class ChoiceInput extends ChoiceInputMixin(LionInput) {
   constructor() {
     super();
@@ -21,40 +19,34 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
   const cfg = {
     tagString: tagString || 'choice-group-input',
   };
-
   const tag = unsafeStatic(cfg.tagString);
   describe(`ChoiceInputMixin: ${tagString}`, () => {
     it('is hidden when attribute hidden is true', async () => {
-      const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag} hidden></${tag}>`));
+      const el = /** @type {ChoiceInput} */ await fixture(html`<${tag} hidden></${tag}>`);
       expect(el).not.to.be.displayed;
     });
-
     it('has choiceValue', async () => {
-      const el = /** @type {ChoiceInput} */ (
-        await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
-      );
-
+      const el =
+        /** @type {ChoiceInput} */
+        await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`);
       expect(el.choiceValue).to.equal('foo');
       expect(el.modelValue).to.deep.equal({
         value: 'foo',
         checked: false,
       });
     });
-
     it('can handle complex data via choiceValue', async () => {
       const date = new Date(2018, 11, 24, 10, 33, 30, 0);
-
-      const el = /** @type {ChoiceInput} */ (
-        await fixture(html`<${tag} .choiceValue=${date}></${tag}>`)
-      );
-
+      const el =
+        /** @type {ChoiceInput} */
+        await fixture(html`<${tag} .choiceValue=${date}></${tag}>`);
       expect(el.choiceValue).to.equal(date);
       expect(el.modelValue.value).to.equal(date);
     });
-
     it('fires one "model-value-changed" event if choiceValue or checked state or modelValue changed', async () => {
       let counter = 0;
-      const el = /** @type {ChoiceInput} */ (
+      const el =
+        /** @type {ChoiceInput} */
         await fixture(html`
       <${tag}
         @model-value-changed=${() => {
@@ -62,8 +54,7 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
         }}
         .choiceValue=${'foo'}
       ></${tag}>
-    `)
-      );
+    `);
       expect(counter).to.equal(1); // undefined to set value
 
       el.checked = true;
@@ -72,16 +63,21 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
       // no change means no event
       el.checked = true;
       el.choiceValue = 'foo';
-      el.modelValue = { value: 'foo', checked: true };
+      el.modelValue = {
+        value: 'foo',
+        checked: true,
+      };
       expect(counter).to.equal(2);
-
-      el.modelValue = { value: 'foo', checked: false };
+      el.modelValue = {
+        value: 'foo',
+        checked: false,
+      };
       expect(counter).to.equal(3);
     });
-
     it('fires one "user-input-changed" event after user interaction', async () => {
       let counter = 0;
-      const el = /** @type {ChoiceInput} */ (
+      const el =
+        /** @type {ChoiceInput} */
         await fixture(html`
       <${tag}
         @user-input-changed="${() => {
@@ -90,32 +86,36 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
       >
         <input slot="input" />
       </${tag}>
-    `)
-      );
+    `);
       const { _inputNode } = getFormControlMembers(el);
-
       expect(counter).to.equal(0);
       // Here we try to mimic user interaction by firing browser events
       const nativeInput = _inputNode;
-      nativeInput.dispatchEvent(new CustomEvent('input', { bubbles: true })); // fired by (at least) Chrome
+      nativeInput.dispatchEvent(
+        new CustomEvent('input', {
+          bubbles: true,
+        }),
+      ); // fired by (at least) Chrome
       expect(counter).to.equal(0);
-      nativeInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      nativeInput.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+        }),
+      );
       expect(counter).to.equal(1);
     });
-
     it('fires one "click" event when clicking label or input, using the right target', async () => {
       const spy = sinon.spy();
-      const el = /** @type {ChoiceInput} */ (
+      const el =
+        /** @type {ChoiceInput} */
         await fixture(html`
         <${tag}
           @click="${spy}"
         >
           <input slot="input" />
         </${tag}>
-      `)
-      );
+      `);
       const { _inputNode, _labelNode } = getFormControlMembers(el);
-
       el.click();
       expect(spy.args[0][0].target).to.equal(el);
       expect(spy.callCount).to.equal(1);
@@ -126,10 +126,10 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
       expect(spy.args[2][0].target).to.equal(_inputNode);
       expect(spy.callCount).to.equal(3);
     });
-
     it('adds "isTriggerByUser" flag on model-value-changed', async () => {
       let isTriggeredByUser;
-      const el = /** @type {ChoiceInput} */ (
+      const el =
+        /** @type {ChoiceInput} */
         await fixture(html`
       <${tag}
         @model-value-changed="${(/** @type {CustomEvent} */ event) => {
@@ -138,21 +138,21 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
       >
         <input slot="input" />
       </${tag}>
-    `)
-      );
+    `);
       const { _inputNode } = getFormControlMembers(el);
-
-      _inputNode.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      _inputNode.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+        }),
+      );
       expect(isTriggeredByUser).to.be.true;
     });
-
     it('can be required', async () => {
-      const el = /** @type {ChoiceInput} */ (
+      const el =
+        /** @type {ChoiceInput} */
         await fixture(html`
       <${tag} .choiceValue=${'foo'} .validators=${[new Required()]}></${tag}>
-    `)
-      );
-
+    `);
       expect(el.hasFeedbackFor).to.include('error');
       expect(el.validationStates.error).to.exist;
       expect(el.validationStates.error.Required).to.exist;
@@ -161,36 +161,29 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
       expect(el.validationStates.error).to.exist;
       expect(el.validationStates.error.Required).not.to.exist;
     });
-
     describe('Checked state synchronization', () => {
       it('synchronizes checked state initially (via attribute or property)', async () => {
-        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const el = /** @type {ChoiceInput} */ await fixture(html`<${tag}></${tag}>`);
         expect(el.checked).to.equal(false, 'initially unchecked');
-
-        const precheckedElementAttr = /** @type {ChoiceInput} */ (
+        const precheckedElementAttr =
+          /** @type {ChoiceInput} */
           await fixture(html`
         <${tag} .checked=${true}></${tag}>
-      `)
-        );
+      `);
         expect(precheckedElementAttr.checked).to.equal(true, 'initially checked via attribute');
       });
-
       it('can be checked and unchecked programmatically', async () => {
-        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const el = /** @type {ChoiceInput} */ await fixture(html`<${tag}></${tag}>`);
         const { _inputNode } = getFormControlMembers(el);
-
         expect(el.checked).to.be.false;
         el.checked = true;
         expect(el.checked).to.be.true;
-
         await el.updateComplete;
-        expect(/** @type {HTMLInputElement} */ (_inputNode).checked).to.be.true;
+        expect(/** @type {HTMLInputElement} */ _inputNode.checked).to.be.true;
       });
-
       it('can be checked and unchecked via user interaction', async () => {
-        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const el = /** @type {ChoiceInput} */ await fixture(html`<${tag}></${tag}>`);
         const { _inputNode } = getFormControlMembers(el);
-
         _inputNode.click();
         expect(el.checked).to.be.true;
         _inputNode.click();
@@ -199,19 +192,20 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
           expect(el.checked).to.be.false;
         }
       });
-
       it('can not toggle the checked state when disabled via user interaction', async () => {
-        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag} disabled></${tag}>`));
+        const el = /** @type {ChoiceInput} */ await fixture(html`<${tag} disabled></${tag}>`);
         const { _inputNode } = getFormControlMembers(el);
-
-        _inputNode.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        _inputNode.dispatchEvent(
+          new CustomEvent('change', {
+            bubbles: true,
+          }),
+        );
         expect(el.checked).to.be.false;
       });
-
       it('synchronizes modelValue to checked state and vice versa', async () => {
-        const el = /** @type {ChoiceInput} */ (
-          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
-        );
+        const el =
+          /** @type {ChoiceInput} */
+          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`);
         expect(el.checked).to.be.false;
         expect(el.modelValue).to.deep.equal({
           checked: false,
@@ -224,13 +218,12 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
           value: 'foo',
         });
       });
-
       it('ensures optimal synchronize performance by preventing redundant computation steps', async () => {
         /* we are checking private apis here to make sure we do not have cyclical updates
         which can be quite common for these type of connected data */
-        const el = /** @type {ChoiceInput} */ (
-          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
-        );
+        const el =
+          /** @type {ChoiceInput} */
+          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`);
         expect(el.checked).to.be.false;
 
         // @ts-ignore [allow-private] in test
@@ -241,30 +234,34 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
         expect(el.modelValue.checked).to.be.true;
         expect(spyModelCheckedToChecked.callCount).to.equal(0);
         expect(spyCheckedToModel.callCount).to.equal(1);
-
-        el.modelValue = { value: 'foo', checked: false };
+        el.modelValue = {
+          value: 'foo',
+          checked: false,
+        };
         expect(el.checked).to.be.false;
         expect(spyModelCheckedToChecked.callCount).to.equal(1);
         expect(spyCheckedToModel.callCount).to.equal(1);
 
         // not changing values should not trigger any updates
         el.checked = false;
-        el.modelValue = { value: 'foo', checked: false };
+        el.modelValue = {
+          value: 'foo',
+          checked: false,
+        };
         expect(spyModelCheckedToChecked.callCount).to.equal(1);
         expect(spyCheckedToModel.callCount).to.equal(1);
       });
-
       it('synchronizes checked state to [checked] attribute for styling purposes', async () => {
         /** @param {ChoiceInput} el */
-        const hasAttr = el => el.hasAttribute('checked');
-        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
-        const elChecked = /** @type {ChoiceInput} */ (
+        const hasAttr = (el) => el.hasAttribute('checked');
+        const el = /** @type {ChoiceInput} */ await fixture(html`<${tag}></${tag}>`);
+        const elChecked =
+          /** @type {ChoiceInput} */
           await fixture(html`
         <${tag} .checked=${true}>
           <input slot="input" />
         </${tag}>
-      `)
-        );
+      `);
         const { _inputNode } = getFormControlMembers(el);
         const { _inputNode: _inputNodeChecked } = getFormControlMembers(elChecked);
 
@@ -289,7 +286,6 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
         // Programmatically via checked
         el.checked = true;
         elChecked.checked = false;
-
         await el.updateComplete;
         expect(hasAttr(el)).to.equal(true, 'programmatically checked');
         expect(hasAttr(elChecked)).to.equal(false, 'programmatically unchecked');
@@ -299,57 +295,68 @@ export function runChoiceInputMixinSuite({ tagString } = {}) {
         elChecked.checked = true;
 
         // Programmatically via modelValue
-        el.modelValue = { value: '', checked: true };
-        elChecked.modelValue = { value: '', checked: false };
+        el.modelValue = {
+          value: '',
+          checked: true,
+        };
+        elChecked.modelValue = {
+          value: '',
+          checked: false,
+        };
         await el.updateComplete;
         expect(hasAttr(el)).to.equal(true, 'modelValue checked');
         expect(hasAttr(elChecked)).to.equal(false, 'modelValue unchecked');
       });
     });
-
     describe('Format/parse/serialize loop', () => {
       it('creates a modelValue object like { checked: true, value: foo } on init', async () => {
-        const el = /** @type {ChoiceInput} */ (
-          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
-        );
-        expect(el.modelValue).deep.equal({ value: 'foo', checked: false });
-
-        const elChecked = /** @type {ChoiceInput} */ (
+        const el =
+          /** @type {ChoiceInput} */
+          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`);
+        expect(el.modelValue).deep.equal({
+          value: 'foo',
+          checked: false,
+        });
+        const elChecked =
+          /** @type {ChoiceInput} */
           await fixture(html`
         <${tag} .choiceValue=${'foo'} .checked=${true}></${tag}>
-      `)
-        );
-        expect(elChecked.modelValue).deep.equal({ value: 'foo', checked: true });
+      `);
+        expect(elChecked.modelValue).deep.equal({
+          value: 'foo',
+          checked: true,
+        });
       });
-
       it('creates a formattedValue based on modelValue.value', async () => {
-        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const el = /** @type {ChoiceInput} */ await fixture(html`<${tag}></${tag}>`);
         expect(el.formattedValue).to.equal('');
-
-        const elementWithValue = /** @type {ChoiceInput} */ (
+        const elementWithValue =
+          /** @type {ChoiceInput} */
           await fixture(html`
         <${tag} .choiceValue=${'foo'}></${tag}>
-      `)
-        );
+      `);
         expect(elementWithValue.formattedValue).to.equal('foo');
       });
-
       it('can clear the checked state', async () => {
-        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
-        el.modelValue = { value: 'foo', checked: true };
+        const el = /** @type {ChoiceInput} */ await fixture(html`<${tag}></${tag}>`);
+        el.modelValue = {
+          value: 'foo',
+          checked: true,
+        };
         el.clear();
-        expect(el.modelValue).deep.equal({ value: 'foo', checked: false });
+        expect(el.modelValue).deep.equal({
+          value: 'foo',
+          checked: false,
+        });
       });
     });
-
     describe('Interaction states', () => {
       it('is considered prefilled when checked and not considered prefilled when unchecked', async () => {
-        const el = /** @type {ChoiceInput} */ (
-          await fixture(html`<${tag} .checked=${true}></${tag}>`)
-        );
+        const el =
+          /** @type {ChoiceInput} */
+          await fixture(html`<${tag} .checked=${true}></${tag}>`);
         expect(el.prefilled).equal(true, 'checked element not considered prefilled');
-
-        const elUnchecked = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const elUnchecked = /** @type {ChoiceInput} */ await fixture(html`<${tag}></${tag}>`);
         expect(elUnchecked.prefilled).equal(false, 'unchecked element not considered prefilled');
       });
     });