[Feat & Test] 테스트 코드를 위한 hyundux-test 모듈 구현 및 일부 테스트

Caecae/.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
+  env: { browser: true, es2020: true,node: true, jest: true },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',

Caecae/__tests__/FindGameTest/FindGameTest.ts

@@ -0,0 +1,141 @@
+import {
+  initFindingGameState,
+  action,
+  findingGameReducer,
+} from "../../src/jobs/FindingGame/FindingGameWork";
+import { Action } from "../../src/shared/Hyundux"
+import createHynduxTester from "../../src/shared/Hyundux-test/Tester";
+
+const tester = createHynduxTester(initFindingGameState, findingGameReducer);
+
+test("결과보여지는 것들의 인덱스변경_입력값:1 -> 결과값 1 (옮은 테스트)", () => {
+  const givenData = initFindingGameState.payload;
+  const whenData: Action = action.changeShowingAnswer(1);
+  const thenData = tester.makeThenPayload({ answerIndex: 1 })
+
+  tester.given(givenData).when(whenData).then(thenData, true);
+});
+
+test("결과보여지는 것들의 인덱스변경_입력값:2 -> 결과값 1 (잘못된 테스트)", () => {
+  const givenData = initFindingGameState.payload;
+  const whenData: Action = action.changeShowingAnswer(2);
+  const thenData = tester.makeThenPayload({ answerIndex: 1 })
+
+  tester.given(givenData).when(whenData).then(thenData, false);
+});
+
+test("클릭 이벤트:입력값 [{x: 0.5 y: 0.5}] -> 결과값 answers.length == 1, answers = [answer{ x: 0.5. y: 0.5 }] (옳은 테스트)", () => {
+  const givenData = initFindingGameState.payload;
+  const whenData: Action = action.click({ request: {
+    answerList: [
+      { positionX: 0.5, positionY: 0.5 },
+    ]
+  }, response: {
+      responseCode: 1000,
+      message: "success",
+      data: {
+        ticketIryd: "1212",
+        startTime: "asdsad",
+        correctAnswerList: [
+          {
+            positionX: 0.5,
+            positionY: 0.5,
+            descriptionImageUrl: "",
+            title: "",
+            content: ""
+          }
+        ]
+      }
+  }})
+
+  const thenData = tester.makeThenPayload({ showingAnswers: [{
+    positionX: 0.5,
+    positionY: 0.5,
+    descriptionImageUrl: "",
+    title: "",
+    content: ""
+  }]})
+
+  tester.given(givenData).when(whenData).then(thenData, true);
+});
+
+test("클릭 이벤트:입력값 [{x: 0.5 y: 0.5}, 틀린답 {x: 0.7, y: 0.1}] -> 결과값 answers.length == 1, answers = [answer{ x: 0.5. y: 0.5 }] (옳은 테스트)", () => {
+  const givenData = initFindingGameState.payload;
+  const whenData: Action = action.click({ request: {
+    answerList: [
+      { positionX: 0.5, positionY: 0.5 },
+      { positionX: 0.7, positionY: 0.1 }
+    ]
+  }, response: {
+      responseCode: 1000,
+      message: "success",
+      data: {
+        ticketIryd: "1212",
+        startTime: "asdsad",
+        correctAnswerList: [
+          {
+            positionX: 0.5,
+            positionY: 0.5,
+            descriptionImageUrl: "",
+            title: "",
+            content: ""
+          }
+        ]
+      }
+  }})
+
+  const thenData = tester.makeThenPayload({ showingAnswers: [{
+    positionX: 0.5,
+    positionY: 0.5,
+    descriptionImageUrl: "",
+    title: "",
+    content: ""
+  }] })
+
+  tester.given(givenData).when(whenData).then(thenData, true);
+});
+
+test("클릭 이벤트:입력값 [{x: 0.5 y: 0.5}, 맞은답 {x: 0.7, y: 0.1}] -> 결과값 answers.length == 2, answers = [answer{ x: 0.5. y: 0.5 }, {x: 0.7, y: 0.1}] (잘못된 테스트)", () => {
+  console.log("gameStatuse가 바뀌어야함")
+  console.log("tickerID도 바뀌어야함 바뀌어야함")
+  const givenData = initFindingGameState.payload;
+  const whenData: Action = action.click({ request: {
+    answerList: [
+      { positionX: 0.5, positionY: 0.5 },
+      { positionX: 0.7, positionY: 0.1 },
+    ]
+  }, response: {
+      responseCode: 1000,
+      message: "success",
+      data: {
+        ticketIryd: "1212",
+        startTime: "asdsad",
+        correctAnswerList: [
+          {
+            positionX: 0.5,
+            positionY: 0.5,
+            descriptionImageUrl: "",
+            title: "",
+            content: ""
+          },
+          {
+            positionX: 0.7,
+            positionY: 0.1,
+            descriptionImageUrl: "",
+            title: "",
+            content: ""
+          }
+        ]
+      }
+  }})
+
+  const thenData = tester.makeThenPayload({ showingAnswers: [{
+    positionX: 0.5,
+    positionY: 0.5,
+    descriptionImageUrl: "",
+    title: "",
+    content: ""
+  }]})
+
+  tester.given(givenData).when(whenData).then(thenData, false);
+});

Caecae/jest.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts?(x)'],
+};

Caecae/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test --coverage": "jest --coverage",
+    "test": "jest"
   },
   "dependencies": {
     "autoprefixer": "^10.4.19",
@@ -31,7 +33,7 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "jest": "^29.7.0",
     "terser-brunch": "^4.1.0",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.4",
     "typescript": "^5.5.4",
     "vite": "^5.4.0",
     "vite-plugin-compression": "^0.5.1"

Caecae/src/components/FindingGame/FindingGame.tsx

@@ -1,25 +1,25 @@
-import PictureGameBoard from "../common/PictureGameBoard/index.tsx";
+import PictureGameBoard from "../common/PictureGameBoard/index";
 import {
   action,
   genrateFindGameAnswerCheckBodyParameter,
   initFindingGameState,
-} from "../../jobs/FindingGame/FindingGameWork.tsx";
+} from "../../jobs/FindingGame/FindingGameWork";
 import { useEffect, useRef } from "react";
-import LottieContainer from "../common/LottieContainer/index.tsx";
+import LottieContainer from "../common/LottieContainer/index";
 import correctLottie from "@assets/animationCorrect.json";
 import wrongLottie from "@assets/animationIncorrect.json";
 import { store, useExistState } from "../../shared/Hyundux";
-import HintSpot from "./Hint/HintSpot.tsx";
-import SmileBadge from "../common/SmileBadge/index.tsx";
-import { createStory } from "../../shared/Hyundux-saga/Story.tsx";
-import useSaga from "../../shared/Hyundux-saga/useSaga.tsx";
-import { getFindGameStory } from "../../stories/FindingGame/getFindingGame.tsx";
-import { getFindGameAnswerStory } from "../../stories/FindingGame/getFindGameIsAnswer.tsx";
-import { getFindGameHintStory } from "../../stories/FindingGame/getFindGameHint.tsx";
+import HintSpot from "./Hint/HintSpot";
+import SmileBadge from "../common/SmileBadge/index";
+import { createStory } from "../../shared/Hyundux-saga/Story";
+import useSaga from "../../shared/Hyundux-saga/useSaga";
+import { getFindGameStory } from "../../stories/FindingGame/getFindingGame";
+import { getFindGameAnswerStory } from "../../stories/FindingGame/getFindGameIsAnswer";
+import { getFindGameHintStory } from "../../stories/FindingGame/getFindGameHint";
 
 const FindingGame = () => {
   const state = useExistState(initFindingGameState);
-  const timerId = useRef<NodeJS.Timeout | null>(null);
+  const timerId = useRef<number | null>(null);
   const [status, teller] = useSaga();
   const pictureWidth = useRef(0);
   const pictureHeight = useRef(0);