Update Dialog to expose define helper

vaadin · web-padawan · Dec 26, 2023 · Jan 8, 2024 · Jan 8, 2024 · Jan 8, 2024
commit af6f700eaf7b6ef9c4c5eaaa0974cc5b1c742680
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
@@ -1,10 +1,12 @@
 import {
   type ComponentType,
   type ForwardedRef,
+  type ForwardRefExoticComponent,
   type HTMLAttributes,
   forwardRef,
   type ReactElement,
   type ReactNode,
+  type RefAttributes,
 } from 'react';
 import { Dialog as _Dialog, type DialogElement, type DialogProps as _DialogProps } from './generated/Dialog.js';
 import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
@@ -48,6 +50,10 @@ function Dialog(
   );
 }
 
-const ForwardedDialog = forwardRef(Dialog);
+const ForwardedDialog = forwardRef(Dialog) as ForwardRefExoticComponent<DialogProps & RefAttributes<DialogElement>> & {
+  define(): Promise<void>;
+};
+
+Object.assign(ForwardedDialog, { define: _Dialog.define });
 
 export { ForwardedDialog as Dialog };
diff --git a/test/Dialog.spec.tsx b/test/Dialog.spec.tsx
@@ -15,15 +15,7 @@ describe('Dialog', () => {
     ref.opened = false;
   });
 
-  async function until(predicate: () => boolean) {
-    while (!predicate()) {
-      await new Promise((r) => setTimeout(r, 10));
-    }
-  }
-
-  async function assert() {
-    await until(() => !!document.querySelector(`${overlayTag}[opened]`));
-
+  function assert() {
     const dialog = document.querySelector(overlayTag);
     expect(dialog).to.exist;
 
@@ -39,19 +31,21 @@ describe('Dialog', () => {
     expect(body).to.have.text('FooBar');
   }
 
+  before(Dialog.define);
+
   afterEach(cleanup);
   afterEach(catcher);
 
-  it('should use children if no renderer property set', async () => {
+  it('should use children if no renderer property set', () => {
     render(
       <Dialog ref={ref} opened header={<>Title</>} footer={<>Footer</>}>
         FooBar
       </Dialog>,
     );
-    await assert();
+    assert();
   });
 
-  it('should use renderer prop if it is set', async () => {
+  it('should use renderer prop if it is set', () => {
     render(
       <Dialog
         ref={ref}
@@ -61,16 +55,16 @@ describe('Dialog', () => {
         renderer={() => <>FooBar</>}
       ></Dialog>,
     );
-    await assert();
+    assert();
   });
 
-  it('should use children as renderer prop', async () => {
+  it('should use children as renderer prop', () => {
     render(
       <Dialog ref={ref} opened headerRenderer={() => <>Title</>} footerRenderer={() => <>Footer</>}>
         {() => <>FooBar</>}
       </Dialog>,
     );
-    await assert();
+    assert();
   });
 
   it('should not warn on open', async () => {