Use waitFor() instead of setTimeout

Author: Chenzo1001

sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/clusters/Clusters.test.tsx

@@ -18,6 +18,8 @@ import { act } from 'react';
 
 import { Clusters } from '../../clusters/Clusters';
 
+import { waitFor } from '@testing-library/dom';
+
 let container: null | Element = null;
 let root: Root | null = null;
 beforeEach(() => {
@@ -76,9 +78,12 @@ it('renders a data-table', async () => {
 
   await act(async () => {
     clustersRef.current?.setState({ clusters: testData });
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
+  await waitFor(() =>
+    expect(container.querySelector('.mdc-data-table__table')).toBeTruthy()
+  );
+
   const topAppBarHeader: Element = container.firstElementChild;
   expect(topAppBarHeader.tagName).toBe('HEADER');
   expect(topAppBarHeader.getAttribute('class')).toContain('mdc-top-app-bar');

sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/common/HtmlView.test.tsx

@@ -21,6 +21,7 @@ import { createRoot, Root } from 'react-dom/client';
 import { act } from 'react';
 
 import { HtmlView, IHtmlProvider, importHtml } from '../../common/HtmlView';
+import { waitFor } from '@testing-library/dom';
 
 let container: null | Element = null;
 let root: Root | null = null;
@@ -65,19 +66,22 @@ describe('HtmlView', () => {
     });
     await act(async () => {
       htmlViewRef.current?.updateRender();
-      await new Promise(resolve => setTimeout(resolve, 100));
     });
-    const htmlViewElement: Element = container.firstElementChild;
-    expect(htmlViewElement.tagName).toBe('DIV');
-    expect(htmlViewElement.innerHTML).toBe('<div>Test</div>');
+
+    await waitFor(() => {
+      const htmlViewElement: Element = container.firstElementChild;
+      expect(htmlViewElement.tagName).toBe('DIV');
+      expect(htmlViewElement.innerHTML).toBe('<div>Test</div>');
+    });
+
     expect(spiedConsole).toHaveBeenCalledWith(1);
     expect(spiedConsole).toHaveBeenCalledWith(2);
     expect(spiedConsole).toHaveBeenCalledTimes(2);
   });
 
   it(
     'only executes incrementally updated Javascript ' +
-      'as html provider updated',
+    'as html provider updated',
     async () => {
       const htmlViewRef: React.RefObject<HtmlView> =
         React.createRef<HtmlView>();
@@ -93,11 +97,15 @@ describe('HtmlView', () => {
       });
       await act(async () => {
         htmlViewRef.current?.updateRender();
-        await new Promise(resolve => setTimeout(resolve, 100));
       });
-      expect(spiedConsole).toHaveBeenCalledWith(1);
-      expect(spiedConsole).toHaveBeenCalledTimes(1);
+
+      await waitFor(() => {
+        expect(spiedConsole).toHaveBeenCalledWith(1);
+        expect(spiedConsole).toHaveBeenCalledTimes(1);
+      });
+
       fakeHtmlProvider.script.push('console.log(2);');
+
       await act(async () => {
         const htmlView = htmlViewRef.current;
         if (htmlView) {

sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/Inspectables.test.tsx

@@ -17,6 +17,7 @@ import { createRoot, Root } from 'react-dom/client';
 import { act } from 'react';
 
 import { Inspectables } from '../../inspector/Inspectables';
+import { waitFor } from '@testing-library/dom';
 
 jest.mock('../../inspector/InspectableList', () => {
   const FakeInspectableList = function (): React.ReactNode {
@@ -115,13 +116,14 @@ it('renders inspectables as a list of collapsible lists', async () => {
 
   await act(async () => {
     inspectablesRef.current?.setState({ inspectables: testData });
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
-  const listElement: Element = container.firstElementChild;
-  expect(listElement.tagName).toBe('UL');
-  expect(listElement.getAttribute('class')).toContain('mdc-list');
-  // Only checks the length of dummy InspectableList items. Each InspectableList
-  // has its own unit tests.
-  expect(listElement.children).toHaveLength(2);
+  await waitFor(() => {
+    const listElement: Element = container.firstElementChild;
+    expect(listElement.tagName).toBe('UL');
+    expect(listElement.getAttribute('class')).toContain('mdc-list');
+    // Only checks the length of dummy InspectableList items. Each InspectableList
+    // has its own unit tests.
+    expect(listElement.children).toHaveLength(2);
+  })
 });

sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/inspector/InteractiveInspector.test.tsx

@@ -19,6 +19,7 @@ import { act } from 'react';
 import { InteractiveInspector } from '../../inspector/InteractiveInspector';
 
 import { InspectableViewModel } from '../../inspector/InspectableViewModel';
+import { waitFor } from '@testing-library/dom';
 
 const fakeSessionContext = {
   session: {
@@ -151,17 +152,15 @@ it('closes the drawer on flip from open state', async () => {
     if (inspector) {
       inspector.flipDrawer();
     }
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
   // react test renderer does not re-render the drawer component even if the
   // state is changed. Test the state change instead of DOM change.
-  await act(async () => {
-    const inspector = inspectorRef.current;
-    if (inspector) {
-      expect(inspector.state.drawerOpen).toBe(false);
+  await waitFor(() => {
+    const updatedInspector = inspectorRef.current;
+    if (updatedInspector) {
+      expect(updatedInspector.state.drawerOpen).toBe(false); // 确保抽屉被打开
     }
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 });
 
@@ -188,10 +187,11 @@ it('updates session info on change', async () => {
       fakeSessionContext.kernelDisplayName = 'new kernel';
       inspector.updateSessionInfo();
     }
-    await new Promise(resolve => setTimeout(resolve, 100));
   });
 
-  const topAppBarHeader: Element =
-    container.firstElementChild.firstElementChild.firstElementChild.children[1];
-  expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:new kernel]');
+  await waitFor(() => {
+    const topAppBarHeader: Element =
+      container.firstElementChild.firstElementChild.firstElementChild.children[1];
+    expect(topAppBarHeader.innerHTML).toContain('Inspector [kernel:new kernel]');
+  });
 });

sdks/python/apache_beam/runners/interactive/extensions/apache-beam-jupyterlab-sidepanel/src/__tests__/kernel/InterruptKernelButton.test.tsx

@@ -18,6 +18,8 @@ import { act } from 'react';
 
 import { InterruptKernelButton } from '../../kernel/InterruptKernelButton';
 
+import { waitFor } from '@testing-library/react'
+
 const fakeKernelModel = {
   isDone: true,
   interruptKernel: function (): void {
@@ -56,6 +58,7 @@ afterEach(async () => {
 it(`displays a button when the kernel model
    is not done with execution`, async () => {
   let button: InterruptKernelButton;
+
   await act(async () => {
     root.render(
       <InterruptKernelButton
@@ -66,13 +69,19 @@ it(`displays a button when the kernel model
       />
     );
   });
+
   await act(async () => {
     fakeKernelModel.isDone = false;
     button?.updateRender();
     await new Promise(resolve => setTimeout(resolve, 100));
   });
+
+  await waitFor(() => {
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    expect(button?.tagName).toBe('BUTTON');
+  })
   const buttonElement: null | Element = container.firstElementChild;
-  expect(buttonElement.tagName).toBe('BUTTON');
   expect(buttonElement.getAttribute('class')).toContain('mdc-button');
   expect(buttonElement.getAttribute('class')).toContain('mdc-button--raised');
   const labelElement: Element = buttonElement.children[1];
@@ -92,7 +101,7 @@ it(`renders nothing when the kernel
 
 it('interrupts the kernel when clicked', async () => {
   let button: InterruptKernelButton;
-  const spiedInterrruptCall = jest.spyOn(fakeKernelModel, 'interruptKernel');
+  const spiedInterruptCall = jest.spyOn(fakeKernelModel, 'interruptKernel');
   await act(async () => {
     root.render(
       <InterruptKernelButton
@@ -105,7 +114,8 @@ it('interrupts the kernel when clicked', async () => {
   });
   await act(async () => {
     button?.onClick();
-    await new Promise(resolve => setTimeout(resolve, 100));
+    await waitFor(() => {
+      expect(spiedInterruptCall).toHaveBeenCalledTimes(1);
+    });
   });
-  expect(spiedInterrruptCall).toHaveBeenCalledTimes(1);
 });