test: 修正测试相关问题

package.json

@@ -19,6 +19,7 @@
     "dev:e2e": "pnpm -F app e2e",
     "build": "pnpm -F app build",
     "test": "pnpm -F app test",
+    "test:ui": "pnpm -F app test:ui",
     "test:coverage": "pnpm -F app test:coverage",
     "cypress:run": "cypress run -b chrome",
     "cypress": "cypress open",
@@ -112,6 +113,7 @@
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
     "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/ui": "^0.32.0",
     "commitizen": "^4.3.0",
     "core-js": "^3.30.1",
     "cross-env": "^7.0.3",

packages/app/package.json

@@ -5,6 +5,7 @@
     "e2e": "cross-env IS_E2E=true swt-script dev",
     "build": "swt-script build",
     "test": "cross-env NODE_ENV=test vitest",
+    "test:ui": "cross-env NODE_ENV=test vitest --ui",
     "test:coverage": "cross-env NODE_ENV=test vitest --coverage"
   },
   "dependencies": {

packages/app/src/components/iconfont-icons/index.tsx

@@ -4,8 +4,9 @@
 
 import {createFromIconfontCN} from '@ant-design/icons';
 import {FC} from 'react';
-import menuIcons from '@assets/icons/menu.ldicons';
-import buttonIcons from '@assets/icons/ldButton.ldicons';
+// ?url 为了通过vistest测试 让vitest认为引入了路径
+import menuIcons from '@assets/icons/menu.ldicons?url';
+import buttonIcons from '@assets/icons/ldButton.ldicons?url';
 
 // 图标js放在public下的icons中
 // 放入后全局替换fill="#\d*" 将填充颜色清空

packages/app/src/hooks/use-put-data/index.test.tsx

@@ -3,6 +3,7 @@ import {usePutData} from '.';
 import {render, waitFor} from '@testing-library/react';
 import {FC} from 'react';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {App} from 'antd';
 
 const fn = vi.fn();
 
@@ -22,7 +23,7 @@ describe('usePutData', function() {
   it('返回值', async function() {
     vi.useFakeTimers();
 
-    const App: FC = function() {
+    const Main: FC = function() {
       const [isLoading, {addMutate, editMutate}] = usePutData({
         addFn: mockRequest,
         editFn: mockRequest,
@@ -41,9 +42,11 @@ describe('usePutData', function() {
 
     const client = new QueryClient();
     const {getByTestId} = render(
-      <QueryClientProvider client={client}>
-        <App />
-      </QueryClientProvider>,
+      <App>
+        <QueryClientProvider client={client}>
+          <Main />
+        </QueryClientProvider>,
+      </App>,
     );
 
     expect(getByTestId('state').innerHTML).toBe('false');

packages/app/src/hooks/use-table-delete-event/index.test.tsx

@@ -2,6 +2,7 @@ import {render, waitFor} from '@testing-library/react';
 import {useTableDeleteEvent} from '.';
 import {FC} from 'react';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {App} from 'antd';
 
 const fn = vi.fn();
 
@@ -16,8 +17,6 @@ describe('useTableDeleteEvent', function() {
   });
 
   it('查询结果', async function() {
-    vi.useFakeTimers();
-
     const Info: FC = function() {
       const [deleteId, onDelte] = useTableDeleteEvent(
         async function() {
@@ -38,9 +37,11 @@ describe('useTableDeleteEvent', function() {
     const queryClient = new QueryClient();
 
     const {getByTestId, findByText} = render(
-      <QueryClientProvider client={queryClient}>
-        <Info />
-      </QueryClientProvider>,
+      <App>
+        <QueryClientProvider client={queryClient}>
+          <Info />
+        </QueryClientProvider>,
+      </App>,
     );
 
     expect(getByTestId('del_id').innerHTML).toBe('');

packages/app/src/hooks/use-table-row-select/index.test.ts

@@ -0,0 +1,29 @@
+import {act, renderHook} from '@testing-library/react';
+import {useTableRowSelect} from '.';
+
+describe('useTableRowSelect', function() {
+  it('声明', function() {
+    expect(useTableRowSelect).toBeDefined();
+    expect(useTableRowSelect).instanceOf(Function);
+  });
+
+  it('值正确', function() {
+    const data = [
+      {id: '1', name: 'ss'},
+      {id: '2', name: 'eve'},
+      {id: '3', name: 'da'},
+    ];
+
+    const {result} = renderHook(function() {
+      return useTableRowSelect(data, 'id');
+    });
+
+    act(() => result.current[1]({1: true}));
+    expect(result.current[0].rowSelection).toEqual({1: true});
+    expect(result.current[0].selectId).toBe('2');
+
+    act(() => result.current[1]({0: true, 2: true}));
+    expect(result.current[0].rowSelection).toEqual({0: true, 2: true});
+    expect(result.current[0].selectId).toBe('1,3');
+  });
+});

packages/app/src/hooks/use-table-row-select/index.ts

@@ -0,0 +1,34 @@
+import {RowSelectionState} from '@tanstack/react-table';
+import {useEffect, useMemo, useState} from 'react';
+
+export function useTableRowSelect<T extends Record<string, unknown>>(
+  data: T[],
+  rawKey?: keyof T,
+) {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  // 数据变化后重置已选择内容防止选择与实际数据不符
+  useEffect(function() {
+    setRowSelection({});
+  }, [data]);
+
+  const selectId = useMemo(function() {
+    const params: string[] = [];
+
+    for (const [key, value] of Object.entries(rowSelection)) {
+      if (value) {
+        // key返回的对应的数组索引
+        const id = data[Number(key)][rawKey ?? 'id'] as string;
+
+        params.push(id);
+      }
+    }
+
+    return params.join(',');
+  }, [data, rawKey, rowSelection]);
+
+  return [
+    {rowSelection, selectId},
+    setRowSelection,
+  ] as const;
+}

packages/app/src/utils/sort-menu/index.test.ts

@@ -86,28 +86,11 @@ describe('sortMenu', function() {
         label: '用户设置',
         pid: '0',
         url: '.',
+        icon: '',
         children: [
-          {
-            key: '23',
-            title: '用户管理',
-            label: '用户管理',
-            pid: '15',
-            url: '/user',
-          },
-          {
-            key: '16',
-            title: '角色管理',
-            label: '角色管理',
-            pid: '15',
-            url: '/role',
-          },
-          {
-            key: '24',
-            title: '部门管理',
-            label: '部门管理',
-            pid: '15',
-            url: '/department',
-          },
+          {key: '23', title: '用户管理', label: '用户管理', pid: '15', url: '/user', icon: ''},
+          {key: '16', title: '角色管理', label: '角色管理', pid: '15', url: '/role', icon: ''},
+          {key: '24', title: '部门管理', label: '部门管理', pid: '15', url: '/department', icon: ''},
         ],
       },
       {
@@ -116,21 +99,10 @@ describe('sortMenu', function() {
         label: '仓库管理',
         pid: '0',
         url: '.',
+        icon: '',
         children: [
-          {
-            key: '26',
-            title: '库位管理',
-            label: '库位管理',
-            pid: '25',
-            url: '/storage',
-          },
-          {
-            key: '27',
-            title: '货品管理',
-            label: '货品管理',
-            pid: '25',
-            url: '/goods',
-          },
+          {key: '26', title: '库位管理', label: '库位管理', pid: '25', url: '/storage', icon: ''},
+          {key: '27', title: '货品管理', label: '货品管理', pid: '25', url: '/goods', icon: ''},
         ],
       },
       {
@@ -139,15 +111,8 @@ describe('sortMenu', function() {
         label: '系统设置',
         pid: '0',
         url: '.',
-        children: [
-          {
-            key: '14',
-            title: '菜单管理',
-            label: '菜单管理',
-            pid: '13',
-            url: '/menu',
-          },
-        ],
+        icon: '',
+        children: [{key: '14', title: '菜单管理', label: '菜单管理', pid: '13', url: '/menu', icon: ''}],
       },
     ]);
   });

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@vitest/coverage-c8':
         specifier: ^0.31.0
         version: 0.31.0(vitest@0.31.0)
+      '@vitest/ui':
+        specifier: ^0.32.0
+        version: 0.32.0(vitest@0.31.0)
       commitizen:
         specifier: ^4.3.0
         version: 4.3.0
@@ -106,7 +109,7 @@ importers:
         version: 5.0.4
       vitest:
         specifier: ^0.31.0
-        version: 0.31.0(jsdom@22.0.0)
+        version: 0.31.0(@vitest/ui@0.32.0)(jsdom@22.0.0)
 
   packages/app:
     dependencies:
@@ -2306,7 +2309,7 @@ packages:
       magic-string: 0.30.0
       picocolors: 1.0.0
       std-env: 3.3.3
-      vitest: 0.31.0(jsdom@22.0.0)
+      vitest: 0.31.0(@vitest/ui@0.32.0)(jsdom@22.0.0)
     dev: true
 
   /@vitest/expect@0.31.0:
@@ -2340,6 +2343,21 @@ packages:
       tinyspy: 2.1.0
     dev: true
 
+  /@vitest/ui@0.32.0(vitest@0.31.0):
+    resolution: {integrity: sha512-55gugh6+owrOqW83RCgLm9q+o3SlzvFVgl1lyfnr0WB8ABxLoM+3pgusEjosscgEYGzTjTXaZY6xLd4qlfH/RQ==}
+    peerDependencies:
+      vitest: '>=0.30.1 <1'
+    dependencies:
+      '@vitest/utils': 0.32.0
+      fast-glob: 3.2.12
+      fflate: 0.7.4
+      flatted: 3.2.7
+      pathe: 1.1.0
+      picocolors: 1.0.0
+      sirv: 2.0.3
+      vitest: 0.31.0(@vitest/ui@0.32.0)(jsdom@22.0.0)
+    dev: true
+
   /@vitest/utils@0.31.0:
     resolution: {integrity: sha512-kahaRyLX7GS1urekRXN2752X4gIgOGVX4Wo8eDUGUkTWlGpXzf5ZS6N9RUUS+Re3XEE8nVGqNyxkSxF5HXlGhQ==}
     dependencies:
@@ -2348,6 +2366,14 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
+  /@vitest/utils@0.32.0:
+    resolution: {integrity: sha512-53yXunzx47MmbuvcOPpLaVljHaeSu1G2dHdmy7+9ngMnQIkBQcvwOcoclWFnxDMxFbnq8exAfh3aKSZaK71J5A==}
+    dependencies:
+      concordance: 5.0.4
+      loupe: 2.3.6
+      pretty-format: 27.5.1
+    dev: true
+
   /@webassemblyjs/ast@1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
     dependencies:
@@ -5173,6 +5199,10 @@ packages:
       pend: 1.2.0
     dev: true
 
+  /fflate@0.7.4:
+    resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
+    dev: true
+
   /figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -9755,6 +9785,15 @@ packages:
       totalist: 1.1.0
     dev: true
 
+  /sirv@2.0.3:
+    resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.1
+    dev: true
+
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
@@ -10423,6 +10462,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: true
+
   /tough-cookie@2.5.0:
     resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==}
     engines: {node: '>=0.8'}
@@ -10790,7 +10834,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitest@0.31.0(jsdom@22.0.0):
+  /vitest@0.31.0(@vitest/ui@0.32.0)(jsdom@22.0.0):
     resolution: {integrity: sha512-JwWJS9p3GU9GxkG7eBSmr4Q4x4bvVBSswaCFf1PBNHiPx00obfhHRJfgHcnI0ffn+NMlIh9QGvG75FlaIBdKGA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -10828,6 +10872,7 @@ packages:
       '@vitest/runner': 0.31.0
       '@vitest/snapshot': 0.31.0
       '@vitest/spy': 0.31.0
+      '@vitest/ui': 0.32.0(vitest@0.31.0)
       '@vitest/utils': 0.31.0
       acorn: 8.8.2
       acorn-walk: 8.2.0