diff --git a/superset-frontend/src/pages/Chart/Chart.test.tsx b/superset-frontend/src/pages/Chart/Chart.test.tsx index 07bfdf1d83fa2..fb4f9a8891698 100644 --- a/superset-frontend/src/pages/Chart/Chart.test.tsx +++ b/superset-frontend/src/pages/Chart/Chart.test.tsx @@ -17,9 +17,7 @@ * under the License. */ import React from 'react'; -import thunk from 'redux-thunk'; import fetchMock from 'fetch-mock'; -import configureStore from 'redux-mock-store'; import { Link } from 'react-router-dom'; import { render, @@ -32,25 +30,31 @@ import { getDashboardFormData } from 'spec/fixtures/mockDashboardFormData'; import { LocalStorageKeys } from 'src/utils/localStorageHelpers'; import getFormDataWithExtraFilters from 'src/dashboard/util/charts/getFormDataWithExtraFilters'; import { URL_PARAMS } from 'src/constants'; +import { JsonObject } from '@superset-ui/core'; import ChartPage from '.'; -jest.mock('src/explore/components/ExploreViewContainer', () => () => ( -
-)); +jest.mock('re-resizable', () => ({ + Resizable: () =>
, +})); +jest.mock( + 'src/explore/components/ExploreChartPanel', + () => + ({ exploreState }: { exploreState: JsonObject }) => + ( +
+ {JSON.stringify(exploreState)} +
+ ), +); jest.mock('src/dashboard/util/charts/getFormDataWithExtraFilters'); -const mockStore = configureStore([thunk]); - describe('ChartPage', () => { afterEach(() => { fetchMock.reset(); }); test('fetches metadata on mount', async () => { - const store = mockStore({ - explore: {}, - }); const exploreApiRoute = 'glob:*/api/v1/explore/*'; const exploreFormData = getExploreFormData({ viz_type: 'table', @@ -62,22 +66,14 @@ describe('ChartPage', () => { const { getByTestId } = render(, { useRouter: true, useRedux: true, - store, }); await waitFor(() => expect(fetchMock.calls(exploreApiRoute).length).toBe(1), ); - expect(getByTestId('mock-explore-view-container')).toBeInTheDocument(); - expect(store.getActions()).toContainEqual({ - type: 'HYDRATE_EXPLORE', - data: expect.objectContaining({ - explore: expect.objectContaining({ - form_data: expect.objectContaining({ - show_cell_bars: true, - }), - }), - }), - }); + expect(getByTestId('mock-explore-chart-panel')).toBeInTheDocument(); + expect(getByTestId('mock-explore-chart-panel')).toHaveTextContent( + JSON.stringify({ show_cell_bars: true }).slice(1, -1), + ); }); describe('with dashboardContextFormData', () => { @@ -98,9 +94,6 @@ describe('ChartPage', () => { }); test('overrides the form_data with dashboardContextFormData', async () => { - const store = mockStore({ - explore: {}, - }); const dashboardFormData = getDashboardFormData(); (getFormDataWithExtraFilters as jest.Mock).mockReturnValue( dashboardFormData, @@ -115,30 +108,22 @@ describe('ChartPage', () => { '', `/?${URL_PARAMS.dashboardPageId.name}=${dashboardPageId}`, ); - render(, { + const { getByTestId } = render(, { useRouter: true, useRedux: true, - store, }); await waitFor(() => expect(fetchMock.calls(exploreApiRoute).length).toBe(1), ); - expect(store.getActions()).toContainEqual({ - type: 'HYDRATE_EXPLORE', - data: expect.objectContaining({ - explore: expect.objectContaining({ - form_data: expect.objectContaining({ - color_scheme: dashboardFormData.color_scheme, - }), - }), - }), - }); + expect(getByTestId('mock-explore-chart-panel')).toHaveTextContent( + JSON.stringify({ color_scheme: dashboardFormData.color_scheme }).slice( + 1, + -1, + ), + ); }); test('overrides the form_data with exploreFormData when location is updated', async () => { - const store = mockStore({ - explore: {}, - }); const dashboardFormData = { ...getDashboardFormData(), viz_type: 'table', @@ -160,7 +145,7 @@ describe('ChartPage', () => { '', `/?${URL_PARAMS.dashboardPageId.name}=${dashboardPageId}`, ); - render( + const { getByTestId } = render( <> { { useRouter: true, useRedux: true, - store, }, ); await waitFor(() => expect(fetchMock.calls(exploreApiRoute).length).toBe(1), ); - expect(store.getActions()).toContainEqual({ - type: 'HYDRATE_EXPLORE', - data: expect.objectContaining({ - explore: expect.objectContaining({ - form_data: expect.objectContaining({ - show_cell_bars: dashboardFormData.show_cell_bars, - }), - }), - }), - }); + expect(getByTestId('mock-explore-chart-panel')).toHaveTextContent( + JSON.stringify({ + show_cell_bars: dashboardFormData.show_cell_bars, + }).slice(1, -1), + ); const updatedExploreFormData = { ...exploreFormData, show_cell_bars: false, @@ -200,16 +179,11 @@ describe('ChartPage', () => { await waitFor(() => expect(fetchMock.calls(exploreApiRoute).length).toBe(1), ); - expect(store.getActions()).toContainEqual({ - type: 'HYDRATE_EXPLORE', - data: expect.objectContaining({ - explore: expect.objectContaining({ - form_data: expect.objectContaining({ - show_cell_bars: updatedExploreFormData.show_cell_bars, - }), - }), - }), - }); + expect(getByTestId('mock-explore-chart-panel')).toHaveTextContent( + JSON.stringify({ + show_cell_bars: updatedExploreFormData.show_cell_bars, + }).slice(1, -1), + ); }); }); });