@lion/ui 0.25.0 → 0.26.0

package/components/input-amount/test-suites/lion-input-amount.suite.js

@@ -0,0 +1,418 @@
+import { html } from 'lit/static-html.js';
+import { unsafeStatic, aTimeout, expect, fixture } from '@open-wc/testing';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
+import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
+import { getInputMembers } from '@lion/ui/input-test-helpers.js';
+import { LionInputAmount, formatAmount, parseAmount } from '@lion/ui/input-amount.js';
+import { mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
+import sinon from 'sinon';
+import '@lion/ui/define/lion-input-amount.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @typedef {import('../../input/src/LionInput.js').LionInput} LionInput
+ */
+
+/**
+ * Runs the `lion-input-amount` behavioural suite, moved out of `test/lion-input-amount.test.js` so a Subclasser can run
+ * the same guarantees against its own element. Pass `tagString` to point it at your
+ * registered tag; see docs/guides/principles/test-suites.md.
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * itself uses `classes` everywhere).
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
+ */
+export function runInputAmountSuite({
+  classes: { host = LionInputAmount } = {},
+  tagString: legacyTagString,
+} = {}) {
+  const tagString = resolveSuiteTag(host, legacyTagString);
+  const tag = unsafeStatic(tagString);
+  describe('<lion-input-amount>', () => {
+    const localize = getLocalizeManager();
+    beforeEach(() => {
+      localizeTearDown();
+    });
+    it('uses formatAmount for formatting', async () => {
+      const el = /** @type {LionInputAmount} */ await fixture(`<${tagString}></${tagString}>`);
+      expect(el.formatter).to.equal(formatAmount);
+    });
+    it('formatAmount uses currency provided on webcomponent', async () => {
+      // JOD displays 3 fraction digits by default
+      localize.locale = 'fr-FR';
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`<${tag} currency="JOD" .modelValue="${123}"></${tag}>`);
+      expect(el.formattedValue).to.equal('123,000');
+    });
+    it('formatAmount uses locale provided in formatOptions', async () => {
+      let el =
+        /** @type {LionInputAmount} */
+        await fixture(html`
+          <${tag}
+            .formatOptions="${{
+              locale: 'en-GB',
+            }}"
+            .modelValue="${123}"
+          ></${tag}>
+        `);
+      expect(el.formattedValue).to.equal('123.00');
+      el = await fixture(html`
+        <${tag}
+          .formatOptions="${{
+            locale: 'nl-NL',
+          }}"
+          .modelValue="${123}"
+        ></${tag}>
+      `);
+      expect(el.formattedValue).to.equal('123,00');
+    });
+    it('supports overriding decimalSeparator in formatOptions', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`<${tag}
+            .formatOptions="${{
+              locale: 'nl-NL',
+              decimalSeparator: '.',
+            }}"
+            .modelValue="${99}"
+          ></${tag}>`);
+      expect(el.formattedValue).to.equal('99.00');
+    });
+    it('supports overriding groupSeparator in formatOptions', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`<${tag}
+            .formatOptions="${{
+              locale: 'nl-NL',
+              groupSeparator: ',',
+              decimalSeparator: '.',
+            }}"
+            .modelValue="${9999}"
+          ></${tag}>`);
+      expect(el.formattedValue).to.equal('9,999.00');
+    });
+    it('ignores global locale change if property is provided', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`
+          <${tag} .modelValue=${123456.78} .locale="${'en-GB'}"></${tag}>
+        `);
+      expect(el.formattedValue).to.equal('123,456.78'); // British
+      localize.locale = 'nl-NL';
+      await aTimeout(0);
+      expect(el.formattedValue).to.equal('123,456.78'); // should stay British
+    });
+    it('reformats the formattedValue when locale property changes', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`
+          <${tag} .modelValue=${123456.78} .locale="${'en-GB'}"></${tag}>
+        `);
+      expect(el.formattedValue).to.equal('123,456.78');
+      el.locale = 'nl-NL';
+      await el.updateComplete;
+      expect(el.formattedValue).to.equal('123.456,78');
+    });
+    it('reformats the formattedValue with global locale if locale property is unset', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`
+          <${tag} .modelValue=${123456.78} .locale="${'nl-NL'}"></${tag}>
+        `);
+      expect(el.formattedValue).to.equal('123.456,78');
+      el.locale = '';
+      await el.updateComplete;
+      expect(el.formattedValue).to.equal('123,456.78');
+    });
+    it('uses parseAmount for parsing', async () => {
+      const el = /** @type {LionInputAmount} */ await fixture(`<${tagString}></${tagString}>`);
+      expect(el.parser).to.equal(parseAmount);
+    });
+    it('sets correct amount of decimals', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`<${tag} .modelValue=${100.123}></${tag}>`);
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
+      expect(_inputNode.value).to.equal('100.12');
+    });
+    it('formats with locale when formatOptions.mode is "user-edited" and value has three decimal places', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`<${tag}
+            .modelValue=${123456.78}
+            currency="EUR"
+            .formatOptions="${{
+              locale: 'nl-NL',
+            }}"
+          ></${tag}>`);
+      const parserSpy = sinon.spy(el, 'parser');
+      const formatterSpy = sinon.spy(el, 'formatter');
+
+      // @ts-expect-error [allow-protected] in test
+      expect(el._inputNode.value).to.equal('123.456,78');
+
+      // When editing an already existing value, we interpet the separators as they are
+      mimicUserInput(el, '123.456');
+      expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(el.modelValue).to.equal(123456);
+      expect(el.formattedValue).to.equal('123.456,00');
+
+      // When editing an already existing value, we interpet the separators as they are.
+      // However, only when the decimal places are 3 or more.
+      mimicUserInput(el, '123.456.00');
+      expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(el.modelValue).to.equal(123456);
+      expect(el.formattedValue).to.equal('123.456,00');
+
+      // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
+      // When a user finished editing, the default should be restored.
+      // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
+      el.modelValue = 1234;
+      expect(el.formattedValue).to.equal('1.234,00');
+      expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
+    });
+    it('formats with heuristic when formatOptions.mode is "user-edited" and value has two decimal places', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`<${tag}
+            .modelValue=${64}
+            currency="EUR"
+            .formatOptions="${{
+              locale: 'en-GB',
+            }}"
+          ></${tag}>`);
+      const parserSpy = sinon.spy(el, 'parser');
+      const formatterSpy = sinon.spy(el, 'formatter');
+      expect(el.formattedValue).to.equal('64.00');
+      // @ts-expect-error [allow-protected] in test
+      expect(el._inputNode.value).to.equal('64.00');
+
+      // When editing an already existing value, we interpret the separators based on decimal places when there's 1 or
+      // less separator in total (otherwise we would accidentally multiply or divide by 1000)
+      mimicUserInput(el, '64,00');
+      expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(el.modelValue).to.equal(64);
+      expect(el.formattedValue).to.equal('64.00');
+      mimicUserInput(el, '64,0');
+      expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+      expect(el.modelValue).to.equal(64);
+      expect(el.formattedValue).to.equal('64.00');
+
+      // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
+      // When a user finished editing, the default should be restored.
+      // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
+      el.modelValue = 1234;
+      expect(el.formattedValue).to.equal('1,234.00');
+      expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
+    });
+    it('sets inputmode attribute to decimal', async () => {
+      const el = /** @type {LionInputAmount} */ await fixture(`<${tagString}></${tagString}>`);
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
+      expect(_inputNode.getAttribute('inputmode')).to.equal('decimal');
+    });
+    it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => {
+      const el = /** @type {LionInputAmount} */ await fixture(`<${tagString}></${tagString}>`);
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
+      expect(_inputNode.type).to.equal('text');
+    });
+    describe('currencyLabel', async () => {
+      it('shows no currency by default', async () => {
+        const el = await fixture(`<${tagString}></${tagString}>`);
+        expect(Array.from(el.children).find((child) => child.slot === 'after')).to.be.undefined;
+      });
+      it('displays currency if provided', async () => {
+        const el =
+          /** @type {LionInputAmount} */
+          await fixture(`<${tagString} currency="EUR"></${tagString}>`);
+        expect(
+          /** @type {HTMLElement[]} */ Array.from(el.children).find(
+            (child) => child.slot === 'after',
+          )?.innerText,
+        ).to.equal('EUR');
+      });
+      it('displays correct currency for TRY if locale is tr-TR', async () => {
+        localize.locale = 'tr-TR';
+        const el =
+          /** @type {LionInputAmount} */
+          await fixture(`<${tagString} currency="TRY"></${tagString}>`);
+        expect(
+          /** @type {HTMLElement[]} */ Array.from(el.children).find(
+            (child) => child.slot === 'after',
+          )?.innerText,
+        ).to.equal('TL');
+      });
+      it('displays currency symbol if provided via formatOptions', async () => {
+        const el =
+          /** @type {LionInputAmount} */
+          await fixture(html`<${tag} currency="EUR" currency-label="€"></${tag}>`);
+        const currLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+          (child) => child.slot === 'after',
+        );
+        expect(currLabel?.innerText).to.equal('€');
+        expect(currLabel?.getAttribute('aria-label')).to.equal('€ (euros)');
+      });
+      it('can update currency', async () => {
+        const el =
+          /** @type {LionInputAmount} */
+          await fixture(`<${tagString} currency="EUR"></${tagString}>`);
+        el.currency = 'USD';
+        await el.updateComplete;
+        expect(
+          /** @type {HTMLElement[]} */ Array.from(el.children).find(
+            (child) => child.slot === 'after',
+          )?.innerText,
+        ).to.equal('USD');
+      });
+    });
+    it('reformats on locale changes', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(html`<${tag}
+            label="Price"
+            currency="EUR"
+            .modelValue=${123.45}
+          ></${tag}>`);
+      expect(el.formattedValue).to.equal('123.45');
+      localize.locale = 'nl-NL';
+      await el.updateComplete;
+      // TODO find out why the localize needs to be loaded for the feedbackNode
+      // @ts-ignore [allow-protected] in test
+      await el._feedbackNode.localizeNamespacesLoaded;
+      expect(el.formattedValue).to.equal('123,45');
+    });
+    it('removes the currency label when currency switches from EUR to undefined', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`<${tagString} currency="EUR"></${tagString}>`);
+      expect(
+        /** @type {HTMLElement[]} */ Array.from(el.children).find((child) => child.slot === 'after')
+          ?.innerText,
+      ).to.equal('EUR');
+      el.currency = undefined;
+      await el.updateComplete;
+      expect(
+        /** @type {HTMLElement[]} */ Array.from(el.children).find(
+          (child) => child.slot === 'after',
+        ),
+      ).to.be.undefined;
+    });
+    it('adds the currency label when currency switches from undefined to EUR', async () => {
+      const el = /** @type {LionInputAmount} */ await fixture(`<${tagString}></${tagString}>`);
+      expect(
+        /** @type {HTMLElement[]} */ Array.from(el.children).find(
+          (child) => child.slot === 'after',
+        ),
+      ).to.be.undefined;
+      el.currency = 'EUR';
+      await el.updateComplete;
+      const currLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'after',
+      );
+      expect(currLabel?.innerText).to.equal('EUR');
+      expect(currLabel?.getAttribute('aria-label')).to.equal('EUR (euros)');
+    });
+    it('sets currency label on the after element', async () => {
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`
+          <${tagString}>
+            <span slot="after" id="123">Currency, please</span>
+          </${tagString}>`);
+      const mySlotLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'after',
+      );
+      expect(mySlotLabel?.id).to.equal('123');
+      el.currency = 'EUR';
+      await el.updateComplete;
+      const currLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'after',
+      );
+      expect(currLabel).to.equal(mySlotLabel);
+      expect(currLabel?.id).to.equal('123');
+      expect(currLabel?.innerText).to.equal('EUR');
+    });
+    it('can override the currency label slot', async () => {
+      customElements.define(
+        'my-input-amount',
+        class extends LionInputAmount {
+          constructor() {
+            super();
+            // Put the currency label in the suffix slot
+            this._currencyDisplayNodeSlot = 'suffix';
+          }
+        },
+      );
+      const el = await fixture(html`<my-input-amount currency="EUR"></my-input-amount>`);
+      expect(
+        /** @type {HTMLElement[]} */ Array.from(el.children).find(
+          (child) => child.slot === 'suffix',
+        )?.innerText,
+      ).to.equal('EUR');
+    });
+    describe('Accessibility', () => {
+      it('is accessible', async () => {
+        const el = await fixture(`<${tagString}><label slot="label">Label</label></${tagString}>`);
+        await expect(el).to.be.accessible();
+      });
+      it('is accessible when readonly', async () => {
+        const el = await fixture(
+          `<${tagString} readonly .modelValue=${'123'}><label slot="label">Label</label></${tagString}>`,
+        );
+        await expect(el).to.be.accessible();
+      });
+      it('is accessible when disabled', async () => {
+        const el = await fixture(
+          `<${tagString} disabled><label slot="label">Label</label></${tagString}>`,
+        );
+        await expect(el).to.be.accessible();
+      });
+      it('adds currency id to aria-labelledby of input', async () => {
+        const el =
+          /** @type {LionInputAmount} */
+          await fixture(`<${tagString} currency="EUR"></${tagString}>`);
+        const label = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+          (child) => child.slot === 'after',
+        );
+        expect(label?.getAttribute('data-label')).to.be.not.null;
+        const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
+        expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
+      });
+      it('adds currency id to aria-labelledby of input when currency switches from undefined', async () => {
+        const el = /** @type {LionInputAmount} */ await fixture(`<${tagString}></${tagString}>`);
+        el.currency = 'EUR';
+        let resolved = await el.updateComplete;
+        while (!resolved) {
+          resolved = await el.updateComplete;
+        }
+        const label = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+          (child) => child.slot === 'after',
+        );
+        const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
+        expect(label?.id).not.equal('');
+        expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
+      });
+      it('adds an aria-label to currency slot', async () => {
+        const el =
+          /** @type {LionInputAmount} */
+          await fixture(`<${tagString} currency="EUR"></${tagString}>`);
+        const label = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+          (child) => child.slot === 'after',
+        );
+        expect(label?.getAttribute('aria-label')).to.equal('EUR (euros)');
+        el.currency = 'USD';
+        await el.updateComplete;
+        expect(label?.getAttribute('aria-label')).to.equal('USD (US dollars)');
+        el.currency = 'PHP';
+        await el.updateComplete;
+        // TODO: Chrome Intl now thinks this should be pesos instead of pisos. They're probably right.
+        // We could add this to our normalize layer so other browsers also do it correctly?
+        // expect(el._currencyDisplayNode?.getAttribute('aria-label')).to.equal('Philippine pisos');
+      });
+    });
+  });
+}

package/components/input-amount-dropdown/test/LionInputAmountDropdown.test.js

@@ -60,10 +60,11 @@ class WithFormControlInputAmountDropdown extends ScopedElementsMixin(LionInputAm
 }
 runInputAmountDropdownSuite();
 describe('WithFormControlInputAmountDropdown', () => {
-  // @ts-expect-error
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputAmountDropdownSuite({
-    klass: WithFormControlInputAmountDropdown,
+    classes: {
+      host: WithFormControlInputAmountDropdown,
+    },
   });
   it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
     class InputAmountDropdownMac extends LionInputAmountDropdown {

package/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.js

@@ -1,9 +1,11 @@
 import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
+import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
 import '@lion/ui/define/lion-input-amount-dropdown.js';
-const tagString = 'lion-input-amount-dropdown';
 describe('<lion-input-amount-dropdown> integrations', () => {
   runFormatMixinSuite({
-    tagString,
+    classes: {
+      host: LionInputAmountDropdown,
+    },
     modelValueType: Object,
     parser: (value) => value.replace('foo: ', ''),
     valueToggler: ({ toggleValue, viewValue }) => {

package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -9,6 +9,7 @@ import {
   unsafeStatic,
 } from '@open-wc/testing';
 import sinon from 'sinon';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { mimicUserChangingDropdown } from '../test-helpers/mimicUserChangingDropdown.js';
 
@@ -37,16 +38,17 @@ function getDropdownValue(dropdownEl) {
 }
 
 /**
- * @param {{ klass:LionInputAmountDropdown }} config
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * itself uses `classes` everywhere).
+ * @param {{ classes?: Record<string, CustomElementConstructor>, klass?: typeof LionInputAmountDropdown, tagString?: string }} config
  */
-// @ts-expect-error
 export function runInputAmountDropdownSuite(
-  { klass } = {
+  { classes = {}, klass, tagString } = {
     klass: LionInputAmountDropdown,
   },
 ) {
   // @ts-ignore
-  const tagName = defineCE(/** @type {* & HTMLElement} */ class extends klass {});
+  const tagName = resolveSuiteTag(classes.host, tagString, klass);
   const tag = unsafeStatic(tagName);
   describe('LionInputAmountDropdown', () => {
     it('syncs value of dropdown on init if input has no value', async () => {

package/components/input-date/test/lion-input-date-integrations.test.js

@@ -2,15 +2,19 @@ import {
   runFormatMixinSuite,
   runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
+import { LionInputDate } from '@lion/ui/input-date.js';
 import '@lion/ui/define/lion-input-date.js';
-const tagString = 'lion-input-date';
 describe('<lion-input-date> integrations', () => {
   runInteractionStateMixinSuite({
-    tagString,
+    classes: {
+      host: LionInputDate,
+    },
     allowedModelValueTypes: [Date],
   });
   runFormatMixinSuite({
-    tagString,
+    classes: {
+      host: LionInputDate,
+    },
     modelValueType: Date,
   });
 });