chore: refactor

Author: sindu12jun

Diff for: .husky/.gitignore

@@ -0,0 +1 @@
+_

Diff for: .husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit 

Diff for: .husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

Diff for: README.md

@@ -1,7 +1,5 @@
 # 2021 必修：React + React Hook + TS 最佳实践仿 Jira 企业级项目
 
-Hi，同学们好，感谢大家的信任购买这个课程。这个代码仓库的进度会领先课程进度，查看课程对应代码请 checkout 到对应的 commit
+Hi，同学们好，感谢大家的信任购买这个课程。查看课程对应代码请 checkout 到对应的 commit
 
 这里是配套课件的链接：[点击我查看配套课件](https://www.notion.so/React-491ad0643476437cafde50bee4dde6ed)
-
-有任何问题及时和我反馈，再次感谢!

Diff for: package.json

@@ -38,7 +38,8 @@
     "test": "craco test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy":"gh-pages -d build -r [email protected]:sindu12jun/sindu12jun.github.io.git -b main"
+    "deploy": "gh-pages -d build -r [email protected]:sindu12jun/sindu12jun.github.io.git -b main",
+    "prepare": "husky install"
   },
   "eslintConfig": {
     "rules": {
@@ -63,22 +64,18 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
+    "@commitlint/cli": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.1",
+    "@testing-library/react-hooks": "^5.1.1",
     "@types/qs": "^6.9.5",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-helmet": "^6.1.0",
     "eslint-config-prettier": "^6.15.0",
-    "husky": ">=4",
+    "husky": ">=6",
     "json-server": "^0.16.2",
     "lint-staged": ">=10",
-    "prettier": "2.1.2"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
+    "msw": "^0.28.1",
+    "prettier": "^2.2.1"
   },
   "lint-staged": {
     "*.{js,css,md,ts,tsx}": "prettier --write"

Diff for: 404.html renamed to public/404.html

@@ -1,18 +1,21 @@
 import React from "react";
 import "./App.css";
 import { useAuth } from "context/auth-context";
-import { AuthenticatedApp } from "authenticated-app";
-import { UnauthenticatedApp } from "unauthenticated-app";
 import { ErrorBoundary } from "components/error-boundary";
-import { FullPageErrorFallback } from "components/lib";
+import { FullPageErrorFallback, FullPageLoading } from "components/lib";
+
+const AuthenticatedApp = React.lazy(() => import("authenticated-app"));
+const UnauthenticatedApp = React.lazy(() => import("unauthenticated-app"));
 
 function App() {
   const { user } = useAuth();
 
   return (
     <div className="App">
       <ErrorBoundary fallbackRender={FullPageErrorFallback}>
-        {user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
+        <React.Suspense fallback={<FullPageLoading />}>
+          {user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
+        </React.Suspense>
       </ErrorBoundary>
     </div>
   );

Diff for: src/App.test.tsx

@@ -0,0 +1,57 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "name": "高修文"
+    },
+    {
+      "id": 2,
+      "name": "熊天成"
+    },
+    {
+      "id": 3,
+      "name": "郑华"
+    },
+    {
+      "id": 4,
+      "name": "王文静"
+    }
+  ],
+  "projects": [
+    {
+      "id": 1,
+      "name": "骑手管理",
+      "personId": 1,
+      "organization": "外卖组",
+      "created": 1604989757139
+    },
+    {
+      "id": 2,
+      "name": "团购 APP",
+      "personId": 2,
+      "organization": "团购组",
+      "created": 1604989757139
+    },
+    {
+      "id": 3,
+      "name": "物料管理系统",
+      "personId": 2,
+      "organization": "物料组",
+      "created": 1546300800000
+    },
+    {
+      "id": 4,
+      "name": "总部管理系统",
+      "personId": 3,
+      "organization": "总部",
+      "created": 1604980000011
+    },
+    {
+      "id": 5,
+      "name": "送餐路线规划系统",
+      "personId": 4,
+      "organization": "外卖组",
+      "created": 1546900800000
+    }
+  ]
+}

Diff for: src/App.tsx

@@ -0,0 +1,49 @@
+import { setupServer } from "msw/node";
+import { rest } from "msw";
+import { http } from "utils/http";
+
+const apiUrl = process.env.REACT_APP_API_URL;
+
+const server = setupServer();
+
+// jest 是对react最友好的一个测试库
+// beforeAll 代表执行所有的测试之前，先来执行一下回调函数
+beforeAll(() => server.listen());
+
+// 每一个测试跑完以后，都重置mock路由
+afterEach(() => server.resetHandlers());
+
+// 所有的测试跑完后，关闭mock路由
+afterAll(() => server.close());
+
+test("http方法发送异步请求", async () => {
+  const endpoint = "test-endpoint";
+  const mockResult = { mockValue: "mock" };
+
+  server.use(
+    rest.get(`${apiUrl}/${endpoint}`, (req, res, ctx) =>
+      res(ctx.json(mockResult))
+    )
+  );
+
+  const result = await http(endpoint);
+  expect(result).toEqual(mockResult);
+});
+
+test("http请求时会在header里带上token", async () => {
+  const token = "FAKE_TOKEN";
+  const endpoint = "test-endpoint";
+  const mockResult = { mockValue: "mock" };
+
+  let request: any;
+
+  server.use(
+    rest.get(`${apiUrl}/${endpoint}`, async (req, res, ctx) => {
+      request = req;
+      return res(ctx.json(mockResult));
+    })
+  );
+
+  await http(endpoint, { token });
+  expect(request.headers.get("Authorization")).toBe(`Bearer ${token}`);
+});

Diff for: src/__tests__/fake.json

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Mark } from "components/mark";
+
+test("Mark 组件正确高亮关键词", () => {
+  const name = "物料管理";
+  const keyword = "管理";
+
+  render(<Mark name={name} keyword={keyword} />);
+
+  expect(screen.getByText(keyword)).toBeInTheDocument();
+  expect(screen.getByText(keyword)).toHaveStyle("color: #257AFD");
+  expect(screen.getByText("物料")).not.toHaveStyle("color: #257AFD");
+});

Diff for: src/__tests__/http.ts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from "react";
+import { setupServer } from "msw/node";
+import { rest } from "msw";
+import fakeData from "./fake.json";
+import { render, screen, waitFor } from "@testing-library/react";
+import { ProjectListScreen } from "screens/project-list";
+import { AppProviders } from "context";
+
+const apiUrl = process.env.REACT_APP_API_URL;
+const fakeAuth = {
+  id: 1,
+  name: "jack",
+  token: "123",
+};
+
+const server = setupServer(
+  rest.get(`${apiUrl}/me`, (req, res, ctx) => res(ctx.json(fakeAuth))),
+  rest.get(`${apiUrl}/users`, (req, res, ctx) => res(ctx.json(fakeData.users))),
+  rest.get(`${apiUrl}/projects`, (req, res, ctx) => {
+    const { name = "", personId = undefined } = Object.fromEntries(
+      req.url.searchParams
+    );
+    const result = fakeData?.projects?.filter((project) => {
+      return (
+        project.name.includes(name) &&
+        (personId ? project.personId === +personId : true)
+      );
+    });
+    return res(ctx.json(result));
+  })
+);
+
+// jest 是对react最友好的一个测试库
+// beforeAll 代表执行所有的测试之前，先来执行一下回调函数
+beforeAll(() => server.listen());
+
+// 每一个测试跑完以后，都重置mock路由
+afterEach(() => server.resetHandlers());
+
+// 所有的测试跑完后，关闭mock路由
+afterAll(() => server.close());
+
+const waitTable = () =>
+  waitFor(() => expect(screen.getByText("骑手管理")).toBeInTheDocument(), {
+    timeout: 3000,
+  });
+test("项目列表展示正常", async () => {
+  renderScreen(<ProjectListScreen />, { route: "/projects" });
+  await waitTable();
+  expect(screen.getAllByRole("row").length).toBe(fakeData.projects.length + 1);
+});
+
+test("搜索项目", async () => {
+  renderScreen(<ProjectListScreen />, { route: "/projects?name=骑手" });
+  await waitTable();
+  expect(screen.getAllByRole("row").length).toBe(2);
+  expect(screen.getByText("骑手管理")).toBeInTheDocument();
+});
+
+export const renderScreen = (ui: ReactNode, { route = "/projects" } = {}) => {
+  window.history.pushState({}, "Test page", route);
+
+  return render(<AppProviders>{ui}</AppProviders>);
+};

Diff for: src/__tests__/mark.tsx

@@ -0,0 +1,58 @@
+import { useAsync } from "utils/use-async";
+import { act, renderHook } from "@testing-library/react-hooks";
+
+const defaultState: ReturnType<typeof useAsync> = {
+  stat: "idle",
+  data: null,
+  error: null,
+
+  isIdle: true,
+  isLoading: false,
+  isError: false,
+  isSuccess: false,
+
+  run: expect.any(Function),
+  setData: expect.any(Function),
+  setError: expect.any(Function),
+  retry: expect.any(Function),
+};
+
+const loadingState: ReturnType<typeof useAsync> = {
+  ...defaultState,
+  stat: "loading",
+  isIdle: false,
+  isLoading: true,
+};
+
+const successState: ReturnType<typeof useAsync> = {
+  ...defaultState,
+  stat: "success",
+  isIdle: false,
+  isSuccess: true,
+};
+
+test("useAsync 可以异步处理", async () => {
+  let resolve: any, reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  const { result } = renderHook(() => useAsync());
+  expect(result.current).toEqual(defaultState);
+
+  let p: Promise<any>;
+  act(() => {
+    p = result.current.run(promise);
+  });
+  expect(result.current).toEqual(loadingState);
+  const resolvedValue = { mockedValue: "resolved" };
+  await act(async () => {
+    resolve(resolvedValue);
+    await p;
+  });
+  expect(result.current).toEqual({
+    ...successState,
+    data: resolvedValue,
+  });
+});

Diff for: src/__tests__/project-list.tsx

@@ -6,7 +6,6 @@ import styled from "@emotion/styled";
 import { ButtonNoPadding, Row } from "components/lib";
 import { Button, Dropdown, Menu } from "antd";
 import { Navigate, Route, Routes } from "react-router";
-import { BrowserRouter as Router } from "react-router-dom";
 import { ProjectScreen } from "screens/project";
 import { resetRoute } from "utils";
 import { ProjectModal } from "screens/project-list/project-modal";
@@ -27,26 +26,21 @@ import { UserPopover } from "components/user-popover";
 
 // prop drilling
 
-export const AuthenticatedApp = () => {
+export default function AuthenticatedApp() {
   return (
     <Container>
-      <Router>
-        <PageHeader />
-        <Main>
-          <Routes>
-            <Route path={"/projects"} element={<ProjectListScreen />} />
-            <Route
-              path={"/projects/:projectId/*"}
-              element={<ProjectScreen />}
-            />
-            <Navigate to={"/projects"} />
-          </Routes>
-        </Main>
-        <ProjectModal />
-      </Router>
+      <PageHeader />
+      <Main>
+        <Routes>
+          <Route path={"/projects"} element={<ProjectListScreen />} />
+          <Route path={"/projects/:projectId/*"} element={<ProjectScreen />} />
+          <Navigate to={"/projects"} />
+        </Routes>
+      </Main>
+      <ProjectModal />
     </Container>
   );
-};
+}
 
 const PageHeader = () => {
   return (

Diff for: src/__tests__/use-async.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { IdSelect } from "components/id-select";
+import { useEpics } from "utils/epic";
+
+export const EpicSelect = (props: React.ComponentProps<typeof IdSelect>) => {
+  const { data: epics } = useEpics();
+  return <IdSelect options={epics || []} {...props} />;
+};