@lion/ui 0.22.0 → 0.24.0

package/components/form-core/test/validate/StringValidators.test.js

@@ -1,5 +1,4 @@
 import { expect } from '@open-wc/testing';
-
 import {
   IsString,
   EqualsLength,
@@ -9,125 +8,95 @@ import {
   IsEmail,
   Pattern,
 } from '@lion/ui/form-core.js';
-
 describe('String Validation', () => {
   it('provides new IsString() to allow only strings', () => {
     let isEnabled;
     const validator = new IsString();
     expect(IsString.validatorName).to.equal('IsString');
-
     isEnabled = validator.execute('foo');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(NaN);
     expect(validator.execute(NaN)).to.be.true;
-
     isEnabled = validator.execute(4);
     expect(validator.execute(4)).to.be.true;
   });
-
   it('provides new EqualsLength(x) to allow only a specific string length', () => {
     let isEnabled;
     const validator = new EqualsLength(3);
     expect(EqualsLength.validatorName).to.equal('EqualsLength');
-
     isEnabled = validator.execute('foo');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('fo');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('foobar');
     expect(isEnabled).to.be.true;
   });
-
   it('provides new MinLength(x) to allow only strings longer then min', () => {
     let isEnabled;
     const validator = new MinLength(3);
     expect(MinLength.validatorName).to.equal('MinLength');
-
     isEnabled = validator.execute('foo');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('fo');
     expect(isEnabled).to.be.true;
   });
-
   it('provides new MaxLength(x) to allow only strings shorter then max', () => {
     let isEnabled;
     const validator = new MaxLength(3);
     expect(MaxLength.validatorName).to.equal('MaxLength');
-
     isEnabled = validator.execute('foo');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('foobar');
     expect(isEnabled).to.be.true;
   });
-
   it('provides new MinMaxValidator({ min: x, max: y}) to allow only strings between min and max', () => {
     let isEnabled;
-    const validator = new MinMaxLength({ min: 2, max: 4 });
+    const validator = new MinMaxLength({
+      min: 2,
+      max: 4,
+    });
     expect(MinMaxLength.validatorName).to.equal('MinMaxLength');
-
     isEnabled = validator.execute('foo');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('f');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('foobar');
     expect(isEnabled).to.be.true;
   });
-
   it('provides new IsEmail() to allow only valid email formats', () => {
     let isEnabled;
     const validator = new IsEmail();
     expect(IsEmail.validatorName).to.equal('IsEmail');
-
     isEnabled = validator.execute('foo@bar.com');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('name!#$%*@bar.com');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('foo');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('foo@');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('bar.com');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('@bar.com');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('foo@bar@example.com');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('foo@bar');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('foo@120.120.120.93');
     expect(isEnabled).to.be.true;
   });
-
   it('provides new Pattern() to allow only valid patterns', () => {
     let isEnabled;
     let validator = new Pattern(/#LionRocks/);
     expect(Pattern.validatorName).to.equal('Pattern');
-
     isEnabled = validator.execute('#LionRocks');
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('#LionRests');
     expect(isEnabled).to.be.true;
-
     validator = new Pattern(/#LionRocks/);
     isEnabled = validator.execute('Some string #LionRocks');
     expect(isEnabled).to.be.false;
-
     validator = new Pattern('#LionRocks');
     expect(() => {
       validator.execute('Some string #LionRocks');

package/components/form-core/test/validate/ValidateMixin.test.js

@@ -1,3 +1,2 @@
 import { runValidateMixinSuite } from '@lion/ui/form-core-test-suites.js';
-
 runValidateMixinSuite();

package/components/form-core/test/validate/ValidateMixinFeedbackPart.test.js

@@ -1,3 +1,2 @@
 import { runValidateMixinFeedbackPart } from '@lion/ui/form-core-test-suites.js';
-
 runValidateMixinFeedbackPart();

package/components/form-core/test/validate/Validator.test.js

@@ -17,7 +17,7 @@ async function expectThrowsAsync(method, errorMessage) {
   }
   expect(error).to.be.an('Error', 'No error was thrown');
   if (errorMessage) {
-    expect(/** @type {Error} */ (error).message).to.equal(errorMessage);
+    expect(/** @type {Error} */ error.message).to.equal(errorMessage);
   }
 }
 /**
@@ -29,7 +29,6 @@ function getProtectedMembers(validatorEl) {
     getMessage: (...args) => validatorEl._getMessage(...args),
   };
 }
-
 describe('Validator', () => {
   it('has an "execute" function returning "shown" state', async () => {
     class MyValidator extends Validator {
@@ -44,7 +43,6 @@ describe('Validator', () => {
     }
     expect(new MyValidator().execute('test', 'me')).to.be.true;
   });
-
   it('throws when executing a Validator without a name', async () => {
     class MyValidator extends Validator {}
     expect(() => {
@@ -53,7 +51,6 @@ describe('Validator', () => {
       'A validator needs to have a name! Please set it via "static get validatorName() { return \'IsCat\'; }"',
     );
   });
-
   it('throws when executing a Validator that has a getMessage config property with a value not of type function', async () => {
     class MyValidator extends Validator {
       static get validatorName() {
@@ -62,25 +59,30 @@ describe('Validator', () => {
     }
 
     // @ts-ignore needed for test
-    const vali = new MyValidator({}, { getMessage: 'This is the custom error message' });
+    const vali = new MyValidator(
+      {},
+      {
+        getMessage: 'This is the custom error message',
+      },
+    );
     const { getMessage } = getProtectedMembers(vali);
-
     await expectThrowsAsync(
       () => getMessage(),
       "You must provide a value for getMessage of type 'function', you provided a value of type: string",
     );
   });
-
   it('receives a "param" as a first argument on instantiation', async () => {
     const vali = new Validator('myParam');
     expect(vali.param).to.equal('myParam');
   });
-
   it('receives a config object (optionally) as a second argument on instantiation', async () => {
-    const vali = new Validator('myParam', { fieldName: 'X' });
-    expect(vali.config).to.eql({ fieldName: 'X' });
+    const vali = new Validator('myParam', {
+      fieldName: 'X',
+    });
+    expect(vali.config).to.eql({
+      fieldName: 'X',
+    });
   });
-
   it('has access to name, type, params, config in getMessage provided by config', () => {
     const configSpy = sinon.spy();
     class MyValidator extends Validator {
@@ -88,18 +90,22 @@ describe('Validator', () => {
         return 'MyValidator';
       }
     }
-    const vali = new MyValidator('myParam', { fieldName: 'X', getMessage: configSpy });
+    const vali = new MyValidator('myParam', {
+      fieldName: 'X',
+      getMessage: configSpy,
+    });
     const { getMessage } = getProtectedMembers(vali);
     getMessage();
-
     expect(configSpy.args[0][0]).to.deep.equal({
       name: 'MyValidator',
       type: 'error',
       params: 'myParam',
-      config: { fieldName: 'X', getMessage: configSpy },
+      config: {
+        fieldName: 'X',
+        getMessage: configSpy,
+      },
     });
   });
-
   it('has access to name, type, params, config in static get getMessage', () => {
     let data;
     class MyValidator extends Validator {
@@ -115,18 +121,20 @@ describe('Validator', () => {
         return '';
       }
     }
-    const vali = new MyValidator('myParam', { fieldName: 'X' });
+    const vali = new MyValidator('myParam', {
+      fieldName: 'X',
+    });
     const { getMessage } = getProtectedMembers(vali);
     getMessage();
-
     expect(data).to.deep.equal({
       name: 'MyValidator',
       type: 'error',
       params: 'myParam',
-      config: { fieldName: 'X' },
+      config: {
+        fieldName: 'X',
+      },
     });
   });
-
   it('fires "param-changed" event on param change', async () => {
     const vali = new Validator('foo');
     const cb = sinon.spy(() => {});
@@ -136,28 +144,31 @@ describe('Validator', () => {
     vali.param = 'bar';
     expect(cb.callCount).to.equal(1);
   });
-
   it('fires "config-changed" event on config change', async () => {
-    const vali = new Validator('foo', { fieldName: 'X' });
+    const vali = new Validator('foo', {
+      fieldName: 'X',
+    });
     const cb = sinon.spy(() => {});
     if (vali.addEventListener) {
       vali.addEventListener('config-changed', cb);
     }
-    vali.config = { fieldName: 'Y' };
+    vali.config = {
+      fieldName: 'Y',
+    };
     expect(cb.callCount).to.equal(1);
   });
-
   it('has access to FormControl', async () => {
     const lightDom = '';
     class ValidateElement extends ValidateMixin(LitElement) {
       /** @type {any} */
       static get properties() {
-        return { modelValue: String };
+        return {
+          modelValue: String,
+        };
       }
     }
     const tagString = defineCE(ValidateElement);
     const tag = unsafeStatic(tagString);
-
     class MyValidator extends Validator {
       /**
        * @param {string} modelValue
@@ -171,23 +182,19 @@ describe('Validator', () => {
     const myVal = new MyValidator();
     const connectSpy = sinon.spy(myVal, 'onFormControlConnect');
     const disconnectSpy = sinon.spy(myVal, 'onFormControlDisconnect');
-
-    const el = /** @type {ValidateElement} */ (
+    const el =
+      /** @type {ValidateElement} */
       await fixture(html`
       <${tag} .validators=${[myVal]}>${lightDom}</${tag}>
-    `)
-    );
-
+    `);
     expect(connectSpy.callCount).to.equal(1);
     expect(connectSpy.calledWith(el)).to.equal(true);
     expect(disconnectSpy.callCount).to.equal(0);
-
     el.validators = [];
     expect(connectSpy.callCount).to.equal(1);
     expect(disconnectSpy.callCount).to.equal(1);
     expect(disconnectSpy.calledWith(el)).to.equal(true);
   });
-
   it('adds static ["_$isValidator$"] property as a marker to identify the Validator class across different lion versions (as instanceof cannot be used)', async () => {
     const myValidator = new Validator();
 
@@ -196,12 +203,10 @@ describe('Validator', () => {
     // @ts-ignore [dynamic-key-access-in-test]
     expect(myValidator.constructor['_$isValidator$']).to.be.true;
   });
-
   describe('Types', () => {
     it('has type "error" by default', async () => {
       expect(new Validator().type).to.equal('error');
     });
-
     it('supports customized types', async () => {
       // This test shows the best practice of adding custom types
       class MyValidator extends Validator {

package/components/form-core/test/validate/lion-validation-feedback.test.js

@@ -11,82 +11,120 @@ import { AlwaysInvalid, AlwaysValid } from '@lion/ui/form-core-test-helpers.js';
 
 describe('lion-validation-feedback', () => {
   it('renders a validation message', async () => {
-    const el = /** @type {LionValidationFeedback} */ (
-      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-    );
+    const el =
+      /** @type {LionValidationFeedback} */
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
     expect(el.shadowRoot?.textContent).to.not.include('hello');
-    el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+    el.feedbackData = [
+      {
+        message: 'hello',
+        type: 'error',
+        validator: new AlwaysInvalid(),
+      },
+    ];
     await el.updateComplete;
     expect(el.shadowRoot?.textContent).to.include('hello');
   });
-
   it('renders the validation type attribute', async () => {
-    const el = /** @type {LionValidationFeedback} */ (
-      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-    );
-    el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+    const el =
+      /** @type {LionValidationFeedback} */
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
+    el.feedbackData = [
+      {
+        message: 'hello',
+        type: 'error',
+        validator: new AlwaysInvalid(),
+      },
+    ];
     await el.updateComplete;
     expect(el.getAttribute('type')).to.equal('error');
-
-    el.feedbackData = [{ message: 'hello', type: 'warning', validator: new AlwaysInvalid() }];
+    el.feedbackData = [
+      {
+        message: 'hello',
+        type: 'warning',
+        validator: new AlwaysInvalid(),
+      },
+    ];
     await el.updateComplete;
     expect(el.getAttribute('type')).to.equal('warning');
   });
-
   it('does not clear error messages', async () => {
-    const el = /** @type {LionValidationFeedback} */ (
-      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-    );
-
+    const el =
+      /** @type {LionValidationFeedback} */
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
     const clock = sinon.useFakeTimers();
-
-    el.feedbackData = [{ message: 'hello', type: 'success', validator: new AlwaysValid() }];
+    el.feedbackData = [
+      {
+        message: 'hello',
+        type: 'success',
+        validator: new AlwaysValid(),
+      },
+    ];
     await el.updateComplete;
     expect(el.getAttribute('type')).to.equal('success');
-
-    el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+    el.feedbackData = [
+      {
+        message: 'hello',
+        type: 'error',
+        validator: new AlwaysInvalid(),
+      },
+    ];
     await el.updateComplete;
     clock.tick(3100);
     expect(el.getAttribute('type')).to.equal('error');
-
     clock.restore();
   });
-
   it('shares to the user the type of validation feedback', async () => {
-    const el = /** @type {LionValidationFeedback} */ (
-      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-    );
-
-    el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+    const el =
+      /** @type {LionValidationFeedback} */
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
+    el.feedbackData = [
+      {
+        message: 'hello',
+        type: 'error',
+        validator: new AlwaysInvalid(),
+      },
+    ];
     await el.updateComplete;
-
     const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
     expect(validationFeedbackType?.textContent?.trim()).to.equal('Error,');
-
-    el.feedbackData = [{ message: 'hello', type: 'info', validator: new AlwaysInvalid() }];
+    el.feedbackData = [
+      {
+        message: 'hello',
+        type: 'info',
+        validator: new AlwaysInvalid(),
+      },
+    ];
     await el.updateComplete;
-
     expect(validationFeedbackType?.textContent?.trim()).to.equal('Info,');
   });
-
   it('it does not share the type if there is no message', async () => {
-    const el = /** @type {LionValidationFeedback} */ (
-      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-    );
-
-    el.feedbackData = [{ message: '', type: 'error', validator: new AlwaysInvalid() }];
+    const el =
+      /** @type {LionValidationFeedback} */
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
+    el.feedbackData = [
+      {
+        message: '',
+        type: 'error',
+        validator: new AlwaysInvalid(),
+      },
+    ];
     await el.updateComplete;
-
     const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
     expect(validationFeedbackType?.textContent?.trim()).to.not.equal('Error');
   });
-
   describe('accessibility', () => {
     it('passes a11y audit when with a message', async () => {
-      const el = /** @type {LionValidationFeedback} */ (
-        await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-      );
-      el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+      const el =
+        /** @type {LionValidationFeedback} */
+        await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
+      el.feedbackData = [
+        {
+          message: 'hello',
+          type: 'error',
+          validator: new AlwaysInvalid(),
+        },
+      ];
       await el.updateComplete;
       await expect(el).to.be.accessible();
     });

package/components/form-core/test-helpers/ExampleValidators.js

@@ -1,15 +1,12 @@
 /* eslint-disable max-classes-per-file, class-methods-use-this */
 import { Validator } from '@lion/ui/form-core.js';
-
 export class AlwaysInvalid extends Validator {
   static validatorName = 'AlwaysInvalid';
-
   execute() {
     const showMessage = true;
     return showMessage;
   }
 }
-
 export class AlwaysValid extends Validator {
   static get validatorName() {
     return 'AlwaysValid';
@@ -23,7 +20,6 @@ export class AlwaysValid extends Validator {
     return showMessage;
   }
 }
-
 export class AsyncAlwaysValid extends AlwaysValid {
   static get async() {
     return true;
@@ -36,7 +32,6 @@ export class AsyncAlwaysValid extends AlwaysValid {
     return true;
   }
 }
-
 export class AsyncAlwaysInvalid extends AlwaysValid {
   static get async() {
     return true;

package/components/form-core/test-helpers/getFormControlMembers.js

@@ -12,10 +12,10 @@ export function getFormControlMembers(el) {
   // eslint-disable-next-line
   const { _inputNode, _helpTextNode, _labelNode, _feedbackNode, _allValidators } = el;
   return {
-    _inputNode: /** @type {* & FormControlHost} */ (el)._inputNode,
+    _inputNode: /** @type {* & FormControlHost} */ el._inputNode,
     _helpTextNode,
     _labelNode,
     _feedbackNode,
-    _allValidators: /** @type {* & ValidateHost} */ (el)._allValidators,
+    _allValidators: /** @type {* & ValidateHost} */ el._allValidators,
   };
 }

package/components/form-core/test-helpers/mimicUserInput.js

@@ -13,5 +13,9 @@ export function mimicUserInput(formControl, newViewValue, { caretIndex } = {}) {
     formControl._inputNode.selectionEnd = caretIndex;
   }
   formControl._inputNode.focus();
-  formControl._inputNode.dispatchEvent(new Event('input', { bubbles: true }));
+  formControl._inputNode.dispatchEvent(
+    new Event('input', {
+      bubbles: true,
+    }),
+  );
 }