test: 增加测试

antvis · Jul 3, 2024 · 1eb9b6c · 1eb9b6c
1 parent 67d6fc6
commit 1eb9b6c
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 14 deletions.
diff --git a/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts
@@ -122,7 +122,6 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
       operator,
       hideSummary: true,
       onlyShowCellText,
-      forceRender: true,
     });
   }
 

diff --git a/packages/s2-react/__tests__/unit/utils/react-render-16-spec.tsx b/packages/s2-react/__tests__/unit/utils/react-render-16-spec.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable react/no-deprecated */
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    version: '16.9.0',
+  };
+});
+
+jest.mock('react-dom', () => {
+  return {
+    ...jest.requireActual('react-dom'),
+    render: jest.fn(),
+    unmountComponentAtNode: jest.fn(),
+    createRoot: jest.fn(() => {
+      return {
+        unmount: jest.fn(),
+      };
+    }),
+  };
+});
+
+import {
+  forceClearContent,
+  isLegacyReactVersion,
+  reactRender,
+  reactUnmount,
+} from '@/utils/reactRender';
+import ReactDOM from 'react-dom';
+import { getContainer } from '../../util/helpers';
+
+const element = null;
+const container = getContainer();
+
+describe('React 16 Render Tests', () => {
+  test('should get correctly legacy react version', () => {
+    expect(isLegacyReactVersion()).toBeTruthy();
+  });
+
+  test('should only call legacy render', () => {
+    reactRender(element, container);
+
+    expect(ReactDOM.render).toHaveBeenCalledTimes(1);
+    // @ts-ignore
+    expect(ReactDOM.createRoot).toHaveBeenCalledTimes(0);
+  });
+
+  test('should only call legacy unmount', () => {
+    reactUnmount(container);
+
+    expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledTimes(1);
+  });
+
+  test('should only call modern render for force clear content', () => {
+    const root = reactRender(element, container);
+
+    forceClearContent(container);
+
+    expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledTimes(1);
+    expect(ReactDOM.render).toHaveBeenCalledTimes(1);
+    expect(root).not.toBeDefined();
+  });
+});
diff --git a/packages/s2-react/__tests__/unit/utils/react-render-18-spec.tsx b/packages/s2-react/__tests__/unit/utils/react-render-18-spec.tsx
@@ -0,0 +1,66 @@
+/* eslint-disable jest/no-standalone-expect */
+/* eslint-disable react/no-deprecated */
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    version: '18.3.0',
+  };
+});
+
+jest.mock('react-dom', () => {
+  return {
+    ...jest.requireActual('react-dom'),
+    render: jest.fn(),
+    unmountComponentAtNode: jest.fn(),
+    createRoot: jest.fn(() => {
+      return {
+        render: jest.fn(),
+        unmount: jest.fn(),
+      };
+    }),
+  };
+});
+
+import {
+  forceClearContent,
+  isLegacyReactVersion,
+  reactRender,
+  reactUnmount,
+} from '@/utils/reactRender';
+import ReactDOM from 'react-dom';
+import { getContainer } from '../../util/helpers';
+
+const element = null;
+const container = getContainer();
+
+describe('React 18 Render Tests', () => {
+  test('should get correctly legacy react version', () => {
+    expect(isLegacyReactVersion()).toBeFalsy();
+  });
+
+  test('should only call modern render', () => {
+    reactRender(element, container);
+
+    expect(ReactDOM.render).toHaveBeenCalledTimes(0);
+    // @ts-ignore
+    expect(ReactDOM.createRoot).toHaveBeenCalledTimes(1);
+  });
+
+  test('should only call modern unmount', () => {
+    const root = reactRender(element, container);
+
+    reactUnmount(container);
+
+    expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledTimes(0);
+    expect(root).not.toBeDefined();
+  });
+
+  test('should only call modern render for force clear content', () => {
+    const root = forceClearContent(container);
+
+    expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledTimes(0);
+    expect(ReactDOM.render).toHaveBeenCalledTimes(0);
+    expect(root.unmount).toHaveBeenCalledTimes(0);
+    expect(root.render).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/s2-react/src/components/tooltip/custom-tooltip.tsx b/packages/s2-react/src/components/tooltip/custom-tooltip.tsx
@@ -3,7 +3,11 @@
 // eslint-disable-next-line prettier/prettier
 import { BaseTooltip, isMobile, SpreadSheet } from '@antv/s2';
 import React from 'react';
-import { forceClear, reactRender, reactUnmount } from '../../utils/reactRender';
+import {
+  forceClearContent,
+  reactRender,
+  reactUnmount,
+} from '../../utils/reactRender';
 import { ConfigProvider } from '../config-provider';
 import { TooltipComponent } from './index';
 import type {
@@ -70,7 +74,7 @@ export class CustomTooltip extends BaseTooltip<
   }
 
   forceClearContent() {
-    forceClear(this.container!);
+    forceClearContent(this.container!);
   }
 
   unmount() {

diff --git a/packages/s2-react/src/utils/reactRender.ts b/packages/s2-react/src/utils/reactRender.ts
@@ -6,10 +6,10 @@ import { version } from 'react';
 import * as ReactDOM from 'react-dom';
 import type { Root } from 'react-dom/client';
 
-const REACT_ROOT_SYMBOL_ID = `__s2_react_root__`;
+export const S2_REACT_ROOT_SYMBOL_ID = `__s2_react_root__`;
 
 type ContainerType = (Element | DocumentFragment) & {
-  [REACT_ROOT_SYMBOL_ID]?: Root;
+  [S2_REACT_ROOT_SYMBOL_ID]?: Root;
 };
 
 type CreateRoot = (container: ContainerType) => Root;
@@ -64,13 +64,13 @@ function modernRender(
   container: ContainerType,
 ): Root {
   toggleWarning(true);
-  const root = container[REACT_ROOT_SYMBOL_ID] || createRoot(container);
+  const root = container[S2_REACT_ROOT_SYMBOL_ID] || createRoot(container);
 
   toggleWarning(false);
 
   root.render(node);
 
-  container[REACT_ROOT_SYMBOL_ID] = root;
+  container[S2_REACT_ROOT_SYMBOL_ID] = root;
 
   return root;
 }
@@ -99,9 +99,9 @@ export function reactRender(
 function modernUnmount(container: ContainerType) {
   // https://github.com/facebook/react/issues/25675#issuecomment-1363957941
   return Promise.resolve().then(() => {
-    container?.[REACT_ROOT_SYMBOL_ID]?.unmount();
+    container?.[S2_REACT_ROOT_SYMBOL_ID]?.unmount();
 
-    delete container?.[REACT_ROOT_SYMBOL_ID];
+    delete container?.[S2_REACT_ROOT_SYMBOL_ID];
   });
 }
 
@@ -119,12 +119,10 @@ export function reactUnmount(container: ContainerType) {
   return legacyUnmount(container);
 }
 
-export function forceClear(container: ContainerType) {
+export function forceClearContent(container: ContainerType) {
   if (isLegacyReactVersion()) {
-    legacyUnmount(container);
-
-    return;
+    return legacyUnmount(container);
   }
 
-  modernRender(null, container);
+  return modernRender(null, container);
 }