updates after styled-compoents upgrade + fixing unit tests

lowcoder-org · FalkWolsky · Jan 5, 2024 · Dec 28, 2023 · Dec 29, 2023 · Jan 1, 2024
commit 1e03ad286b5d1895b8e55e43939249b44cadf776
diff --git a/client/config/test/jest.config.js b/client/config/test/jest.config.js
@@ -20,6 +20,14 @@ export default {
   testEnvironment: "jsdom",
   moduleNameMapper: {
     "react-markdown": path.resolve(currentDir, "./mocks/react-markdown.js"),
+    "react-redux": path.resolve(currentDir, "./mocks/react-redux.js"),
+    "react-draggable": path.resolve(currentDir, "./mocks/react-draggable.js"),
+    "react-resize-detector": path.resolve(currentDir, "./mocks/react-resize-detector.js"),
+    "react-virtualized": path.resolve(currentDir, "./mocks/react-virtualized.js"),
+    "@dnd-kit/sortable": path.resolve(currentDir, "./mocks/dnd-kit-sortable.js"),
+    "@dnd-kit/core": path.resolve(currentDir, "./mocks/dnd-kit-core.js"),
+    "antd": path.resolve(currentDir, "./mocks/antd.js"),
+    "history": path.resolve(currentDir, "./mocks/history.js"),
     "\\.md\\?url$": path.resolve(currentDir, "./mocks/markdown-url-module.js"),
     "^@lowcoder-ee(.*)$": path.resolve(
       currentDir,
@@ -35,6 +43,13 @@ export default {
     path.resolve(currentDir, "../../packages/lowcoder-comps/src"),
     path.resolve(currentDir, "../../packages/lowcoder-design/src"),
   ],
+  // moduleDirectories: [
+  //   "<rootDir>/client/node_modules",
+  //   path.resolve(currentDir, "../../node_modules"),
+  //   path.resolve(currentDir, "../../packages/lowcoder/node_modules"),
+  //   path.resolve(currentDir, "../../packages/lowcoder-comps/node_modules"),
+  //   path.resolve(currentDir, "../../packages/lowcoder-design/node_modules"),
+  // ],
   setupFiles: [path.resolve(currentDir, "./jest.setup.js")],
   setupFilesAfterEnv: [path.resolve(currentDir, "./jest.setup-after-env.js"), 'jest-canvas-mock'],
   transform: {

diff --git a/client/config/test/jest.setup-after-env.js b/client/config/test/jest.setup-after-env.js
@@ -22,9 +22,26 @@ window.ResizeObserver = function () {
   };
 };
 
-window.ImageData = {}
-window.MediaStreamTrack = {}
-window.URL.createObjectURL = () => {}
+// window.ImageData = {}
+// window.MediaStreamTrack = {}
+// window.URL.createObjectURL = () => {}
+Object.defineProperty(window, 'ImageData', { value: 'yourValue' });
+Object.defineProperty(window, 'MediaStreamTrack', { value: 'yourValue' });
+Object.defineProperty(window, 'URL', {
+  writable: true,
+  value: {
+    createObjectURL: jest.fn(),
+  }
+});
+Object.defineProperty(window, "navigator", {
+  writable: true,
+  value: {
+    mediaDevices: {
+      enumerateDevices: jest.fn(),
+    },
+    userAgent: '',
+  },
+});
 
 class Worker {
   constructor(stringUrl) {
@@ -36,4 +53,5 @@ class Worker {
     this.onmessage(msg);
   }
 }
+
 window.Worker = Worker;
diff --git a/client/config/test/jest.setup.js b/client/config/test/jest.setup.js
@@ -1,3 +1,3 @@
-if (typeof window !== "undefined") {
-  require("whatwg-fetch");
-}
+// if (typeof window !== "undefined") {
+//   require("whatwg-fetch");
+// }
diff --git a/client/config/test/mocks/antd.js b/client/config/test/mocks/antd.js
@@ -0,0 +1 @@
+export default jest.mock('antd');
diff --git a/client/config/test/mocks/dnd-kit-core.js b/client/config/test/mocks/dnd-kit-core.js
@@ -0,0 +1 @@
+export default jest.mock("@dnd-kit/core");
diff --git a/client/config/test/mocks/dnd-kit-sortable.js b/client/config/test/mocks/dnd-kit-sortable.js
@@ -0,0 +1 @@
+export default jest.mock("@dnd-kit/sortable");
diff --git a/client/config/test/mocks/history.js b/client/config/test/mocks/history.js
@@ -0,0 +1 @@
+export default jest.mock('history');
diff --git a/client/config/test/mocks/react-draggable.js b/client/config/test/mocks/react-draggable.js
@@ -0,0 +1 @@
+export default jest.mock('react-draggable');
diff --git a/client/config/test/mocks/react-redux.js b/client/config/test/mocks/react-redux.js
@@ -0,0 +1,3 @@
+export default jest.mock("react-redux", () => ({
+  connect: () => (Component) => Component,
+}));
diff --git a/client/config/test/mocks/react-resize-detector.js b/client/config/test/mocks/react-resize-detector.js
@@ -0,0 +1 @@
+export default jest.mock('react-resize-detector');
diff --git a/client/config/test/mocks/react-virtualized.js b/client/config/test/mocks/react-virtualized.js
@@ -0,0 +1 @@
+export default jest.mock('react-virtualized');
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
@@ -22,7 +22,8 @@ import {
   CalendarDeleteIcon,
   Tooltip,
 } from "lowcoder-sdk";
-import { Input, Form } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
 import { trans, getCalendarLocale } from "../../i18n/comps";
 import { createRef, useContext, useRef, useState } from "react";
 import FullCalendar from "@fullcalendar/react";

diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -24,7 +24,7 @@ import {
   SlotLabelContentArg,
   ViewContentArg,
 } from "@fullcalendar/core";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 
 export const Wrapper = styled.div<{
   $editable: boolean;

diff --git a/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx b/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { EventConfigType } from "lowcoder-sdk";
 import { trans } from "i18n/comps";
 

diff --git a/client/packages/lowcoder-design/src/components/Collapase.tsx b/client/packages/lowcoder-design/src/components/Collapase.tsx
@@ -1,4 +1,4 @@
-import { Collapse as AntdCollapse, CollapseProps } from "antd";
+import { default as AntdCollapse, CollapseProps } from "antd/es/collapse";
 import { ReactComponent as UnFold } from "icons/icon-unfold.svg";
 import { ReactComponent as Folded } from "icons/icon-folded.svg";
 import { ReactComponent as Omit } from "icons/icon-omit.svg";

diff --git a/client/packages/lowcoder-design/src/components/CustomModal.tsx b/client/packages/lowcoder-design/src/components/CustomModal.tsx
@@ -1,5 +1,5 @@
-import { ButtonProps, Modal as AntdModal } from "antd";
-import { ModalFuncProps, ModalProps as AntdModalProps } from "antd/lib/modal";
+import { ButtonProps } from "antd/es/button";
+import { default as AntdModal, ModalFuncProps, ModalProps as AntdModalProps } from "antd/es/modal";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 import React, { ReactNode, useState } from "react";
 import styled from "styled-components";

diff --git a/client/packages/lowcoder-design/src/components/Drawer.tsx b/client/packages/lowcoder-design/src/components/Drawer.tsx
@@ -1,4 +1,4 @@
-import { Drawer as AntdDrawer, DrawerProps as AntdDrawerProps } from "antd";
+import { default as AntdDrawer, DrawerProps as AntdDrawerProps } from "antd/es/drawer";
 import Handle from "./Modal/handler";
 import { useEffect, useMemo, useState } from "react";
 import { Resizable, ResizeHandle } from "react-resizable";

diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx
@@ -1,4 +1,5 @@
-import { Segmented as AntdSegmented, SelectProps } from "antd";
+import { default as AntdSegmented } from "antd/es/segmented";
+import { SelectProps } from "antd/es/select";
 import { GreyTextColor } from "constants/style";
 import _ from "lodash";
 import { ReactNode } from "react";

diff --git a/client/packages/lowcoder-design/src/components/Input.tsx b/client/packages/lowcoder-design/src/components/Input.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Input as AntdInput, InputProps as AntdInputProps, InputRef } from "antd";
+import { default as AntdInput, InputProps as AntdInputProps, InputRef } from "antd/es/input";
 import { BorderActiveColor, BorderColor, BorderRadius, GreyTextColor } from "constants/style";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import _ from "lodash";

diff --git a/client/packages/lowcoder-design/src/components/Menu.tsx b/client/packages/lowcoder-design/src/components/Menu.tsx
@@ -1,4 +1,4 @@
-import { Menu as AntdMenu, MenuProps, SubMenuProps } from "antd";
+import { default as AntdMenu, MenuProps, SubMenuProps } from "antd/es/menu";
 import { NormalMenuIconColor, TabActiveColor } from "constants/style";
 import { ReactComponent as AddIcon } from "icons/icon-add.svg";
 import { ReactComponent as RecycleBinIcon } from "icons/icon-recycle-bin.svg";

diff --git a/client/packages/lowcoder-design/src/components/Modal/index.tsx b/client/packages/lowcoder-design/src/components/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { Modal as AntdModal, ModalProps as AntdModalProps } from "antd";
+import { default as AntdModal, ModalProps as AntdModalProps } from "antd/es/modal";
 import { useEffect, useState } from "react";
 import { Resizable, ResizeHandle } from "react-resizable";
 import { useResizeDetector } from "react-resize-detector";

diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Input, InputProps } from "antd";
+import { default as Input, InputProps } from "antd/es/input";
 import { ReactComponent as Icon } from "icons/icon-Search.svg";
 import React, { CSSProperties } from "react";
 

diff --git a/client/packages/lowcoder-design/src/components/Table.tsx b/client/packages/lowcoder-design/src/components/Table.tsx
@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import { default as Table } from "antd/es/table";
 import styled from "styled-components";
 
 const { Column } = Table;

diff --git a/client/packages/lowcoder-design/src/components/alert.tsx b/client/packages/lowcoder-design/src/components/alert.tsx
@@ -1,4 +1,4 @@
-import { Alert as AntAlert, AlertProps } from "antd";
+import { default as AntAlert, AlertProps } from "antd/es/alert";
 import styled from "styled-components";
 
 const Container = styled.div`

diff --git a/client/packages/lowcoder-design/src/components/button.tsx b/client/packages/lowcoder-design/src/components/button.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from "antd";
+import Button, { ButtonProps } from "antd/es/button";
 import styled, { css } from "styled-components";
 import { Loading } from "./Loading";
 import * as React from "react";

diff --git a/client/packages/lowcoder-design/src/components/checkBox.tsx b/client/packages/lowcoder-design/src/components/checkBox.tsx
@@ -1,4 +1,4 @@
-import { Checkbox as AntdCheckBox } from "antd";
+import { default as AntdCheckBox } from "antd/es/checkbox";
 import styled from "styled-components";
 
 const CheckBox = styled(AntdCheckBox)`

diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
@@ -1,5 +1,5 @@
 import { RgbaStringColorPicker } from "react-colorful";
-import { Popover } from "antd";
+import { default as Popover } from "antd/es/popover";
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import {
   alphaOfRgba,

diff --git a/client/packages/lowcoder-design/src/components/customSelect.tsx b/client/packages/lowcoder-design/src/components/customSelect.tsx
@@ -1,4 +1,4 @@
-import { Select as AntdSelect, SelectProps as AntdSelectProps } from "antd";
+import { default as AntdSelect, SelectProps as AntdSelectProps } from "antd/es/select";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 import styled from "styled-components";
 import React from "react";

diff --git a/client/packages/lowcoder-design/src/components/edit.tsx b/client/packages/lowcoder-design/src/components/edit.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { ReactComponent as Edit } from "icons/icon-text-edit.svg";
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from "react";
 import { Input } from "../components/Input";
-import { InputProps, InputRef } from "antd";
+import { InputProps, InputRef } from "antd/es/input";
 
 const Wrapper = styled.div`
   position: relative;

diff --git a/client/packages/lowcoder-design/src/components/form.tsx b/client/packages/lowcoder-design/src/components/form.tsx
@@ -1,30 +1,24 @@
-import {
-  Form,
-  Input,
-  InputNumber,
-  InputNumberProps,
-  InputProps,
-  Radio,
-  Select,
-  SelectProps,
-} from "antd";
+import { default as Form } from "antd/es/form";
+import { default as AntdFormItem, FormItemProps as AntdFormItemProps } from "antd/es/form/FormItem";
+import { default as Input, InputProps } from "antd/es/input";
+import { default as TextArea, TextAreaProps } from "antd/es/input/TextArea";
+import { default as InputNumber, InputNumberProps } from "antd/es/input-number";
+import { default as Radio, RadioGroupProps } from "antd/es/radio";
+import { default as Select, SelectProps } from "antd/es/select";
 import { ReactNode } from "react";
 import { CheckBox } from "./checkBox";
 import { CustomSelect } from "./customSelect";
 import { EllipsisTextCss, labelCss } from "./Label";
 import { ToolTipLabel } from "./toolTip";
 import styled from "styled-components";
 import { ReactComponent as Star } from "icons/icon-star.svg";
-import { FormItemProps as AntdFormItemProps } from "antd/lib/form/FormItem";
 import _ from "lodash";
 import { KeyValueList } from "./keyValueList";
 import { OptionsType, ValueFromOption } from "./Dropdown";
-import { RadioGroupProps } from "antd/lib/radio/interface";
-import { TextAreaProps } from "antd/lib/input";
 
 export type FormSize = "middle" | "small";
 
-const FormItem = styled(Form.Item)`
+const FormItem = styled(AntdFormItem)`
   min-width: 0;
   flex-grow: 1;
   margin: 0;
@@ -69,7 +63,7 @@ const FormInputPassword = styled(Input)`
   border-radius: 4px;
 `;
 
-const FormTextArea = styled(Input.TextArea)`
+const FormTextArea = styled(TextArea)`
   background: #ffffff;
 `;
 

diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
@@ -1,14 +1,14 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
-import { Popover } from "antd";
+import { default as Popover } from "antd/es/popover";
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import { TacoInput } from "components/tacoInput";
 import { Tooltip } from "components/toolTip";
 import { trans } from "i18n/design";
 import _ from "lodash";
 import { ReactNode, useEffect, useCallback, useMemo, useRef, useState } from "react";
 import Draggable from "react-draggable";
-import { List, ListRowProps } from "react-virtualized";
+import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
 import styled from "styled-components";
 import { CloseIcon, SearchIcon } from "icons";
 

diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx
@@ -1,5 +1,5 @@
 import { SuspensionBox } from "./SuspensionBox";
-import { Popover, PopoverProps } from "antd";
+import { default as Popover, PopoverProps } from "antd/es/popover";
 import { Children, cloneElement, MouseEvent, ReactNode, useState } from "react";
 import styled from "styled-components";
 import { ActiveTextColor, GreyTextColor } from "constants/style";

diff --git a/client/packages/lowcoder-design/src/components/popupCard.tsx b/client/packages/lowcoder-design/src/components/popupCard.tsx
@@ -1,4 +1,5 @@
-import { Alert, Card } from "antd";
+import { default as Alert } from "antd/es/alert";
+import { default as Card } from "antd/es/card";
 import { CopyTextButton } from "./copyTextButton";
 import { CSSProperties, ReactNode, useState } from "react";
 import styled from "styled-components";

diff --git a/client/packages/lowcoder-design/src/components/query.tsx b/client/packages/lowcoder-design/src/components/query.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { Alert } from "antd";
+import { default as Alert } from "antd/es/alert";
 import { ReactNode } from "react";
 import { AlertProps } from "antd/lib/alert";
 import { ToolTipLabel } from "./toolTip";

diff --git a/client/packages/lowcoder-design/src/components/tacoInput.tsx b/client/packages/lowcoder-design/src/components/tacoInput.tsx
@@ -1,4 +1,4 @@
-import { Input as AntdInput, InputRef } from "antd";
+import { default as AntdInput, InputRef } from "antd/es/input";
 import { ReactComponent as MustFillStar } from "icons/icon-must-fill-star.svg";
 import { trans } from "i18n/design";
 import { CSSProperties, Ref, useEffect, useRef, useState } from "react";

diff --git a/client/packages/lowcoder-design/src/components/tacoPagination.tsx b/client/packages/lowcoder-design/src/components/tacoPagination.tsx
@@ -1,13 +1,12 @@
-import { Pagination } from "antd";
-import { PaginationProps } from "antd/lib/pagination/Pagination";
+import { default as Pagination, PaginationProps } from "antd/es/pagination";
 import styled, { css } from "styled-components";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 
 const packUpIconCss = css`
   height: 24px;
   width: 24px;
 
-  :hover:not([disabled]) {
+  &:hover:not([disabled]) {
     g path {
       fill: #315efb;
     }

diff --git a/client/packages/lowcoder-design/src/components/toolTip.tsx b/client/packages/lowcoder-design/src/components/toolTip.tsx
@@ -1,5 +1,5 @@
-import { Button, Tooltip as AntdTooltip } from "antd";
-import { TooltipProps } from "antd/lib/tooltip";
+import { default as Button } from "antd/es/button";
+import { default as AntdTooltip, TooltipProps } from "antd/es/tooltip";
 import { CSSProperties, ReactNode } from "react";
 import styled, { css } from "styled-components";
 import { labelCss } from "components/Label";

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -1,4 +1,5 @@
-import { App, ConfigProvider } from "antd";
+import { default as App } from "antd/es/app";
+import { default as ConfigProvider } from "antd/es/config-provider";
 import {
   ALL_APPLICATIONS_URL,
   APP_EDITOR_URL,

diff --git a/client/packages/lowcoder/src/components/InputList.tsx b/client/packages/lowcoder/src/components/InputList.tsx
@@ -1,4 +1,4 @@
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import { FormListProps, Rule } from "antd/lib/form";
 import { TacoButton } from "lowcoder-design";
 import { Input } from "lowcoder-design";

diff --git a/client/packages/lowcoder/src/components/JSLibraryModal.tsx b/client/packages/lowcoder/src/components/JSLibraryModal.tsx
@@ -5,7 +5,7 @@ import { trans } from "i18n";
 import { DocLink } from "components/ExternalLink";
 import { Input } from "components/Input";
 import { TacoButton } from "components/button";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { useDispatch, useSelector } from "react-redux";
 import { recommendJSLibrarySelector } from "redux/selectors/jsLibrarySelector";
 import { JSLibraryInfo, JSLibraryLabel } from "components/JSLibraryTree";

diff --git a/client/packages/lowcoder/src/components/JSLibraryTree.tsx b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { parseJSLibraryURL } from "util/jsLibraryUtils";
 import { jsLibrarySelector } from "redux/selectors/jsLibrarySelector";
 import { fetchJSLibraryMetasAction } from "redux/reduxActions/jsLibraryActions";
-import { Typography } from "antd";
+import { default as TypographyParagraph } from "antd/es/typography/Paragraph";
 
 const InfoWrapper = styled.div`
   color: #8b8fa3;
@@ -30,7 +30,7 @@ const ExportWrapper = styled.div`
   height: 20px;
   line-height: 20px;
 `;
-const DescWrapper = styled(Typography.Paragraph)`
+const DescWrapper = styled(TypographyParagraph)`
   line-height: 1.5em;
   font-size: 13px;
   color: #8b8fa3;

diff --git a/client/packages/lowcoder/src/components/LazyRoute.tsx b/client/packages/lowcoder/src/components/LazyRoute.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { ComponentType, lazy, Suspense, useRef } from "react";
 import { Route, RouteProps } from "react-router";
 import PageSkeleton from "./PageSkeleton";

diff --git a/client/packages/lowcoder/src/components/ModuleLoading.tsx b/client/packages/lowcoder/src/components/ModuleLoading.tsx
@@ -1,4 +1,4 @@
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { GreyTextColor } from "constants/style";
 import styled from "styled-components";
 

diff --git a/client/packages/lowcoder/src/components/PageSkeleton.tsx b/client/packages/lowcoder/src/components/PageSkeleton.tsx
@@ -1,4 +1,5 @@
-import { Layout, Skeleton } from "antd";
+import { default as Layout } from "antd/es/layout";
+import { default as Skeleton } from "antd/es/skeleton";
 import MainContent from "components/layout/MainContent";
 import SideBar from "components/layout/SideBar";
 import Header from "./layout/Header";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default jest.mock('react-resize-detector');