@lion/ui 0.25.0 → 0.26.0

package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js

@@ -14,11 +14,20 @@ import {
 } from '@open-wc/testing';
 import sinon from 'sinon';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
+import { resolveSuiteTag } from '../../../core/test-helpers/resolveSuiteTag.js';
 
 /**
- * @param {{ tagString?: string, childTagString?:string }} [cfg]
+ * Runs the form-group suite. The caller hands the elements it should run against - `host` is the
+ * group, `child` what sits inside it; anything left out keeps the class this suite builds from the
+ * mixins.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement; child: SuiteElement}>} [customConfig]
  */
-export function runFormGroupMixinSuite(cfg = {}) {
+export function runFormGroupMixinSuite({
+  classes = {},
+  tagString: legacyTagString,
+  childTagString: legacyChildTagString,
+} = {}) {
   class FormChild extends LionField {
     // @ts-ignore
     get slots() {
@@ -28,7 +37,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
       };
     }
   }
-  const childTagString = cfg.childTagString || defineCE(FormChild);
+  const childTagString = resolveSuiteTag(classes?.child, legacyChildTagString, FormChild);
   class FormGroup extends FormGroupMixin(LitElement) {
     constructor() {
       super();
@@ -38,7 +47,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
       this._repropagationRole = 'fieldset'; // configures FormControlMixin
     }
   }
-  const tagString = cfg.tagString || defineCE(FormGroup);
+  const tagString = resolveSuiteTag(classes?.host, legacyTagString, FormGroup);
   const tag = unsafeStatic(tagString);
   const childTag = unsafeStatic(childTagString);
   const inputSlots = html`

package/components/icon/test/lion-icon.test.js

@@ -1,188 +1,2 @@
-import { nothing, html } from 'lit';
-import { until } from 'lit/directives/until.js';
-import { aTimeout, expect, fixture as _fixture, fixtureSync } from '@open-wc/testing';
-import '@lion/ui/define/lion-icon.js';
-import { icons } from '@lion/ui/icon.js';
-import hammerSvg from './hammer.svg.js';
-import heartSvg from './heart.svg.js';
-
-/**
- * @typedef {(strings: TemplateStringsArray, ... expr: string[]) => string} TaggedTemplateLiteral
- * @typedef {import('../src/LionIcon.js').LionIcon} LionIcon
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionIcon>} */ _fixture;
-describe('lion-icon', () => {
-  it('supports svg icon as a function which recieves a tag function as an argument and returns a tagged template literal', async () => {
-    const iconFunction = /** @param {TaggedTemplateLiteral} tag */ (tag) =>
-      tag`<svg data-test-id="svg"></svg>`;
-    const el = await fixture(html`<lion-icon .svg=${iconFunction}></lion-icon>`);
-    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
-  });
-  it('is hidden when attribute hidden is true', async () => {
-    const iconFunction = /** @param {TaggedTemplateLiteral} tag */ (tag) =>
-      tag`<svg data-test-id="svg"></svg>`;
-    const el = await fixture(html`<lion-icon .svg=${iconFunction} hidden></lion-icon>`);
-    expect(el).not.to.be.displayed;
-  });
-  it('supports svg icon as a lit-html template', async () => {
-    const icon = html`<svg data-test-id="svg"></svg>`;
-    const el = await fixture(html`<lion-icon .svg=${icon}></lion-icon>`);
-    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
-  });
-  it('does not support string svg icon', async () => {
-    const errorMessage =
-      'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"';
-    expect(() => {
-      fixtureSync(html`<lion-icon .svg=${'<svg></svg>'}></lion-icon>`);
-    }).to.throw(Error, errorMessage);
-    expect(() => {
-      fixtureSync(html`<lion-icon .svg=${() => '<svg></svg>'}></lion-icon>`);
-    }).to.throw(Error, errorMessage);
-  });
-  it('displays an svg icon with an aria label attribute', async () => {
-    const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
-    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
-    expect(el.getAttribute('role')).to.equal('img');
-    expect(el.getAttribute('aria-label')).to.equal('Love');
-    expect(el.getAttribute('aria-hidden')).to.equal('false');
-  });
-  it('displays an svg icon with an aria hidden attribute', async () => {
-    const el = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
-    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
-    expect(el.getAttribute('aria-hidden')).to.equal('true');
-    expect(el.hasAttribute('aria-label')).to.equal(false);
-  });
-  it('is accessible with an aria label', async () => {
-    const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
-    await expect(el).to.be.accessible();
-  });
-  it('is accessible without an aria label', async () => {
-    const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
-    await expect(el).to.be.accessible();
-  });
-  it('expect the svg icon to be aria-hidden', async () => {
-    const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
-    expect(icon.children[0].getAttribute('aria-hidden')).to.equal('true');
-  });
-  it('expects svg-icons to have the attribute `focusable="false"` so the icon doesn\'t appear in tab-order in IE/Edge', async () => {
-    const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
-    expect(icon.children[0].getAttribute('focusable')).to.equal('false');
-  });
-  it('can change the displayed icon', async () => {
-    const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
-    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
-    el.svg = hammerSvg;
-    await el.updateComplete;
-    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
-  });
-  it('can add or remove the aria-label attribute', async () => {
-    const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
-    const elHammer = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
-
-    // verify initial values
-    expect(el.getAttribute('aria-label')).to.equal('Love');
-    expect(el.getAttribute('aria-hidden')).to.equal('false');
-    expect(elHammer.getAttribute('aria-hidden')).to.equal('true');
-    expect(elHammer.hasAttribute('aria-label')).to.equal(false);
-
-    // swap label and hidden on both icons
-    el.ariaLabel = '';
-    elHammer.ariaLabel = 'Hammer';
-    await el.updateComplete;
-    expect(el.getAttribute('aria-hidden')).to.equal('true');
-    expect(el.hasAttribute('aria-label')).to.equal(false);
-    await elHammer.updateComplete;
-    expect(elHammer.getAttribute('aria-label')).to.equal('Hammer');
-    expect(elHammer.getAttribute('aria-hidden')).to.equal('false');
-  });
-  it('supports dynamic icons using until directive', async () => {
-    const svgLoading = new Promise((resolve) => {
-      window.addEventListener('importDone', resolve);
-    });
-    const el = await fixture(html`
-      <lion-icon
-        .svg=${until(
-          import('./heart.svg.js').then((e) => {
-            dispatchEvent(new CustomEvent('importDone'));
-            return e.default;
-          }),
-          html``,
-        )}
-        aria-label="Love"
-      ></lion-icon>
-    `);
-    await svgLoading;
-    // We need to await the until directive is resolved and rendered to the dom
-    // You can not use updateComplete as until renders on it's own
-    await aTimeout(0);
-    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
-  });
-  it('does not render "undefined" if changed from valid input to undefined', async () => {
-    const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
-    await el.updateComplete;
-    el.svg = nothing;
-    await el.updateComplete;
-    expect(el.innerHTML).to.equal('<!---->'); // don't use lightDom.to.equal(''), it gives false positives
-  });
-  it('does not render "null" if changed from valid input to null', async () => {
-    const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
-    await el.updateComplete;
-    el.svg = nothing;
-    await el.updateComplete;
-    expect(el.innerHTML).to.equal('<!---->'); // don't use lightDom.to.equal(''), it gives false positives
-  });
-  it('supports icons using an icon id', async () => {
-    try {
-      icons.addIconResolver('foo', () => heartSvg);
-      const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
-      expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-heart');
-    } finally {
-      icons.removeIconResolver('foo');
-    }
-  });
-  it('clears rendered icon when icon id is removed', async () => {
-    try {
-      icons.addIconResolver('foo', () => heartSvg);
-      const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
-      await el.updateComplete;
-      el.removeAttribute('icon-id');
-      await el.updateComplete;
-      expect(el.children.length).to.equal(0);
-    } finally {
-      icons.removeIconResolver('foo');
-    }
-  });
-  it('does not create race conditions when icon changed while resolving icon id', async () => {
-    try {
-      icons.addIconResolver(
-        'foo',
-        () =>
-          /** @type {Promise<TemplateResult>} */
-          // eslint-disable-next-line no-promise-executor-return
-          new Promise((resolve) => setTimeout(() => resolve(heartSvg))),
-      );
-      icons.addIconResolver(
-        'bar',
-        () =>
-          /** @type {Promise<TemplateResult>} */
-          // eslint-disable-next-line no-promise-executor-return
-          new Promise((resolve) => setTimeout(() => resolve(hammerSvg))),
-      );
-      const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
-      await el.updateComplete;
-      el.iconId = 'bar:lorem:ipsum';
-      await el.updateComplete;
-      await aTimeout(4);
-
-      // heart is still loading at this point, but hammer came later so that should be later
-      expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-hammer');
-      await aTimeout(10);
-      // heart finished loading, but it should not be rendered because hammer came later
-      expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-hammer');
-    } finally {
-      icons.removeIconResolver('foo');
-      icons.removeIconResolver('bar');
-    }
-  });
-});
+import { runIconSuite } from '../test-suites/lion-icon.suite.js';
+runIconSuite();

package/components/icon/test-suites/lion-icon.suite.js

@@ -0,0 +1,206 @@
+import { html } from 'lit/static-html.js';
+import { nothing } from 'lit';
+import { until } from 'lit/directives/until.js';
+import { unsafeStatic, aTimeout, expect, fixture as _fixture, fixtureSync } from '@open-wc/testing';
+import '@lion/ui/define/lion-icon.js';
+import { LionIcon, icons } from '@lion/ui/icon.js';
+import hammerSvg from '../test/hammer.svg.js';
+import heartSvg from '../test/heart.svg.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @typedef {(strings: TemplateStringsArray, ... expr: string[]) => string} TaggedTemplateLiteral
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionIcon>} */ _fixture;
+
+/**
+ * Runs the `lion-icon` behavioural suite, moved out of `test/lion-icon.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 runIconSuite({
+  classes: { host = LionIcon } = {},
+  tagString: legacyTagString,
+} = {}) {
+  const tagString = resolveSuiteTag(host, legacyTagString);
+  const tag = unsafeStatic(tagString);
+  describe('lion-icon', () => {
+    it('supports svg icon as a function which recieves a tag function as an argument and returns a tagged template literal', async () => {
+      const iconFunction = /** @param {TaggedTemplateLiteral} tagFn */ (tagFn) =>
+        tagFn`<svg data-test-id="svg"></svg>`;
+      const el = await fixture(html`<${tag} .svg=${iconFunction}></${tag}>`);
+      expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
+    });
+    it('is hidden when attribute hidden is true', async () => {
+      const iconFunction = /** @param {TaggedTemplateLiteral} tagFn */ (tagFn) =>
+        tagFn`<svg data-test-id="svg"></svg>`;
+      const el = await fixture(html`<${tag} .svg=${iconFunction} hidden></${tag}>`);
+      expect(el).not.to.be.displayed;
+    });
+    it('supports svg icon as a lit-html template', async () => {
+      const icon = html`<svg data-test-id="svg"></svg>`;
+      const el = await fixture(html`<${tag} .svg=${icon}></${tag}>`);
+      expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
+    });
+    it('does not support string svg icon', async () => {
+      const errorMessage =
+        'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"';
+      expect(() => {
+        fixtureSync(html`<${tag} .svg=${'<svg></svg>'}></${tag}>`);
+      }).to.throw(Error, errorMessage);
+      expect(() => {
+        fixtureSync(html`<${tag} .svg=${() => '<svg></svg>'}></${tag}>`);
+      }).to.throw(Error, errorMessage);
+    });
+    it('displays an svg icon with an aria label attribute', async () => {
+      const el = await fixture(html`<${tag} .svg=${heartSvg} aria-label="Love"></${tag}>`);
+      expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
+      expect(el.getAttribute('role')).to.equal('img');
+      expect(el.getAttribute('aria-label')).to.equal('Love');
+      expect(el.getAttribute('aria-hidden')).to.equal('false');
+    });
+    it('displays an svg icon with an aria hidden attribute', async () => {
+      const el = await fixture(html`<${tag} .svg=${hammerSvg}></${tag}>`);
+      expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
+      expect(el.getAttribute('aria-hidden')).to.equal('true');
+      expect(el.hasAttribute('aria-label')).to.equal(false);
+    });
+    it('is accessible with an aria label', async () => {
+      const el = await fixture(html`<${tag} .svg=${heartSvg} aria-label="Love"></${tag}>`);
+      await expect(el).to.be.accessible();
+    });
+    it('is accessible without an aria label', async () => {
+      const el = await fixture(html`<${tag} .svg=${heartSvg}></${tag}>`);
+      await expect(el).to.be.accessible();
+    });
+    it('expect the svg icon to be aria-hidden', async () => {
+      const icon = await fixture(html`<${tag} .svg=${heartSvg} aria-label="Love"></${tag}>`);
+      expect(icon.children[0].getAttribute('aria-hidden')).to.equal('true');
+    });
+    it('expects svg-icons to have the attribute `focusable="false"` so the icon doesn\'t appear in tab-order in IE/Edge', async () => {
+      const icon = await fixture(html`<${tag} .svg=${heartSvg} aria-label="Love"></${tag}>`);
+      expect(icon.children[0].getAttribute('focusable')).to.equal('false');
+    });
+    it('can change the displayed icon', async () => {
+      const el = await fixture(html`<${tag} .svg=${heartSvg} aria-label="Love"></${tag}>`);
+      expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
+      el.svg = hammerSvg;
+      await el.updateComplete;
+      expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
+    });
+    it('can add or remove the aria-label attribute', async () => {
+      const el = await fixture(html`<${tag} .svg=${heartSvg} aria-label="Love"></${tag}>`);
+      const elHammer = await fixture(html`<${tag} .svg=${hammerSvg}></${tag}>`);
+
+      // verify initial values
+      expect(el.getAttribute('aria-label')).to.equal('Love');
+      expect(el.getAttribute('aria-hidden')).to.equal('false');
+      expect(elHammer.getAttribute('aria-hidden')).to.equal('true');
+      expect(elHammer.hasAttribute('aria-label')).to.equal(false);
+
+      // swap label and hidden on both icons
+      el.ariaLabel = '';
+      elHammer.ariaLabel = 'Hammer';
+      await el.updateComplete;
+      expect(el.getAttribute('aria-hidden')).to.equal('true');
+      expect(el.hasAttribute('aria-label')).to.equal(false);
+      await elHammer.updateComplete;
+      expect(elHammer.getAttribute('aria-label')).to.equal('Hammer');
+      expect(elHammer.getAttribute('aria-hidden')).to.equal('false');
+    });
+    it('supports dynamic icons using until directive', async () => {
+      const svgLoading = new Promise((resolve) => {
+        window.addEventListener('importDone', resolve);
+      });
+      const el = await fixture(html`
+        <${tag}
+          .svg=${until(
+            import('../test/heart.svg.js').then((e) => {
+              dispatchEvent(new CustomEvent('importDone'));
+              return e.default;
+            }),
+            html``,
+          )}
+          aria-label="Love"
+        ></${tag}>
+      `);
+      await svgLoading;
+      // We need to await the until directive is resolved and rendered to the dom
+      // You can not use updateComplete as until renders on it's own
+      await aTimeout(0);
+      expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
+    });
+    it('does not render "undefined" if changed from valid input to undefined', async () => {
+      const el = await fixture(html`<${tag} .svg=${heartSvg}></${tag}>`);
+      await el.updateComplete;
+      el.svg = nothing;
+      await el.updateComplete;
+      expect(el.innerHTML).to.equal('<!---->'); // don't use lightDom.to.equal(''), it gives false positives
+    });
+    it('does not render "null" if changed from valid input to null', async () => {
+      const el = await fixture(html`<${tag} .svg=${heartSvg}></${tag}>`);
+      await el.updateComplete;
+      el.svg = nothing;
+      await el.updateComplete;
+      expect(el.innerHTML).to.equal('<!---->'); // don't use lightDom.to.equal(''), it gives false positives
+    });
+    it('supports icons using an icon id', async () => {
+      try {
+        icons.addIconResolver('foo', () => heartSvg);
+        const el = await fixture(html`<${tag} icon-id="foo:lorem:ipsum"></${tag}>`);
+        expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-heart');
+      } finally {
+        icons.removeIconResolver('foo');
+      }
+    });
+    it('clears rendered icon when icon id is removed', async () => {
+      try {
+        icons.addIconResolver('foo', () => heartSvg);
+        const el = await fixture(html`<${tag} icon-id="foo:lorem:ipsum"></${tag}>`);
+        await el.updateComplete;
+        el.removeAttribute('icon-id');
+        await el.updateComplete;
+        expect(el.children.length).to.equal(0);
+      } finally {
+        icons.removeIconResolver('foo');
+      }
+    });
+    it('does not create race conditions when icon changed while resolving icon id', async () => {
+      try {
+        icons.addIconResolver(
+          'foo',
+          () =>
+            /** @type {Promise<TemplateResult>} */
+            // eslint-disable-next-line no-promise-executor-return
+            new Promise((resolve) => setTimeout(() => resolve(heartSvg))),
+        );
+        icons.addIconResolver(
+          'bar',
+          () =>
+            /** @type {Promise<TemplateResult>} */
+            // eslint-disable-next-line no-promise-executor-return
+            new Promise((resolve) => setTimeout(() => resolve(hammerSvg))),
+        );
+        const el = await fixture(html`<${tag} icon-id="foo:lorem:ipsum"></${tag}>`);
+        await el.updateComplete;
+        el.iconId = 'bar:lorem:ipsum';
+        await el.updateComplete;
+        await aTimeout(4);
+
+        // heart is still loading at this point, but hammer came later so that should be later
+        expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-hammer');
+        await aTimeout(10);
+        // heart finished loading, but it should not be rendered because hammer came later
+        expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-hammer');
+      } finally {
+        icons.removeIconResolver('foo');
+        icons.removeIconResolver('bar');
+      }
+    });
+  });
+}

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

@@ -3,28 +3,31 @@ import {
   runInteractionStateMixinSuite,
   runNativeTextFieldMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
-import { defineCE } from '@open-wc/testing';
 import { LionInput } from '@lion/ui/input.js';
-const fieldTagString = defineCE(
-  class extends LionInput {
-    get slots() {
-      return {
-        ...super.slots,
-        // LionInput needs to have an _inputNode defined in order to work...
-        input: () => document.createElement('input'),
-      };
-    }
-  },
-);
+class FieldInput extends LionInput {
+  get slots() {
+    return {
+      ...super.slots,
+      // LionInput needs to have an _inputNode defined in order to work...
+      input: () => document.createElement('input'),
+    };
+  }
+}
 describe('<lion-input> integrations', () => {
   runInteractionStateMixinSuite({
-    tagString: fieldTagString,
+    classes: {
+      host: FieldInput,
+    },
   });
   runFormatMixinSuite({
-    tagString: fieldTagString,
+    classes: {
+      host: FieldInput,
+    },
     modelValueType: String,
   });
   runNativeTextFieldMixinSuite({
-    tagString: fieldTagString,
+    classes: {
+      host: FieldInput,
+    },
   });
 });

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

@@ -2,14 +2,18 @@ import {
   runFormatMixinSuite,
   runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
+import { LionInput } from '@lion/ui/input.js';
 import '@lion/ui/define/lion-input.js';
-const tagString = 'lion-input';
 describe('<lion-input> integrations', () => {
   runInteractionStateMixinSuite({
-    tagString,
+    classes: {
+      host: LionInput,
+    },
   });
   runFormatMixinSuite({
-    tagString,
+    classes: {
+      host: LionInput,
+    },
     modelValueType: String,
   });
 });