Update MultiSelectComboBox to expose define helper

src/MultiSelectComboBox.tsx

@@ -29,8 +29,15 @@ function MultiSelectComboBox<TItem = ComboBoxDefaultItem>(
   );
 }
 
+function withDefine<T extends typeof MultiSelectComboBox>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _MultiSelectComboBox.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedMultiSelectComboBox = forwardRef(MultiSelectComboBox) as <TItem = ComboBoxDefaultItem>(
   props: MultiSelectComboBoxProps<TItem> & RefAttributes<MultiSelectComboBoxElement<TItem>>,
 ) => ReactElement | null;
 
-export { ForwardedMultiSelectComboBox as MultiSelectComboBox };
+const MultiSelectComboBoxWithDefine = withDefine(ForwardedMultiSelectComboBox);
+
+export { MultiSelectComboBoxWithDefine as MultiSelectComboBox };

test/MultiSelectComboBox.spec.tsx

@@ -1,7 +1,6 @@
 import { expect, use as useChaiPlugin } from '@esm-bundle/chai';
 import { cleanup, render } from '@testing-library/react/pure.js';
 import chaiDom from 'chai-dom';
-import sinon from 'sinon';
 import { MultiSelectComboBox, type MultiSelectComboBoxElement } from '../src/MultiSelectComboBox.js';
 import createOverlayCloseCatcher from './utils/createOverlayCloseCatcher.js';
 
@@ -15,51 +14,42 @@ describe('MultiSelectComboBox', () => {
     (ref) => (ref.opened = false),
   );
 
+  before(MultiSelectComboBox.define);
+
   afterEach(cleanup);
   afterEach(catcher);
 
-  async function until(predicate: () => boolean) {
-    while (!predicate()) {
-      await new Promise((r) => setTimeout(r, 10));
-    }
-  }
-
-  it('should render correctly', async () => {
+  it('should render correctly', (done) => {
     type Item = Readonly<{ value: string; index: number }>;
 
     const items: Item[] = [
       { value: 'foo', index: 0 },
       { value: 'bar', index: 1 },
     ];
 
-    const spy = sinon.spy();
-
     const { container } = render(
       <MultiSelectComboBox<Item>
         ref={ref}
         items={items}
         opened
         renderer={({ item }) => <>{item.value}</>}
-        onSelectedItemsChanged={spy}
+        onSelectedItemsChanged={(event) => {
+          expect(event.detail.value[0].value).to.equal('bar');
+          expect(event.detail.value[0].index).to.equal(1);
+          done();
+        }}
       />,
     );
 
     const comboBox = container.querySelector('vaadin-multi-select-combo-box');
     expect(comboBox).to.exist;
 
-    await until(() => !!document.querySelector(`${overlayTag}[opened]`));
-    spy.resetHistory();
-
     const comboBoxOverlay = document.body.querySelector(overlayTag);
     expect(comboBoxOverlay).to.exist;
 
     const bar = comboBoxOverlay!.querySelector('vaadin-multi-select-combo-box-item:nth-child(2)');
     expect(bar).to.exist;
 
     bar!.dispatchEvent(new PointerEvent('click', { bubbles: true }));
-
-    const event = spy.firstCall.args[0];
-    expect(event.detail.value[0].value).to.equal('bar');
-    expect(event.detail.value[0].index).to.equal(1);
   });
 });