Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: Fix act errors in DatasourcePanel test #21409

Merged
merged 1 commit into from
Sep 9, 2022
Merged

test: Fix act errors in DatasourcePanel test #21409

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 62 additions & 72 deletions superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down Expand Up @@ -73,60 +71,58 @@ 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);
expect(await screen.findAllByText('Showing 0 of 0')).toHaveLength(2);
});

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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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,
});

Expand All @@ -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);
});