diff --git a/superset-frontend/src/features/home/ChartTable.test.tsx b/superset-frontend/src/features/home/ChartTable.test.tsx
index ee6160bc2..68a534ed3 100644
--- a/superset-frontend/src/features/home/ChartTable.test.tsx
+++ b/superset-frontend/src/features/home/ChartTable.test.tsx
@@ -17,18 +17,16 @@
* under the License.
*/
import React from 'react';
-import { styledMount as mount } from 'spec/helpers/theming';
-import thunk from 'redux-thunk';
+import {
+ render,
+ screen,
+ waitFor,
+ fireEvent,
+} from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
-import configureStore from 'redux-mock-store';
import { act } from 'react-dom/test-utils';
-import { ReactWrapper } from 'enzyme';
-import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
import ChartTable from './ChartTable';
-const mockStore = configureStore([thunk]);
-const store = mockStore({});
-
const chartsEndpoint = 'glob:*/api/v1/chart/?*';
const chartsInfoEndpoint = 'glob:*/api/v1/chart/_info*';
const chartFavoriteStatusEndpoint = 'glob:*/api/v1/chart/favorite_status*';
@@ -56,76 +54,66 @@ fetchMock.get(chartFavoriteStatusEndpoint, {
result: [],
});
-describe('ChartTable', () => {
- const mockedProps = {
- user: {
- userId: '2',
- },
- mine: [],
- otherTabData: [],
- otherTabFilters: [],
- otherTabTitle: 'Other',
- showThumbnails: false,
- };
+const mockedProps = {
+ addDangerToast: jest.fn(),
+ addSuccessToast: jest.fn(),
+ user: {
+ userId: '2',
+ },
+ mine: [],
+ otherTabData: [],
+ otherTabFilters: [],
+ otherTabTitle: 'Other',
+ showThumbnails: false,
+};
- let wrapper: ReactWrapper;
+const otherTabProps = {
+ ...mockedProps,
+ otherTabData: mockCharts,
+};
- beforeEach(async () => {
- act(() => {
- wrapper = mount();
- });
- await waitForComponentToPaint(wrapper);
+const mineTabProps = {
+ ...mockedProps,
+ mine: mockCharts,
+};
+
+const renderOptions = {
+ useRedux: true,
+ useRouter: true,
+};
+
+const renderChartTable = (props: any) =>
+ // Use of act here prevents an error about state updates inside tests
+ act(async () => {
+ render(, renderOptions);
});
- it('renders', () => {
- expect(wrapper.find(ChartTable)).toExist();
- });
+test('renders with EmptyState if no data present', async () => {
+ await renderChartTable(mockedProps);
+ expect(screen.getAllByRole('tab')).toHaveLength(3);
+ expect(
+ screen.getByText(/other charts will appear here/i),
+ ).toBeInTheDocument();
+});
- it('fetches chart favorites and renders chart cards', async () => {
- act(() => {
- const handler = wrapper.find('[role="tab"] a').at(0).prop('onClick');
- if (handler) {
- handler({} as any);
- }
- });
- await waitForComponentToPaint(wrapper);
- expect(fetchMock.calls(chartsEndpoint)).toHaveLength(1);
- expect(wrapper.find('ChartCard')).toExist();
- });
-
- it('renders other tab by default', async () => {
- await act(async () => {
- wrapper = mount(
- ,
- );
- });
- await waitForComponentToPaint(wrapper);
- expect(wrapper.find('EmptyState')).not.toExist();
- expect(wrapper.find('ChartCard')).toExist();
- });
-
- it('display EmptyState if there is no data', async () => {
- await act(async () => {
- wrapper = mount(
- ,
- );
- });
- expect(wrapper.find('EmptyState')).toExist();
+test('fetches chart favorites and renders chart cards', async () => {
+ await renderChartTable(mockedProps);
+ fireEvent.click(screen.getByText(/favorite/i));
+ await waitFor(() => {
+ expect(fetchMock.calls(chartFavoriteStatusEndpoint)).toHaveLength(1);
+ expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
+ });
+});
+
+test('renders other tab by default', async () => {
+ await renderChartTable(otherTabProps);
+ expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
+});
+
+test('renders mine tab on click', async () => {
+ await renderChartTable(mineTabProps);
+ fireEvent.click(screen.getByText(/mine/i));
+ await waitFor(() => {
+ expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
});
});