@lion/ui 0.23.0 → 0.24.0

package/components/form-core/test/utils/SyncUpdatableMixin.test.js

@@ -2,7 +2,6 @@ import { LitElement } from 'lit';
 import { defineCE, expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
 import { SyncUpdatableMixin } from '../../src/utils/SyncUpdatableMixin.js';
-
 describe('SyncUpdatableMixin', () => {
   describe('Until firstUpdated', () => {
     it('initializes all properties', async () => {
@@ -11,14 +10,15 @@ describe('SyncUpdatableMixin', () => {
       class UpdatableImplementation extends SyncUpdatableMixin(LitElement) {
         static get properties() {
           return {
-            propA: { type: String },
+            propA: {
+              type: String,
+            },
             propB: {
               type: String,
               attribute: 'prop-b',
             },
           };
         }
-
         constructor() {
           super();
           this.propA = 'init-a';
@@ -40,12 +40,11 @@ describe('SyncUpdatableMixin', () => {
           hasCalledUpdateSync = true;
         }
       }
-
       const tagString = defineCE(UpdatableImplementation);
       const tag = unsafeStatic(tagString);
-      const el = /** @type {UpdatableImplementation} */ (
-        fixtureSync(html`<${tag} prop-b="b"></${tag}>`)
-      );
+      const el =
+        /** @type {UpdatableImplementation} */
+        fixtureSync(html`<${tag} prop-b="b"></${tag}>`);
 
       // Getters setters work as expected, without running property effects
       expect(el.propA).to.equal('init-a');
@@ -54,7 +53,6 @@ describe('SyncUpdatableMixin', () => {
       expect(el.propA).to.equal('a2');
       expect(hasCalledFirstUpdated).to.be.false;
       expect(hasCalledUpdateSync).to.be.false;
-
       await el.updateComplete;
       expect(hasCalledFirstUpdated).to.be.true;
       expect(hasCalledUpdateSync).to.be.true;
@@ -63,19 +61,21 @@ describe('SyncUpdatableMixin', () => {
     // See: https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence
     it('guarantees Member Order Independence', async () => {
       let hasCalledRunPropertyEffect = false;
-
       class UpdatableImplementation extends SyncUpdatableMixin(LitElement) {
         static get properties() {
           return {
-            propA: { type: String },
+            propA: {
+              type: String,
+            },
             propB: {
               type: String,
               attribute: 'prop-b',
             },
-            derived: { type: String },
+            derived: {
+              type: String,
+            },
           };
         }
-
         constructor() {
           super();
           this.propA = 'init-a';
@@ -88,59 +88,51 @@ describe('SyncUpdatableMixin', () => {
          */
         updateSync(name, oldValue) {
           super.updateSync(name, oldValue);
-
           if (name === 'propB') {
             this._runPropertyEffect();
           }
         }
-
         _runPropertyEffect() {
           hasCalledRunPropertyEffect = true;
           this.derived = this.propA + this.propB;
         }
       }
-
       const tagString = defineCE(UpdatableImplementation);
       const tag = unsafeStatic(tagString);
-      const el = /** @type {UpdatableImplementation} */ (
-        fixtureSync(html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`)
-      );
+      const el =
+        /** @type {UpdatableImplementation} */
+        fixtureSync(html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`);
 
       // Derived
       expect(el.derived).to.be.undefined;
       expect(hasCalledRunPropertyEffect).to.be.false;
-
       await el.updateComplete;
       expect(el.derived).to.equal('ab');
       expect(hasCalledRunPropertyEffect).to.be.true;
-
-      const el2 = /** @type {UpdatableImplementation} */ (
-        await fixture(html`<${tag} .propA="${'a'}"></${tag}>`)
-      );
+      const el2 =
+        /** @type {UpdatableImplementation} */
+        await fixture(html`<${tag} .propA="${'a'}"></${tag}>`);
       expect(el2.derived).to.equal('ainit-b');
-
-      const el3 = /** @type {UpdatableImplementation} */ (
-        await fixture(html`<${tag} .propB="${'b'}"></${tag}>`)
-      );
+      const el3 =
+        /** @type {UpdatableImplementation} */
+        await fixture(html`<${tag} .propB="${'b'}"></${tag}>`);
       expect(el3.derived).to.equal('init-ab');
-
-      const el4 = /** @type {UpdatableImplementation} */ (
-        await fixture(html`<${tag} .propA=${'a'} .propB="${'b'}"></${tag}>`)
-      );
+      const el4 =
+        /** @type {UpdatableImplementation} */
+        await fixture(html`<${tag} .propA=${'a'} .propB="${'b'}"></${tag}>`);
       expect(el4.derived).to.equal('ab');
     });
-
     it('runs "updateSync" once per property with most current value', async () => {
       let propChangedCount = 0;
       let propUpdateSyncCount = 0;
-
       class UpdatableImplementation extends SyncUpdatableMixin(LitElement) {
         static get properties() {
           return {
-            prop: { type: String },
+            prop: {
+              type: String,
+            },
           };
         }
-
         constructor() {
           super();
           this.prop = 'a';
@@ -170,36 +162,35 @@ describe('SyncUpdatableMixin', () => {
           }
         }
       }
-
       const tagString = defineCE(UpdatableImplementation);
       const tag = unsafeStatic(tagString);
-
-      const el = /** @type {UpdatableImplementation} */ (fixtureSync(html`<${tag}></${tag}>`));
+      const el = /** @type {UpdatableImplementation} */ fixtureSync(html`<${tag}></${tag}>`);
       el.prop = 'a';
       // Getters setters work as expected, without running property effects
       expect(propChangedCount).to.equal(2);
       expect(propUpdateSyncCount).to.equal(0);
-
       await el.updateComplete;
       expect(propChangedCount).to.equal(2);
       expect(propUpdateSyncCount).to.equal(1);
     });
   });
-
   describe('After firstUpdated', () => {
     it('calls "updateSync" immediately when the observed property is changed (newValue !== oldValue)', async () => {
       class UpdatableImplementation extends SyncUpdatableMixin(LitElement) {
         static get properties() {
           return {
-            propA: { type: String },
+            propA: {
+              type: String,
+            },
             propB: {
               type: String,
               attribute: 'prop-b',
             },
-            derived: { type: String },
+            derived: {
+              type: String,
+            },
           };
         }
-
         constructor() {
           super();
           this.propA = 'init-a';
@@ -212,25 +203,21 @@ describe('SyncUpdatableMixin', () => {
          */
         updateSync(name, oldValue) {
           super.updateSync(name, oldValue);
-
           if (name === 'propB') {
             this._runPropertyEffect();
           }
         }
-
         _runPropertyEffect() {
           this.derived = this.propA + this.propB;
         }
       }
-
       const tagString = defineCE(UpdatableImplementation);
       const tag = unsafeStatic(tagString);
-      const el = /** @type {UpdatableImplementation} */ (
-        fixtureSync(html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`)
-      );
+      const el =
+        /** @type {UpdatableImplementation} */
+        fixtureSync(html`<${tag} prop-b="b" .propA="${'a'}"></${tag}>`);
       const spy = sinon.spy(el, '_runPropertyEffect');
       expect(spy.callCount).to.equal(0);
-
       await el.updateComplete;
       expect(el.derived).to.equal('ab');
       expect(spy.callCount).to.equal(1);
@@ -239,7 +226,6 @@ describe('SyncUpdatableMixin', () => {
       expect(spy.callCount).to.equal(2);
     });
   });
-
   describe('Features', () => {
     // See: https://lit-element.polymer-project.org/guide/lifecycle#haschanged
     it('supports "hasChanged" from UpdatingElement', async () => {
@@ -262,7 +248,6 @@ describe('SyncUpdatableMixin', () => {
             },
           };
         }
-
         constructor() {
           super();
           this.complexProp = {};
@@ -274,44 +259,46 @@ describe('SyncUpdatableMixin', () => {
          */
         updateSync(name, oldValue) {
           super.updateSync(name, oldValue);
-
           if (name === 'complexProp') {
             this._onComplexPropChanged();
           }
         }
-
         _onComplexPropChanged() {
           // do smth
         }
       }
-
       const tagString = defineCE(UpdatableImplementation);
-
       const tag = unsafeStatic(tagString);
-      const el = /** @type {UpdatableImplementation} */ (fixtureSync(html`<${tag}></${tag}>`));
+      const el = /** @type {UpdatableImplementation} */ fixtureSync(html`<${tag}></${tag}>`);
       const spy = sinon.spy(el, '_onComplexPropChanged');
       await el.updateComplete;
 
       // Constructor sets it first, so start at 1
       expect(spy.callCount).to.equal(1);
-      el.complexProp = { key1: true };
+      el.complexProp = {
+        key1: true,
+      };
       expect(spy.callCount).to.equal(2);
-      el.complexProp = { key1: false };
+      el.complexProp = {
+        key1: false,
+      };
       expect(spy.callCount).to.equal(3);
-      el.complexProp = { key1: false };
+      el.complexProp = {
+        key1: false,
+      };
       expect(spy.callCount).to.equal(3);
     });
   });
-
   it('reinitializes when the element gets reconnected to DOM', async () => {
     const container = await fixture(html`<div></div>`);
     class UpdatableImplementation extends SyncUpdatableMixin(LitElement) {
       static get properties() {
         return {
-          prop: { attribute: false },
+          prop: {
+            attribute: false,
+          },
         };
       }
-
       constructor() {
         super();
         this.prop = '';
@@ -319,12 +306,11 @@ describe('SyncUpdatableMixin', () => {
     }
     const tagString = defineCE(UpdatableImplementation);
     const tag = unsafeStatic(tagString);
-    const el = /** @type {UpdatableImplementation} */ (fixtureSync(html`<${tag}></${tag}>`));
+    const el = /** @type {UpdatableImplementation} */ fixtureSync(html`<${tag}></${tag}>`);
     // @ts-ignore [allow-private] in tests
     const ns = el.__SyncUpdatableNamespace;
     // @ts-ignore [allow-protected] in tests
     const updateSyncSpy = sinon.spy(el, 'updateSync');
-
     expect(ns.connected).to.be.true;
     expect(ns.initialized).to.be.undefined;
     await el.updateComplete;

package/components/form-core/test/utils/getAriaElementsInRightDomOrder.test.js

@@ -1,7 +1,6 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import { getAriaElementsInRightDomOrder } from '../../src/utils/getAriaElementsInRightDomOrder.js';
-
 describe('getAriaElementsInRightDomOrder', () => {
   it('orders by putting preceding siblings and local parents first', async () => {
     const el = await fixture(html`
@@ -24,7 +23,6 @@ describe('getAriaElementsInRightDomOrder', () => {
     const result = getAriaElementsInRightDomOrder(unorderedNodes);
     expect(result).to.eql([a, b, bChild, child2, c]);
   });
-
   it('can order reversely', async () => {
     const el = await fixture(html`
       <div>
@@ -42,7 +40,9 @@ describe('getAriaElementsInRightDomOrder', () => {
     // eslint-disable-next-line no-unused-vars
     const [a, _1, b, _2, bChild, _3, c, _4] = Array.from(el.querySelectorAll('div'));
     const unorderedNodes = [bChild, c, a, b];
-    const result = getAriaElementsInRightDomOrder(unorderedNodes, { reverse: true });
+    const result = getAriaElementsInRightDomOrder(unorderedNodes, {
+      reverse: true,
+    });
     expect(result).to.eql([c, bChild, b, a]);
   });
 });

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

@@ -1,66 +1,50 @@
 import { expect } from '@open-wc/testing';
-
 import { normalizeDateTime } from '@lion/ui/localize-no-side-effects.js';
 import { IsDate, MinDate, MaxDate, MinMaxDate, IsDateDisabled } from '@lion/ui/form-core.js';
-
 describe('Date Validation', () => {
   it('provides new isDate() to allow only dates', () => {
     let isEnabled;
     const validator = new IsDate();
     expect(IsDate.validatorName).to.equal('IsDate');
-
     isEnabled = validator.execute(new Date());
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute('foo');
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute(4);
     expect(isEnabled).to.be.true;
   });
-
   it('provides new minDate(x) to allow only dates after min', () => {
     let isEnabled;
     const validator = new MinDate(new Date('2018/02/02'));
     expect(MinDate.validatorName).to.equal('MinDate');
-
     isEnabled = validator.execute(new Date('2018-02-03'));
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(new Date('2018-02-01'));
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute(new Date('2018/02/02 10:00:00'));
     expect(isEnabled).to.be.false;
-
     const today = new Date();
     const todayFormatted = normalizeDateTime(today);
     const todayValidator = new MinDate(today);
     isEnabled = todayValidator.execute(todayFormatted);
     expect(isEnabled).to.be.false;
   });
-
   it('provides maxDate() to allow only dates before max', () => {
     let isEnabled;
     const validator = new MaxDate(new Date('2018/02/02'));
     expect(MaxDate.validatorName).to.equal('MaxDate');
-
     isEnabled = validator.execute(new Date('2018-02-01'));
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(new Date('2018/02/02 10:00:00'));
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(new Date('2018-02-03'));
     expect(isEnabled).to.be.true;
-
     const today = new Date();
     const todayFormatted = normalizeDateTime(today);
     const todayValidator = new MaxDate(today);
     isEnabled = todayValidator.execute(todayFormatted);
     expect(isEnabled).to.be.false;
   });
-
   it('provides new MinMaxDate() to allow only dates between min and max', () => {
     let isEnabled;
     const validator = new MinMaxDate({
@@ -68,37 +52,31 @@ describe('Date Validation', () => {
       max: new Date('2018/02/04'),
     });
     expect(MinMaxDate.validatorName).to.equal('MinMaxDate');
-
     isEnabled = validator.execute(new Date('2018/02/03'));
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(new Date('2018/02/01'));
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute(new Date('2018/02/05'));
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute(new Date('2018/02/02 10:00:00'));
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(new Date('2018/02/04 10:00:00'));
     expect(isEnabled).to.be.false;
-
     const today = new Date();
     const todayFormatted = normalizeDateTime(today);
-    const todayValidator = new MinMaxDate({ min: today, max: today });
+    const todayValidator = new MinMaxDate({
+      min: today,
+      max: today,
+    });
     isEnabled = todayValidator.execute(todayFormatted);
     expect(isEnabled).to.be.false;
   });
-
   it('provides new IsDateDisabled() to disable dates matching specified condition', () => {
     let isDisabled;
-    const validator = new IsDateDisabled(/** @param {Date} d */ d => d.getDate() === 3);
+    const validator = new IsDateDisabled(/** @param {Date} d */ (d) => d.getDate() === 3);
     expect(IsDateDisabled.validatorName).to.equal('IsDateDisabled');
-
     isDisabled = validator.execute(new Date('2018/02/04'));
     expect(isDisabled).to.be.false;
-
     isDisabled = validator.execute(new Date('2018/02/03'));
     expect(isDisabled).to.be.true;
   });

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

@@ -1,60 +1,48 @@
 import { expect } from '@open-wc/testing';
-
 import { IsNumber, MinNumber, MaxNumber, MinMaxNumber } from '@lion/ui/form-core.js';
-
 describe('Number Validation', () => {
   it('provides new IsNumber() to allow only numbers', () => {
     let isEnabled;
     const validator = new IsNumber();
     expect(IsNumber.validatorName).to.equal('IsNumber');
-
     isEnabled = validator.execute(4);
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(NaN);
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute('4');
     expect(isEnabled).to.be.true;
   });
-
   it('provides new MinNumber(x) to allow only numbers longer then min', () => {
     let isEnabled;
     const validator = new MinNumber(3);
     expect(MinNumber.validatorName).to.equal('MinNumber');
-
     isEnabled = validator.execute(3);
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(2);
     expect(isEnabled).to.be.true;
   });
-
   it('provides new MaxNumber(x) to allow only number shorter then max', () => {
     let isEnabled;
     const validator = new MaxNumber(3);
     expect(MaxNumber.validatorName).to.equal('MaxNumber');
-
     isEnabled = validator.execute(3);
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(4);
     expect(isEnabled).to.be.true;
   });
-
   it('provides new MinMaxNumber({ min: x, max: y}) to allow only numbers between min and max', () => {
     let isEnabled;
-    const validator = new MinMaxNumber({ min: 2, max: 4 });
+    const validator = new MinMaxNumber({
+      min: 2,
+      max: 4,
+    });
     expect(MinMaxNumber.validatorName).to.equal('MinMaxNumber');
-
     isEnabled = validator.execute(2);
     expect(isEnabled).to.be.false;
     isEnabled = validator.execute(4);
     expect(isEnabled).to.be.false;
-
     isEnabled = validator.execute(1);
     expect(isEnabled).to.be.true;
-
     isEnabled = validator.execute(5);
     expect(isEnabled).to.be.true;
   });

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

@@ -22,21 +22,14 @@ class RequiredElement extends LionField {
     return inputNodeTag || super._inputNode;
   }
 }
-
 const tagString = defineCE(RequiredElement);
 const tag = unsafeStatic(tagString);
-
 describe('Required validation', async () => {
   const validator = new Required();
-
   it('get aria-required attribute if element is part of the right tag names', async () => {
-    const el = /** @type {FormControlHost & HTMLElement} */ (
-      await fixture(html`<${tag}></${tag}>`)
-    );
-
-    Required._compatibleTags.forEach(tagName => {
-      inputNodeTag = /** @type {HTMLElementWithValue} */ (document.createElement(tagName));
-
+    const el = /** @type {FormControlHost & HTMLElement} */ await fixture(html`<${tag}></${tag}>`);
+    Required._compatibleTags.forEach((tagName) => {
+      inputNodeTag = /** @type {HTMLElementWithValue} */ document.createElement(tagName);
       validator.onFormControlConnect(el);
       const { _inputNode } = getFormControlMembers(el);
       expect(_inputNode).to.have.attribute('aria-required', 'true');
@@ -45,22 +38,17 @@ describe('Required validation', async () => {
     // When incompatible tags are used, aria-required will not be added
 
     // @ts-ignore
-    inputNodeTag = /** @type {HTMLDivElementWithValue} */ (document.createElement('div'));
-
+    inputNodeTag = /** @type {HTMLDivElementWithValue} */ document.createElement('div');
     validator.onFormControlConnect(el);
     const { _inputNode } = getFormControlMembers(el);
     expect(_inputNode).to.not.have.attribute('aria-required');
   });
   it('get aria-required attribute if element is part of the right roles', async () => {
-    const el = /** @type {FormControlHost & HTMLElement} */ (
-      await fixture(html`<${tag}></${tag}>`)
-    );
-
-    Required._compatibleRoles.forEach(role => {
+    const el = /** @type {FormControlHost & HTMLElement} */ await fixture(html`<${tag}></${tag}>`);
+    Required._compatibleRoles.forEach((role) => {
       // @ts-ignore
-      inputNodeTag = /** @type {HTMLElementWithValue} */ (document.createElement('div'));
+      inputNodeTag = /** @type {HTMLElementWithValue} */ document.createElement('div');
       inputNodeTag.setAttribute('role', role);
-
       validator.onFormControlConnect(el);
       const { _inputNode } = getFormControlMembers(el);
       expect(_inputNode).to.have.attribute('aria-required', 'true');
@@ -69,9 +57,8 @@ describe('Required validation', async () => {
     // When incompatible roles are used, aria-required will not be added
 
     // @ts-ignore
-    inputNodeTag = /** @type {HTMLElementWithValue} */ (document.createElement('div'));
+    inputNodeTag = /** @type {HTMLElementWithValue} */ document.createElement('div');
     inputNodeTag.setAttribute('role', 'group');
-
     validator.onFormControlConnect(el);
     const { _inputNode } = getFormControlMembers(el);
     expect(_inputNode).to.not.have.attribute('aria-required');

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

@@ -18,11 +18,10 @@ describe('ResultValidator', () => {
        * @returns {boolean}
        */
       executeOnResults({ regularValidationResult, prevShownValidationResult }) {
-        const errorOrWarning = /** @param {Validator} v */ v =>
+        const errorOrWarning = /** @param {Validator} v */ (v) =>
           v.type === 'error' || v.type === 'warning';
         const hasErrorOrWarning = !!regularValidationResult.filter(errorOrWarning).length;
         const hasShownErrorOrWarning = !!prevShownValidationResult.filter(errorOrWarning).length;
-
         return !hasErrorOrWarning && hasShownErrorOrWarning;
       }
     }