chore: add more test (ant-design#6143)

* chore: add more test * chore: add more test * fix test * update * test: add more test * add more test * add more test * update * fix more test * remove unuse code * remove unuse code * remove unuse code * remove unuse code * remove unuse code
hsbtr · Oct 31, 2022 · c653036 · c653036
1 parent 428ed6d
commit c653036
Show file tree

Hide file tree

Showing 31 changed files with 481 additions and 290 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -25,9 +25,7 @@ module.exports = {
   transform: {
     '^.+\\.(t|j)sx?$': ['esbuild-jest', { sourcemap: true }],
   },
-  transformIgnorePatterns: [
-    '/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime|@umijs/renderer-react|@umijs/preset-umi|umi).+(js|jsx)$',
-  ],
+  transformIgnorePatterns: [`/node_modules/(?!${[].join('|')})`],
   unmockedModulePathPatterns: ['node_modules/react/', 'node_modules/enzyme/'],
   testURL:
     'http://localhost?navTheme=realDark&layout=mix&colorPrimary=techBlue&splitMenus=false&fixedHeader=true',

diff --git a/packages/card/src/components/Actions/index.tsx b/packages/card/src/components/Actions/index.tsx
@@ -28,9 +28,7 @@ const ProCardActions: React.FC<ProCardActionsProps> = (props) => {
       </ul>,
     );
   }
-  if (actions)
-    return wrapSSR(<ul className={classNames(`${prefixCls}-actions`, hashId)}>{actions}</ul>);
-  return null;
+  return wrapSSR(<ul className={classNames(`${prefixCls}-actions`, hashId)}>{actions}</ul>);
 };
 
 export default ProCardActions;
diff --git a/packages/card/src/components/Card/index.tsx b/packages/card/src/components/Card/index.tsx
@@ -267,7 +267,7 @@ const Card = React.forwardRef((props: CardProps, ref: any) => {
           {loading ? loadingDOM : childrenModified}
         </div>
       )}
-      {<Actions actions={actions} prefixCls={prefixCls} />}
+      {actions ? <Actions actions={actions} prefixCls={prefixCls} /> : null}
     </div>,
   );
 });

diff --git a/packages/card/src/demos/actions.tsx b/packages/card/src/demos/actions.tsx
@@ -1,9 +1,10 @@
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
 import { ProCard } from '@ant-design/pro-components';
+import { Space } from 'antd';
 
 export default () => {
   return (
-    <>
+    <Space>
       <ProCard
         title="Actions 操作项"
         style={{ maxWidth: 300 }}
@@ -17,6 +18,34 @@ export default () => {
         <div>Card content</div>
         <div>Card content</div>
       </ProCard>
-    </>
+
+      <ProCard
+        title="单独的 Actions 操作项"
+        style={{ maxWidth: 300 }}
+        actions={
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 12,
+            }}
+          >
+            <SettingOutlined key="setting" />
+            设置
+          </div>
+        }
+      >
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
+      </ProCard>
+
+      <ProCard title="无 Actions 操作项" style={{ maxWidth: 300 }}>
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
+      </ProCard>
+    </Space>
   );
 };
diff --git a/packages/card/src/type.ts b/packages/card/src/type.ts
@@ -40,7 +40,7 @@ type CardPropsBase = {
   /** 栅格间距 */
   gutter?: Gutter | Gutter[];
   /** 操作按钮 */
-  actions?: React.ReactNode[];
+  actions?: React.ReactNode[] | React.ReactNode;
   /** 拆分卡片方式 */
   split?: 'vertical' | 'horizontal';
   /** 是否有边框 */

diff --git a/packages/field/src/components/Money/index.tsx b/packages/field/src/components/Money/index.tsx
@@ -1,6 +1,5 @@
 import { intlMap as allIntlMap, useIntl } from '@ant-design/pro-provider';
 import type { InputNumberProps } from 'antd';
-import { version } from 'antd';
 import { InputNumber, Popover } from 'antd';
 import omit from 'omit.js';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -10,9 +9,10 @@ import type { ProFieldFC } from '../../index';
 // 兼容代码-----------
 import 'antd/es/input-number/style';
 import 'antd/es/popover/style';
-import { compareVersions } from '@ant-design/pro-utils';
 //----------------------
 
+import { openVisibleCompatible } from '@ant-design/pro-utils';
+
 export type FieldMoneyProps = {
   text: number;
   moneySymbol?: boolean;
@@ -214,14 +214,7 @@ const InputNumberPopover = React.forwardRef<
     value,
   });
 
-  const props =
-    compareVersions(version, '4.23.0') > -1
-      ? {
-          open: dom ? open : false,
-        }
-      : {
-          visible: dom ? open : false,
-        };
+  const props = openVisibleCompatible(dom ? open : false);
 
   return (
     <Popover

diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
@@ -7,7 +7,6 @@ import type {
   RequestOptionsType,
 } from '@ant-design/pro-utils';
 import {
-  useSafeState,
   nanoid,
   useDebounceValue,
   useDeepCompareEffect,
@@ -299,7 +298,7 @@ export const useFieldFetchData = (
 ): [boolean, SelectOptionType, (keyWord?: string) => void, () => void] => {
   const { cacheForSwr, fieldProps } = props;
 
-  const [keyWords, setKeyWords] = useSafeState<string | undefined>(props.defaultKeyWords);
+  const [keyWords, setKeyWords] = useState<string | undefined>(props.defaultKeyWords);
   /** Key 是用来缓存请求的，如果不在是有问题 */
   const [cacheKey] = useState(() => {
     if (props.proFieldKey) {

diff --git a/packages/field/src/demos/tree-select-search-value.tsx b/packages/field/src/demos/tree-select-search-value.tsx
@@ -32,6 +32,14 @@ const treeData = [
   },
 ];
 
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
 export default function App() {
   const [searchValue, setSearchValue] = useState('');
   const [selectOpen, setSelectOpen] = useState(false);
@@ -57,9 +65,6 @@ export default function App() {
     setSearchValue(value);
   }
 
-  /** 下拉选中 */
-  function onSelect() {}
-
   return (
     <div>
       <ProForm
@@ -75,6 +80,7 @@ export default function App() {
           label="TreeSelect异步加载"
           secondary
           request={async () => {
+            await waitTime(1000);
             return treeData;
           }}
           fieldProps={{
@@ -95,7 +101,6 @@ export default function App() {
             onBlur: () => onBlur(),
             onFocus: () => onFocus(),
             onSearch: (val) => onSearch(val),
-            onSelect: () => onSelect(),
           }}
         />
         <ProFormTreeSelect

diff --git a/packages/form/src/components/QueryFilter/demos/light-filter-bordered.tsx b/packages/form/src/components/QueryFilter/demos/light-filter-bordered.tsx
@@ -2,6 +2,7 @@ import { FilterOutlined } from '@ant-design/icons';
 import {
   LightFilter,
   ProFormCascader,
+  ProFormCheckbox,
   ProFormDatePicker,
   ProFormRadio,
   ProFormSelect,
@@ -101,6 +102,12 @@ export default () => {
         }}
         name="treeSelect"
       />
+      <ProFormCheckbox.Group
+        name="checkbox"
+        label="迁移类型"
+        width="lg"
+        options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
+      />
       <ProFormCascader
         request={async () => [
           {

diff --git a/packages/form/src/layouts/DrawerForm/index.tsx b/packages/form/src/layouts/DrawerForm/index.tsx
@@ -1,6 +1,6 @@
-import { compareVersions, useRefFunction } from '@ant-design/pro-utils';
+import { openVisibleCompatible, useRefFunction } from '@ant-design/pro-utils';
 import type { DrawerProps, FormProps } from 'antd';
-import { ConfigProvider, version, Drawer } from 'antd';
+import { ConfigProvider, Drawer } from 'antd';
 import merge from 'lodash.merge';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { noteOnce } from 'rc-util/lib/warning';
@@ -191,24 +191,7 @@ function DrawerForm<T = Record<string, any>>({
     return result;
   });
 
-  const drawerOpenProps =
-    compareVersions(version, '4.23.0') > -1
-      ? {
-          open: open,
-          onOpenChange: onVisibleChange,
-          afterOpenChange: (e: boolean) => {
-            if (!e) resetFields();
-            drawerProps?.afterOpenChange?.(e);
-          },
-        }
-      : {
-          visible: open,
-          onVisibleChange: onVisibleChange,
-          afterVisibleChange: (e: boolean) => {
-            if (!e) resetFields();
-            drawerProps?.afterOpenChange?.(e);
-          },
-        };
+  const drawerOpenProps = openVisibleCompatible(open, onVisibleChange);
 
   return (
     <>
@@ -217,6 +200,10 @@ function DrawerForm<T = Record<string, any>>({
         width={width || 800}
         {...drawerProps}
         {...drawerOpenProps}
+        afterOpenChange={(e) => {
+          if (!e) resetFields();
+          drawerProps?.afterOpenChange?.(e);
+        }}
         onClose={(e) => {
           // 提交表单loading时，阻止弹框关闭
           if (submitTimeout && loading) return;

diff --git a/packages/form/src/layouts/ModalForm/index.tsx b/packages/form/src/layouts/ModalForm/index.tsx
@@ -1,6 +1,5 @@
-import { compareVersions } from '@ant-design/pro-utils';
+import { openVisibleCompatible } from '@ant-design/pro-utils';
 import type { FormProps, ModalProps } from 'antd';
-import { version } from 'antd';
 import { ConfigProvider, Modal } from 'antd';
 import merge from 'lodash.merge';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -197,14 +196,7 @@ function ModalForm<T = Record<string, any>>({
     [onFinish, setOpen, submitTimeout],
   );
 
-  const modalOpenProps =
-    compareVersions(version, '4.23.0') > -1
-      ? {
-          open,
-        }
-      : {
-          visible: open,
-        };
+  const modalOpenProps = openVisibleCompatible(open);
 
   return (
     <>

diff --git a/packages/layout/src/components/AppsLogoComponents/index.tsx b/packages/layout/src/components/AppsLogoComponents/index.tsx
@@ -1,5 +1,5 @@
-import { compareVersions } from '@ant-design/pro-utils';
-import { Popover, version } from 'antd';
+import { openVisibleCompatible } from '@ant-design/pro-utils';
+import { Popover } from 'antd';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { AppsLogo } from './AppsLogo';
@@ -68,14 +68,9 @@ export const AppsLogoComponents: React.FC<{
 
   if (!props?.appList?.length) return null;
 
-  const popoverOpenProps =
-    compareVersions(version, '4.23.0') > -1
-      ? {
-          onOpenChange: setOpen,
-        }
-      : {
-          onVisibleChange: () => setOpen,
-        };
+  const popoverOpenProps = openVisibleCompatible(undefined, (openChange: boolean) =>
+    setOpen(openChange),
+  );
 
   return wrapSSR(
     <>

diff --git a/packages/layout/src/components/PageHeader/index.tsx b/packages/layout/src/components/PageHeader/index.tsx
@@ -1,6 +1,5 @@
 import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
 import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
-import { useSafeState } from '@ant-design/pro-utils';
 import type { AvatarProps, BreadcrumbProps, TagType } from 'antd';
 import { Avatar, Breadcrumb, ConfigProvider, Space } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
@@ -136,9 +135,9 @@ const renderChildren = (prefixCls: string, children: React.ReactNode, hashId: st
 );
 
 const PageHeader: React.FC<PageHeaderProps> = (props) => {
-  const [compact, updateCompact] = useSafeState(false);
+  const [compact, updateCompact] = React.useState<boolean>(false);
   const onResize = ({ width }: { width: number }) => {
-    updateCompact(width < 768, true);
+    updateCompact(width < 768);
   };
   const { getPrefixCls, direction } = React.useContext(ConfigProvider.ConfigContext);
 

diff --git a/packages/layout/src/components/SettingDrawer/index.tsx b/packages/layout/src/components/SettingDrawer/index.tsx
@@ -4,7 +4,7 @@ import {
   NotificationOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { compareVersions, isBrowser, merge } from '@ant-design/pro-utils';
+import { compareVersions, isBrowser, merge, openVisibleCompatible } from '@ant-design/pro-utils';
 import {
   disable as darkreaderDisable,
   enable as darkreaderEnable,
@@ -350,16 +350,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
   const baseClassName = `${prefixCls}-setting-drawer`;
   const { wrapSSR, hashId } = useStyle(baseClassName);
 
-  const drawerOpenProps =
-    compareVersions(version, '4.23.0') > -1
-      ? {
-          open: open,
-          onClose: () => setOpen(false),
-        }
-      : {
-          visible: open,
-          onClose: () => setOpen(false),
-        };
+  const drawerOpenProps = openVisibleCompatible(open);
 
   return wrapSSR(
     <>
@@ -390,6 +381,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
       <Drawer
         {...drawerOpenProps}
         width={300}
+        onClose={() => setOpen(false)}
         closable={false}
         placement="right"
         getContainer={getContainer}

diff --git a/packages/layout/src/components/SiderMenu/index.tsx b/packages/layout/src/components/SiderMenu/index.tsx
@@ -1,6 +1,6 @@
-import { compareVersions } from '@ant-design/pro-utils';
+import { openVisibleCompatible } from '@ant-design/pro-utils';
 import { getFlatMenus } from '@umijs/route-utils';
-import { Drawer, version } from 'antd';
+import { Drawer } from 'antd';
 import classNames from 'classnames';
 import Omit from 'omit.js';
 import React, { useEffect } from 'react';
@@ -54,16 +54,7 @@ const SiderMenuWrapper: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (prop
     return null;
   }
 
-  const drawerOpenProps =
-    compareVersions(version, '4.23.0') > -1
-      ? {
-          open: !collapsed,
-          onClose: () => onCollapse?.(true),
-        }
-      : {
-          visible: !collapsed,
-          onClose: () => onCollapse?.(true),
-        };
+  const drawerOpenProps = openVisibleCompatible(!collapsed, () => onCollapse?.(true));
 
   return wrapSSR(
     isMobile ? (