diff --git a/app/client/src/widgets/ChartWidget/component/index.test.tsx b/app/client/src/widgets/ChartWidget/component/index.test.tsx index 44508d49ad..b0b0ac87c7 100644 --- a/app/client/src/widgets/ChartWidget/component/index.test.tsx +++ b/app/client/src/widgets/ChartWidget/component/index.test.tsx @@ -96,7 +96,54 @@ describe("Chart Widget", () => { expect(fusionContainer).toBeInTheDocument(); }); - it("2. adds a click event when user adds a click callback", async () => { + it("2. successfully switches sequence of basic chart/custom fusion chart/basic chart", async () => { + // First render with Area Chart + let props = JSON.parse(JSON.stringify(defaultProps)); + props.chartType = "AREA_CHART"; + + const { container, getByText, rerender } = render( + , + ); + + let xAxisLabel = getByText("xaxisname"); + expect(xAxisLabel).toBeInTheDocument(); + + let echartsContainer = container.querySelector("#widgetIDechart-container"); + expect(echartsContainer).toBeInTheDocument(); + + let fusionContainer = container.querySelector( + "#widgetIDcustom-fusion-chart-container", + ); + expect(fusionContainer).not.toBeInTheDocument(); + + // Second render with fusion charts + props = JSON.parse(JSON.stringify(defaultProps)); + props.chartType = "CUSTOM_FUSION_CHART"; + + rerender(); + + echartsContainer = container.querySelector("#widgetIDechart-container"); + expect(echartsContainer).not.toBeInTheDocument(); + + fusionContainer = container.querySelector( + "#widgetIDcustom-fusion-chart-container", + ); + expect(fusionContainer).toBeInTheDocument(); + + // Third render with Area charts again. + props = JSON.parse(JSON.stringify(defaultProps)); + props.chartType = "AREA_CHART"; + + rerender(); + + xAxisLabel = getByText("xaxisname"); + expect(xAxisLabel).toBeInTheDocument(); + + echartsContainer = container.querySelector("#widgetIDechart-container"); + expect(echartsContainer).toBeInTheDocument(); + }); + + it("3. adds a click event when user adds a click callback", async () => { const mockCallback = jest.fn(); const props = { ...defaultProps }; props.onDataPointClick = (point) => { diff --git a/app/client/src/widgets/ChartWidget/component/index.tsx b/app/client/src/widgets/ChartWidget/component/index.tsx index 3b98b9599f..7117ba0aa4 100644 --- a/app/client/src/widgets/ChartWidget/component/index.tsx +++ b/app/client/src/widgets/ChartWidget/component/index.tsx @@ -251,6 +251,7 @@ class ChartComponent extends React.Component< this.props.chartType == "CUSTOM_FUSION_CHART" && this.state.chartType != "CUSTOM_FUSION_CHART" ) { + this.echartConfiguration = {}; this.setState({ eChartsError: undefined, chartType: "CUSTOM_FUSION_CHART",