fix: tests

lijinke666 · lijinke666 · commit ac54afc8e833 · 2021-12-11T11:24:50.000+08:00
diff --git a/packages/s2-react/__tests__/spreadsheet/adaptive-spec.tsx b/packages/s2-react/__tests__/spreadsheet/adaptive-spec.tsx
@@ -13,11 +13,11 @@ interface Props {
   containerId?: string;
 }
 
-const s2Options: S2Options = Object.freeze({
+const s2Options: S2Options = {
   width: 200,
   height: 200,
   hdAdapter: false,
-});
+};
 
 let s2: SpreadSheet;
 
@@ -39,11 +39,7 @@ function MainLayout({
         adaptive={adaptive}
         sheetType="pivot"
         dataCfg={mockDataConfig}
-        options={{
-          width: 200,
-          height: 200,
-          hdAdapter: false,
-        }}
+        options={s2Options}
         themeCfg={{ name: 'default' }}
         getSpreadSheet={(instance) => {
           s2 = instance;
@@ -75,7 +71,7 @@ describe('SheetComponent adaptive Tests', () => {
   test('should use container width when container width less than options width and table first rendered', async () => {
     act(() => {
       ReactDOM.render(
-        <MainLayout adaptive containerWidth={s2Options.width - 100} />,
+        <MainLayout adaptive={true} containerWidth={s2Options.width - 100} />,
         getContainer(),
       );
     });
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -88,9 +88,12 @@ function MainLayout() {
   const s2Ref = React.useRef<SpreadSheet>();
 
   //  ================== Callback ========================
-  const updateOptions = (newOptions: Partial<S2Options<React.ReactNode>>) => {
-    setOptions(customMerge({}, options, newOptions));
-  };
+  const updateOptions = React.useCallback(
+    (newOptions: Partial<S2Options<React.ReactNode>>) => {
+      setOptions(customMerge({}, options, newOptions));
+    },
+    [options],
+  );
 
   const updateDataCfg = (newDataCfg: Partial<S2DataConfig>) => {
     const currentDataCfg =
@@ -189,7 +192,7 @@ function MainLayout() {
         updateOptions(defaultOptions);
         break;
     }
-  }, [sheetType]);
+  }, [sheetType, updateOptions]);
 
   //  ================== Config ========================
 
@@ -281,7 +284,7 @@ function MainLayout() {
 
   return (
     <div className="playground">
-      <Collapse activeKey="filter">
+      <Collapse defaultActiveKey="filter">
         <Collapse.Panel header="筛选器" key="filter">
           <Space style={{ marginBottom: 20 }}>
             <Switch
diff --git a/packages/s2-react/src/hooks/useResize.ts b/packages/s2-react/src/hooks/useResize.ts
@@ -1,7 +1,6 @@
 import React from 'react';
 import { debounce } from 'lodash';
-import type { S2Options, SpreadSheet } from '@antv/s2';
-import { usePrevious } from './usePrevious';
+import type { SpreadSheet } from '@antv/s2';
 
 export interface UseResizeEffectParams {
   container: HTMLElement;
@@ -14,7 +13,6 @@ const RENDER_DELAY = 200; // ms
 export const useResize = (params: UseResizeEffectParams) => {
   const { container, s2, adaptive } = params;
 
-  const prevOptions = usePrevious<S2Options>(s2?.options);
   // 第一次自适应时不需要 debounce, 防止抖动
   const isFirstRender = React.useRef<boolean>(true);
 
@@ -28,18 +26,11 @@ export const useResize = (params: UseResizeEffectParams) => {
 
   // rerender by option
   React.useEffect(() => {
-    if (!adaptive && s2 && prevOptions) {
-      const isChanged =
-        prevOptions.width !== s2.options.width ||
-        prevOptions.height !== s2.options.height;
-
-      if (!isChanged) {
-        return;
-      }
+    if (!adaptive && s2) {
       s2.changeSize(s2.options.width, s2.options.height);
       s2.render(false);
     }
-  }, [s2?.options.width, s2?.options.height, adaptive, s2, prevOptions]);
+  }, [s2?.options.width, s2?.options.height, adaptive, s2]);
 
   // rerender by container resize or window resize
   React.useLayoutEffect(() => {
@@ -66,5 +57,5 @@ export const useResize = (params: UseResizeEffectParams) => {
       resizeObserver.unobserve(container);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [adaptive, container, render]);
+  }, [adaptive, container]);
 };
