feat(select-rich): export getSelectRichMembers test helper

* chore: fix a misleading test

* chore: add gitignored file to prettier ignore

* chore: add getSelectRichMembers test helpers

* feat(select-rich): export getSelectRichMembers test helper

---------

Co-authored-by: ByoungYong Kim <[email protected]>
Co-authored-by: gerjanvangeest <[email protected]>

.changeset/spotty-clocks-hide.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': minor
+---
+
+[select-rich] export getSelectRichMembers test helper

.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

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 },
+  };
+}

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', () => {
           </lion-select-rich>
         `)
       );
-      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', () => {
           </lion-select-rich>
         `)
       );
-      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', () => {
           </lion-select-rich>
         `)
       );
-      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', () => {
           </lion-select-rich>
         `)
       );
-      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', () => {
           </lion-select-rich>
         `)
       );
-      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');
     });
   });
 });

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,26 +16,14 @@ 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
  * @typedef {import('../../listbox/types/ListboxMixinTypes.js').ListboxHost} ListboxHost
  * @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
  */

packages/ui/exports/select-rich-test-helpers.js

@@ -0,0 +1 @@
+export { getSelectRichMembers } from '../components/select-rich/test-helpers/getSelectRichMembers.js';