@lion/ui 0.25.0 → 0.26.0

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

@@ -0,0 +1,445 @@
+import { html } from 'lit/static-html.js';
+import { unsafeStatic, expect, fixture as _fixture, oneEvent } from '@open-wc/testing';
+import sinon from 'sinon';
+import '@lion/ui/define/lion-step.js';
+import { LionStep, LionSteps } from '@lion/ui/steps.js';
+import '@lion/ui/define/lion-steps.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ * @typedef {{[key: string]: any}} UnknownData
+ */
+
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionSteps>} */ _fixture;
+
+/**
+ *
+ * @param {LionSteps} steps
+ * @param {Object} expected
+ * @param {string} expected.transitions
+ * @param {string} expected.statuses
+ * @returns {Promise<void>}
+ */
+async function checkWorkflow(steps, expected) {
+  return new Promise((resolve) => {
+    /** @type {number[]} */
+    const transitions = [];
+    steps.addEventListener('transition', (event) => {
+      const _event = /** @type {CustomEvent} */ event;
+      if (!transitions.length) {
+        transitions.push(_event.detail.fromStep.number);
+      }
+      transitions.push(_event.detail.toStep.number);
+    });
+    setTimeout(() => {
+      // allow time for other transitions to happen if any
+      const transitionsString = transitions.join(' => ');
+      expect(transitionsString).to.equal(expected.transitions, 'transition flow is different');
+      const statusesString = /** @type {LionStep[]} */ Array.from(steps.children)
+        .map((step) => step.status)
+        .join(' ');
+      expect(statusesString).to.equal(expected.statuses, 'steps statuses are different');
+      resolve();
+    });
+  });
+}
+
+/**
+ * Runs the `lion-steps` behavioural suite, moved out of `test/lion-steps.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; step: SuiteElement}, {stepTagString?: any}>} [customConfig]
+ */
+export function runStepsSuite({
+  classes: { host = LionSteps, step = LionStep } = {},
+  tagString: legacyTagString,
+  stepTagString: legacyStepTagString,
+} = {}) {
+  const hostTagString = resolveSuiteTag(host, legacyTagString);
+  const tag = unsafeStatic(hostTagString);
+  const tagNameStep = resolveSuiteTag(step, legacyStepTagString);
+  const tagStep = unsafeStatic(tagNameStep);
+  describe('lion-steps', () => {
+    it('can be instantiated', async () => {
+      const el = await fixture(html`<${tag}> </${tag}>`);
+      expect(el).to.be.a('HTMLElement');
+    });
+    it('is hidden when attribute hidden is true', async () => {
+      const el = await fixture(html`<${tag} hidden> </${tag}>`);
+      expect(el).not.to.be.displayed;
+    });
+    it('has "steps" getter that returns default slot elements', async () => {
+      const el = await fixture(html`
+        <${tag}>
+          <${tagStep}>Step 1</${tagStep}>
+          <${tagStep} initial-step>Step 2</${tagStep}>
+          <other-step-element>Step 3</other-step-element>
+          <steps-extension-element slot="new-slot">e.g. steps indicator</steps-extension-element>
+        </${tag}>
+      `);
+      expect(el.steps.length).to.equal(3);
+      expect(el.steps[0].tagName).to.equal('LION-STEP');
+      expect(el.steps[1].tagName).to.equal('LION-STEP');
+      expect(el.steps[2].tagName).to.equal('OTHER-STEP-ELEMENT');
+    });
+    describe('initialization', () => {
+      it('activates step with an "initial-step" attribute', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep}>Step 1</${tagStep}>
+          </${tag}>
+        `);
+        expect(el.current).to.equal(0);
+        expect(/** @type {LionStep} */ el.children[0].status).to.equal('entered');
+      });
+    });
+    describe('navigation', () => {
+      it('can navigate to the next step', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep}>Step 1</${tagStep}>
+          </${tag}>
+        `);
+        setTimeout(() => el.next());
+        const { detail } = await oneEvent(el, 'transition');
+        expect(detail.fromStep.number).to.equal(0);
+        expect(detail.fromStep.element.innerHTML).to.equal('Step 0');
+        expect(detail.toStep.number).to.equal(1);
+        expect(detail.toStep.element.innerHTML).to.equal('Step 1');
+        expect(el.current).to.equal(1);
+      });
+      it('can navigate to the previous step', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep}>Step 0</${tagStep}>
+            <${tagStep} initial-step>Step 1</${tagStep}>
+          </${tag}>
+        `);
+        setTimeout(() => el.previous());
+        const { detail } = await oneEvent(el, 'transition');
+        expect(detail.fromStep.number).to.equal(1);
+        expect(detail.fromStep.element.innerHTML).to.equal('Step 1');
+        expect(detail.toStep.number).to.equal(0);
+        expect(detail.toStep.element.innerHTML).to.equal('Step 0');
+        expect(el.current).to.equal(0);
+      });
+      it('prevents navigating to the next step if user is on the last step', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep}>Step 0</${tagStep}>
+            <${tagStep} initial-step>Step 1</${tagStep}>
+          </${tag}>
+        `);
+        const cb = sinon.spy();
+        el.addEventListener('transition', cb);
+        expect(() => el.next()).to.throw();
+        expect(cb.callCount).to.equal(0);
+        expect(el.current).to.equal(1);
+      });
+      it('prevents navigating to the previous step if user is on the first step', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep}>Step 1</${tagStep}>
+          </${tag}>
+        `);
+        const cb = sinon.spy();
+        el.addEventListener('transition', cb);
+        expect(() => el.previous()).to.throw();
+        expect(cb.callCount).to.equal(0);
+        expect(el.current).to.equal(0);
+      });
+      it('can navigate to an arbitrary step skipping intermediate conditions', async () => {
+        const el = await fixture(html`
+          <${tag} .data=${{
+            age: 25,
+          }}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
+              >Step 1</${tagStep}
+            >
+            <${tagStep}>Step 2</${tagStep}>
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age < 22}
+              >Step 3</${tagStep}
+            >
+            <${tagStep}>Step 4</${tagStep}>
+          </${tag}>
+        `);
+        el.current = 2;
+        await checkWorkflow(el, {
+          transitions: '0 => 2',
+          statuses: 'left untouched entered untouched untouched',
+        });
+        el.current = 3; // can't enter because of condition move to next available one
+        await checkWorkflow(el, {
+          transitions: '2 => 4',
+          statuses: 'left untouched left skipped entered',
+        });
+      });
+      it('throws an error if current step is set out of bounds', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep}>Step 0</${tagStep}>
+            <${tagStep}>Step 1</${tagStep}>
+            <${tagStep}>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        expect(() => el._goTo(3, el.current)).to.throw(Error, 'There is no step at index 3.');
+        expect(() => el._goTo(-1, el.current)).to.throw(Error, 'There is no step at index -1.');
+      });
+    });
+    describe('events', () => {
+      it('will fire lion-step @leave event before changing .current', async () => {
+        let currentInLeaveEvent;
+        const onLeave = /** @param {Event} ev */ (ev) => {
+          currentInLeaveEvent = /** @type {LionStep} */ ev.target.controller?.current;
+        };
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep} @leave=${onLeave}>Step 0</${tagStep}>
+            <${tagStep}>Step 1</${tagStep}>
+            <${tagStep}>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        el.next();
+        expect(currentInLeaveEvent).to.equal(0);
+      });
+      it('will fire lion-step @enter event after changing .current', async () => {
+        let currentInEnterEvent;
+        const onEnter = /** @param {Event} ev */ (ev) => {
+          currentInEnterEvent = /** @type {LionStep} */ ev.target.controller?.current;
+        };
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep}>Step 0</${tagStep}>
+            <${tagStep} @enter=${onEnter}> Step 1</${tagStep}>
+            <${tagStep}>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        el.next();
+        expect(currentInEnterEvent).to.equal(1);
+      });
+      it('will fire initial @enter event on first step with or with [initial-step] attribute', async () => {
+        const firstEnterSpy = sinon.spy();
+        await fixture(html`
+          <${tag}>
+            <${tagStep} @enter=${firstEnterSpy}>
+              <div>test1</div>
+            </${tagStep}>
+          </${tag}>
+        `);
+        expect(firstEnterSpy).to.have.been.calledOnce;
+        const firstEnterSpyWithInitial = sinon.spy();
+        await fixture(html`
+          <${tag}>
+            <${tagStep} initial-step @enter=${firstEnterSpyWithInitial}>
+              <div>test1</div>
+            </${tagStep}>
+          </${tag}>
+        `);
+        expect(firstEnterSpyWithInitial).to.have.been.calledOnce;
+      });
+      it('will fire initial @enter event only once if [initial-step] is not on first step', async () => {
+        const firstEnterSpy = sinon.spy();
+        const secondEnterSpy = sinon.spy();
+        await fixture(html`
+          <${tag}>
+            <${tagStep} @enter=${firstEnterSpy}>
+              <div>test1</div>
+            </${tagStep}>
+            <${tagStep} initial-step @enter=${secondEnterSpy}>
+              <div>test2</div>
+            </${tagStep}>
+          </${tag}>
+        `);
+        expect(firstEnterSpy).to.not.have.been.called;
+        expect(secondEnterSpy).to.have.been.calledOnce;
+      });
+    });
+    describe('workflow with data and conditions', () => {
+      it('navigates to the next step which passes the condition', async () => {
+        const el = await fixture(html`
+          <${tag} .data=${{
+            age: 25,
+          }}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
+              >Step 1</${tagStep}
+            >
+            <${tagStep}
+              .condition=${/** @param {UnknownData} data */ (data) => data.age >= 18 && data.age < 21}
+              >Step 2</${tagStep}
+            >
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age >= 21}
+              >Step 3</${tagStep}
+            >
+            <${tagStep}>Step 4</${tagStep}>
+          </${tag}>
+        `);
+        setTimeout(() => el.next());
+        await checkWorkflow(el, {
+          transitions: '0 => 3',
+          statuses: 'left skipped skipped entered untouched',
+        });
+      });
+      it('skips steps with failing condition when navigating to the next step', async () => {
+        const el = await fixture(html`
+          <${tag} .data=${{
+            age: 19,
+          }}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
+              >Step 1</${tagStep}
+            >
+            <${tagStep}
+              .condition=${/** @param {UnknownData} data */ (data) => data.age >= 18 && data.age < 21}
+              >Step 2</${tagStep}
+            >
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age >= 21}
+              >Step 3</${tagStep}
+            >
+            <${tagStep}>Step 4</${tagStep}>
+          </${tag}>
+        `);
+        el.next();
+        setTimeout(() => el.next());
+        await checkWorkflow(el, {
+          transitions: '2 => 4',
+          statuses: 'left skipped left skipped entered',
+        });
+      });
+      it('skips steps with failing condition when navigating to the previous step', async () => {
+        const el = await fixture(html`
+          <${tag} .data=${{
+            age: 15,
+          }}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
+              >Step 1</${tagStep}
+            >
+            <${tagStep}
+              .condition=${/** @param {UnknownData} data */ (data) => data.age >= 18 && data.age < 21}
+              >Step 2</${tagStep}
+            >
+            <${tagStep} .condition=${/** @param {UnknownData} data */ (data) => data.age >= 21}
+              >Step 3</${tagStep}
+            >
+            <${tagStep}>Step 4</${tagStep}>
+          </${tag}>
+        `);
+        el.next();
+        el.next();
+        setTimeout(() => el.previous());
+        await checkWorkflow(el, {
+          transitions: '4 => 1',
+          statuses: 'left entered skipped skipped left',
+        });
+      });
+    });
+    describe('workflow with inverted condition', () => {
+      it('behaves like "if not" when inverted condition is present', async () => {
+        const el = await fixture(html`
+          <${tag} .data=${{}}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep}
+              .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
+              invert-condition
+              >Step 1</${tagStep}
+            >
+            <${tagStep}>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        setTimeout(() => {
+          el.data.age = 15;
+          el.next();
+          el.previous();
+          el.data.age = 20;
+          el.next();
+          el.next();
+          el.previous();
+          el.previous();
+        });
+        await checkWorkflow(el, {
+          transitions: '0 => 2 => 0 => 1 => 2 => 1 => 0',
+          statuses: 'entered left left',
+        });
+      });
+      it('behaves like "if/else" in case both condition and inverted condition are present', async () => {
+        const condition = /** @param {UnknownData} data */ (data) => data.age < 18;
+        const el = await fixture(html`
+          <${tag} .data=${{}}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} .condition=${condition}>Step 1</${tagStep}>
+            <${tagStep} .condition=${condition} invert-condition>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        setTimeout(() => {
+          el.data.age = 15;
+          el.next();
+          el.previous();
+          el.data.age = 20;
+          el.next();
+          el.previous();
+        });
+        await checkWorkflow(el, {
+          transitions: '0 => 1 => 0 => 2 => 0',
+          statuses: 'entered skipped left',
+        });
+      });
+    });
+    describe('workflow with forward-only', () => {
+      it('activates step when going forward', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} forward-only>Step 1</${tagStep}>
+            <${tagStep}>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        setTimeout(() => {
+          el.next();
+          el.next();
+        });
+        await checkWorkflow(el, {
+          transitions: '0 => 1 => 2',
+          statuses: 'left left entered',
+        });
+      });
+      it('skips step when going back to prevent reevaluation of "service" steps', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} forward-only>Step 1</${tagStep}>
+            <${tagStep}>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        el.next();
+        el.next();
+        setTimeout(() => el.previous());
+        await checkWorkflow(el, {
+          transitions: '2 => 0',
+          statuses: 'entered left left',
+        });
+      });
+      it('does not set "skipped" status when going back', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <${tagStep} initial-step>Step 0</${tagStep}>
+            <${tagStep} forward-only>Step 1</${tagStep}>
+            <${tagStep}>Step 2</${tagStep}>
+          </${tag}>
+        `);
+        el.next();
+        el.next();
+        el.previous();
+        expect(/** @type {LionStep} */ el.children[1].status).to.equal('left');
+      });
+    });
+  });
+}

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

@@ -1,232 +1,2 @@
-import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
-import { expect, fixture as _fixture } from '@open-wc/testing';
-import { Validator } from '@lion/ui/form-core.js';
-import { LionSwitch } from '@lion/ui/switch.js';
-import { html } from 'lit/static-html.js';
-import '@lion/ui/define/lion-switch.js';
-import sinon from 'sinon';
-import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
-
-/**
- * @typedef {import('../src/LionSwitchButton.js').LionSwitchButton} LionSwitchButton
- * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-
-const IsTrue = class extends Validator {
-  static get validatorName() {
-    return 'IsTrue';
-  }
-  execute() {
-    return true;
-  }
-};
-
-/**
- * @param { LionSwitch } el
- */
-function getSwitchMembers(el) {
-  const obj = getFormControlMembers(/** @type { * & FormControlHost } */ el);
-  return {
-    ...obj,
-    _inputNode: /** @type {LionSwitchButton} */ obj._inputNode,
-  };
-}
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionSwitch>} */ _fixture;
-describe('lion-switch', () => {
-  it('should have default "input" element', async () => {
-    const el = await fixture(html`<lion-switch></lion-switch>`);
-    expect(Array.from(el.children).find((child) => child.slot === 'input')).not.to.be.false;
-  });
-  it('clicking the label should toggle the checked state', async () => {
-    const el = await fixture(html`<lion-switch label="Enable Setting"></lion-switch>`);
-    const { _labelNode } = getFormControlMembers(el);
-    _labelNode.click();
-    expect(el.checked).to.be.true;
-    _labelNode.click();
-    expect(el.checked).to.be.false;
-  });
-  it('clicking the label should not toggle the checked state when disabled', async () => {
-    const el = await fixture(html`<lion-switch disabled label="Enable Setting"></lion-switch>`);
-    const { _labelNode } = getFormControlMembers(el);
-    _labelNode.click();
-    expect(el.checked).to.be.false;
-  });
-  it('clicking the label should focus the toggle button', async () => {
-    const el = await fixture(html`<lion-switch label="Enable Setting"></lion-switch>`);
-    const { _inputNode, _labelNode } = getSwitchMembers(el);
-    _labelNode.click();
-    expect(isActiveElement(_inputNode)).to.be.true;
-  });
-  it('clicking the label should not focus the toggle button when disabled', async () => {
-    const el = await fixture(html`<lion-switch disabled label="Enable Setting"></lion-switch>`);
-    const { _inputNode, _labelNode } = getSwitchMembers(el);
-    _labelNode.click();
-    expect(isActiveElement(_inputNode)).to.be.false;
-  });
-  it('clicking the label should not toggle the checked state when readonly', async () => {
-    const el = await fixture(html`<lion-switch readonly label="Enable Setting"></lion-switch>`);
-    const { _labelNode } = getFormControlMembers(el);
-    _labelNode.click();
-    expect(el.checked).to.be.false;
-  });
-  it('should sync its "disabled" state to child button', async () => {
-    const el = await fixture(html`<lion-switch disabled></lion-switch>`);
-    const { _inputNode } = getSwitchMembers(el);
-    expect(_inputNode.disabled).to.be.true;
-    expect(_inputNode.hasAttribute('disabled')).to.be.true;
-    el.disabled = false;
-    await el.updateComplete;
-    await el.updateComplete; // safari takes longer
-    expect(_inputNode.disabled).to.be.false;
-    expect(_inputNode.hasAttribute('disabled')).to.be.false;
-  });
-  it('is hidden when attribute hidden is true', async () => {
-    const el = await fixture(html`<lion-switch hidden></lion-switch>`);
-    expect(el).not.to.be.displayed;
-  });
-  it('should sync its "checked" state to child button', async () => {
-    const uncheckedEl = await fixture(html`<lion-switch></lion-switch>`);
-    const { _inputNode: uncheckeInputNode } = getSwitchMembers(uncheckedEl);
-    const checkedEl = await fixture(html`<lion-switch checked></lion-switch>`);
-    const { _inputNode: checkeInputNode } = getSwitchMembers(checkedEl);
-    expect(uncheckeInputNode.checked).to.be.false;
-    expect(checkeInputNode.checked).to.be.true;
-    uncheckedEl.checked = true;
-    checkedEl.checked = false;
-    await uncheckedEl.updateComplete;
-    await checkedEl.updateComplete;
-    expect(uncheckeInputNode.checked).to.be.true;
-    expect(checkeInputNode.checked).to.be.false;
-  });
-  it('should sync "checked" state received from child button', async () => {
-    const el = await fixture(html`<lion-switch></lion-switch>`);
-    const { _inputNode } = getSwitchMembers(el);
-    const button = _inputNode;
-    expect(el.checked).to.be.false;
-    button.click();
-    expect(el.checked).to.be.true;
-    button.click();
-    expect(el.checked).to.be.false;
-  });
-  it('synchronizes modelValue to checked state and vice versa', async () => {
-    const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
-    expect(el.checked).to.be.false;
-    expect(el.modelValue).to.deep.equal({
-      checked: false,
-      value: 'foo',
-    });
-    el.checked = true;
-    expect(el.checked).to.be.true;
-    expect(el.modelValue).to.deep.equal({
-      checked: true,
-      value: 'foo',
-    });
-  });
-  it('should dispatch "checked-changed" event when toggled via button or label', async () => {
-    const handlerSpy = sinon.spy();
-    const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
-    const { _inputNode, _labelNode } = getSwitchMembers(el);
-    el.addEventListener('checked-changed', handlerSpy);
-    _inputNode.click();
-    _labelNode.click();
-    await el.updateComplete;
-    expect(handlerSpy.callCount).to.equal(2);
-    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ (call) => {
-      expect(call.args).to.have.lengthOf(1);
-      const e = call.args[0];
-      expect(e).to.be.an.instanceof(Event);
-      expect(e.bubbles).to.be.true;
-    };
-    checkCall(handlerSpy.getCall(0));
-    checkCall(handlerSpy.getCall(1));
-  });
-  it('should dispatch "checked-changed" event when checked changed', async () => {
-    const handlerSpy = sinon.spy();
-    const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
-    el.addEventListener('checked-changed', handlerSpy);
-    el.checked = true;
-    await el.updateComplete;
-    expect(handlerSpy.callCount).to.equal(1);
-  });
-  it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
-    const handlerSpy = sinon.spy();
-    const parentHandlerSpy = sinon.spy();
-    const el = await fixture(html`
-      <div @checked-changed=${parentHandlerSpy}>
-        <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
-      </div>
-    `);
-    const switchEl = /** @type {LionSwitch} */ el.firstElementChild;
-    switchEl.checked = true;
-    await switchEl.updateComplete;
-    expect(handlerSpy.callCount).to.equal(1);
-    expect(parentHandlerSpy.callCount).to.equal(0);
-  });
-  it('can be configured to show feedback messages immediately', async () => {
-    const tagName = 'custom-switch';
-    if (!customElements.get(tagName)) {
-      customElements.define(
-        tagName,
-        class CustomSwitch extends LionSwitch {
-          static get validationTypes() {
-            // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
-            return [...super.validationTypes, 'info'];
-          }
-
-          /**
-           * @param {string} type
-           * @param {object} meta
-           */
-          _showFeedbackConditionFor(type, meta) {
-            if (type === 'info') {
-              return true;
-            }
-            return super._showFeedbackConditionFor(type, meta);
-          }
-        },
-      );
-    }
-    const el = await fixture(
-      html`<custom-switch
-        .validators="${[
-          new IsTrue(
-            {},
-            {
-              type: 'info',
-            },
-          ),
-        ]}"
-        .feedbackCondition="${(
-          /** @type {string} */ type,
-          /** @type {object} */ meta,
-          /** @type {(type: string, meta: object) => any} */ defaultCondition,
-        ) => {
-          if (type === 'info') {
-            return true;
-          }
-          return defaultCondition(type, meta);
-        }}"
-      ></custom-switch>`,
-    );
-    expect(el.showsFeedbackFor).to.eql(['info']);
-  });
-  describe('Accessibility', () => {
-    it('passes axe a11y audit', async () => {
-      const el = await fixture(html`<lion-switch name="hi" label="My label"></lion-switch>`);
-      await expect(el).to.be.accessible();
-      el.checked = true;
-      await el.updateComplete;
-      await expect(el).to.be.accessible();
-    });
-    it('passes axe a11y audit when disabled', async () => {
-      const el = await fixture(
-        html`<lion-switch name="hi" label="My label" disabled></lion-switch>`,
-      );
-      await expect(el).to.be.accessible();
-      el.checked = true;
-      await el.updateComplete;
-      await expect(el).to.be.accessible();
-    });
-  });
-});
+import { runSwitchSuite } from '../test-suites/lion-switch.suite.js';
+runSwitchSuite();