From 639cbb6e5982adb15613ef43c96ef6e35fe09e35 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Mon, 31 Jan 2022 13:09:35 +0100
Subject: [PATCH] fix test

---
 .../ControlPanelsContainer.test.tsx           | 12 +++----
 .../components/ControlPanelsContainer.tsx     | 32 +++++++++----------
 .../components/ExploreViewContainer/index.jsx |  2 ++
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx
index f25793dd5f3c1..24101d9c17b9c 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styledShallow as shallow } from 'spec/helpers/theming';
+import { render, screen } from 'spec/helpers/testing-library';
 import {
   DatasourceType,
   getChartControlPanelRegistry,
@@ -30,9 +30,7 @@ import {
   ControlPanelsContainerProps,
 } from 'src/explore/components/ControlPanelsContainer';
 
-describe('ControlPanelsContainer', () => {
-  let wrapper;
-
+describe('ControlPanelsContainer2', () => {
   beforeAll(() => {
     getChartControlPanelRegistry().registerValue('table', {
       controlPanelSections: [
@@ -96,9 +94,9 @@ describe('ControlPanelsContainer', () => {
   }
 
   it('renders ControlPanelSections', () => {
-    wrapper = shallow(<ControlPanelsContainer {...getDefaultProps()} />);
+    render(<ControlPanelsContainer {...getDefaultProps()} />);
     expect(
-      wrapper.find('[data-test="collapsible-control-panel"]'),
-    ).toHaveLength(5);
+      screen.getAllByTestId('collapsible-control-panel-header'),
+    ).toHaveLength(4);
   });
 });
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index a28bfda1eeba5..715470cd309a3 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -18,7 +18,6 @@
  */
 /* eslint camelcase: 0 */
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import {
   ensureIsArray,
   t,
@@ -54,9 +53,9 @@ import Control from './Control';
 import { ControlPanelAlert } from './ControlPanelAlert';
 
 export type ControlPanelsContainerProps = {
+  exploreState: ExplorePageState['explore'];
   actions: ExploreActions;
   datasource_type: DatasourceType;
-  exploreState: ExplorePageState['explore'];
   chart: ChartState;
   controls: Record<string, ControlState>;
   form_data: QueryFormData;
@@ -180,12 +179,8 @@ function getState(
 
 export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
   const pluginContext = useContext(PluginContext);
-  const exploreState = useSelector<
-    ExplorePageState,
-    ExplorePageState['explore']
-  >(state => state.explore);
 
-  const prevDatasource = usePrevious(exploreState.datasource);
+  const prevDatasource = usePrevious(props.exploreState.datasource);
 
   const [expandedQuerySections, setExpandedQuerySections] = useState<string[]>(
     [],
@@ -204,12 +199,16 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
   useEffect(() => {
     if (
       prevDatasource &&
-      (exploreState.datasource?.id !== prevDatasource.id ||
-        exploreState.datasource?.type !== prevDatasource.type)
+      (props.exploreState.datasource?.id !== prevDatasource.id ||
+        props.exploreState.datasource?.type !== prevDatasource.type)
     ) {
       setShowDatasourceAlert(true);
     }
-  }, [exploreState.datasource, prevDatasource]);
+  }, [
+    props.exploreState.datasource?.id,
+    props.exploreState.datasource?.type,
+    prevDatasource,
+  ]);
 
   useEffect(() => {
     const {
@@ -219,7 +218,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
       customizeSections: newCustomizeSections,
     } = getState(
       props.form_data.viz_type,
-      exploreState.datasource,
+      props.exploreState.datasource,
       props.datasource_type,
     );
     setExpandedQuerySections(newExpandedQuerySections);
@@ -229,13 +228,13 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
   }, [props.form_data.datasource, props.form_data.viz_type]);
 
   const resetTransferredControls = useCallback(() => {
-    ensureIsArray(exploreState.controlsTransferred).forEach(controlName =>
+    ensureIsArray(props.exploreState.controlsTransferred).forEach(controlName =>
       props.actions.setControlValue(
         controlName,
         props.controls[controlName].default,
       ),
     );
-  }, [props.actions, exploreState.controlsTransferred, props.controls]);
+  }, [props.actions, props.exploreState.controlsTransferred, props.controls]);
 
   const handleClearFormClick = useCallback(() => {
     resetTransferredControls();
@@ -314,7 +313,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
       }),
     );
     const PanelHeader = () => (
-      <span>
+      <span data-test="collapsible-control-panel-header">
         <span>{label}</span>{' '}
         {description && (
           // label is only used in tooltip id (should probably call this prop `id`)
@@ -332,7 +331,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
 
     return (
       <Collapse.Panel
-        data-test="collapsible-control-panel"
         css={theme => css`
           margin-bottom: 0;
           box-shadow: none;
@@ -390,7 +388,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
   };
 
   const hasControlsTransferred =
-    ensureIsArray(exploreState.controlsTransferred).length > 0;
+    ensureIsArray(props.exploreState.controlsTransferred).length > 0;
 
   const DatasourceAlert = useCallback(
     () =>
@@ -417,7 +415,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
           type="warning"
         />
       ),
-    [handleClearFormClick, hasControlsTransferred],
+    [handleClearFormClick, handleContinueClick, hasControlsTransferred],
   );
 
   const controlPanelRegistry = getChartControlPanelRegistry();
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index f4de6335a80f1..b3315688127e7 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -609,6 +609,7 @@ function ExploreViewContainer(props) {
           datasourceType={props.datasource_type}
         />
         <ConnectedControlPanelsContainer
+          exploreState={props.exploreState}
           actions={props.actions}
           form_data={props.form_data}
           controls={props.controls}
@@ -674,6 +675,7 @@ function mapStateToProps(state) {
     ownState: dataMask[form_data.slice_id ?? 0]?.ownState, // 0 - unsaved chart
     impressionId,
     user: explore.user,
+    exploreState: explore,
     reports,
   };
 }