refactor ExploreChartPanel testable

superset-frontend/src/explore/components/ExploreChartPanel.jsx → superset-frontend/src/explore/components/ExploreChartPanel/index.jsx

@@ -16,13 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
 import {
@@ -36,7 +30,6 @@ import {
   t,
   useTheme,
 } from '@superset-ui/core';
-import { useResizeDetector } from 'react-resize-detector';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import ChartContainer from 'src/components/Chart/ChartContainer';
 import { isFeatureEnabled } from 'src/featureFlags';
@@ -48,11 +41,12 @@ import {
 import Alert from 'src/components/Alert';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
-import { DataTablesPane } from './DataTablesPane';
-import { buildV1ChartDataPayload } from '../exploreUtils';
-import { ChartPills } from './ChartPills';
-import { ExploreAlert } from './ExploreAlert';
-import { getChartRequiredFieldsMissingMessage } from '../../utils/getChartRequiredFieldsMissingMessage';
+import { buildV1ChartDataPayload } from 'src/explore/exploreUtils';
+import { getChartRequiredFieldsMissingMessage } from 'src/utils/getChartRequiredFieldsMissingMessage';
+import { DataTablesPane } from '../DataTablesPane';
+import { ChartPills } from '../ChartPills';
+import { ExploreAlert } from '../ExploreAlert';
+import useChartPanelResize from './useResizeDectorByObserver';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -147,25 +141,12 @@ const ExploreChartPanel = ({
   const theme = useTheme();
   const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR;
   const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR;
-  const chartPanelRef = useRef();
-  const [{ chartPanelWidth, chartPanelHeight }, setChartPanelSize] = useState(
-    {},
-  );
-  const onResize = useCallback(() => {
-    if (chartPanelRef.current) {
-      const { width, height } =
-        chartPanelRef.current.getBoundingClientRect?.() || {};
-      setChartPanelSize({
-        chartPanelWidth: width,
-        chartPanelHeight: height,
-      });
-    }
-  }, []);
-  const { ref: resizeObserverRef } = useResizeDetector({
-    refreshMode: 'debounce',
-    refreshRate: 300,
-    onResize,
-  });
+  const {
+    ref: chartPanelRef,
+    observerRef: resizeObserverRef,
+    width: chartPanelWidth,
+    height: chartPanelHeight,
+  } = useChartPanelResize();
   const [splitSizes, setSplitSizes] = useState(
     isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
       ? INITIAL_SIZES
@@ -393,6 +374,7 @@ const ExploreChartPanel = ({
       </div>
     ),
     [
+      resizeObserverRef,
       showAlertBanner,
       errorMessage,
       onQuery,

superset-frontend/src/explore/components/ExploreChartPanel/useResizeDectorByObserver.ts

@@ -0,0 +1,46 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useState, useCallback, useRef } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+export default function useResizeDetectorByTarget() {
+  const ref = useRef<HTMLDivElement>();
+  const [{ width, height }, setChartPanelSize] = useState<{
+    width?: number;
+    height?: number;
+  }>({});
+  const onResize = useCallback(() => {
+    if (ref.current) {
+      const { width, height } = ref.current.getBoundingClientRect?.() || {};
+      setChartPanelSize({ width, height });
+    }
+  }, []);
+  const { ref: observerRef } = useResizeDetector({
+    refreshMode: 'debounce',
+    refreshRate: 300,
+    onResize,
+  });
+
+  return {
+    ref,
+    observerRef,
+    width,
+    height,
+  };
+}

superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx

@@ -78,10 +78,13 @@ const reduxState = {
 const KEY = 'aWrs7w29sd';
 const SEARCH = `?form_data_key=${KEY}&dataset_id=1`;
 
-jest.mock('react-resize-detector', () => ({
-  __esModule: true,
-  useResizeDetector: () => ({ height: 100, width: 100 }),
-}));
+jest.mock(
+  'src/explore/components/ExploreChartPanel/useResizeDectorByObserver',
+  () => ({
+    __esModule: true,
+    default: () => ({ height: 100, width: 100 }),
+  }),
+);
 
 jest.mock('lodash/debounce', () => ({
   __esModule: true,