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

This commit is contained in:
Lyndsi Kay Williams 2022-09-09 06:34:50 -05:00 committed by GitHub
parent bd1abd3b6e
commit 3197cc6eaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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