diff --git a/.changeset/spotty-clocks-hide.md b/.changeset/spotty-clocks-hide.md new file mode 100644 index 000000000..ce3d22f43 --- /dev/null +++ b/.changeset/spotty-clocks-hide.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': minor +--- + +[select-rich] export getSelectRichMembers test helper diff --git a/.prettierignore b/.prettierignore index d7d4e8748..86114679f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,5 +7,8 @@ _site-dev /docs/_assets/scoped-custom-element-registry.min.js /docs/_assets/scoped-custom-element-registry.min.js.map +/docs/_merged_data/ +/docs/_merged_assets/ +/docs/_merged_includes/ /packages/ui/_legacy-changelogs diff --git a/packages/ui/components/select-rich/test-helpers/getSelectRichMembers.js b/packages/ui/components/select-rich/test-helpers/getSelectRichMembers.js new file mode 100644 index 000000000..f4ed3ab92 --- /dev/null +++ b/packages/ui/components/select-rich/test-helpers/getSelectRichMembers.js @@ -0,0 +1,18 @@ +import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js'; + +/** + * @typedef {import('../src/LionSelectRich.js').LionSelectRich} LionSelectRich + */ + +/** + * @param { LionSelectRich } el + */ +export function getSelectRichMembers(el) { + const obj = getListboxMembers(el); + // eslint-disable-next-line no-return-assign + return { + ...obj, + // @ts-ignore [allow-protected] in test + ...{ _invokerNode: el._invokerNode, _overlayCtrl: el._overlayCtrl }, + }; +} diff --git a/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js b/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js index d8bb455c7..99be5870d 100644 --- a/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js +++ b/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js @@ -7,6 +7,7 @@ import '@lion/ui/define/lion-option.js'; import '@lion/ui/define/lion-listbox.js'; import '@lion/ui/define/lion-select-rich.js'; +import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js'; /** * @typedef {import('../src/LionSelectRich.js').LionSelectRich} LionSelectRich @@ -23,32 +24,6 @@ function mimicKeyPress(el, key, code = '') { el.dispatchEvent(new KeyboardEvent('keyup', { key, code })); } -/** - * @param {LionSelectRich} lionSelectEl - */ -function getNodes(lionSelectEl) { - const { - // @ts-ignore protected members allowed in test - _invokerNode: invoker, - // @ts-ignore protected members allowed in test - _feedbackNode: feedback, - // @ts-ignore protected members allowed in test - _labelNode: label, - // @ts-ignore protected members allowed in test - _helpTextNode: helpText, - // @ts-ignore protected members allowed in test - _listboxNode: listbox, - // @ts-ignore protected members allowed in test - } = lionSelectEl; - return { - invoker, - feedback, - label, - helpText, - listbox, - }; -} - describe('lion-select-rich interactions', () => { describe('Interaction mode', () => { it('autodetects interactionMode if not defined', async () => { @@ -187,8 +162,8 @@ describe('lion-select-rich interactions', () => { `) ); - const { invoker } = getNodes(el); - expect(invoker.tabIndex).to.equal(-1); + const { _invokerNode } = getSelectRichMembers(el); + expect(_invokerNode.tabIndex).to.equal(-1); }); it('cannot be opened via click if disabled', async () => { @@ -199,8 +174,9 @@ describe('lion-select-rich interactions', () => { `) ); - const { invoker } = getNodes(el); - invoker.click(); + const { _invokerNode, _overlayCtrl } = getSelectRichMembers(el); + _invokerNode.click(); + await _overlayCtrl._showComplete; expect(el.opened).to.be.false; }); @@ -212,11 +188,11 @@ describe('lion-select-rich interactions', () => { `) ); - const { invoker } = getNodes(el); - expect(invoker.hasAttribute('disabled')).to.be.true; + const { _invokerNode } = getSelectRichMembers(el); + expect(_invokerNode.hasAttribute('disabled')).to.be.true; el.removeAttribute('disabled'); await el.updateComplete; - expect(invoker.hasAttribute('disabled')).to.be.false; + expect(_invokerNode.hasAttribute('disabled')).to.be.false; }); }); @@ -232,10 +208,10 @@ describe('lion-select-rich interactions', () => { `) ); - const { invoker } = getNodes(el); + const { _invokerNode } = getSelectRichMembers(el); expect(el.touched).to.be.false; - await triggerFocusFor(invoker); - await triggerBlurFor(invoker); + await triggerFocusFor(_invokerNode); + await triggerBlurFor(_invokerNode); expect(el.touched).to.be.true; }); }); @@ -252,21 +228,21 @@ describe('lion-select-rich interactions', () => { `) ); - const { invoker } = getNodes(el); + const { _invokerNode } = getSelectRichMembers(el); const options = el.formElements; await el.feedbackComplete; await el.updateComplete; - expect(invoker.getAttribute('aria-invalid')).to.equal('false'); + expect(_invokerNode.getAttribute('aria-invalid')).to.equal('false'); options[0].checked = true; await el.feedbackComplete; await el.updateComplete; - expect(invoker.getAttribute('aria-invalid')).to.equal('true'); + expect(_invokerNode.getAttribute('aria-invalid')).to.equal('true'); options[1].checked = true; await el.feedbackComplete; await el.updateComplete; - expect(invoker.getAttribute('aria-invalid')).to.equal('false'); + expect(_invokerNode.getAttribute('aria-invalid')).to.equal('false'); }); }); }); diff --git a/packages/ui/components/select-rich/test/lion-select-rich.test.js b/packages/ui/components/select-rich/test/lion-select-rich.test.js index 2e74a806f..2c989d092 100644 --- a/packages/ui/components/select-rich/test/lion-select-rich.test.js +++ b/packages/ui/components/select-rich/test/lion-select-rich.test.js @@ -1,6 +1,5 @@ import { LitElement } from 'lit'; import { LionOption } from '@lion/ui/listbox.js'; -import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js'; import { OverlayController } from '@lion/ui/overlays.js'; import { mimicClick } from '@lion/ui/overlays-test-helpers.js'; import { LionSelectInvoker, LionSelectRich } from '@lion/ui/select-rich.js'; @@ -17,6 +16,7 @@ import { nextFrame, unsafeStatic, } from '@open-wc/testing'; +import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js'; /** * @typedef {import('../../listbox/src/LionOptions.js').LionOptions} LionOptions @@ -24,19 +24,6 @@ import { * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost */ -/** - * @param { LionSelectRich } el - */ -function getSelectRichMembers(el) { - const obj = getListboxMembers(el); - // eslint-disable-next-line no-return-assign - return { - ...obj, - // @ts-ignore [allow-protected] in test - ...{ _invokerNode: el._invokerNode, _overlayCtrl: el._overlayCtrl }, - }; -} - /** * @typedef {import('lit').TemplateResult} TemplateResult */ diff --git a/packages/ui/exports/select-rich-test-helpers.js b/packages/ui/exports/select-rich-test-helpers.js new file mode 100644 index 000000000..7cd8e7769 --- /dev/null +++ b/packages/ui/exports/select-rich-test-helpers.js @@ -0,0 +1 @@ +export { getSelectRichMembers } from '../components/select-rich/test-helpers/getSelectRichMembers.js';