test: Fix act errors in DatasourcePanel test (#21409)

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx

@@ -17,8 +17,6 @@
  * under the License.
  */
 import React from 'react';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { DndProvider } from 'react-dnd';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import DatasourcePanel, {
@@ -73,52 +71,50 @@ const props: DatasourcePanelProps = {
   },
 };
 
-const setup = (props: DatasourcePanelProps) => (
-  <DndProvider backend={HTML5Backend}>
-    <DatasourcePanel {...props} />
-  </DndProvider>
-);
-
-function search(value: string, input: HTMLElement) {
+const search = (value: string, input: HTMLElement) => {
   userEvent.clear(input);
   userEvent.type(input, value);
-}
+};
 
-test('should render', () => {
-  const { container } = render(setup(props), { useRedux: true });
+test('should render', async () => {
+  const { container } = render(<DatasourcePanel {...props} />, {
+    useRedux: true,
+    useDnd: true,
+  });
+  expect(await screen.findByText(/metrics/i)).toBeInTheDocument();
   expect(container).toBeVisible();
 });
 
-test('should display items in controls', () => {
-  render(setup(props), { useRedux: true });
-  expect(screen.getByText('Metrics')).toBeInTheDocument();
+test('should display items in controls', async () => {
+  render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
+  expect(await screen.findByText('Metrics')).toBeInTheDocument();
   expect(screen.getByText('Columns')).toBeInTheDocument();
 });
 
-test('should render the metrics', () => {
-  render(setup(props), { useRedux: true });
+test('should render the metrics', async () => {
+  render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
   const metricsNum = metrics.length;
   metrics.forEach(metric =>
     expect(screen.getByText(metric.metric_name)).toBeInTheDocument(),
   );
   expect(
-    screen.getByText(`Showing ${metricsNum} of ${metricsNum}`),
+    await screen.findByText(`Showing ${metricsNum} of ${metricsNum}`),
   ).toBeInTheDocument();
 });
 
-test('should render the columns', () => {
-  render(setup(props), { useRedux: true });
+test('should render the columns', async () => {
+  render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
   const columnsNum = columns.length;
   columns.forEach(col =>
     expect(screen.getByText(col.column_name)).toBeInTheDocument(),
   );
   expect(
-    screen.getByText(`Showing ${columnsNum} of ${columnsNum}`),
+    await screen.findByText(`Showing ${columnsNum} of ${columnsNum}`),
   ).toBeInTheDocument();
 });
 
 test('should render 0 search results', async () => {
-  render(setup(props), { useRedux: true });
+  render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
   const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');
 
   search('nothing', searchInput);
@@ -126,7 +122,7 @@ test('should render 0 search results', async () => {
 });
 
 test('should search and render matching columns', async () => {
-  render(setup(props), { useRedux: true });
+  render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
   const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');
 
   search(columns[0].column_name, searchInput);
@@ -138,7 +134,7 @@ test('should search and render matching columns', async () => {
 });
 
 test('should search and render matching metrics', async () => {
-  render(setup(props), { useRedux: true });
+  render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
   const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');
 
   search(metrics[0].metric_name, searchInput);
@@ -154,38 +150,34 @@ test('should render a warning', async () => {
     ...datasource,
     extra: JSON.stringify({ warning_markdown: 'This is a warning.' }),
   };
-  render(
-    setup({
-      ...props,
-      datasource: deprecatedDatasource,
-      controls: {
-        datasource: {
-          ...props.controls.datasource,
-          datasource: deprecatedDatasource,
-          user: mockUser,
-        },
+  const newProps = {
+    ...props,
+    datasource: deprecatedDatasource,
+    controls: {
+      datasource: {
+        ...props.controls.datasource,
+        datasource: deprecatedDatasource,
+        user: mockUser,
       },
-    }),
-    { useRedux: true },
-  );
+    },
+  };
+  render(<DatasourcePanel {...newProps} />, { useRedux: true, useDnd: true });
   expect(
     await screen.findByRole('img', { name: 'alert-solid' }),
   ).toBeInTheDocument();
 });
 
-test('should render a create dataset infobox', () => {
-  render(
-    setup({
-      ...props,
-      datasource: {
-        ...datasource,
-        type: DatasourceType.Query,
-      },
-    }),
-    { useRedux: true },
-  );
+test('should render a create dataset infobox', async () => {
+  const newProps = {
+    ...props,
+    datasource: {
+      ...datasource,
+      type: DatasourceType.Query,
+    },
+  };
+  render(<DatasourcePanel {...newProps} />, { useRedux: true, useDnd: true });
 
-  const createButton = screen.getByRole('button', {
+  const createButton = await screen.findByRole('button', {
     name: /create a dataset/i,
   });
   const infoboxText = screen.getByText(/to edit or add columns and metrics./i);
@@ -194,19 +186,17 @@ test('should render a create dataset infobox', () => {
   expect(infoboxText).toBeVisible();
 });
 
-test('should render a save dataset modal when "Create a dataset" is clicked', () => {
-  render(
-    setup({
-      ...props,
-      datasource: {
-        ...datasource,
-        type: DatasourceType.Query,
-      },
-    }),
-    { useRedux: true },
-  );
+test('should render a save dataset modal when "Create a dataset" is clicked', async () => {
+  const newProps = {
+    ...props,
+    datasource: {
+      ...datasource,
+      type: DatasourceType.Query,
+    },
+  };
+  render(<DatasourcePanel {...newProps} />, { useRedux: true, useDnd: true });
 
-  const createButton = screen.getByRole('button', {
+  const createButton = await screen.findByRole('button', {
     name: /create a dataset/i,
   });
 
@@ -217,16 +207,16 @@ test('should render a save dataset modal when "Create a dataset" is clicked', ()
   expect(saveDatasetModalTitle).toBeVisible();
 });
 
-test('should not render a save dataset modal when datasource is not query or dataset', () => {
-  render(
-    setup({
-      ...props,
-      datasource: {
-        ...datasource,
-        type: DatasourceType.Table,
-      },
-    }),
-    { useRedux: true },
-  );
+test('should not render a save dataset modal when datasource is not query or dataset', async () => {
+  const newProps = {
+    ...props,
+    datasource: {
+      ...datasource,
+      type: DatasourceType.Table,
+    },
+  };
+  render(<DatasourcePanel {...newProps} />, { useRedux: true, useDnd: true });
+  expect(await screen.findByText(/metrics/i)).toBeInTheDocument();
+
   expect(screen.queryByText(/create a dataset/i)).toBe(null);
 });