@lion/ui 0.23.0 → 0.24.0

package/components/form-core/test-suites/InteractionStateMixin.suite.js

@@ -21,68 +21,62 @@ export function runInteractionStateMixinSuite(customConfig) {
     allowedModelValueTypes: [Array, Object, Number, Boolean, String, Date],
     ...customConfig,
   };
-
   describe(`InteractionStateMixin`, async () => {
     class IState extends InteractionStateMixin(ValidateMixin(LitElement)) {
       connectedCallback() {
         super.connectedCallback();
         this.tabIndex = 0;
       }
-
       set modelValue(v) {
         /** @type {*} */
         this._modelValue = v;
-        this.dispatchEvent(new CustomEvent('model-value-changed', { bubbles: true }));
+        this.dispatchEvent(
+          new CustomEvent('model-value-changed', {
+            bubbles: true,
+          }),
+        );
         this.requestUpdate('modelValue');
       }
-
       get modelValue() {
         return this._modelValue;
       }
     }
-
     cfg.tagString = cfg.tagString ? cfg.tagString : defineCE(IState);
     const tag = unsafeStatic(cfg.tagString);
-
     it('sets states to false on init', async () => {
-      const el = /** @type {IState} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       expect(el.dirty).to.be.false;
       expect(el.touched).to.be.false;
       expect(el.prefilled).to.be.false;
     });
-
     it('sets dirty when value changed', async () => {
-      const el = /** @type {IState} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       expect(el.dirty).to.be.false;
       el.modelValue = 'foobar';
       expect(el.dirty).to.be.true;
     });
-
     it('sets touched to true when field left after focus', async () => {
-      const el = /** @type {IState} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       await triggerFocusFor(el);
       await triggerBlurFor(el);
       expect(el.touched).to.be.true;
     });
-
     it('sets an attribute "touched', async () => {
-      const el = /** @type {IState} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       el.touched = true;
       await el.updateComplete;
       expect(el.hasAttribute('touched')).to.be.true;
     });
-
     it('sets an attribute "dirty', async () => {
-      const el = /** @type {IState} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       el.dirty = true;
       await el.updateComplete;
       expect(el.hasAttribute('dirty')).to.be.true;
     });
-
     it('sets an attribute "filled" if the input has a non-empty modelValue', async () => {
-      const el = /** @type {IState} */ (
-        await fixture(html`<${tag} .modelValue=${'hello'}></${tag}>`)
-      );
+      const el =
+        /** @type {IState} */
+        await fixture(html`<${tag} .modelValue=${'hello'}></${tag}>`);
       expect(el.hasAttribute('filled')).to.equal(true);
       el.modelValue = '';
       await el.updateComplete;
@@ -91,57 +85,58 @@ export function runInteractionStateMixinSuite(customConfig) {
       await el.updateComplete;
       expect(el.hasAttribute('filled')).to.equal(true);
     });
-
     it('fires "(touched|dirty)-state-changed" event when state changes', async () => {
       const touchedSpy = sinon.spy();
       const dirtySpy = sinon.spy();
-      const el = /** @type {IState} */ (
+      const el =
+        /** @type {IState} */
         await fixture(
           html`<${tag} @touched-changed=${touchedSpy} @dirty-changed=${dirtySpy}></${tag}>`,
-        )
-      );
-
+        );
       el.touched = true;
       expect(touchedSpy.callCount).to.equal(1);
-
       el.dirty = true;
       expect(dirtySpy.callCount).to.equal(1);
     });
-
     it('sets prefilled once instantiated', async () => {
-      const el = /** @type {IState} */ (
+      const el =
+        /** @type {IState} */
         await fixture(html`
         <${tag} .modelValue=${'prefilled'}></${tag}>
-      `)
-      );
+      `);
       expect(el.prefilled).to.be.true;
-
-      const nonPrefilled = /** @type {IState} */ (
+      const nonPrefilled =
+        /** @type {IState} */
         await fixture(html`
         <${tag} .modelValue=${''}></${tag}>
-      `)
-      );
+      `);
       expect(nonPrefilled.prefilled).to.be.false;
     });
 
     // This method actually tests the implementation of the _isPrefilled method.
     it(`can determine "prefilled" based on different modelValue types
-      (${cfg.allowedModelValueTypes.map(t => t.name).join(', ')})`, async () => {
+      (${cfg.allowedModelValueTypes.map((t) => t.name).join(', ')})`, async () => {
       /** @typedef {{_inputNode: HTMLElement}} inputNodeInterface */
 
-      const el = /** @type {IState & inputNodeInterface} */ (
-        await fixture(html`<${tag}></${tag}>`)
-      );
+      const el = /** @type {IState & inputNodeInterface} */ await fixture(html`<${tag}></${tag}>`);
 
       /**
        * @param {*} modelValue
        */
-      const changeModelValueAndLeave = modelValue => {
+      const changeModelValueAndLeave = (modelValue) => {
         const targetEl = el._inputNode || el;
-        targetEl.dispatchEvent(new Event('focus', { bubbles: true }));
+        targetEl.dispatchEvent(
+          new Event('focus', {
+            bubbles: true,
+          }),
+        );
         el.modelValue = modelValue;
         // @ts-ignore [allow-protected] in test
-        targetEl.dispatchEvent(new Event(el._leaveEvent, { bubbles: true }));
+        targetEl.dispatchEvent(
+          new Event(el._leaveEvent, {
+            bubbles: true,
+          }),
+        );
       };
 
       // Prefilled
@@ -152,7 +147,9 @@ export function runInteractionStateMixinSuite(customConfig) {
         expect(el.prefilled, 'empty array should not be "prefilled"').to.be.false;
       }
       if (cfg.allowedModelValueTypes.includes(Object)) {
-        changeModelValueAndLeave({ not: 'empty' });
+        changeModelValueAndLeave({
+          not: 'empty',
+        });
         expect(el.prefilled, 'not empty object should be "prefilled"').to.be.true;
         changeModelValueAndLeave({});
         expect(el.prefilled, 'empty object should not be "prefilled"').to.be.false;
@@ -178,9 +175,8 @@ export function runInteractionStateMixinSuite(customConfig) {
       changeModelValueAndLeave(undefined);
       expect(el.prefilled, 'undefined should not be "prefilled"').to.be.false;
     });
-
     it('has a method resetInteractionState()', async () => {
-      const el = /** @type {IState} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       el.dirty = true;
       el.touched = true;
       el.prefilled = true;
@@ -190,7 +186,6 @@ export function runInteractionStateMixinSuite(customConfig) {
       expect(el.touched).to.be.false;
       expect(el.prefilled).to.be.false;
       expect(el.submitted).to.be.false;
-
       el.dirty = true;
       el.touched = true;
       el.prefilled = false;
@@ -202,9 +197,8 @@ export function runInteractionStateMixinSuite(customConfig) {
       expect(el.prefilled).to.be.true;
       expect(el.submitted).to.be.false;
     });
-
     it('has a method initInteractionState()', async () => {
-      const el = /** @type {IState} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       el.modelValue = 'Some value';
       expect(el.dirty).to.be.true;
       expect(el.touched).to.be.false;
@@ -214,14 +208,13 @@ export function runInteractionStateMixinSuite(customConfig) {
       expect(el.touched).to.be.false;
       expect(el.prefilled).to.be.true;
     });
-
     describe('Validation integration with states', () => {
       it('has .shouldShowFeedbackFor indicating for which type to show messages', async () => {
-        const el = /** @type {IState} */ (
+        const el =
+          /** @type {IState} */
           await fixture(html`
           <${tag}></${tag}>
-        `)
-        );
+        `);
         // @ts-ignore [allow-private] in test
         expect(el.shouldShowFeedbackFor).to.deep.equal([]);
         el.submitted = true;
@@ -229,15 +222,13 @@ export function runInteractionStateMixinSuite(customConfig) {
         // @ts-ignore [allow-private] in test
         expect(el.shouldShowFeedbackFor).to.deep.equal(['error']);
       });
-
       it('keeps the feedback component in sync', async () => {
-        const el = /** @type {IState} */ (
+        const el =
+          /** @type {IState} */
           await fixture(html`
           <${tag} .validators=${[new MinLength(3)]}></${tag}>
-        `)
-        );
+        `);
         const { _feedbackNode } = getFormControlMembers(el);
-
         await el.updateComplete;
         await el.feedbackComplete;
         expect(_feedbackNode.feedbackData).to.deep.equal([]);
@@ -247,14 +238,12 @@ export function runInteractionStateMixinSuite(customConfig) {
         await el.updateComplete;
         await el.feedbackComplete;
         expect(_feedbackNode.feedbackData).to.deep.equal([]);
-
         el.submitted = true;
         await el.updateComplete;
         await el.feedbackComplete;
         expect(_feedbackNode.feedbackData?.length).to.equal(1);
       });
     });
-
     describe('SubClassers', () => {
       it('can override the `_leaveEvent`', async () => {
         class IStateCustomBlur extends InteractionStateMixin(LitElement) {
@@ -265,9 +254,7 @@ export function runInteractionStateMixinSuite(customConfig) {
         }
         const tagLeaveString = defineCE(IStateCustomBlur);
         const tagLeave = unsafeStatic(tagLeaveString);
-        const el = /** @type {IStateCustomBlur} */ (
-          await fixture(html`<${tagLeave}></${tagLeave}>`)
-        );
+        const el = /** @type {IStateCustomBlur} */ await fixture(html`<${tagLeave}></${tagLeave}>`);
         el.dispatchEvent(new Event('custom-blur'));
         expect(el.touched).to.be.true;
       });

package/components/form-core/test-suites/NativeTextFieldMixin.suite.js

@@ -5,7 +5,6 @@ import { sendKeys } from '@web/test-runner-commands';
 import { browserDetection } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
 import { spy } from 'sinon';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -21,7 +20,6 @@ export function runNativeTextFieldMixinSuite(customConfig) {
     tagString: null,
     ...customConfig,
   };
-
   describe('NativeTextFieldMixin', () => {
     class NativeTextFieldClass extends NativeTextFieldMixin(LitElement) {
       get slots() {
@@ -31,12 +29,10 @@ export function runNativeTextFieldMixinSuite(customConfig) {
         };
       }
     }
-
     cfg.tagString = cfg.tagString ? cfg.tagString : defineCE(NativeTextFieldClass);
     const tag = unsafeStatic(cfg.tagString);
-
     it('preserves the caret position on value change', async () => {
-      const el = /** @type {NativeTextFieldClass} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {NativeTextFieldClass} */ await fixture(html`<${tag}></${tag}>`);
       // @ts-ignore [allow-protected] in test
       const setValueAndPreserveCaretSpy = spy(el, '_setValueAndPreserveCaret');
       const { _inputNode } = getFormControlMembers(el);
@@ -50,25 +46,26 @@ export function runNativeTextFieldMixinSuite(customConfig) {
       expect(_inputNode.selectionStart).to.equal(2);
       expect(_inputNode.selectionEnd).to.equal(2);
     });
-
     it('moves focus to a next focusable element after writing some text', async () => {
-      const el = /** @type {NativeTextFieldClass} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {NativeTextFieldClass} */ await fixture(html`<${tag}></${tag}>`);
       // @ts-ignore [allow-protected] in test
       const setValueAndPreserveCaretSpy = spy(el, '_setValueAndPreserveCaret');
       const { _inputNode } = getFormControlMembers(el);
       await triggerFocusFor(el);
       await el.updateComplete;
       expect(isActiveElement(_inputNode)).to.be.true;
-      await sendKeys({ press: 'h' });
-      await sendKeys({ press: 'Tab' });
-
+      await sendKeys({
+        press: 'h',
+      });
+      await sendKeys({
+        press: 'Tab',
+      });
       expect(setValueAndPreserveCaretSpy.calledOnce).to.be.false;
 
       // TODO: This seems to work in practice, but not in the test. Investigate.
       if (browserDetection.isMacSafari || browserDetection.isFirefox) {
         return;
       }
-
       expect(isActiveElement(_inputNode)).to.be.false;
     });
   });