mirror of
https://github.com/apache/superset.git
synced 2026-05-12 19:35:17 +00:00
chore: Working toward killing enzyme and cleaning up test noise. (#32207)
This commit is contained in:
Evan Rusackas
@@ -18,8 +18,12 @@
|
||||
*/
|
||||
|
||||
import sinon from 'sinon';
|
||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import * as chartAction from 'src/components/Chart/chartAction';
|
||||
import * as saveModalActions from 'src/explore/actions/saveModalActions';
|
||||
@@ -127,96 +131,105 @@ fetchMock.post(
|
||||
sendAsJson: false,
|
||||
},
|
||||
);
|
||||
describe('ExploreChartHeader', () => {
|
||||
jest.setTimeout(15000); // ✅ Applies to all tests in this suite
|
||||
|
||||
test('Cancelling changes to the properties should reset previous properties', async () => {
|
||||
const props = createProps();
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
const newChartName = 'New chart name';
|
||||
const prevChartName = props.slice_name;
|
||||
expect(
|
||||
await screen.findByText(/add the name of the chart/i),
|
||||
).toBeInTheDocument();
|
||||
test('Cancelling changes to the properties should reset previous properties', async () => {
|
||||
const props = createProps();
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
const newChartName = 'New chart name';
|
||||
const prevChartName = props.slice_name;
|
||||
expect(
|
||||
await screen.findByText(/add the name of the chart/i),
|
||||
).toBeInTheDocument();
|
||||
|
||||
userEvent.click(screen.getByLabelText('Menu actions trigger'));
|
||||
userEvent.click(screen.getByText('Edit chart properties'));
|
||||
userEvent.click(screen.getByLabelText('Menu actions trigger'));
|
||||
userEvent.click(screen.getByText('Edit chart properties'));
|
||||
|
||||
const nameInput = await screen.findByRole('textbox', { name: 'Name' });
|
||||
const nameInput = await screen.findByRole('textbox', { name: 'Name' });
|
||||
|
||||
userEvent.clear(nameInput);
|
||||
userEvent.type(nameInput, newChartName);
|
||||
userEvent.clear(nameInput);
|
||||
userEvent.type(nameInput, newChartName);
|
||||
|
||||
expect(screen.getByDisplayValue(newChartName)).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue(newChartName)).toBeInTheDocument();
|
||||
|
||||
userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
|
||||
userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
|
||||
|
||||
userEvent.click(screen.getByLabelText('Menu actions trigger'));
|
||||
userEvent.click(screen.getByText('Edit chart properties'));
|
||||
userEvent.click(screen.getByLabelText('Menu actions trigger'));
|
||||
userEvent.click(screen.getByText('Edit chart properties'));
|
||||
|
||||
expect(await screen.findByDisplayValue(prevChartName)).toBeInTheDocument();
|
||||
});
|
||||
expect(await screen.findByDisplayValue(prevChartName)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders the metadata bar when saved', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true });
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
expect(await screen.findByText('Added to 1 dashboard')).toBeInTheDocument();
|
||||
expect(await screen.findByText('Simple description')).toBeInTheDocument();
|
||||
expect(await screen.findByText('John Doe')).toBeInTheDocument();
|
||||
expect(await screen.findByText('2 days ago')).toBeInTheDocument();
|
||||
});
|
||||
test('renders the metadata bar when saved', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true });
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
expect(await screen.findByText('Added to 1 dashboard')).toBeInTheDocument();
|
||||
expect(await screen.findByText('Simple description')).toBeInTheDocument();
|
||||
expect(await screen.findByText('John Doe')).toBeInTheDocument();
|
||||
expect(await screen.findByText('2 days ago')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Changes "Added to X dashboards" to plural when more than 1 dashboard', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true });
|
||||
render(
|
||||
<ExploreHeader
|
||||
{...props}
|
||||
metadata={{
|
||||
...props.metadata,
|
||||
dashboards: [
|
||||
{ id: 1, dashboard_title: 'Test' },
|
||||
{ id: 2, dashboard_title: 'Test2' },
|
||||
],
|
||||
}}
|
||||
/>,
|
||||
{ useRedux: true },
|
||||
);
|
||||
expect(await screen.findByText('Added to 2 dashboards')).toBeInTheDocument();
|
||||
});
|
||||
test('Changes "Added to X dashboards" to plural when more than 1 dashboard', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true });
|
||||
render(
|
||||
<ExploreHeader
|
||||
{...props}
|
||||
metadata={{
|
||||
...props.metadata,
|
||||
dashboards: [
|
||||
{ id: 1, dashboard_title: 'Test' },
|
||||
{ id: 2, dashboard_title: 'Test2' },
|
||||
],
|
||||
}}
|
||||
/>,
|
||||
{ useRedux: true },
|
||||
);
|
||||
expect(
|
||||
await screen.findByText('Added to 2 dashboards'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('does not render the metadata bar when not saved', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true, slice: null });
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByText('Added to 1 dashboard')).not.toBeInTheDocument(),
|
||||
);
|
||||
});
|
||||
test('does not render the metadata bar when not saved', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true, slice: null });
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.queryByText('Added to 1 dashboard'),
|
||||
).not.toBeInTheDocument(),
|
||||
);
|
||||
});
|
||||
|
||||
test('Save chart', async () => {
|
||||
const setSaveChartModalVisibility = jest.spyOn(
|
||||
saveModalActions,
|
||||
'setSaveChartModalVisibility',
|
||||
);
|
||||
const props = createProps();
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
expect(await screen.findByText('Save')).toBeInTheDocument();
|
||||
userEvent.click(screen.getByText('Save'));
|
||||
expect(setSaveChartModalVisibility).toHaveBeenCalledWith(true);
|
||||
setSaveChartModalVisibility.mockClear();
|
||||
});
|
||||
test('Save chart', async () => {
|
||||
const setSaveChartModalVisibility = jest.spyOn(
|
||||
saveModalActions,
|
||||
'setSaveChartModalVisibility',
|
||||
);
|
||||
const props = createProps();
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
expect(await screen.findByText('Save')).toBeInTheDocument();
|
||||
userEvent.click(screen.getByText('Save'));
|
||||
expect(setSaveChartModalVisibility).toHaveBeenCalledWith(true);
|
||||
setSaveChartModalVisibility.mockClear();
|
||||
});
|
||||
|
||||
test('Save disabled', async () => {
|
||||
const setSaveChartModalVisibility = jest.spyOn(
|
||||
saveModalActions,
|
||||
'setSaveChartModalVisibility',
|
||||
);
|
||||
const props = createProps();
|
||||
render(<ExploreHeader {...props} saveDisabled />, { useRedux: true });
|
||||
expect(await screen.findByText('Save')).toBeInTheDocument();
|
||||
userEvent.click(screen.getByText('Save'));
|
||||
expect(setSaveChartModalVisibility).not.toHaveBeenCalled();
|
||||
setSaveChartModalVisibility.mockClear();
|
||||
test('Save disabled', async () => {
|
||||
const setSaveChartModalVisibility = jest.spyOn(
|
||||
saveModalActions,
|
||||
'setSaveChartModalVisibility',
|
||||
);
|
||||
const props = createProps();
|
||||
render(<ExploreHeader {...props} saveDisabled />, { useRedux: true });
|
||||
expect(await screen.findByText('Save')).toBeInTheDocument();
|
||||
userEvent.click(screen.getByText('Save'));
|
||||
expect(setSaveChartModalVisibility).not.toHaveBeenCalled();
|
||||
setSaveChartModalVisibility.mockClear();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Additional actions tests', () => {
|
||||
jest.setTimeout(15000); // ✅ Applies to all tests in this suite
|
||||
|
||||
test('Should render a button', async () => {
|
||||
const props = createProps();
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
@@ -346,9 +359,12 @@ describe('Additional actions tests', () => {
|
||||
spyDownloadAsImage = sinon.spy(downloadAsImage, 'default');
|
||||
spyExportChart = sinon.spy(exploreUtils, 'exportChart');
|
||||
});
|
||||
afterEach(() => {
|
||||
|
||||
afterEach(async () => {
|
||||
spyDownloadAsImage.restore();
|
||||
spyExportChart.restore();
|
||||
// Wait for any pending effects to complete
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
test('Should call downloadAsImage when click on "Download as image"', async () => {
|
||||
@@ -358,16 +374,22 @@ describe('Additional actions tests', () => {
|
||||
useRedux: true,
|
||||
});
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
userEvent.click(screen.getByLabelText('Menu actions trigger'));
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByLabelText('Menu actions trigger'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
userEvent.click(screen.getByLabelText('Menu actions trigger'));
|
||||
userEvent.hover(screen.getByText('Download'));
|
||||
|
||||
const downloadAsImageElement =
|
||||
await screen.findByText('Download as image');
|
||||
userEvent.click(downloadAsImageElement);
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
await waitFor(() => {
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
test('Should not export to CSV if canDownload=false', async () => {
|
||||
|
||||
Reference in New Issue
Block a user