diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
index 6e6eb6edd0475..eedc2fb10117e 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
+++ b/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) => (
-
-
-
-);
-
-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(, {
+ 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(, { 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(, { 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(, { 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(, { 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(, { 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(, { 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(, { 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(, { 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(, { 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(, { useRedux: true, useDnd: true });
+ expect(await screen.findByText(/metrics/i)).toBeInTheDocument();
+
expect(screen.queryByText(/create a dataset/i)).toBe(null);
});