@lion/ui 0.25.0 → 0.26.0

package/components/select-rich/test/lion-select-rich.test.js

@@ -1,1193 +1,2 @@
-import { LionSelectInvoker, LionSelectRich } from '@lion/ui/select-rich.js';
-import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
-import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
-import { OverlayController } from '@lion/ui/overlays.js';
-import { LionOption } from '@lion/ui/listbox.js';
-import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-import '@lion/ui/define/lion-tabs.js';
-import { LitElement, nothing } from 'lit';
-import sinon from 'sinon';
-import {
-  fixture as _fixture,
-  unsafeStatic,
-  nextFrame,
-  aTimeout,
-  defineCE,
-  expect,
-  html,
-  waitUntil,
-} from '@open-wc/testing';
-import { cache } from 'lit/directives/cache.js';
-import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
-
-/**
- * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
- * @typedef {import('../../listbox/types/ListboxMixinTypes.js').ListboxHost} ListboxHost
- * @typedef {import('../../listbox/src/LionOptions.js').LionOptions} LionOptions
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionSelectRich>} */ _fixture;
-describe('lion-select-rich', () => {
-  it('clicking the label should focus the invoker', async () => {
-    const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
-    expect(isActiveElement(document.body)).to.be.true;
-    const { _labelNode, _invokerNode } = getSelectRichMembers(el);
-    _labelNode.click();
-    expect(isActiveElement(_invokerNode)).to.be.true;
-  });
-  it('has an attribute focused when focused', async () => {
-    const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
-    el.focus();
-    await el.updateComplete;
-    expect(el.hasAttribute('focused')).to.be.true;
-    el.blur();
-    await el.updateComplete;
-    expect(el.hasAttribute('focused')).to.be.false;
-  });
-  it('checks the first enabled option', async () => {
-    const el = await fixture(html`
-      <lion-select-rich>
-        <lion-option .choiceValue=${'Red'}></lion-option>
-        <lion-option .choiceValue=${'Hotpink'}></lion-option>
-        <lion-option .choiceValue=${'Blue'}></lion-option>
-      </lion-select-rich>
-    `);
-    expect(el.activeIndex).to.equal(0);
-    expect(el.checkedIndex).to.equal(0);
-  });
-  it('still has a checked value while disabled', async () => {
-    const el = await fixture(html`
-      <lion-select-rich disabled>
-        <lion-option .choiceValue=${'Red'}>Red</lion-option>
-        <lion-option .choiceValue=${'Hotpink'}>Hotpink</lion-option>
-        <lion-option .choiceValue=${'Blue'}>Blue</lion-option>
-      </lion-select-rich>
-    `);
-    expect(el.modelValue).to.equal('Red');
-  });
-  it('supports having no default selection initially', async () => {
-    const el = await fixture(html`
-      <lion-select-rich id="color" name="color" label="Favorite color" has-no-default-selected>
-        <lion-option .choiceValue=${'red'}>Red</lion-option>
-        <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
-        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-      </lion-select-rich>
-    `);
-    const { _invokerNode } = getSelectRichMembers(el);
-    expect(_invokerNode.selectedElement).to.be.undefined;
-    expect(el.modelValue).to.equal('');
-  });
-  describe('Invoker', () => {
-    it('generates an lion-select-invoker if no invoker is provided', async () => {
-      const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      expect(_invokerNode).to.exist;
-      expect(_invokerNode).to.be.instanceOf(LionSelectInvoker);
-    });
-    it('sets the first option as the selectedElement if no option is checked', async () => {
-      const el = await fixture(html`
-        <lion-select-rich name="foo">
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20}>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      const options = el.formElements;
-      expect(_invokerNode.selectedElement).dom.to.equal(options[0]);
-    });
-    it('syncs the selected element to the invoker', async () => {
-      const el = await fixture(html`
-        <lion-select-rich name="foo">
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      const options = el.querySelectorAll('lion-option');
-      expect(_invokerNode.selectedElement).dom.to.equal(options[1]);
-      el.checkedIndex = 0;
-      await el.updateComplete;
-      expect(_invokerNode.selectedElement).dom.to.equal(options[0]);
-    });
-    it('delegates readonly to the invoker', async () => {
-      const el = await fixture(html`
-        <lion-select-rich readonly>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20}>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      expect(el.hasAttribute('readonly')).to.be.true;
-      expect(_invokerNode.hasAttribute('readonly')).to.be.true;
-    });
-    it('delegates singleOption to the invoker', async () => {
-      const el = await fixture(html`
-        <lion-select-rich>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      expect(el.singleOption).to.be.true;
-      expect(_invokerNode.hasAttribute('single-option')).to.be.true;
-    });
-    it('sets and removes the button role and aria attributes on change of singleOption', async () => {
-      const el = await fixture(html`
-        <lion-select-rich>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20}>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      expect(_invokerNode.hasAttribute('role')).to.be.true;
-      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
-      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
-      el.singleOption = true;
-      await el.updateComplete;
-      expect(_invokerNode.hasAttribute('role')).to.be.false;
-      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.false;
-      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.false;
-      el.singleOption = false;
-      await el.updateComplete;
-      expect(_invokerNode.hasAttribute('role')).to.be.true;
-      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
-      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
-    });
-    it('updates the invoker when the selected element is the same but the modelValue was updated asynchronously', async () => {
-      const tagString = defineCE(
-        class LionCustomOption extends LionOption {
-          render() {
-            return html`${this.modelValue.value}`;
-          }
-          createRenderRoot() {
-            return this;
-          }
-        },
-      );
-      const tag = unsafeStatic(tagString);
-      const firstOption =
-        /** @type {LionOption} */
-        await _fixture(html`<${tag} checked .choiceValue=${10}></${tag}>`);
-      const el = await fixture(html`
-        <lion-select-rich>
-          ${firstOption}
-          <${tag} .choiceValue=${20}></${tag}>
-        </lion-select-rich>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      const firstChild =
-        /** @type {HTMLElement} */
-        /** @type {ShadowRoot} */ _invokerNode.shadowRoot.firstElementChild;
-      expect(firstChild.textContent).to.equal('10');
-      firstOption.modelValue = {
-        value: 30,
-        checked: true,
-      };
-      await el.updateComplete;
-      expect(firstChild.textContent).to.equal('30');
-    });
-
-    // FIXME: wrong values in safari/webkit even though this passes in the "real" debug browsers
-    it.skip('inherits the content width including arrow width', async () => {
-      const el = await fixture(html`
-        <lion-select-rich>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${10}>Item 2 with long label</lion-option>
-        </lion-select-rich>
-      `);
-      el.opened = true;
-      const options = el.formElements;
-      await el.updateComplete;
-      const { _invokerNode, _inputNode } = getSelectRichMembers(el);
-      expect(_invokerNode.clientWidth).to.equal(options[1].clientWidth);
-      const newOption = /** @type {LionOption} */ document.createElement('lion-option');
-      newOption.choiceValue = 30;
-      newOption.textContent = '30 with longer label';
-      _inputNode.appendChild(newOption);
-      await el.updateComplete;
-      expect(_invokerNode.clientWidth).to.equal(options[2].clientWidth);
-      _inputNode.removeChild(newOption);
-      await el.updateComplete;
-      expect(_invokerNode.clientWidth).to.equal(options[1].clientWidth);
-    });
-  });
-  describe('overlay', () => {
-    it('should be closed by default', async () => {
-      const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
-      expect(el.opened).to.be.false;
-    });
-    it('shows/hides the listbox via opened attribute', async () => {
-      const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
-      const { _overlayCtrl } = getSelectRichMembers(el);
-      el.opened = true;
-      await el.updateComplete;
-      expect(_overlayCtrl.isShown).to.be.true;
-      el.opened = false;
-      await el.updateComplete;
-      await el.updateComplete; // safari takes a little longer
-      expect(_overlayCtrl.isShown).to.be.false;
-    });
-    it('syncs opened state with overlay shown', async () => {
-      const el = await fixture(html` <lion-select-rich .opened=${true}></lion-select-rich> `);
-      const outerEl = /** @type {HTMLButtonElement} */ await _fixture('<button>somewhere</button>');
-      expect(el.opened).to.be.true;
-      mimicClick(outerEl);
-      await aTimeout(0);
-      expect(el.opened).to.be.false;
-    });
-    it('will focus the listbox on open and invoker on close', async () => {
-      const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
-      const { _overlayCtrl, _listboxNode, _invokerNode } = getSelectRichMembers(el);
-      await _overlayCtrl.show();
-      await el.updateComplete;
-      expect(isActiveElement(_listboxNode)).to.be.true;
-      expect(isActiveElement(_invokerNode)).to.be.false;
-      el.opened = false;
-      await el.updateComplete;
-      await el.updateComplete; // safari takes a little longer
-      expect(isActiveElement(_listboxNode)).to.be.false;
-      expect(isActiveElement(_invokerNode)).to.be.true;
-    });
-    it('opens the listbox with checked option as active', async () => {
-      const el = await fixture(html`
-        <lion-select-rich>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _overlayCtrl } = getSelectRichMembers(el);
-      await _overlayCtrl.show();
-      await el.updateComplete;
-      const options = el.formElements;
-      expect(options[1].active).to.be.true;
-      expect(options[1].checked).to.be.true;
-    });
-    it('stays closed on click if it is disabled or readonly or has a single option', async () => {
-      const elReadOnly = await fixture(html`
-        <lion-select-rich readonly>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode: _invokerNodeReadOnly } = getSelectRichMembers(elReadOnly);
-      const elDisabled = await fixture(html`
-        <lion-select-rich disabled>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode: _invokerNodeDisabled } = getSelectRichMembers(elDisabled);
-      const elSingleoption = await fixture(html`
-        <lion-select-rich>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode: _invokerNodeSingleOption } = getSelectRichMembers(elSingleoption);
-      _invokerNodeReadOnly.click();
-      await elReadOnly.updateComplete;
-      expect(elReadOnly.opened).to.be.false;
-      _invokerNodeDisabled.click();
-      await elDisabled.updateComplete;
-      expect(elDisabled.opened).to.be.false;
-      _invokerNodeSingleOption.click();
-      await elSingleoption.updateComplete;
-      expect(elSingleoption.opened).to.be.false;
-    });
-    it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode or has a single option', async () => {
-      const elReadOnly = await fixture(html`
-        <lion-select-rich readonly>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const elSingleOption = await fixture(html`
-        <lion-select-rich>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-        </lion-select-rich>
-      `);
-      elReadOnly.dispatchEvent(
-        new KeyboardEvent('keyup', {
-          key: 'ArrowDown',
-        }),
-      );
-      expect(elReadOnly.opened).to.be.false;
-      elReadOnly.dispatchEvent(
-        new KeyboardEvent('keyup', {
-          key: 'ArrowUp',
-        }),
-      );
-      expect(elReadOnly.opened).to.be.false;
-      elSingleOption.dispatchEvent(
-        new KeyboardEvent('keyup', {
-          key: 'ArrowDown',
-        }),
-      );
-      expect(elSingleOption.opened).to.be.false;
-      elSingleOption.dispatchEvent(
-        new KeyboardEvent('keyup', {
-          key: 'ArrowUp',
-        }),
-      );
-      expect(elSingleOption.opened).to.be.false;
-    });
-    it('sets inheritsReferenceWidth to min by default', async () => {
-      const el = await fixture(html`
-        <lion-select-rich name="favoriteColor" label="Favorite color">
-          <lion-option .choiceValue=${'red'}>Red</lion-option>
-          <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
-          <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-        </lion-select-rich>
-      `);
-      const { _overlayCtrl } = getSelectRichMembers(el);
-      expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
-      el.opened = true;
-      await el.updateComplete;
-      expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
-    });
-    it('should override the inheritsWidth prop when no default selected feature is used', async () => {
-      const el = await fixture(html`
-        <lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
-          <lion-option .choiceValue=${'red'}>Red</lion-option>
-          <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
-          <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-        </lion-select-rich>
-      `);
-      const { _overlayCtrl } = getSelectRichMembers(el);
-
-      // The default is min, so we override that behavior here
-      _overlayCtrl.updateConfig({
-        inheritsReferenceWidth: 'full',
-      });
-      el._initialInheritsReferenceWidth = 'full';
-      expect(_overlayCtrl.inheritsReferenceWidth).to.equal('full');
-      el.opened = true;
-      await el.updateComplete;
-      // Opens while hasNoDefaultSelected = true, so we expect an override
-      expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
-
-      // Emulate selecting hotpink, it closing, and opening it again
-      el.modelValue = 'hotpink';
-      el.opened = false;
-      await el.updateComplete; // necessary for overlay controller to actually close and re-open
-      await el.updateComplete; // safari takes a little longer
-      el.opened = true;
-      await el.updateComplete;
-      await el.updateComplete; // safari takes a little longer
-      await _overlayCtrl._showComplete;
-
-      // noDefaultSelected will now flip the override back to what was the initial reference width
-      expect(_overlayCtrl.inheritsReferenceWidth).to.equal('full');
-    });
-    it('should have singleOption only if there is exactly one option', async () => {
-      const el = await fixture(html`
-        <lion-select-rich>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20}>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _inputNode, _invokerNode } = getSelectRichMembers(el);
-      expect(el.singleOption).to.be.false;
-      expect(_invokerNode.singleOption).to.be.false;
-      const optionElm = el.formElements[0];
-      optionElm.parentNode.removeChild(optionElm);
-      // @ts-ignore [test] we don't need args in this case
-      el.requestUpdate();
-      await el.updateComplete;
-      expect(el.singleOption).to.be.true;
-      expect(_invokerNode.singleOption).to.be.true;
-      const newOption = /** @type {LionOption} */ document.createElement('lion-option');
-      newOption.choiceValue = 30;
-      _inputNode.appendChild(newOption);
-      // @ts-ignore [test] allow to not provide args for testing purposes
-      el.requestUpdate();
-      await el.updateComplete;
-      expect(el.singleOption).to.be.false;
-      expect(_invokerNode.singleOption).to.be.false;
-    });
-    it('should have singleOption only if one option and no hasNoDefaultSelected', async () => {
-      const el = await fixture(html`
-        <lion-select-rich has-no-default-selected>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      expect(el.singleOption).to.be.false;
-      expect(_invokerNode.singleOption).to.be.false;
-    });
-    it('adds/removes the autofocus attribute to/from _listboxNode', async () => {
-      const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
-      const { _listboxNode } = getSelectRichMembers(el);
-      expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
-      el.opened = true;
-      await el.updateComplete;
-      expect(_listboxNode.hasAttribute('autofocus')).to.be.true;
-      el.opened = false;
-      await el.updateComplete;
-      await el.updateComplete; // safari takes a little longer
-      expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
-    });
-    it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
-      const el = await fixture(html`
-        <lion-select-rich
-          .config=${{
-            trapsKeyboardFocus: true,
-          }}
-        ></lion-select-rich>
-      `);
-      const { _listboxNode } = getSelectRichMembers(el);
-      expect(isActiveElement(_listboxNode)).to.be.false;
-      el.opened = true;
-      await el.updateComplete;
-      expect(isActiveElement(_listboxNode)).to.be.true;
-      el.opened = false;
-      await el.updateComplete;
-      await el.updateComplete; // safari takes a little longer
-      expect(isActiveElement(_listboxNode)).to.be.false;
-    });
-  });
-  describe('interaction-mode', () => {
-    it('allows to specify an interaction-mode which determines other behaviors', async () => {
-      const el = await fixture(html`
-        <lion-select-rich interaction-mode="mac"> </lion-select-rich>
-      `);
-      expect(el.interactionMode).to.equal('mac');
-    });
-  });
-  describe('Keyboard navigation', () => {
-    it('opens the listbox with [Enter] key via click handler', async () => {
-      const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      _invokerNode.click();
-      await aTimeout(0);
-      expect(el.opened).to.be.true;
-    });
-    it('opens the listbox with [ ](Space) key via click handler', async () => {
-      const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      _invokerNode.click();
-      await aTimeout(0);
-      expect(el.opened).to.be.true;
-    });
-    it('closes the listbox with [Escape] key once opened', async () => {
-      const el = await fixture(html` <lion-select-rich opened> </lion-select-rich> `);
-      const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(
-        new KeyboardEvent('keydown', {
-          key: 'Escape',
-        }),
-      );
-      expect(el.opened).to.be.false;
-    });
-    it('closes the listbox with [Tab] key once opened', async () => {
-      const el = await fixture(html` <lion-select-rich opened> </lion-select-rich> `);
-      // tab can only be caught via keydown
-      const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(
-        new KeyboardEvent('keydown', {
-          key: 'Tab',
-        }),
-      );
-      expect(el.opened).to.be.false;
-    });
-    it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
-      const el = await fixture(html`
-        <lion-select-rich
-          opened
-          .config=${{
-            trapsKeyboardFocus: true,
-          }}
-        >
-        </lion-select-rich>
-      `);
-      // tab can only be caught via keydown
-      const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(
-        new KeyboardEvent('keydown', {
-          key: 'Tab',
-        }),
-      );
-      expect(el.opened).to.be.true;
-    });
-  });
-  describe('Mouse navigation', () => {
-    it('opens the listbox via click on invoker', async () => {
-      const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
-      expect(el.opened).to.be.false;
-      const { _invokerNode } = getSelectRichMembers(el);
-      _invokerNode.click();
-      await nextFrame(); // reflection of click takes some time
-      expect(el.opened).to.be.true;
-    });
-    it('closes the listbox when an option gets clicked', async () => {
-      const el = await fixture(html`
-        <lion-select-rich opened>
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-        </lion-select-rich>
-      `);
-      expect(el.opened).to.be.true;
-      el.formElements[0].click();
-      expect(el.opened).to.be.false;
-    });
-  });
-  describe('Keyboard navigation Windows', () => {
-    it('closes the listbox with [Enter] key once opened', async () => {
-      const el = await fixture(html` <lion-select-rich opened> </lion-select-rich> `);
-      const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(
-        new KeyboardEvent('keydown', {
-          key: 'Enter',
-        }),
-      );
-      expect(el.opened).to.be.false;
-    });
-  });
-  describe('Keyboard navigation Mac', () => {
-    it('checks active item and closes the listbox with [Enter] key via click handler once opened', async () => {
-      const el = await fixture(html`
-        <lion-select-rich opened interaction-mode="mac">
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20}>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _listboxNode } = getSelectRichMembers(el);
-
-      // changes active but not checked
-      el.activeIndex = 1;
-      expect(el.checkedIndex).to.equal(0);
-      _listboxNode.dispatchEvent(
-        new KeyboardEvent('keydown', {
-          key: 'Enter',
-        }),
-      );
-      expect(el.opened).to.be.false;
-      expect(el.checkedIndex).to.equal(1);
-    });
-    it('opens the listbox with [ArrowUp] key', async () => {
-      const el = await fixture(html`
-        <lion-select-rich interaction-mode="mac"> </lion-select-rich>
-      `);
-      el.dispatchEvent(
-        new KeyboardEvent('keyup', {
-          key: 'ArrowUp',
-        }),
-      );
-      await el.updateComplete;
-      expect(el.opened).to.be.true;
-    });
-    it('opens the listbox with [ArrowDown] key', async () => {
-      const el = await fixture(html`
-        <lion-select-rich interaction-mode="mac"> </lion-select-rich>
-      `);
-      el.dispatchEvent(
-        new KeyboardEvent('keyup', {
-          key: 'ArrowDown',
-        }),
-      );
-      await el.updateComplete;
-      expect(el.opened).to.be.true;
-    });
-  });
-  describe('Accessibility', () => {
-    it('has the right references to its inner elements', async () => {
-      const el = await fixture(html`
-        <lion-select-rich label="age">
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20}>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _invokerNode, _feedbackNode, _labelNode, _helpTextNode } = getSelectRichMembers(el);
-      expect(_invokerNode.getAttribute('aria-labelledby')).to.contain(_labelNode.id);
-      expect(_invokerNode.getAttribute('aria-labelledby')).to.contain(_invokerNode.id);
-      expect(_invokerNode.getAttribute('aria-describedby')).to.contain(_helpTextNode.id);
-      expect(_invokerNode.getAttribute('aria-describedby')).to.contain(_feedbackNode.id);
-      expect(_invokerNode.getAttribute('aria-haspopup')).to.equal('listbox');
-    });
-    it('notifies when the listbox is expanded or not', async () => {
-      // smoke test for overlay functionality
-      const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      expect(_invokerNode.getAttribute('aria-expanded')).to.equal('false');
-      el.opened = true;
-      await el.updateComplete;
-      await el.updateComplete; // need 2 awaits as overlay.show is an async function
-
-      expect(_invokerNode.getAttribute('aria-expanded')).to.equal('true');
-    });
-  });
-  describe('Use cases', () => {
-    it('keeps showing the selected item after a new item has been added in the selectedIndex position', async () => {
-      const mySelectContainerTagString = defineCE(
-        // @ts-expect-error
-        class extends LitElement {
-          static get properties() {
-            return {
-              colorList: Array,
-            };
-          }
-          constructor() {
-            super();
-            this.colorList = [
-              {
-                label: 'Red',
-                value: 'red',
-                checked: false,
-              },
-              {
-                label: 'Hotpink',
-                value: 'hotpink',
-                checked: true,
-              },
-              {
-                label: 'Teal',
-                value: 'teal',
-                checked: false,
-              },
-            ];
-          }
-          render() {
-            return html`
-              <lion-select-rich label="Favorite color" name="color">
-                ${this.colorList.map(
-                  (colorObj) => html`
-                    <lion-option
-                      .modelValue=${{
-                        value: colorObj.value,
-                        checked: colorObj.checked,
-                      }}
-                      >${colorObj.label}</lion-option
-                    >
-                  `,
-                )}
-              </lion-select-rich>
-            `;
-          }
-        },
-      );
-      const mySelectContainerTag = unsafeStatic(mySelectContainerTagString);
-      const el = await fixture(html`
-        <${mySelectContainerTag}></${mySelectContainerTag}>
-      `);
-      const selectRich =
-        /** @type {LionSelectRich} */
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('lion-select-rich');
-      const { _invokerNode, _listboxNode } = getSelectRichMembers(selectRich);
-      expect(selectRich.checkedIndex).to.equal(1);
-      expect(selectRich.modelValue).to.equal('hotpink');
-      expect(/** @type {LionOption} */ _invokerNode.selectedElement.value).to.equal('hotpink');
-      const newOption = /** @type {LionOption} */ document.createElement('lion-option');
-      newOption.modelValue = {
-        checked: false,
-        value: 'blue',
-      };
-      newOption.textContent = 'Blue';
-      const hotpinkEl = _listboxNode.children[1];
-      hotpinkEl.insertAdjacentElement('beforebegin', newOption);
-      expect(selectRich.checkedIndex).to.equal(2);
-      expect(selectRich.modelValue).to.equal('hotpink');
-      expect(/** @type {LionOption} */ _invokerNode.selectedElement.value).to.equal('hotpink');
-    });
-  });
-  describe('Render from `lit` `cache`', () => {
-    describe('when `lion-option` is set by `.choiceValue` property with and no `checked` attribute', () => {
-      it('should display the second option', async () => {
-        const colours = [
-          {
-            label: 'Red',
-            value: 'red',
-          },
-          {
-            label: 'Blue',
-            value: 'blue',
-          },
-        ];
-
-        /**
-         * Note, inactive tab content is **destroyed** on every tab switch.
-         */
-        class Wrapper extends LitElement {
-          static properties = {
-            ...super.properties,
-            activeTabIndex: {
-              type: Number,
-            },
-          };
-          constructor() {
-            super();
-            this.activeTabIndex = 0;
-          }
-
-          /**
-           * @param {number} index
-           */
-          changeActiveTabIndex(index) {
-            this.activeTabIndex = index;
-          }
-          render() {
-            const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
-            return html`
-              <lion-tabs>
-                <button slot="tab" class="first-button" @click=${() => changeActiveTabIndexRef(0)}>
-                  Info
-                </button>
-                <p slot="panel">
-                  ${cache(
-                    this.activeTabIndex === 0
-                      ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
-                          ${colours.map(
-                            (colour) =>
-                              html`<lion-option .choiceValue="${colour.value}"
-                                >${colour.label}</lion-option
-                              >`,
-                          )}
-                        </lion-select-rich>`
-                      : nothing,
-                  )}
-                </p>
-                <button slot="tab" class="second-button" @click=${() => changeActiveTabIndexRef(1)}>
-                  Work
-                </button>
-                <p slot="panel">Info page with lots of information about us.</p>
-              </lion-tabs>
-            `;
-          }
-        }
-        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
-        const tagString = defineCE(Wrapper);
-        const wrapperTag = unsafeStatic(tagString);
-        const wrapperElement =
-          /** @type {Wrapper} */
-          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
-        await wrapperElement.updateComplete;
-        const wrapperElementShadowRoot = wrapperElement.shadowRoot;
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
-        /**
-         * @returns { boolean }
-         */
-        const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
-        /**
-         * @returns { string | undefined }
-         */
-        const getSelectedColourLabel = () =>
-          getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
-        const getDialog = () =>
-          wrapperElementShadowRoot
-            ?.querySelector('lion-select-rich')
-            ?.shadowRoot?.querySelector('dialog');
-        const isDialogVisible = () =>
-          // @ts-ignore
-          getDialog()?.checkVisibility() === true &&
-          getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
-        await waitUntil(isSelectRichRendered);
-        getInvoker()?.click();
-        await waitUntil(isDialogVisible);
-        // @ts-ignore [dynamic-key-access-in-test]
-        const optionBlue =
-          /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
-            'lion-option',
-          )?.[1];
-        optionBlue?.click();
-        await waitUntil(() => !isDialogVisible());
-        const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
-        expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
-        getSecondButton()?.click();
-        await waitUntil(() => !isSelectRichRendered());
-        getFirstButton()?.click();
-        await waitUntil(isSelectRichRendered);
-        const selectedColourAfterTabSwitch = getSelectedColourLabel();
-        expect(selectedColourAfterTabSwitch).to.equal('Blue');
-      });
-    });
-    describe('when `lion-option` is set by `.choiceValue` property and `checked` attribute', () => {
-      it('should display the second option', async () => {
-        const colours = [
-          {
-            label: 'Red',
-            value: 'red',
-            checked: true,
-          },
-          {
-            label: 'Blue',
-            value: 'blue',
-            checked: false,
-          },
-        ];
-
-        /**
-         * Note, inactive tab content is **destroyed** on every tab switch.
-         */
-        class Wrapper extends LitElement {
-          static properties = {
-            ...super.properties,
-            activeTabIndex: {
-              type: Number,
-            },
-          };
-          constructor() {
-            super();
-            this.activeTabIndex = 0;
-          }
-
-          /**
-           * @param {number} index
-           */
-          changeActiveTabIndex(index) {
-            this.activeTabIndex = index;
-          }
-          render() {
-            const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
-            return html`
-              <lion-tabs>
-                <button slot="tab" class="first-button" @click=${() => changeActiveTabIndexRef(0)}>
-                  Info
-                </button>
-                <p slot="panel">
-                  ${cache(
-                    this.activeTabIndex === 0
-                      ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
-                          ${colours.map(
-                            (colour) =>
-                              html`<lion-option
-                                .choiceValue="${colour.value}"
-                                checked="${colour.checked || nothing}"
-                                >${colour.label}</lion-option
-                              >`,
-                          )}
-                        </lion-select-rich>`
-                      : nothing,
-                  )}
-                </p>
-                <button slot="tab" class="second-button" @click=${() => changeActiveTabIndexRef(1)}>
-                  Work
-                </button>
-                <p slot="panel">Info page with lots of information about us.</p>
-              </lion-tabs>
-            `;
-          }
-        }
-        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
-        const tagString = defineCE(Wrapper);
-        const wrapperTag = unsafeStatic(tagString);
-        const wrapperElement =
-          /** @type {Wrapper} */
-          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
-        await wrapperElement.updateComplete;
-        const wrapperElementShadowRoot = wrapperElement.shadowRoot;
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
-        /**
-         * @returns { boolean }
-         */
-        const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
-        /**
-         * @returns { string | undefined }
-         */
-        const getSelectedColourLabel = () =>
-          getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
-        const getDialog = () =>
-          wrapperElementShadowRoot
-            ?.querySelector('lion-select-rich')
-            ?.shadowRoot?.querySelector('dialog');
-        const isDialogVisible = () =>
-          // @ts-ignore
-          getDialog()?.checkVisibility() === true &&
-          getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
-        await waitUntil(isSelectRichRendered);
-        getInvoker()?.click();
-        await waitUntil(isDialogVisible);
-        // @ts-ignore [dynamic-key-access-in-test]
-        const optionBlue =
-          /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
-            'lion-option',
-          )?.[1];
-        optionBlue?.click();
-        await waitUntil(() => !isDialogVisible());
-        const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
-        expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
-        getSecondButton()?.click();
-        await waitUntil(() => !isSelectRichRendered());
-        getFirstButton()?.click();
-        await waitUntil(isSelectRichRendered);
-        const selectedColourAfterTabSwitch = getSelectedColourLabel();
-        expect(selectedColourAfterTabSwitch).to.equal('Blue');
-      });
-    });
-    describe('when `lion-option` is set by `.modelValue` property', () => {
-      it('should display the second option', async () => {
-        const colours = [
-          {
-            label: 'Red',
-            value: 'red',
-            checked: true,
-          },
-          {
-            label: 'Blue',
-            value: 'blue',
-            checked: false,
-          },
-        ];
-
-        /**
-         * Note, inactive tab content is **destroyed** on every tab switch.
-         */
-        class Wrapper extends LitElement {
-          static properties = {
-            ...super.properties,
-            activeTabIndex: {
-              type: Number,
-            },
-          };
-          constructor() {
-            super();
-            this.activeTabIndex = 0;
-          }
-
-          /**
-           * @param {number} index
-           */
-          changeActiveTabIndex(index) {
-            this.activeTabIndex = index;
-          }
-          render() {
-            const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
-            return html`
-              <lion-tabs>
-                <button slot="tab" class="first-button" @click=${() => changeActiveTabIndexRef(0)}>
-                  Info
-                </button>
-                <p slot="panel">
-                  ${cache(
-                    this.activeTabIndex === 0
-                      ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
-                          ${colours.map(
-                            (colour) =>
-                              html`<lion-option
-                                @model-value-changed=${(/** @type {Event} */ ev) => {
-                                  const lionOption = /** @type {LionOption} */ ev.target;
-                                  // eslint-disable-next-line no-param-reassign
-                                  colour.checked = lionOption.modelValue.checked;
-                                }}
-                                .modelValue=${{
-                                  value: colour.value,
-                                  checked: colour.checked,
-                                }}
-                                >${colour.label}</lion-option
-                              >`,
-                          )}
-                        </lion-select-rich>`
-                      : nothing,
-                  )}
-                </p>
-                <button slot="tab" class="second-button" @click=${() => changeActiveTabIndexRef(1)}>
-                  Work
-                </button>
-                <p slot="panel">Info page with lots of information about us.</p>
-              </lion-tabs>
-            `;
-          }
-        }
-        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
-        const tagString = defineCE(Wrapper);
-        const wrapperTag = unsafeStatic(tagString);
-        const wrapperElement =
-          /** @type {Wrapper} */
-          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
-        await wrapperElement.updateComplete;
-        const wrapperElementShadowRoot = wrapperElement.shadowRoot;
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
-        /**
-         * @returns { HTMLElement | null | undefined }
-         */
-        const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
-        /**
-         * @returns { boolean }
-         */
-        const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
-        /**
-         * @returns { string | undefined }
-         */
-        const getSelectedColourLabel = () =>
-          getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
-        const getDialog = () =>
-          wrapperElementShadowRoot
-            ?.querySelector('lion-select-rich')
-            ?.shadowRoot?.querySelector('dialog');
-        const isDialogVisible = () =>
-          // @ts-ignore
-          getDialog()?.checkVisibility() === true &&
-          getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
-        await waitUntil(isSelectRichRendered);
-        getInvoker()?.click();
-        await waitUntil(isDialogVisible);
-        // @ts-ignore [dynamic-key-access-in-test]
-        const optionBlue =
-          /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
-            'lion-option',
-          )?.[1];
-        optionBlue?.click();
-        await waitUntil(() => !isDialogVisible());
-        const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
-        expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
-        getSecondButton()?.click();
-        await waitUntil(() => !isSelectRichRendered());
-        getFirstButton()?.click();
-        await waitUntil(isSelectRichRendered);
-        const selectedColourAfterTabSwitch = getSelectedColourLabel();
-        expect(selectedColourAfterTabSwitch).to.equal('Blue');
-      });
-    });
-  });
-  describe('Teardown', () => {
-    it('does not throw when tearing down before the overlay controller is set up', () => {
-      const el = /** @type {LionSelectRich} */ document.createElement('lion-select-rich');
-
-      // @ts-expect-error [allow-private] in tests
-      expect(() => el._teardownOverlayCtrl()).not.to.throw();
-    });
-    it('correctly removes event listeners when disconnected from dom', async () => {
-      const el = await fixture(html`
-        <lion-select-rich label="age">
-          <lion-option .choiceValue=${10}>Item 1</lion-option>
-          <lion-option .choiceValue=${20}>Item 2</lion-option>
-        </lion-select-rich>
-      `);
-      const { _overlayCtrl } = getSelectRichMembers(el);
-      const eventRemoveSpy = sinon.spy(_overlayCtrl, 'removeEventListener');
-      el.parentNode?.removeChild(el);
-      expect(eventRemoveSpy.callCount).to.equal(0);
-      await el.updateComplete;
-      expect(eventRemoveSpy.callCount).to.equal(0);
-      await el.updateComplete;
-      const hasOneInstanceFor = (
-        /** @type {string} */ eventName,
-        /** @type {any[][]} */ eventsToSearch,
-        /** @type {string} */ methodToRemove,
-      ) =>
-        Boolean(
-          eventsToSearch.filter(
-            ([eventToSearch, methodToSearch]) =>
-              eventToSearch === eventName && methodToSearch === methodToRemove,
-          ).length,
-        );
-
-      // @ts-expect-error [allow-private] in tests
-      expect(hasOneInstanceFor('show', eventRemoveSpy.args, el.__overlayOnShow)).to.be.true;
-      // @ts-expect-error [allow-private] in tests
-      expect(hasOneInstanceFor('before-show', eventRemoveSpy.args, el.__overlayBeforeShow)).to.be
-        .true;
-      // @ts-expect-error [allow-private] in tests
-      expect(hasOneInstanceFor('hide', eventRemoveSpy.args, el.__overlayOnHide)).to.be.true;
-    });
-  });
-  describe('Subclassers', () => {
-    it('allows to override the type of overlay', async () => {
-      const mySelectTagString = defineCE(
-        class MySelect extends LionSelectRich {
-          // @ts-expect-error
-          _defineOverlay({ invokerNode, contentNode, contentWrapperNode }) {
-            const ctrl = new OverlayController({
-              placementMode: 'global',
-              contentNode,
-              contentWrapperNode,
-              invokerNode,
-            });
-            this.addEventListener('switch', () => {
-              ctrl.updateConfig({
-                placementMode: 'local',
-              });
-            });
-            return ctrl;
-          }
-        },
-      );
-      const mySelectTag = unsafeStatic(mySelectTagString);
-      const el = await fixture(html`
-        <${mySelectTag} label="Favorite color" name="color">
-
-            ${Array(2).map(
-              (_, i) => html`
-                <lion-option
-                  .modelValue="${{
-                    value: i,
-                    checked: false,
-                  }}"
-                  >value ${i}</lion-option
-                >
-              `,
-            )}
-
-        </${mySelectTag}>
-      `);
-      await el.updateComplete;
-      const { _overlayCtrl } = getSelectRichMembers(el);
-      expect(_overlayCtrl.placementMode).to.equal('global');
-      el.dispatchEvent(new Event('switch'));
-      expect(_overlayCtrl.placementMode).to.equal('local');
-    });
-    it('supports putting a placeholder template when there is no default selection initially', async () => {
-      const invokerTagName = defineCE(
-        class extends LionSelectInvoker {
-          _noSelectionTemplate() {
-            return html` Please select an option.. `;
-          }
-        },
-      );
-      // const invokerTag = unsafeStatic(invokerTagName);
-
-      const selectTagName = defineCE(
-        class extends LionSelectRich {
-          get slots() {
-            return {
-              ...super.slots,
-              invoker: () => document.createElement(invokerTagName),
-            };
-          }
-        },
-      );
-      const selectTag = unsafeStatic(selectTagName);
-      const el = await fixture(html`
-        <${selectTag} id="color" name="color" label="Favorite color" has-no-default-selected>
-
-            <lion-option .choiceValue=${'red'}>Red</lion-option>
-            <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
-            <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-
-        </${selectTag}>
-      `);
-      const { _invokerNode } = getSelectRichMembers(el);
-      expect(
-        /** @type {ShadowRoot} */ _invokerNode.shadowRoot.getElementById('content-wrapper'),
-      ).dom.to.equal(`<div id="content-wrapper">Please select an option..</div>`);
-      expect(el.modelValue).to.equal('');
-    });
-  });
-});
+import { runSelectRichSuite } from '../test-suites/lion-select-rich.suite.js';
+runSelectRichSuite();