[FE] - 단위테스트 추가

[FE] - 단위테스트

Author: BHyeonKim

.github/PULL_REQUEST_TEMPLATE.md

@@ -24,8 +24,8 @@ ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이
 ## ✅ PR Checklist
 PR이 다음 요구 사항을 충족하는지 확인하세요.
 
-[ ]  커밋 메시지 컨벤션에 맞게 작성했습니다.
-[ ]  변경 사항에 대한 테스트를 했습니다.(버그 수정/기능에 대한 테스트).
+- [ ]  커밋 메시지 컨벤션에 맞게 작성했습니다.
+- [ ]  변경 사항에 대한 테스트를 했습니다.(버그 수정/기능에 대한 테스트).
 
 <br/>
 Closes 이슈키-이슈번호

.github/workflows/code-analyze-pr.yml

@@ -0,0 +1,55 @@
+name: Code Analyze Pull Request
+
+run-name: Run code analyze triggered with pull request by ${{github.actor}}
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+    branches:
+      - main
+      - develop
+env:
+  NODE_VERSION: 18.12.0
+
+jobs:
+  code_analysis:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 'Checkout repository on branch: ${{ github.REF }}'
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.HEAD_REF }}
+
+      - name: Retrieve entire repository history
+        run: |
+          git fetch --prune --unshallow
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm install
+
+      - name: Coverage Test
+        continue-on-error: true
+        run: npm run coverage
+
+      - name: Run an analysis of the ${{ github.REF }} branch ${{ github.BASE_REF }} base
+        uses: sonarsource/sonarqube-scan-action@master
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

.github/workflows/code-analyze-push.yml

@@ -0,0 +1,48 @@
+name: Code Analyze branch
+
+run-name: Run code analyze triggered with push by ${{github.actor}}
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+jobs:
+  code_analysis:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 'Checkout repository on branch: ${{ github.REF }}'
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.REF }}
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: yarn install
+
+      - name: Coverage Test
+        continue-on-error: true
+        run: yarn run coverage
+
+      - name: 'Run an analysis of the ${{ github.REF }} branch'
+        uses: sonarsource/sonarqube-scan-action@master
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

.github/workflows/deploy.yml

@@ -1,6 +1,6 @@
 name: Deploy remix app
 
-run-name: Deploy remix app to docker hub by ${{github.actor}}
+run-name: Deploy remix app to docker hub and start services by ${{github.actor}}
 
 on:
   push:
@@ -19,6 +19,8 @@ jobs:
           echo "VITE_OAUTH_URL=${{ secrets.VITE_OAUTH_URL }}" > .env
           echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" >> .env
           echo "VITE_STOMP_URL=${{ secrets.VITE_STOMP_URL }}" >> .env
+          echo "VITE_AI_URL=${{ secrets.VITE_AI_URL }}" >> .env
+
       - name: Build image
         run: |
           docker build -t ${{secrets.DOCKER_USERNAME}}/if-fe:latest .

.gitignore

@@ -27,4 +27,5 @@ dist-ssr
 /.react-router/
 /build/
 
+coverage
 .env

biome.json

@@ -47,7 +47,7 @@
 					"options": {
 						"strictCase": false,
 						"requireAscii": true,
-						"filenameCases": ["camelCase", "export"]
+						"filenameCases": ["PascalCase", "camelCase", "export"]
 					}
 				}
 			},
@@ -60,8 +60,8 @@
 		{
 			"include": [
 				"test/**/*",
-				"*.test.{ts,tsx,js,jsx}",
-				"*.spec.{ts,tsx,js,jsx}",
+				"**/*.test.{ts,tsx,js,jsx}",
+				"**/*.spec.{ts,tsx,js,jsx}",
 				"src/app/routes/*"
 			],
 			"linter": {

package.json

@@ -8,7 +8,9 @@
 		"build": "react-router build",
 		"start": "react-router-serve ./build/server/index.js",
 		"typecheck": "react-router typegen && tsc",
-		"lint": "biome check --write --unsafe .",
+		"test": "vitest",
+		"coverage": "vitest run --coverage",
+		"lint": "biome check --write .",
 		"postinstall": "husky"
 	},
 	"lint-staged": {
@@ -38,23 +40,28 @@
 		"@react-router/dev": "^7.5.3",
 		"@svgr/rollup": "^8.1.0",
 		"@tailwindcss/vite": "^4.1.5",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.3.0",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/node": "^22.15.3",
 		"@types/react": "^19.1.2",
 		"@types/react-dom": "^19.1.3",
+		"@vitest/coverage-v8": "^3.1.4",
 		"globals": "^16.0.0",
 		"husky": "^9.1.7",
+		"jsdom": "^26.1.0",
 		"lint-staged": "^15.5.1",
 		"msw": "^2.8.2",
 		"tailwindcss": "^4.1.5",
 		"typescript": "~5.7.2",
 		"vite": "^6.3.1",
 		"vite-plugin-svgr": "^4.3.0",
-		"vite-tsconfig-paths": "^5.1.4"
+		"vite-tsconfig-paths": "^5.1.4",
+		"vitest": "^3.1.4"
 	},
 	"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
 	"msw": {
-		"workerDirectory": [
-			"public"
-		]
+		"workerDirectory": ["public"]
 	}
 }

setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

sonar-project.properties

@@ -0,0 +1,30 @@
+# 프로젝트 식별자
+sonar.projectKey=CleanEngine_cleanengine-fe_c6875537-ed9d-4dfe-b79c-ea5cb6d2a0e3
+
+# 프로젝트 이름
+sonar.projectName=CleanEngine Frontend
+
+# 소스 코드 위치
+sonar.sources=src
+
+# 테스트 파일 위치 및 패턴
+sonar.tests=src
+sonar.test.inclusions=**/*.test.tsx,**/*.test.ts,**/*.spec.tsx,**/*.spec.ts
+
+# TypeScript/JavaScript 설정
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+sonar.typescript.tsconfigPath=tsconfig.json
+
+# 분석에서 제외할 파일/디렉토리
+sonar.exclusions=node_modules/**,build/**,dist/**,coverage/**,public/**,**/*.test.tsx,**/*.test.ts,**/*.spec.tsx,**/*.spec.ts
+
+# 코드 중복 검사 제외
+sonar.cpd.exclusions=**/*.test.tsx,**/*.test.ts
+
+# 언어 설정
+sonar.language=ts
+sonar.typescript.file.suffixes=.ts,.tsx
+sonar.javascript.file.suffixes=.js,.jsx
+
+# 커버리지 파일 위치
+sonar.javascript.lcov.reportPaths=./coverage/lcov.info

src/app/entry.client.tsx

@@ -1,3 +1,4 @@
+/* v8 ignore start */
 import { StrictMode, startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { HydratedRouter } from 'react-router/dom';
@@ -21,3 +22,5 @@ prepareApp().then(() => {
 		);
 	});
 });
+
+/* v8 ignore end */