添加单元测试

packages/app/__tests__/hooks/useContextSection.ts

@@ -0,0 +1,55 @@
+import {useContextSection, useContext} from '@hooks';
+import {createContext} from 'use-context-selector';
+import {act, renderHook} from '@testing-library/react';
+import {useState} from 'react';
+
+describe('context hooks', function() {
+  it('useContextSection, useContext类型正确', function() {
+    expect(useContextSection).toBeDefined();
+    expect(useContext).toBeDefined();
+
+    expect(useContextSection).toBeInstanceOf(Function);
+    expect(useContext).toBeInstanceOf(Function);
+  });
+
+  it('useContextSection 返回值检测', function() {
+    const {result} = renderHook(function() {
+      const state = useState({name: '', age: 2});
+      const context = createContext(state);
+      return useContextSection(context, state => state);
+    });
+
+    expect(result.current[0]).toEqual({name: '', age: 2});
+
+    act(function() {
+      result.current[1](val => ({...val, name: 'simon'}));
+    });
+
+    expect(result.current[0]).toEqual({name: 'simon', age: 2});
+  });
+
+  it('useContextSection 防止重新渲染', function() {
+    const {result} = renderHook(function() {
+      const state = useState({name: '', age: 2});
+      const context = createContext(state);
+
+      const section1 = useContextSection(context, function([{name}, dispatch]) {
+        return [name, dispatch] as const;
+      });
+
+      const section2 = useContextSection(context, function([{age}, dispatch]) {
+        return [age, dispatch] as const;
+      });
+
+      return {section1, section2};
+    });
+
+    const memoState = result.current.section1;
+
+    act(function() {
+      result.current.section2[1](prev => ({...prev, age: 12}));
+    });
+
+    expect(memoState).toBe(result.current.section1);
+  });
+});

packages/app/__tests__/hooks/usePageContext.ts

@@ -0,0 +1,23 @@
+import {usePage, createPageContext} from '@hooks';
+import {renderHook} from '@testing-library/react';
+
+describe('usePageContext', function() {
+  it('usePage, createContext 类型正确', function() {
+    expect(usePage).toBeDefined();
+    expect(createPageContext).toBeDefined();
+
+    expect(usePage).toBeInstanceOf(Function);
+    expect(createPageContext).toBeInstanceOf(Function);
+  });
+
+  it('usePage 返回值正确', function() {
+    const {result} = renderHook(function() {
+      const context = createPageContext();
+
+      return usePage(context);
+    });
+
+    expect(result.current[0]).toEqual({page: 1, pageSize: 10});
+    expect(result.current[1]).toBeInstanceOf(Function);
+  });
+});

packages/app/package.json

@@ -4,9 +4,9 @@
   "scripts": {
     "dev": "swt-script dev",
     "build": "swt-script build",
-    "test": "swt-script test",
-    "test:watch": "swt-script test --watchAll",
-    "test:coverage": "swt-script test --coverage"
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.1",

packages/app/src/hooks/useContextSection.ts

@@ -9,7 +9,7 @@ export function useContextSection<T, R>(
   context: Context<T>,
   selector: (state: T) => R,
 ) {
-  const f = useLatest(selector ?? selectorFn);
+  const f = useLatest(selector);
 
   const callback = useMemo(
     function() {

packages/app/src/pages/department/index.tsx

@@ -2,7 +2,7 @@ import {FC, ReactNode} from 'react';
 import Filter from './filter';
 import TableList from './table';
 import {context, pageContext, useContextReducer} from './context';
-import {usePageContextReducer} from '@hooks';
+import {PageProvider} from '@components';
 
 const DepartmentProvider: FC<{children: ReactNode}> = function({children}) {
   const state = useContextReducer();
@@ -10,17 +10,11 @@ const DepartmentProvider: FC<{children: ReactNode}> = function({children}) {
 
   return <Provider value={state}>{children}</Provider>;
 };
-const PageProvider: FC<{children: ReactNode}> = function({children}) {
-  const state = usePageContextReducer();
-  const {Provider} = pageContext;
-
-  return <Provider value={state}>{children}</Provider>;
-};
 
 const Department: FC = function() {
   return (
     <DepartmentProvider>
-      <PageProvider>
+      <PageProvider context={pageContext}>
         <main className='content-main'>
           <Filter />
           <TableList />

packages/app/src/pages/menu-id/index.tsx

@@ -1,9 +1,9 @@
 import Filter from './filter';
 import {FC, useEffect} from 'react';
 import {context, pIdContext, pageContext, useContextReducer, usePIdContextState} from './context';
-import {usePageContextReducer} from '@hooks';
 import TableList from './table';
 import {ChildrenFC} from '@utils';
+import {PageProvider} from '@components';
 
 type Props = {
   id: string,
@@ -18,14 +18,6 @@ const MenuProvider: ChildrenFC<Pick<Props, 'onClose'>> = function({children, onC
   return <Provider value={state}>{children}</Provider>;
 };
 
-const PageProvider: ChildrenFC = function({children}) {
-  const state = usePageContextReducer();
-
-  const {Provider} = pageContext;
-
-  return <Provider value={state}>{children}</Provider>;
-};
-
 const PIdProvider: ChildrenFC<Pick<Props, 'id'>> = function({children, id}) {
   const state = usePIdContextState(id);
   const {Provider} = pIdContext;
@@ -41,14 +33,14 @@ const PIdProvider: ChildrenFC<Pick<Props, 'id'>> = function({children, id}) {
 const ChildMenu: FC<Props> = function({id, onClose}) {
   return (
     <PIdProvider id={id}>
-      <PageProvider>
-        <MenuProvider onClose={onClose}>
+      <MenuProvider onClose={onClose}>
+        <PageProvider context={pageContext}>
           <main className='content-main'>
             <Filter />
             <TableList />
           </main>
-        </MenuProvider>
-      </PageProvider>
+        </PageProvider>
+      </MenuProvider>
     </PIdProvider>
   );
 };

packages/app/src/pages/menu/index.tsx

@@ -1,8 +1,8 @@
 import Filter from './filter';
 import {FC, ReactNode} from 'react';
 import {context, pageContext, useContextReducer} from './context';
-import {usePageContextReducer} from '@hooks';
 import TableList from './table';
+import {PageProvider} from '@components';
 
 const MenuProvider: FC<{children: ReactNode}> = function({children}) {
   const state = useContextReducer();
@@ -12,24 +12,16 @@ const MenuProvider: FC<{children: ReactNode}> = function({children}) {
   return <Provider value={state}>{children}</Provider>;
 };
 
-const PageProvider: FC<{children: ReactNode}> = function({children}) {
-  const state = usePageContextReducer();
-
-  const {Provider} = pageContext;
-
-  return <Provider value={state}>{children}</Provider>;
-};
-
 const Menu: FC = function() {
   return (
-    <PageProvider>
-      <MenuProvider>
+    <MenuProvider>
+      <PageProvider context={pageContext}>
         <main className='content-main'>
           <Filter />
           <TableList />
         </main>
-      </MenuProvider>
-    </PageProvider>
+      </PageProvider>
+    </MenuProvider>
   );
 };
 

packages/app/src/pages/role/index.tsx

@@ -2,8 +2,8 @@ import {FC} from 'react';
 import Filter from './filter';
 import {ChildrenFC} from '@utils';
 import {context, pageContext, useContextReducer} from './context';
-import {usePageContextReducer} from '@hooks';
 import TableList from './table';
+import {PageProvider} from '@components';
 
 const RoleProvider: ChildrenFC = function({children}) {
   const state = useContextReducer();
@@ -12,18 +12,10 @@ const RoleProvider: ChildrenFC = function({children}) {
   return <Provider value={state}>{children}</Provider>;
 };
 
-const PageProvider: ChildrenFC = function({children}) {
-  const state = usePageContextReducer();
-
-  const {Provider} = pageContext;
-
-  return <Provider value={state}>{children}</Provider>;
-};
-
 const Role: FC = function() {
   return (
     <RoleProvider>
-      <PageProvider>
+      <PageProvider context={pageContext}>
         <main className='content-main'>
           <Filter />
           <TableList />

packages/app/src/pages/storage/index.tsx

@@ -1,9 +1,9 @@
 import {ChildrenFC} from '@utils';
 import {context, pageContext, useContextReducer} from './context';
 import {FC} from 'react';
-import {usePageContextReducer} from '@hooks';
 import Filter from './filter';
 import TableList from './table';
+import {PageProvider} from '@components';
 
 const StorageProvider: ChildrenFC = function({children}) {
   const state = useContextReducer();
@@ -12,19 +12,11 @@ const StorageProvider: ChildrenFC = function({children}) {
   return <Provider value={state}>{children}</Provider>;
 };
 
-const PageProvider: ChildrenFC = function({children}) {
-  const state = usePageContextReducer();
-
-  const {Provider} = pageContext;
-
-  return <Provider value={state}>{children}</Provider>;
-};
-
 const Storage: FC = function() {
   return (
     <>
       <StorageProvider>
-        <PageProvider>
+        <PageProvider context={pageContext}>
           <main className='content-main'>
             <Filter />
             <TableList />

packages/app/src/pages/user/index.tsx

@@ -3,7 +3,7 @@ import Filter from './filter';
 import TableList from './table';
 import {ChildrenFC} from '@utils';
 import {context, pageContext, useContextReducer} from './context';
-import {usePageContextReducer} from '@hooks';
+import {PageProvider} from '@components';
 
 const UserProvider: ChildrenFC = function({children}) {
   const {Provider} = context;
@@ -12,17 +12,10 @@ const UserProvider: ChildrenFC = function({children}) {
   return <Provider value={state}>{children}</Provider>;
 };
 
-const PageProvider: ChildrenFC = function({children}) {
-  const {Provider} = pageContext;
-  const state = usePageContextReducer();
-
-  return <Provider value={state}>{children}</Provider>;
-};
-
 const User: FC = function() {
   return (
     <UserProvider>
-      <PageProvider>
+      <PageProvider context={pageContext}>
         <main className='content-main'>
           <Filter />
           <TableList />

packages/app/src/utils/sortMenu.ts

@@ -1,5 +1,4 @@
 import {TreeRoleMenuData} from '@models';
-import {userStore} from '@stores';
 
 export type ParseMenuType = {
   key: string,
@@ -11,9 +10,6 @@ export type ParseMenuType = {
 };
 
 export function sortMenu(menus: TreeRoleMenuData[]) {
-  const userMenus = userStore.getState().menu;
-  if (!userMenus) return [];
-
   const topMenu: ParseMenuType[] = [],
         childMenu: ParseMenuType[] = [];