@lion/ui 0.0.1

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

@@ -0,0 +1,341 @@
+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 () => {
+      let hasCalledFirstUpdated = false;
+      let hasCalledUpdateSync = false;
+      class UpdatableImplementation extends SyncUpdatableMixin(LitElement) {
+        static get properties() {
+          return {
+            propA: { type: String },
+            propB: {
+              type: String,
+              attribute: 'prop-b',
+            },
+          };
+        }
+
+        constructor() {
+          super();
+          this.propA = 'init-a';
+          this.propB = 'init-b';
+        }
+
+        /** @param {import('lit').PropertyValues } changedProperties */
+        firstUpdated(changedProperties) {
+          super.firstUpdated(changedProperties);
+          hasCalledFirstUpdated = true;
+        }
+
+        /**
+         * @param {string} name
+         * @param {*} oldValue
+         */
+        updateSync(name, oldValue) {
+          super.updateSync(name, oldValue);
+          hasCalledUpdateSync = true;
+        }
+      }
+
+      const tagString = defineCE(UpdatableImplementation);
+      const tag = unsafeStatic(tagString);
+      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');
+      expect(el.propB).to.equal('b');
+      el.propA = 'a2';
+      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;
+    });
+
+    // 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 },
+            propB: {
+              type: String,
+              attribute: 'prop-b',
+            },
+            derived: { type: String },
+          };
+        }
+
+        constructor() {
+          super();
+          this.propA = 'init-a';
+          this.propB = 'init-b';
+        }
+
+        /**
+         * @param {string} name
+         * @param {*} oldValue
+         */
+        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}>`)
+      );
+
+      // 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}>`)
+      );
+      expect(el2.derived).to.equal('ainit-b');
+
+      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}>`)
+      );
+      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 },
+          };
+        }
+
+        constructor() {
+          super();
+          this.prop = 'a';
+        }
+
+        /**
+         * @param {string} name
+         * @param {*} oldValue
+         */
+        requestUpdate(name, oldValue) {
+          super.requestUpdate(name, oldValue);
+          if (name === 'prop') {
+            propChangedCount += 1;
+          }
+        }
+
+        /**
+         * @param {string} name
+         * @param {*} oldValue
+         */
+        updateSync(name, oldValue) {
+          super.updateSync(name, oldValue);
+          if (name === 'prop') {
+            propUpdateSyncCount += 1;
+          }
+        }
+      }
+
+      const tagString = defineCE(UpdatableImplementation);
+      const tag = unsafeStatic(tagString);
+
+      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 },
+            propB: {
+              type: String,
+              attribute: 'prop-b',
+            },
+            derived: { type: String },
+          };
+        }
+
+        constructor() {
+          super();
+          this.propA = 'init-a';
+          this.propB = 'init-b';
+        }
+
+        /**
+         * @param {string} name
+         * @param {*} oldValue
+         */
+        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 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);
+      el.propB = 'b2';
+      expect(el.derived).to.equal('ab2');
+      expect(spy.callCount).to.equal(2);
+    });
+  });
+
+  describe('Features', () => {
+    // See: https://lit-element.polymer-project.org/guide/lifecycle#haschanged
+    it('supports "hasChanged" from UpdatingElement', async () => {
+      class UpdatableImplementation extends SyncUpdatableMixin(LitElement) {
+        static get properties() {
+          return {
+            complexProp: {
+              type: Object,
+              /**
+               * @param {Object} result
+               * @param {Object} prevResult
+               */
+              hasChanged: (result, prevResult) => {
+                // Simple way of doing a deep comparison
+                if (JSON.stringify(result) !== JSON.stringify(prevResult)) {
+                  return true;
+                }
+                return false;
+              },
+            },
+          };
+        }
+
+        constructor() {
+          super();
+          this.complexProp = {};
+        }
+
+        /**
+         * @param {string} name
+         * @param {*} oldValue
+         */
+        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 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 };
+      expect(spy.callCount).to.equal(2);
+      el.complexProp = { key1: false };
+      expect(spy.callCount).to.equal(3);
+      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 },
+        };
+      }
+
+      constructor() {
+        super();
+        this.prop = '';
+      }
+    }
+    const tagString = defineCE(UpdatableImplementation);
+    const tag = unsafeStatic(tagString);
+    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;
+    expect(ns.initialized).to.be.true;
+    el.parentElement?.removeChild(el);
+    expect(ns.connected).to.be.false;
+    container.appendChild(el);
+    expect(ns.connected).to.be.true;
+
+    // change a prop to cause rerender
+    expect(updateSyncSpy.calledWith('prop', undefined)).to.be.true;
+    el.prop = 'a';
+    await el.updateComplete;
+    expect(updateSyncSpy.calledWith('prop', '')).to.be.true;
+  });
+});

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

@@ -0,0 +1,73 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import sinon from 'sinon';
+import { browserDetection } from '@lion/ui/core.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`
+      <div>
+        <div id="a"></div>
+        <div></div>
+        <div id="b">
+          <div></div>
+          <div id="b-child"></div>
+          <div id="b-child2"></div>
+        </div>
+        <div></div>
+        <div id="c"></div>
+        <div></div>
+      </div>
+    `);
+    // eslint-disable-next-line no-unused-vars
+    const [a, _1, b, _2, bChild, child2, _3, c, _4] = Array.from(el.querySelectorAll('div'));
+    const unorderedNodes = [bChild, c, a, b, child2];
+    const result = getAriaElementsInRightDomOrder(unorderedNodes);
+    expect(result).to.eql([a, b, bChild, child2, c]);
+  });
+
+  it('can order reversely', async () => {
+    const el = await fixture(html`
+      <div>
+        <div id="a"></div>
+        <div></div>
+        <div id="b">
+          <div></div>
+          <div id="b-child"></div>
+        </div>
+        <div></div>
+        <div id="c"></div>
+        <div></div>
+      </div>
+    `);
+    // 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 });
+    expect(result).to.eql([c, bChild, b, a]);
+  });
+
+  it('orders in reverse for IE11', async () => {
+    const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
+    const el = await fixture(html`
+      <div>
+        <div id="a"></div>
+        <div></div>
+        <div id="b">
+          <div></div>
+          <div id="b-child"></div>
+        </div>
+        <div></div>
+        <div id="c"></div>
+        <div></div>
+      </div>
+    `);
+    // 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);
+    expect(result).to.eql([c, bChild, b, a]);
+    browserDetectionStub.restore();
+  });
+});

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

@@ -0,0 +1,105 @@
+import { expect } from '@open-wc/testing';
+
+import { normalizeDateTime } from '@lion/ui/localize.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({
+      min: new Date('2018/02/02'),
+      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 });
+    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);
+    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

@@ -0,0 +1,61 @@
+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 });
+    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

@@ -0,0 +1,79 @@
+import { LionField, Required } from '@lion/ui/form-core.js';
+import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
+import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+
+/**
+ * @typedef {import('../../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
+ * @typedef {import('../../types/FormControlMixinTypes.js').HTMLElementWithValue} HTMLElementWithValue
+ */
+
+/** @type {HTMLElementWithValue} */
+let inputNodeTag;
+class RequiredElement extends LionField {
+  connectedCallback() {
+    const inputNode = document.createElement('input');
+    inputNode.slot = 'input';
+    this.appendChild(inputNode);
+    super.connectedCallback();
+  }
+
+  /** @protected */
+  get _inputNode() {
+    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));
+
+      validator.onFormControlConnect(el);
+      const { _inputNode } = getFormControlMembers(el);
+      expect(_inputNode).to.have.attribute('aria-required', 'true');
+    });
+
+    // When incompatible tags are used, aria-required will not be added
+
+    // @ts-ignore
+    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 => {
+      // @ts-ignore
+      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');
+    });
+
+    // When incompatible roles are used, aria-required will not be added
+
+    // @ts-ignore
+    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');
+  });
+});