[FE] - 단위테스트

.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 .
@@ -29,4 +31,18 @@ jobs:
           password: ${{secrets.DOCKER_TOKEN}}
       - name: Push image to Docker hub
         run: |
-          docker push ${{secrets.DOCKER_USERNAME}}/if-fe:latest
+          docker push ${{secrets.DOCKER_USERNAME}}/if-fe:latest
+      - name: Connect to cloud server
+        uses: appleboy/[email protected]
+        with:
+          host: ${{secrets.FRONTEND_HOST}}
+          username: ${{secrets.FRONTEND_USERNAME}}
+          key: ${{secrets.FRONTEND_SECRET_KEY}}
+          port: ${{secrets.FRONTEND_PORT}}
+          script: |
+            cd ~
+            docker stop frontend || true
+            docker rm frontend || true
+            docker rmi ${{secrets.DOCKER_USERNAME}}/if-fe:latest || true
+            docker pull ${{secrets.DOCKER_USERNAME}}/if-fe:latest
+            docker run -d --name frontend -p 3000:3000 ${{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 */

src/app/entry.server.tsx

@@ -1,3 +1,4 @@
+/* v8 ignore start */
 import { PassThrough } from 'node:stream';
 
 import { createReadableStreamFromReadable } from '@react-router/node';
@@ -73,3 +74,5 @@ export default function handleRequest(
 		setTimeout(abort, streamTimeout + 1000);
 	});
 }
+
+/* v8 ignore end */

src/app/provider/StompProvider.test.tsx

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import StompProvider, { useStompClient } from './StompProvider';
+
+vi.mock('@stomp/stompjs', () => {
+	return {
+		Client: vi.fn().mockImplementation(() => {
+			return {
+				activate: vi.fn(),
+				deactivate: vi.fn(),
+				onConnect: null,
+				onDisconnect: null,
+				onWebSocketError: null,
+				onStompError: null,
+			};
+		}),
+	};
+});
+
+describe('useStompClient 테스트', () => {
+	it('useStompClient hook은 StompProvider 외부에서 사용하면 에러를 던진다.', () => {
+		expect(() => renderHook(() => useStompClient())).toThrowError();
+	});
+
+	it('useStompClient hook은 StompProvider 내부에서 사용하면 정상 작동한다.', () => {
+		const { result } = renderHook(() => useStompClient(), {
+			wrapper: ({ children }) => (
+				<StompProvider brokerURL="">{children}</StompProvider>
+			),
+		});
+
+		expect(result.current).toHaveProperty('client');
+		expect(result.current).toHaveProperty('connected');
+	});
+});

src/app/provider/StompProvider.tsx

@@ -11,10 +11,7 @@ type StompContextType = {
 	connected: boolean;
 };
 
-export const StompContext = createContext<StompContextType>({
-	client: null,
-	connected: false,
-});
+export const StompContext = createContext<StompContextType | null>(null);
 
 export default function StompProvider({
 	children,
@@ -69,6 +66,13 @@ export default function StompProvider({
 }
 
 export function useStompClient() {
-	const { client, connected } = useContext(StompContext);
-	return { client, connected };
+	const stompContext = useContext(StompContext);
+
+	if (!stompContext) {
+		throw new Error(
+			'useStompClient hook은 StompProvider 내부에서 사용해야 합니다.',
+		);
+	}
+
+	return { client: stompContext.client, connected: stompContext.connected };
 }

src/app/routes.ts

@@ -1,4 +1,6 @@
+/* v8 ignore start */
 import type { RouteConfig } from '@react-router/dev/routes';
 import { flatRoutes } from '@react-router/fs-routes';
 
 export default flatRoutes() satisfies RouteConfig;
+/* v8 ignore end */

src/entities/coin/api/coin.endpoint.ts

@@ -1,3 +1,4 @@
+/* v8 ignore start */
 import httpClient from '~/shared/api/httpClient';
 import type { CoinListResponse } from '../types/coin.type';
 
@@ -6,3 +7,4 @@ export default {
 		return httpClient.get<CoinListResponse>('api/asset');
 	},
 };
+/* v8 ignore end */