Jest 환경 설정 및 Jest를 사용한 API Test 코드 작성 + Storybook CI Error

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd client && npm run lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd client && npm run test

README.md

@@ -44,5 +44,10 @@
   - [배포](https://www.chromatic.com/build?appId=62f3c06c73a375912ca8d9be&number=1)
   - [repo](https://github.com/jin-Pro/CowDogTing_Storybook)
 - ### API 문서
-
+- [API](https://github.com/boostcampwm-2021/web10-CowDogTing/wiki/API-%EB%AC%B8%EC%84%9C)
 - ### Test 문서
+
+  - [Jest](https://github.com/boostcampwm-2021/web10-CowDogTing/wiki/Jest-%EB%AC%B8%EC%84%9C)
+
+- ### Type 문서
+  - [Type](https://github.com/boostcampwm-2021/web10-CowDogTing/wiki/Type-%EB%AC%B8%EC%84%9C)

client/.eslintrc.json

@@ -22,6 +22,7 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "no-undef" : 1,
     "react/require-default-props" : 0,
     "no-nested-ternary" : 0,
     "react/jsx-props-no-spreading" : 0,
@@ -32,21 +33,21 @@
     "react/prop-types" : 0,
     "react/react-in-jsx-scope" : 0,
     "no-param-reassign" : 0,
-      "import/prefer-default-export": 0,
-      "react/function-component-definition" : 0,
-      "react/jsx-filename-extension" : 0,
-      "import/no-unresolved": 0,
-      "react/no-array-index-key" : 0,
-      "no-use-before-define" : 0,
-      "import/extensions" : 0,
-      "no-unused-vars" : 1,
-      "import/no-extraneous-dependencies" : 0,
-        "prettier/prettier": [
-          "error",
-          {
-            "endOfLine": "auto"
-          }
-        ]
+    "import/prefer-default-export": 0,
+    "react/function-component-definition" : 0,
+    "react/jsx-filename-extension" : 0,
+    "import/no-unresolved": 0,
+    "react/no-array-index-key" : 0,
+    "no-use-before-define" : 0,
+    "import/extensions" : 0,
+    "no-unused-vars" : 1,
+    "import/no-extraneous-dependencies" : 0,
+      "prettier/prettier": [
+        "error",
+        {
+          "endOfLine": "auto"
+        }
+      ]
     },
     "settings": {
       "import/resolver": {

client/.storybook/main.js

@@ -17,7 +17,7 @@ module.exports = {
     config.resolve.alias["@Organism"] = toPath("src/Component/Organism");
     config.resolve.alias["@Template"] = toPath("src/Component/Template");
     config.resolve.alias["@Hoc"] = toPath("src/Component/Hoc");
-    config.resolve.alias["@Util"] = toPath("src/Util");
+    config.resolve.alias["@Common"] = toPath("src/Util");
     config.resolve.alias["@Recoil"] = toPath("src/Recoil");
     config.resolve.alias["@Socket"] = toPath("src/Socket");
     config.resolve.alias["@emotion/styled"] = toPath("node_modules/@emotion/styled");

client/config-overrides.js

@@ -14,7 +14,7 @@ module.exports = override(
     "@Organism": resolve("./src/Component/Organism/"),
     "@Template": resolve("./src/Component/Template/"),
     "@Hoc": resolve("./src/Component/Hoc/"),
-    "@Util": resolve("./src/Util/"),
+    "@Common": resolve("./src/Common/"),
     "@Asset": resolve("./src/Asset/"),
     "@Recoil": resolve("./src/Recoil/"),
     "@Socket": resolve("./src/Socket/"),

client/msw/handler/chatHandler/chatInfoHandler.ts

@@ -0,0 +1 @@
+export const chatInfoHandler = () => {};

client/msw/handler/chatHandler/chatMessagesHandler.ts

@@ -0,0 +1,10 @@
+import { MockProps } from "..";
+
+export const chatMessagesHandler: MockProps = (req, res, ctx) => {
+  const params = req.url.searchParams;
+  const chatRoomId = params.get("chatRoomId");
+  const index = params.get("index");
+  if (index === "0") return res(ctx.status(403), ctx.json({ errorMessage: "index에러" }));
+  if (chatRoomId === "0") return res(ctx.status(403), ctx.json({ errorMessage: "chatRoomId에러" }));
+  return res(ctx.json(true));
+};

client/msw/handler/chatHandler/index.ts

@@ -0,0 +1,9 @@
+import { rest } from "msw";
+import { POST_CHAT_READ_API_URL, CHAT_INFO_URL, CHAT_MESSAGES_API_URL, JOIN_CHAT_URL } from "../../../src/Common/URL";
+
+import { chatInfoHandler } from "./chatInfoHandler";
+import { chatMessagesHandler } from "./chatMessagesHandler";
+import { joinChatHandler } from "./joinChatHandler";
+import { postChatReadHandler } from "./postChatReadHandler";
+
+export const chatHandler = [rest.post(POST_CHAT_READ_API_URL, postChatReadHandler), rest.post(JOIN_CHAT_URL, joinChatHandler), rest.post(CHAT_INFO_URL, chatInfoHandler), rest.get(CHAT_MESSAGES_API_URL, chatMessagesHandler)];

client/msw/handler/chatHandler/joinChatHandler.ts

@@ -0,0 +1 @@
+export const joinChatHandler = () => {};

client/msw/handler/chatHandler/postChatReadHandler.ts

@@ -0,0 +1,10 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const postChatReadHandler: MockProps = (req, res, ctx) => {
+  const errorHandler = errorHandlerMaker(res, ctx);
+  const {
+    body: { chatRoomId },
+  } = req;
+  if (chatRoomId === 0) return errorHandler("존재하지 않는 채팅방입니다.");
+  return res(ctx.json(5));
+};

client/msw/handler/index.ts

@@ -0,0 +1,9 @@
+import { RestRequest, PathParams, ResponseComposition, DefaultBodyType, RestContext } from "msw";
+
+export type MockProps = (req: RestRequest<never, PathParams<string>>, res: ResponseComposition<DefaultBodyType>, ctx: RestContext) => any;
+export const errorHandlerMaker = (res: ResponseComposition<DefaultBodyType>, ctx: RestContext) => (message: string) => res(ctx.status(403), ctx.json({ errorMessage: message }));
+export * from "./teamHandler";
+export * from "./validationHandler";
+export * from "./chatHandler";
+export * from "./userHandler";
+export * from "./requestHandler";

client/msw/handler/requestHandler/acceptHandler.ts

@@ -0,0 +1,12 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const acceptHandler: MockProps = (req, res, ctx) => {
+  const errorHandler = errorHandlerMaker(res, ctx);
+  const {
+    body: { from, to },
+  } = req;
+  if (from === "") return errorHandler("from입력이 잘못되었습니다.");
+  if (to === "") return errorHandler("to입력이 잘못되었습니다.");
+  if (from === to) return errorHandler("from과 to는 같을 수 없습니다.");
+  return res(ctx.json(true));
+};

client/msw/handler/requestHandler/denyHandler.ts

@@ -0,0 +1,12 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const denyHandler: MockProps = (req, res, ctx) => {
+  const errorHandler = errorHandlerMaker(res, ctx);
+  const {
+    body: { from, to },
+  } = req;
+  if (from === "") return errorHandler("from입력이 잘못되었습니다.");
+  if (to === "") return errorHandler("to입력이 잘못되었습니다.");
+  if (from === to) return errorHandler("from과 to는 같을 수 없습니다.");
+  return res(ctx.json(true));
+};

client/msw/handler/requestHandler/index.ts

@@ -0,0 +1,8 @@
+import { rest } from "msw";
+import { acceptHandler } from "./acceptHandler";
+import { denyHandler } from "./denyHandler";
+import { requestHandler } from "./requestHandler";
+import { requestApiHandler } from "./requestApiHandler";
+import { ACCEPT_API_URL, DENY_API_URL, REQUEST_API_URL, REQUEST_URL } from "../../../src/Common/URL";
+
+export const request = [rest.post(ACCEPT_API_URL, acceptHandler), rest.post(DENY_API_URL, denyHandler), rest.post(REQUEST_API_URL, requestApiHandler), rest.get(REQUEST_URL, requestHandler)];

client/msw/handler/requestHandler/requestApiHandler.ts

@@ -0,0 +1,12 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const requestApiHandler: MockProps = (req, res, ctx) => {
+  const errorHandler = errorHandlerMaker(res, ctx);
+  const {
+    body: { from, to },
+  } = req;
+  if (from === "") return errorHandler("from입력이 잘못되었습니다.");
+  if (to === "") return errorHandler("to입력이 잘못되었습니다.");
+  if (from === to) return errorHandler("from과 to는 같을 수 없습니다.");
+  return res(ctx.json(true));
+};

client/msw/handler/requestHandler/requestHandler.ts

@@ -0,0 +1,3 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const requestHandler: MockProps = (req, res, ctx) => {};

client/msw/handler/teamHandler/index.ts

@@ -0,0 +1,9 @@
+import { rest } from "msw";
+import { TEAM_CREATE_API_URL, TEAM_EXIT_API_URL, TEAM_INFO_URL, TEAM_INVITE_API_URL, TEAM_UPDATE_API_URL } from "../../../src/Common/URL";
+import { teamUpdateHandler } from "./teamUpdateHandler";
+import { teamCreateHandler } from "./teamCreateHandler";
+import { teamExitHandler } from "./teamExitHandler";
+import { teamInviteHandler } from "./teamInviteHandler";
+import { teamInfoHandler } from "./teamInfoHandler";
+
+export const teamHandler = [rest.post(TEAM_UPDATE_API_URL, teamUpdateHandler), rest.post(TEAM_CREATE_API_URL, teamCreateHandler), rest.post(TEAM_INVITE_API_URL, teamInviteHandler), rest.post(TEAM_EXIT_API_URL, teamExitHandler), rest.post(TEAM_INFO_URL, teamInfoHandler)];

client/msw/handler/teamHandler/teamCreateHandler.ts

@@ -0,0 +1,15 @@
+import { MockProps } from "..";
+
+export const teamCreateHandler: MockProps = (req, res, ctx) => {
+  const { name, description, location } = req.body;
+  if (name === "" || description === "" || location === "")
+    return res(
+      // Send a valid HTTP status code
+      ctx.status(403),
+      // And a response body, if necessary
+      ctx.json({
+        errorMessage: `error`,
+      })
+    );
+  return res(ctx.json({ gid: 1 }));
+};

client/msw/handler/teamHandler/teamExitHandler.ts

@@ -0,0 +1,5 @@
+import { MockProps } from "..";
+
+export const teamExitHandler: MockProps = (req, res, ctx) => {
+  return res(ctx.json(true));
+};

client/msw/handler/teamHandler/teamInfoHandler.ts

@@ -0,0 +1 @@
+export const teamInfoHandler = () => {};

client/msw/handler/teamHandler/teamInviteHandler.ts

@@ -0,0 +1,15 @@
+import { MockProps } from "..";
+
+export const teamInviteHandler: MockProps = (req, res, ctx) => {
+  const {
+    body: { userId },
+  } = req;
+  if (userId !== "") return res(ctx.json(true));
+
+  return res(
+    ctx.status(403),
+    ctx.json({
+      errorMessage: `유저가 존재하지 않습니다.`,
+    })
+  );
+};

client/msw/handler/teamHandler/teamUpdateHandler.ts

@@ -0,0 +1,15 @@
+import { MockProps } from "..";
+
+export const teamUpdateHandler: MockProps = (req, res, ctx) => {
+  const { name, description, location } = req.body;
+  if (name === "" || description === "" || location === "")
+    return res(
+      // Send a valid HTTP status code
+      ctx.status(403),
+      // And a response body, if necessary
+      ctx.json({
+        errorMessage: `error`,
+      })
+    );
+  return res(ctx.json(true));
+};

client/msw/handler/userHandler/index.ts

@@ -0,0 +1,7 @@
+import { rest } from "msw";
+import { profileHandler } from "./profileHandler";
+import { userInfoHandler } from "./userInfoHandler";
+import { userHandler } from "./userHandler";
+import { PROFILE_API_URL, USER_INFO_API_URL, USER_URL } from "../../../src/Common/URL";
+
+export const user = [rest.post(USER_URL, userHandler), rest.post(USER_INFO_API_URL, userInfoHandler), rest.post(PROFILE_API_URL, profileHandler)];

client/msw/handler/userHandler/profileHandler.ts

@@ -0,0 +1 @@
+export const profileHandler = () => {};

client/msw/handler/userHandler/userHandler.ts

@@ -0,0 +1 @@
+export const userHandler = () => {};

client/msw/handler/userHandler/userInfoHandler.ts

@@ -0,0 +1,13 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const userInfoHandler: MockProps = (req, res, ctx) => {
+  const errorHandler = errorHandlerMaker(res, ctx);
+  const {
+    body: { id, location, age, info },
+  } = req;
+  if (id === "") return errorHandler("id가 잘못되었습니다.");
+  if (location === "") return errorHandler("location이 잘못되었습니다.");
+  if (age === 0) return errorHandler("age설정이 잘못되었습니다.");
+  if (info === "") return errorHandler("info 입력이 잘못되었습니다.");
+  return res(ctx.json(true));
+};

client/msw/handler/validationHandler/checkIdValidationHandler.ts

@@ -0,0 +1,10 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const checkIdValidationHandler: MockProps = (req, res, ctx) => {
+  const errorHandler = errorHandlerMaker(res, ctx);
+  const params = req.url.searchParams;
+  const uid = params.get("uid");
+  if (uid === "") return errorHandler("잘못된 id 형식입니다.");
+  if (uid === "test") return res(ctx.json(false));
+  return res(ctx.json(true));
+};

client/msw/handler/validationHandler/index.ts

@@ -0,0 +1,8 @@
+import { rest } from "msw";
+import { checkIdValidationHandler } from "./checkIdValidationHandler";
+import { loginHandler } from "./loginHandler";
+import { registerHandler } from "./registerHandler";
+import { logOutHandler } from "./logOutHandler";
+import { CHECK_ID_VALIDATION_URL, LOGIN_API_URL, LOGOUT_API_URL, REGISTER_API_URL } from "../../../src/Common/URL";
+
+export const validationHandler = [rest.get(LOGOUT_API_URL, logOutHandler), rest.post(REGISTER_API_URL, registerHandler), rest.post(LOGIN_API_URL, loginHandler), rest.get(CHECK_ID_VALIDATION_URL, checkIdValidationHandler)];

client/msw/handler/validationHandler/logOutHandler.ts

@@ -0,0 +1,3 @@
+import { MockProps } from "..";
+
+export const logOutHandler: MockProps = (req, res, ctx) => res(ctx.json(true));

client/msw/handler/validationHandler/loginHandler.ts

@@ -0,0 +1,9 @@
+import { MockProps } from "..";
+
+export const loginHandler: MockProps = (req, res, ctx) => {
+  const {
+    body: { uid, password },
+  } = req;
+  if (uid !== "test" || password !== "qwer1234") return res(ctx.status(403), ctx.json({ errorMessage: "로그인 실패" }));
+  return res(ctx.json(true));
+};

client/msw/handler/validationHandler/registerHandler.ts

@@ -0,0 +1,15 @@
+import { errorHandlerMaker, MockProps } from "..";
+
+export const registerHandler: MockProps = (req, res, ctx) => {
+  const errorHandler = errorHandlerMaker(res, ctx);
+  const {
+    body: { uid, password, location, age, sex, info },
+  } = req;
+  if (uid === "") return errorHandler("아이디 입력 오류");
+  if (password === "") return errorHandler("비밀번호 입력 오류");
+  if (location === "") return errorHandler("지역 입력 오류");
+  if (age === 0) return errorHandler("나이 입력 오류");
+  if (sex === "") return errorHandler("성별 입력 오류");
+  if (info === "") return errorHandler("정보 입력 오류");
+  return res(ctx.json(true));
+};

client/msw/server.ts

@@ -0,0 +1,5 @@
+// src/mocks/server.js
+import { setupServer } from "msw/node";
+import { validationHandler, request as requestHandler, teamHandler, chatHandler, user as userHandler } from "./handler";
+
+export const server = setupServer(...teamHandler, ...requestHandler, ...chatHandler, ...userHandler, ...validationHandler);