@lion/ui 0.0.1

package/components/form-integrations/test/form-integrations.test.js

@@ -0,0 +1,189 @@
+import sinon from 'sinon';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { PhoneUtilManager } from '@lion/ui/input-tel.js';
+import { getAllTagNames } from './helpers/helpers.js';
+import './helpers/umbrella-form.js';
+
+import '@lion/ui/define/lion-input-tel-dropdown.js';
+import '@lion/ui/define/lion-option.js';
+import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-radio.js';
+
+/**
+ * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
+ * @typedef {import('../../input-tel-dropdown/src/LionInputTelDropdown.js').LionInputTelDropdown} LionInputTelDropdown
+ */
+
+// Test umbrella form.
+describe('Form Integrations', () => {
+  beforeEach(async () => {
+    // Wait till PhoneUtilManager has been loaded
+    await PhoneUtilManager.loadComplete;
+  });
+
+  it('".serializedValue" returns all non disabled fields based on form structure', async () => {
+    const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
+    await el.updateComplete;
+    const formEl = el._lionFormNode;
+
+    expect(formEl.serializedValue).to.eql({
+      full_name: { first_name: '', last_name: '' },
+      date: '2000-12-12',
+      datepicker: '2020-12-12',
+      bio: '',
+      money: '',
+      iban: '',
+      email: '',
+      checkers: ['foo', 'bar'],
+      dinosaurs: '',
+      favoriteFruit: 'Banana',
+      favoriteMovie: 'Rocky',
+      favoriteColor: 'hotpink',
+      lyrics: '1',
+      range: 2.3,
+      terms: [],
+      notifications: { value: '', checked: false },
+      rsvp: '',
+      tel: '',
+      'tel-dropdown': '',
+      comments: '',
+    });
+  });
+
+  it('".formattedValue" returns all non disabled fields based on form structure', async () => {
+    const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
+    await el.updateComplete;
+    const formEl = el._lionFormNode;
+    const inputTelDropdownEl = /** @type {LionInputTelDropdown} */ (
+      formEl.querySelector('lion-input-tel-dropdown')
+    );
+    await inputTelDropdownEl?.updateComplete;
+
+    expect(formEl.formattedValue).to.eql({
+      full_name: { first_name: '', last_name: '' },
+      date: '12/12/2000',
+      datepicker: '12/12/2020',
+      bio: '',
+      money: '',
+      iban: '',
+      email: '',
+      checkers: ['foo', 'bar'],
+      dinosaurs: '',
+      favoriteFruit: 'Banana',
+      favoriteMovie: 'Rocky',
+      favoriteColor: 'hotpink',
+      lyrics: 'Fire up that loud',
+      range: 2.3,
+      terms: [],
+      notifications: '',
+      rsvp: '',
+      tel: '',
+      'tel-dropdown': '+44',
+      comments: '',
+    });
+  });
+
+  describe('Form Integrations', () => {
+    it('does not become dirty when elements are prefilled', async () => {
+      const el = /** @type {UmbrellaForm} */ (
+        await fixture(
+          html`<umbrella-form
+            .serializedValue="${{
+              full_name: { first_name: '', last_name: '' },
+              date: '2000-12-12',
+              datepicker: '2020-12-12',
+              bio: '',
+              money: '',
+              iban: '',
+              email: '',
+              checkers: ['foo', 'bar'],
+              dinosaurs: 'brontosaurus',
+              favoriteFruit: 'Banana',
+              favoriteMovie: 'Rocky',
+              favoriteColor: 'hotpink',
+              lyrics: '1',
+              range: 2.3,
+              terms: [],
+              comments: '',
+            }}"
+          ></umbrella-form>`,
+        )
+      );
+
+      await el._lionFormNode.initComplete;
+      expect(el._lionFormNode.dirty).to.be.false;
+    });
+  });
+
+  describe('Registering', () => {
+    const registerTagsResult = [
+      'lion-fieldset',
+      '  lion-input',
+      '  lion-input',
+      'lion-input-date',
+      'lion-input-datepicker',
+      'lion-textarea',
+      'lion-input-amount',
+      'lion-input-iban',
+      'lion-input-email',
+      'lion-input-tel',
+      'lion-input-tel-dropdown',
+      'lion-checkbox-group',
+      '  lion-checkbox',
+      '  lion-checkbox',
+      '  lion-checkbox',
+      'lion-radio-group',
+      '  lion-radio',
+      '  lion-radio',
+      '  lion-radio',
+      'lion-listbox',
+      '  lion-option',
+      '  lion-option',
+      '  lion-option',
+      'lion-combobox',
+      '  lion-option',
+      '  lion-option',
+      '  lion-option',
+      '  lion-option',
+      '  lion-option',
+      '  lion-option',
+      'lion-select-rich',
+      '  lion-option',
+      '  lion-option',
+      '  lion-option',
+      'lion-select',
+      'lion-input-range',
+      'lion-checkbox-group',
+      '  lion-checkbox',
+      'lion-switch',
+      'lion-input-stepper',
+      'lion-textarea',
+    ];
+
+    it('successfully registers all form components', async () => {
+      const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
+      // @ts-ignore
+      const formEl = /** @type {LionForm} */ (el._lionFormNode);
+      await formEl.registrationComplete;
+      const registeredEls = getAllTagNames(formEl);
+
+      expect(registeredEls).to.eql(registerTagsResult);
+    });
+
+    it('successfully unregisters all form components', async () => {
+      const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
+      const offlineContainer = document.createElement('div');
+      // @ts-ignore
+      const formEl = /** @type {LionForm} */ (el._lionFormNode);
+      await formEl.registrationComplete;
+
+      for (const child of formEl.formElements) {
+        const spy = sinon.spy(child, '__unregisterFormElement');
+        offlineContainer.appendChild(child);
+        await child.updateComplete;
+        expect(spy).to.have.been.called;
+      }
+    });
+  });
+});

package/components/form-integrations/test/form-validation-integrations.test.js

@@ -0,0 +1,185 @@
+import { DefaultSuccess, Required, Validator } from '@lion/ui/form-core.js';
+import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
+import { LionInput } from '@lion/ui/input.js';
+import { localize } from '@lion/ui/localize.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
+import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import sinon from 'sinon';
+
+describe('Form Validation Integrations', () => {
+  const lightDom = '';
+  before(() => {
+    loadDefaultFeedbackMessages();
+  });
+
+  describe('DefaultSuccess', () => {
+    it('does not show success feedback if the user is not recovering from a shown error/warning feedback', async () => {
+      class WarnValidator extends Validator {
+        /**
+         *
+         * @param {?} [param]
+         * @param {Object.<string,?>} [config]
+         */
+        constructor(param, config) {
+          super(param, config);
+          this.type = 'warning';
+        }
+
+        /** @param {string} value */
+        execute(value) {
+          let hasError = false;
+          if (value === 'warn') {
+            hasError = true;
+          }
+          return hasError;
+        }
+      }
+
+      class ValidateElementCustomTypes extends LionInput {
+        static get validationTypes() {
+          return ['error', 'warning', 'success'];
+        }
+      }
+      const elTagString = defineCE(ValidateElementCustomTypes);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {ValidateElementCustomTypes} */ (
+        await fixture(html`
+        <${elTag}
+          .validators=${[
+            new Required(null, { getMessage: async () => 'error' }),
+            new WarnValidator(null, { getMessage: () => 'warning' }),
+            new DefaultSuccess(),
+          ]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      const { _feedbackNode } = getFormControlMembers(el);
+
+      expect(_feedbackNode.feedbackData?.length).to.equal(0);
+
+      el.modelValue = 'w';
+      el.touched = true;
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(el.showsFeedbackFor).to.eql([]);
+
+      el.modelValue = 'warn';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('warning');
+
+      el.modelValue = 'war';
+      await el.updateComplete;
+      await el.feedbackComplete;
+
+      expect([
+        'Okay',
+        'Correct',
+        'Succeeded',
+        'Ok!',
+        'This is right.',
+        'Changed!',
+        'Ok, correct.',
+      ]).to.include(
+        /** @type {{  message: string ;type: string; validator?: Validator | undefined;}[]} */
+        (_feedbackNode.feedbackData)[0].message,
+      );
+
+      el.modelValue = '';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('error');
+
+      el.modelValue = 'war';
+      await el.updateComplete;
+      await el.feedbackComplete;
+
+      expect([
+        'Okay',
+        'Correct',
+        'Succeeded',
+        'Ok!',
+        'This is right.',
+        'Changed!',
+        'Ok, correct.',
+      ]).to.include(
+        /** @type {{  message: string ;type: string; validator?: Validator | undefined;}[]} */
+        (_feedbackNode.feedbackData)[0].message,
+      );
+
+      // Check that change in focused or other interaction states does not refresh the success message
+      // without a change in validation results
+      // @ts-ignore [allow-protected] in test
+      const spy = sinon.spy(el, '_updateFeedbackComponent');
+      // @ts-ignore [allow-protected] in test
+      el._updateShouldShowFeedbackFor();
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(spy.called).to.be.false;
+    });
+
+    it('correctly renders localized fieldName (label), even on locale changes', async () => {
+      class DefaultLabelInput extends LionInput {
+        constructor() {
+          super();
+          this.setDefaultLabel();
+        }
+
+        async updateLabel() {
+          this.label = localize.msg('test-default-label:label');
+        }
+
+        async setDefaultLabel() {
+          localize.loadNamespace({
+            'test-default-label': /** @param {string} locale */ async locale => {
+              switch (locale) {
+                case 'nl-NL':
+                  return { label: 'Tekst' };
+                default:
+                  return { label: 'Text' };
+              }
+            },
+          });
+          this.boundUpdateLabel = this.updateLabel.bind(this);
+
+          // localeChanged is fired AFTER localize has finished loading missing translations
+          // so no need to await localize.loadingComplete
+          localize.addEventListener('localeChanged', this.boundUpdateLabel);
+
+          // Wait for it to complete when updating the label for the first time
+          await localize.loadingComplete;
+          this.boundUpdateLabel();
+        }
+      }
+      const elTagString = defineCE(DefaultLabelInput);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {LionInput} */ (
+        await fixture(html`
+        <${elTag}
+          .validators=${[new Required()]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      el.touched = true;
+      el.dirty = true;
+      await el.updateComplete;
+      await el.feedbackComplete;
+      const { _feedbackNode } = getFormControlMembers(el);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Please enter a(n) Text.');
+
+      localize.locale = 'nl-NL';
+      await localize.loadingComplete;
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(el.label).to.equal('Tekst');
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Vul een Tekst in.');
+
+      localize.locale = 'en-GB';
+      await localize.loadingComplete;
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(el.label).to.equal('Text');
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Please enter a(n) Text.');
+    });
+  });
+});

package/components/form-integrations/test/helpers/helpers.js

@@ -0,0 +1,40 @@
+/**
+ * @typedef {import('../../../form/src/LionForm.js').LionForm} LionForm
+ * @typedef {import('../../../form-core/src/LionField.js').LionField} LionField
+ */
+
+/**
+ * @param {LionForm} formGroupEl
+ */
+export function getAllFormElements(formGroupEl) {
+  const getElms = (/** @type {HTMLElement} */ elm) => [
+    elm,
+    // @ts-ignore
+    ...(elm.formElements ? elm.formElements.map(getElms).flat() : []),
+  ];
+
+  // @ts-ignore
+  return formGroupEl.formElements.map(elem => getElms(elem)).flat();
+}
+
+/**
+ * @param {LionForm} formGroupEl
+ */
+export function getAllTagNames(formGroupEl) {
+  const getTagNames = (/** @type {HTMLElement} */ elm, lvl = 0) => [
+    `  `.repeat(lvl) + elm.tagName.toLowerCase(),
+    // @ts-ignore
+    ...(elm.formElements ? elm.formElements.map(elem => getTagNames(elem, lvl + 1)).flat() : []),
+  ];
+
+  // @ts-ignore
+  return formGroupEl.formElements.map(elem => getTagNames(elem)).flat();
+}
+
+/**
+ * @param {LionForm} formGroupEl
+ */
+export function getAllFieldsAndFormGroups(formGroupEl) {
+  const allElements = getAllFormElements(formGroupEl);
+  return allElements.filter((/** @type {LionField} */ elm) => elm.tagName !== 'LION-OPTION');
+}

package/components/form-integrations/test/helpers/umbrella-form.js

@@ -0,0 +1,171 @@
+import { LitElement, html } from 'lit';
+import { Required, MinLength } from '@lion/ui/form-core.js';
+import '@lion/ui/define/lion-form.js';
+import '@lion/ui/define/lion-fieldset.js';
+import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-input-date.js';
+import '@lion/ui/define/lion-input-datepicker.js';
+import '@lion/ui/define/lion-input-amount.js';
+import '@lion/ui/define/lion-input-iban.js';
+import '@lion/ui/define/lion-input-email.js';
+import '@lion/ui/define/lion-input-tel.js';
+import '@lion/ui/define/lion-input-tel-dropdown.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-radio-group.js';
+import '@lion/ui/define/lion-select.js';
+import '@lion/ui/define/lion-select-rich.js';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-combobox.js';
+import '@lion/ui/define/lion-input-range.js';
+import '@lion/ui/define/lion-textarea.js';
+import '@lion/ui/define/lion-button.js';
+import '@lion/ui/define/lion-switch.js';
+import '@lion/ui/define/lion-input-stepper.js';
+
+export class UmbrellaForm extends LitElement {
+  get _lionFormNode() {
+    return /** @type {import('../../../form/src/LionForm.js').LionForm} */ (
+      this.shadowRoot?.querySelector('lion-form')
+    );
+  }
+
+  /**
+   * @param {string} v
+   */
+  set serializedValue(v) {
+    this.__serializedValue = v;
+  }
+
+  render() {
+    return html`
+      <lion-form .serializedValue="${this.__serializedValue}">
+        <form>
+          <lion-fieldset name="full_name">
+            <lion-input
+              name="first_name"
+              label="First Name"
+              .validators="${[new Required()]}"
+            ></lion-input>
+            <lion-input
+              name="last_name"
+              label="Last Name"
+              .validators="${[new Required()]}"
+            ></lion-input>
+          </lion-fieldset>
+          <lion-input-date
+            name="date"
+            label="Date of application"
+            .modelValue="${new Date('2000-12-12')}"
+            .validators="${[new Required()]}"
+          ></lion-input-date>
+          <lion-input-datepicker
+            name="datepicker"
+            label="Date to be picked"
+            .modelValue="${new Date('2020-12-12')}"
+            .validators="${[new Required()]}"
+          ></lion-input-datepicker>
+          <lion-textarea
+            name="bio"
+            label="Biography"
+            .validators="${[new Required(), new MinLength(10)]}"
+            help-text="Please enter at least 10 characters"
+          ></lion-textarea>
+          <lion-input-amount name="money" label="Money"></lion-input-amount>
+          <lion-input-iban name="iban" label="Iban"></lion-input-iban>
+          <lion-input-email name="email" label="Email"></lion-input-email>
+          <lion-input-tel name="tel" label="Telephone Number"></lion-input-tel>
+          <lion-input-tel-dropdown
+            name="tel-dropdown"
+            label="Telephone Number with dropdown list"
+          ></lion-input-tel-dropdown>
+          <lion-checkbox-group
+            label="What do you like?"
+            name="checkers"
+            .validators="${[new Required()]}"
+          >
+            <lion-checkbox .choiceValue=${'foo'} checked label="I like foo"></lion-checkbox>
+            <lion-checkbox .choiceValue=${'bar'} checked label="I like bar"></lion-checkbox>
+            <lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
+          </lion-checkbox-group>
+          <lion-radio-group
+            name="dinosaurs"
+            label="Favorite dinosaur"
+            .validators="${[new Required()]}"
+          >
+            <lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
+            <lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
+            <lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
+          </lion-radio-group>
+          <lion-listbox name="favoriteFruit" label="Favorite fruit">
+            <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+            <lion-option checked .choiceValue=${'Banana'}>Banana</lion-option>
+            <lion-option .choiceValue=${'Mango'}>Mango</lion-option>
+          </lion-listbox>
+          <lion-combobox
+            .validators="${[new Required()]}"
+            name="favoriteMovie"
+            label="Favorite movie"
+            autocomplete="both"
+          >
+            <lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
+            <lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
+            <lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
+            <lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
+            <lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
+            <lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
+          </lion-combobox>
+          <lion-select-rich name="favoriteColor" label="Favorite color">
+            <lion-option .choiceValue=${'red'}>Red</lion-option>
+            <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
+            <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+          </lion-select-rich>
+          <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
+            <select slot="input">
+              <option value="1">Fire up that loud</option>
+              <option value="2">Another round of shots...</option>
+              <option value="3">Drop down for what?</option>
+            </select>
+          </lion-select>
+          <lion-input-range
+            name="range"
+            min="1"
+            max="5"
+            .modelValue="${2.3}"
+            unit="%"
+            step="0.1"
+            label="Input range"
+          ></lion-input-range>
+          <lion-checkbox-group
+            .mulipleChoice="${false}"
+            name="terms"
+            .validators="${[new Required()]}"
+          >
+            <lion-checkbox
+              .choiceValue="agreed"
+              label="I blindly accept all terms and conditions"
+            ></lion-checkbox>
+          </lion-checkbox-group>
+          <lion-switch name="notifications" label="Notifications"></lion-switch>
+          <lion-input-stepper max="5" min="0" name="rsvp">
+            <label slot="label">RSVP</label>
+            <div slot="help-text">Max. 5 guests</div>
+          </lion-input-stepper>
+          <lion-textarea name="comments" label="Comments"></lion-textarea>
+          <div class="buttons">
+            <lion-button-submit id="submit_button" raised>Submit</lion-button-submit>
+            <lion-button-reset
+              id="reset_button"
+              type="button"
+              raised
+              @click="${() => {
+                this._lionFormNode.resetGroup();
+              }}"
+              >Reset</lion-button-reset
+            >
+          </div>
+        </form>
+      </lion-form>
+    `;
+  }
+}
+customElements.define('umbrella-form', UmbrellaForm);