iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ChartCreation): Migrate tests to RTL (#29674)

This commit is contained in:
Ross Mabbett 2024-08-02 21:42:26 -04:00 committed by GitHub
parent 819597faf6
commit 6bc8567802
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 103 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
View File

@ -16,24 +16,38 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import { ReactWrapper } from 'enzyme';
import { styledMount as mount } from 'spec/helpers/theming'; import userEvent from '@testing-library/user-event';
import Button from 'src/components/Button'; import { screen, waitFor, render } from 'spec/helpers/testing-library';
import { AsyncSelect } from 'src/components'; import fetchMock from 'fetch-mock';
import { import { createMemoryHistory } from 'history';
ChartCreation, import { ChartCreation } from 'src/pages/ChartCreation';
ChartCreationProps,
ChartCreationState,
} from 'src/pages/ChartCreation';
import VizTypeGallery from 'src/explore/components/controls/VizTypeControl/VizTypeGallery';
import { act } from 'spec/helpers/testing-library';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
const datasource = { jest.mock('src/components/DynamicPlugins', () => ({
value: '1', usePluginContext: () => ({
label: 'table', mountedPluginMetadata: { table: { name: 'Table', tags: [] } },
}),
}));
const mockDatasourceResponse = {
result: [
{
id: 1,
table_name: 'table',
datasource_type: 'table',
database: { database_name: 'test_db' },
schema: 'public',
},
],
count: 1,
}; };
fetchMock.get(/\/api\/v1\/dataset\/\?q=.*/, {
body: mockDatasourceResponse,
status: 200,
});
const mockUser: UserWithPermissionsAndRoles = { const mockUser: UserWithPermissionsAndRoles = {
createdOn: '2021-04-27T18:12:38.952304', createdOn: '2021-04-27T18:12:38.952304',
email: 'admin', email: 'admin',
@ -59,94 +73,112 @@ const mockUserWithDatasetWrite: UserWithPermissionsAndRoles = {
username: 'admin', username: 'admin',
isAnonymous: false, isAnonymous: false,
}; };
const history = createMemoryHistory();
history.push = jest.fn();
// We don't need the actual implementation for the tests
const routeProps = { const routeProps = {
history: {} as any, history,
location: {} as any, location: {} as any,
match: {} as any, match: {} as any,
}; };
async function getWrapper(user = mockUser) { const renderOptions = {
const wrapper = mount( useRouter: true,
};
async function renderComponent(user = mockUser) {
render(
<ChartCreation user={user} addSuccessToast={() => null} {...routeProps} />, <ChartCreation user={user} addSuccessToast={() => null} {...routeProps} />,
) as unknown as ReactWrapper< renderOptions,
ChartCreationProps, );
ChartCreationState, await waitFor(() => new Promise(resolve => setTimeout(resolve, 0)));
ChartCreation
>;
await act(() => new Promise(resolve => setTimeout(resolve, 0)));
return wrapper;
} }
test('renders a select and a VizTypeGallery', async () => { test('renders a select and a VizTypeGallery', async () => {
const wrapper = await getWrapper(); await renderComponent();
expect(wrapper.find(AsyncSelect)).toExist(); expect(screen.getByRole('combobox', { name: 'Dataset' })).toBeInTheDocument();
expect(wrapper.find(VizTypeGallery)).toExist(); expect(screen.getByText(/choose chart type/i)).toBeInTheDocument();
}); });
test('renders dataset help text when user lacks dataset write permissions', async () => { test('renders dataset help text when user lacks dataset write permissions', async () => {
const wrapper = await getWrapper(); await renderComponent();
expect(wrapper.find('[data-test="dataset-write"]')).not.toExist(); expect(screen.queryByText('Add a dataset')).not.toBeInTheDocument();
expect(wrapper.find('[data-test="no-dataset-write"]')).toExist(); expect(screen.getByText('view instructions')).toBeInTheDocument();
}); });
test('renders dataset help text when user has dataset write permissions', async () => { test('renders dataset help text when user has dataset write permissions', async () => {
const wrapper = await getWrapper(mockUserWithDatasetWrite); await renderComponent(mockUserWithDatasetWrite);
expect(wrapper.find('[data-test="dataset-write"]')).toExist(); expect(screen.getByText('Add a dataset')).toBeInTheDocument();
expect(wrapper.find('[data-test="no-dataset-write"]')).not.toExist(); expect(screen.queryByText('view instructions')).toBeInTheDocument();
}); });
test('renders a button', async () => { test('renders create chart button', async () => {
const wrapper = await getWrapper(); await renderComponent();
expect(wrapper.find(Button)).toExist(); expect(
screen.getByRole('button', { name: 'Create new chart' }),
).toBeInTheDocument();
}); });
test('renders a disabled button if no datasource is selected', async () => { test('renders a disabled button if no datasource is selected', async () => {
const wrapper = await getWrapper(); await renderComponent();
expect( expect(
wrapper.find(Button).find({ disabled: true }).hostNodes(), screen.getByRole('button', { name: 'Create new chart' }),
).toHaveLength(1); ).toBeDisabled();
}); });
test('renders an enabled button if datasource and viz type are selected', async () => { test('renders an enabled button if datasource and viz type are selected', async () => {
const wrapper = await getWrapper(); await renderComponent();
wrapper.setState({
datasource, const datasourceSelect = screen.getByRole('combobox', { name: 'Dataset' });
vizType: 'table', userEvent.click(datasourceSelect);
}); userEvent.click(await screen.findByText(/test_db/i));
userEvent.click(
screen.getByRole('button', {
name: /ballot all charts/i,
}),
);
userEvent.click(await screen.findByText('Table'));
expect( expect(
wrapper.find(Button).find({ disabled: true }).hostNodes(), screen.getByRole('button', { name: 'Create new chart' }),
).toHaveLength(0); ).toBeEnabled();
}); });
test('double-click viz type does nothing if no datasource is selected', async () => { test('double-click viz type does nothing if no datasource is selected', async () => {
const wrapper = await getWrapper(); await renderComponent();
wrapper.instance().gotoSlice = jest.fn();
wrapper.update(); userEvent.click(
wrapper.instance().onVizTypeDoubleClick(); screen.getByRole('button', {
expect(wrapper.instance().gotoSlice).not.toBeCalled(); name: /ballot all charts/i,
}),
);
userEvent.dblClick(await screen.findByText('Table'));
expect(
screen.getByRole('button', { name: 'Create new chart' }),
).toBeDisabled();
expect(history.push).not.toHaveBeenCalled();
}); });
test('double-click viz type submits if datasource is selected', async () => { test('double-click viz type submits with formatted URL if datasource is selected', async () => {
const wrapper = await getWrapper(); await renderComponent();
wrapper.instance().gotoSlice = jest.fn();
wrapper.update();
wrapper.setState({
datasource,
vizType: 'table',
});
wrapper.instance().onVizTypeDoubleClick(); const datasourceSelect = screen.getByRole('combobox', { name: 'Dataset' });
expect(wrapper.instance().gotoSlice).toBeCalled(); userEvent.click(datasourceSelect);
}); userEvent.click(await screen.findByText(/test_db/i));
test('formats Explore url', async () => { userEvent.click(
const wrapper = await getWrapper(); screen.getByRole('button', {
wrapper.setState({ name: /ballot all charts/i,
datasource, }),
vizType: 'table', );
}); userEvent.dblClick(await screen.findByText('Table'));
const formattedUrl = '/explore/?viz_type=table&datasource=1';
expect(wrapper.instance().exploreUrl()).toBe(formattedUrl); expect(
screen.getByRole('button', { name: 'Create new chart' }),
).toBeEnabled();
const formattedUrl = '/explore/?viz_type=table&datasource=1__table';
expect(history.push).toHaveBeenCalledWith(formattedUrl);
}); });