mirror of https://github.com/apache/superset.git
refactor(Homepage): Migrate Home.test to RTL (#29353)
This commit is contained in:
parent
d74d3a87bb
commit
b5a72e21f7
|
@ -16,23 +16,14 @@
|
||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import { styledMount as mount } from 'spec/helpers/theming';
|
|
||||||
import { Provider } from 'react-redux';
|
|
||||||
import thunk from 'redux-thunk';
|
|
||||||
import fetchMock from 'fetch-mock';
|
import fetchMock from 'fetch-mock';
|
||||||
import { act } from 'react-dom/test-utils';
|
|
||||||
import configureStore from 'redux-mock-store';
|
|
||||||
import * as uiCore from '@superset-ui/core';
|
import * as uiCore from '@superset-ui/core';
|
||||||
|
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
import Welcome from 'src/pages/Home';
|
import Welcome from 'src/pages/Home';
|
||||||
import { ReactWrapper } from 'enzyme';
|
|
||||||
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
|
|
||||||
import { render, screen } from 'spec/helpers/testing-library';
|
|
||||||
import { getExtensionsRegistry } from '@superset-ui/core';
|
import { getExtensionsRegistry } from '@superset-ui/core';
|
||||||
import setupExtensions from 'src/setup/setupExtensions';
|
import setupExtensions from 'src/setup/setupExtensions';
|
||||||
|
|
||||||
const mockStore = configureStore([thunk]);
|
|
||||||
const store = mockStore({});
|
|
||||||
|
|
||||||
const chartsEndpoint = 'glob:*/api/v1/chart/?*';
|
const chartsEndpoint = 'glob:*/api/v1/chart/?*';
|
||||||
const chartInfoEndpoint = 'glob:*/api/v1/chart/_info?*';
|
const chartInfoEndpoint = 'glob:*/api/v1/chart/_info?*';
|
||||||
const chartFavoriteStatusEndpoint = 'glob:*/api/v1/chart/favorite_status?*';
|
const chartFavoriteStatusEndpoint = 'glob:*/api/v1/chart/favorite_status?*';
|
||||||
|
@ -113,130 +104,104 @@ const mockedProps = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('Welcome with sql role', () => {
|
const mockedPropsWithoutSqlRole = {
|
||||||
let wrapper: ReactWrapper;
|
...{
|
||||||
|
|
||||||
beforeAll(async () => {
|
|
||||||
await act(async () => {
|
|
||||||
wrapper = mount(
|
|
||||||
<Provider store={store}>
|
|
||||||
<Welcome {...mockedProps} />
|
|
||||||
</Provider>,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
afterAll(() => {
|
|
||||||
fetchMock.resetHistory();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders', () => {
|
|
||||||
expect(wrapper).toExist();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders all panels on the page on page load', () => {
|
|
||||||
expect(wrapper.find('CollapsePanel')).toHaveLength(8);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('calls api methods in parallel on page load', () => {
|
|
||||||
const chartCall = fetchMock.calls(/chart\/\?q/);
|
|
||||||
const savedQueryCall = fetchMock.calls(/saved_query\/\?q/);
|
|
||||||
const recentCall = fetchMock.calls(/api\/v1\/log\/recent_activity\/*/);
|
|
||||||
const dashboardCall = fetchMock.calls(/dashboard\/\?q/);
|
|
||||||
expect(chartCall).toHaveLength(2);
|
|
||||||
expect(recentCall).toHaveLength(1);
|
|
||||||
expect(savedQueryCall).toHaveLength(1);
|
|
||||||
expect(dashboardCall).toHaveLength(2);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Welcome without sql role', () => {
|
|
||||||
let wrapper: ReactWrapper;
|
|
||||||
|
|
||||||
beforeAll(async () => {
|
|
||||||
await act(async () => {
|
|
||||||
const props = {
|
|
||||||
...mockedProps,
|
...mockedProps,
|
||||||
user: {
|
user: {
|
||||||
...mockedProps.user,
|
...mockedProps.user,
|
||||||
roles: {},
|
roles: {},
|
||||||
},
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
wrapper = mount(
|
|
||||||
<Provider store={store}>
|
const setupFeatureToggleMock = () =>
|
||||||
<Welcome {...props} />
|
jest.spyOn(uiCore, 'isFeatureEnabled').mockReturnValue(true);
|
||||||
</Provider>,
|
|
||||||
);
|
const renderWelcome = (props = mockedProps) =>
|
||||||
|
waitFor(() => {
|
||||||
|
render(<Welcome {...props} />, {
|
||||||
|
useRedux: true,
|
||||||
|
useRouter: true,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterAll(() => {
|
afterEach(() => {
|
||||||
fetchMock.resetHistory();
|
fetchMock.resetHistory();
|
||||||
fetchMock.restore();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders', () => {
|
test('With sql role - renders', async () => {
|
||||||
expect(wrapper).toExist();
|
await renderWelcome();
|
||||||
|
expect(await screen.findByText('Dashboards')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders all panels on the page on page load', () => {
|
test('With sql role - renders all panels on the page on page load', async () => {
|
||||||
expect(wrapper.find('CollapsePanel')).toHaveLength(6);
|
await renderWelcome();
|
||||||
});
|
const panels = await screen.findAllByText(
|
||||||
|
/Dashboards|Charts|Recents|Saved queries/,
|
||||||
it('calls api methods in parallel on page load', () => {
|
|
||||||
const chartCall = fetchMock.calls(/chart\/\?q/);
|
|
||||||
const savedQueryCall = fetchMock.calls(/saved_query\/\?q/);
|
|
||||||
const recentCall = fetchMock.calls(/api\/v1\/log\/recent_activity\/*/);
|
|
||||||
const dashboardCall = fetchMock.calls(/dashboard\/\?q/);
|
|
||||||
expect(chartCall).toHaveLength(2);
|
|
||||||
expect(recentCall).toHaveLength(1);
|
|
||||||
expect(savedQueryCall).toHaveLength(0);
|
|
||||||
expect(dashboardCall).toHaveLength(2);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
async function mountAndWait(props = mockedProps) {
|
|
||||||
const wrapper = mount(
|
|
||||||
<Provider store={store}>
|
|
||||||
<Welcome {...props} />
|
|
||||||
</Provider>,
|
|
||||||
);
|
);
|
||||||
await waitForComponentToPaint(wrapper);
|
expect(panels).toHaveLength(4);
|
||||||
return wrapper;
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('Welcome page with toggle switch', () => {
|
|
||||||
let wrapper: ReactWrapper;
|
|
||||||
let isFeatureEnabledMock: any;
|
|
||||||
|
|
||||||
beforeAll(async () => {
|
|
||||||
isFeatureEnabledMock = jest
|
|
||||||
.spyOn(uiCore, 'isFeatureEnabled')
|
|
||||||
.mockReturnValue(true);
|
|
||||||
await act(async () => {
|
|
||||||
wrapper = await mountAndWait();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
afterAll(() => {
|
test('With sql role - calls api methods in parallel on page load', async () => {
|
||||||
isFeatureEnabledMock.mockRestore();
|
await renderWelcome();
|
||||||
|
expect(fetchMock.calls(chartsEndpoint)).toHaveLength(2);
|
||||||
|
expect(fetchMock.calls(recentActivityEndpoint)).toHaveLength(1);
|
||||||
|
expect(fetchMock.calls(savedQueryEndpoint)).toHaveLength(1);
|
||||||
|
expect(fetchMock.calls(dashboardsEndpoint)).toHaveLength(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows a toggle button when feature flags is turned on', async () => {
|
test('Without sql role - renders', async () => {
|
||||||
await waitForComponentToPaint(wrapper);
|
/*
|
||||||
expect(wrapper.find('Switch')).toExist();
|
We ignore the ts error here because the type does not recognize the absence of a role entry
|
||||||
});
|
*/
|
||||||
it('does not show thumbnails when switch is off', async () => {
|
// @ts-ignore-next-line
|
||||||
act(() => {
|
await renderWelcome(mockedPropsWithoutSqlRole);
|
||||||
// @ts-ignore
|
expect(await screen.findByText('Dashboards')).toBeInTheDocument();
|
||||||
wrapper.find('button[role="switch"]').props().onClick();
|
|
||||||
});
|
|
||||||
await waitForComponentToPaint(wrapper);
|
|
||||||
expect(wrapper.find('ImageLoader')).not.toExist();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should render an extension component if one is supplied', () => {
|
test('Without sql role - renders all panels on the page on page load', async () => {
|
||||||
|
// @ts-ignore-next-line
|
||||||
|
await renderWelcome(mockedPropsWithoutSqlRole);
|
||||||
|
const panels = await screen.findAllByText(/Dashboards|Charts|Recents/);
|
||||||
|
expect(panels).toHaveLength(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Without sql role - calls api methods in parallel on page load', async () => {
|
||||||
|
// @ts-ignore-next-line
|
||||||
|
await renderWelcome(mockedPropsWithoutSqlRole);
|
||||||
|
expect(fetchMock.calls(chartsEndpoint)).toHaveLength(2);
|
||||||
|
expect(fetchMock.calls(recentActivityEndpoint)).toHaveLength(1);
|
||||||
|
expect(fetchMock.calls(savedQueryEndpoint)).toHaveLength(0);
|
||||||
|
expect(fetchMock.calls(dashboardsEndpoint)).toHaveLength(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mock specific to the tests related to the toggle switch
|
||||||
|
fetchMock.get('glob:*/api/v1/dashboard/*', {
|
||||||
|
result: {
|
||||||
|
dashboard_title: 'Dashboard 4',
|
||||||
|
changed_on_utc: '24 Feb 2014 10:13:14',
|
||||||
|
url: '/fakeUrl/dashboard/4',
|
||||||
|
id: '4',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
test('With toggle switch - shows a toggle button when feature flag is turned on', async () => {
|
||||||
|
setupFeatureToggleMock();
|
||||||
|
|
||||||
|
await renderWelcome();
|
||||||
|
expect(screen.getByRole('switch')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('With toggle switch - does not show thumbnails when switch is off', async () => {
|
||||||
|
setupFeatureToggleMock();
|
||||||
|
|
||||||
|
await renderWelcome();
|
||||||
|
const toggle = await screen.findByRole('switch');
|
||||||
|
userEvent.click(toggle);
|
||||||
|
expect(screen.queryByAltText('Thumbnails')).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should render an extension component if one is supplied', async () => {
|
||||||
const extensionsRegistry = getExtensionsRegistry();
|
const extensionsRegistry = getExtensionsRegistry();
|
||||||
|
|
||||||
extensionsRegistry.set('welcome.banner', () => (
|
extensionsRegistry.set('welcome.banner', () => (
|
||||||
|
@ -245,29 +210,21 @@ test('should render an extension component if one is supplied', () => {
|
||||||
|
|
||||||
setupExtensions();
|
setupExtensions();
|
||||||
|
|
||||||
render(
|
await renderWelcome();
|
||||||
<Provider store={store}>
|
|
||||||
<Welcome {...mockedProps} />
|
|
||||||
</Provider>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByText('welcome.banner extension component'),
|
screen.getByText('welcome.banner extension component'),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should render a submenu extension component if one is supplied', () => {
|
test('Should render a submenu extension component if one is supplied', async () => {
|
||||||
const extensionsRegistry = getExtensionsRegistry();
|
const extensionsRegistry = getExtensionsRegistry();
|
||||||
|
|
||||||
extensionsRegistry.set('home.submenu', () => <>submenu extension</>);
|
extensionsRegistry.set('home.submenu', () => <>submenu extension</>);
|
||||||
|
|
||||||
setupExtensions();
|
setupExtensions();
|
||||||
|
|
||||||
render(
|
await renderWelcome();
|
||||||
<Provider store={store}>
|
|
||||||
<Welcome {...mockedProps} />
|
|
||||||
</Provider>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByText('submenu extension')).toBeInTheDocument();
|
expect(screen.getByText('submenu extension')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue