# Research: Frontend Test Coverage — Phased Improvement **Branch**: `303-frontend-test-coverage` | **Date**: 2026-06-13 **Source**: Static analysis ของ codebase จริง --- ## Technical Findings ### Test Framework Stack | Item | Value | |------|-------| | **Framework** | Vitest `^4.1.0` | | **Coverage Provider** | `@vitest/coverage-v8` `^4.1.6` | | **Environment** | `jsdom ^29.0.0` | | **Setup File** | `frontend/vitest.setup.ts` | | **Test Include Pattern** | `hooks/**/*.test.{ts,tsx}`, `lib/**/*.test.{ts,tsx}`, `components/**/*.test.{ts,tsx}` | | **Coverage Include** | `hooks/**/*.ts`, `lib/**/*.ts`, `components/**/*.tsx` | | **MSW** | ❌ ไม่ได้ติดตั้ง — ใช้ `vi.mock` แทน | > **สำคัญ:** ชื่อ test files ต้องใช้ `*.test.ts` / `*.test.tsx` (ไม่ใช่ `*.spec.ts`) ตาม vitest config include pattern ### Test Script Commands ```powershell # รัน test + generate coverage (ใช้ verify แต่ละ Phase) npm run test:coverage # รัน test แบบ watch (สำหรับพัฒนา) npm run test # debug mode npm run test:debug ``` ### Coverage Thresholds ที่ตั้งไว้ใน vitest.config.ts ```ts thresholds: { global: { branches: 70, functions: 70, lines: 70, statements: 70 } } ``` > ⚠️ ตอนนี้ threshold ตั้งไว้ที่ 70% แต่ coverage จริงยังอยู่ที่ 13% ซึ่งหมายความว่า `npm run test:coverage` จะ **fail** เสมอจนกว่า Phase 3 เสร็จ — ไม่ต้องกังวล เพราะเราใช้ manual check ไม่ใช่ CI enforcement (ตาม Q1) --- ## Global Mocks (vitest.setup.ts) — ใช้ได้ทุก test โดยอัตโนมัติ ```ts // 1. jest-dom matchers (toBeInTheDocument, toHaveValue, ฯลฯ) import '@testing-library/jest-dom/vitest'; // 2. sonner toast — ใช้ใน assert ว่า toast แสดงหรือไม่ vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } })); // 3. next/navigation — useRouter, usePathname, useSearchParams, useParams vi.mock('next/navigation', () => ({ useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn() }), ... })); // 4. apiClient (axios wrapper) — mock ทั้งหมด: get, post, put, patch, delete vi.mock('@/lib/api/client', () => ({ default: { get: vi.fn(), post: vi.fn(), put: vi.fn(), patch: vi.fn(), delete: vi.fn() } })); // 5. Browser polyfills (ResizeObserver ฯลฯ) ``` --- ## Test Helper — `frontend/lib/test-utils.tsx` ```ts // ใช้ใน hook tests และ component tests import { createTestQueryClient } from '@/lib/test-utils'; const { wrapper, queryClient } = createTestQueryClient(); // wrapper = QueryClientProvider ที่ตั้ง retry: false, gcTime: 0, staleTime: 0 ``` --- ## Existing Test Files (13 files) ``` hooks/__tests__/ use-ai-chat.test.ts use-circulation.test.ts use-correspondence.test.ts use-drawing.test.ts use-projects.test.ts use-rfa.test.ts use-users.test.ts use-workflow-action.test.ts hooks/ai/__tests__/ use-intent-classification.test.ts lib/services/__tests__/ correspondence.service.test.ts master-data.service.test.ts project.service.test.ts components/correspondences/ form.test.tsx ``` --- ## Coverage Gaps Analysis ### hooks/ (28 hooks, 9 tested, **19 ขาด**) | Hook ที่ขาด | ขนาด | ความสำคัญ | |-------------|-------|-----------| | `use-ai-prompts.ts` | 7051 B | Medium | | `use-ai-status.ts` | 3708 B | Medium | | `use-audit-logs.ts` | 566 B | Low | | `use-dashboard.ts` | 1214 B | Medium | | `use-delegation.ts` | 2323 B | Medium | | `use-distribution-matrices.ts` | 3455 B | Medium | | `use-master-data.ts` | 4851 B | **High** (ใช้ใน form ทุกตัว) | | `use-migration-review.ts` | 4453 B | Medium | | `use-notification.ts` | 943 B | Low | | `use-numbering.ts` | 2955 B | **High** (Document Numbering) | | `use-reference-data.ts` | 4345 B | Medium | | `use-reminder.ts` | 3810 B | Low | | `use-response-codes.ts` | 1590 B | Low | | `use-review-teams.ts` | 4605 B | Medium | | `use-search.ts` | 962 B | Low | | `use-translations.ts` | 554 B | Low | | `use-transmittal.ts` | 1129 B | **High** | | `use-workflow-history.ts` | 1206 B | Medium | | `use-workflows.ts` | 3066 B | **High** | ### lib/services/ (28 services, 3 tested, **25 ขาด**) High-priority services ที่ควรทำก่อน: - `rfa.service.ts` (2598 B) - `transmittal.service.ts` (2013 B) - `circulation.service.ts` (2506 B) - `workflow-engine.service.ts` (7658 B) ← ใหญ่ที่สุด - `user.service.ts` (2289 B) - `document-numbering.service.ts` (1866 B) - `admin-ai.service.ts` (14833 B) ← ใหญ่มาก, Phase 3 ### components/correspondences/ (9 files, 1 tested) ไฟล์ที่ขาด: `list.tsx`, `detail.tsx`, `tag-manager.tsx`, `reference-selector.tsx`, `revision-history.tsx`, `circulation-status-card.tsx`, `correspondences-content.tsx`, `ux-flow-dialog.tsx` ### components/rfas/ (3 files, 0 tested) - `form.tsx` (32061 B — ใหญ่ที่สุด, priority สูงสุด) - `list.tsx` (4251 B) - `detail.tsx` (11971 B) --- ## Proven Test Patterns (จาก existing files) ### Pattern A — Hook Test ```ts // File: hooks/__tests__/use-[name].test.ts // Change Log: 2026-06-XX - สร้างใหม่สำหรับ Phase X Coverage import { describe, it, expect, vi, beforeEach } from 'vitest'; import { renderHook, waitFor, act } from '@testing-library/react'; import { createTestQueryClient } from '@/lib/test-utils'; import { useMyHook } from '../use-my-hook'; // mock service ที่ hook ใช้ vi.mock('@/lib/services/my.service', () => ({ myService: { getAll: vi.fn(), create: vi.fn() } })); import { myService } from '@/lib/services/my.service'; describe('useMyHook', () => { beforeEach(() => { vi.clearAllMocks(); }); it('ควรดึงข้อมูลสำเร็จ', async () => { const mockData = [{ publicId: '019505a1-7c3e-7000-8000-abc123def456', name: 'Test' }]; vi.mocked(myService.getAll).mockResolvedValue(mockData); const { wrapper } = createTestQueryClient(); const { result } = renderHook(() => useMyHook(), { wrapper }); await waitFor(() => { expect(result.current.isSuccess).toBe(true); }); expect(result.current.data).toEqual(mockData); }); it('ควร handle error state', async () => { vi.mocked(myService.getAll).mockRejectedValue(new Error('API Error')); const { wrapper } = createTestQueryClient(); const { result } = renderHook(() => useMyHook(), { wrapper }); await waitFor(() => { expect(result.current.isError).toBe(true); }); }); }); ``` ### Pattern B — Service Test ```ts // File: lib/services/__tests__/[name].service.test.ts // Change Log: 2026-06-XX - สร้างใหม่สำหรับ Phase X Coverage import { describe, it, expect, vi, beforeEach } from 'vitest'; // apiClient ถูก mock ไว้ใน vitest.setup.ts แล้ว — import มาใช้ได้เลย import apiClient from '@/lib/api/client'; import { myService } from '../my.service'; describe('myService', () => { beforeEach(() => { vi.clearAllMocks(); }); it('ควรเรียก GET /my-endpoint', async () => { const mockData = { items: [{ publicId: '019505a1-7c3e-7000-8000-abc123def456' }] }; vi.mocked(apiClient.get).mockResolvedValue({ data: mockData }); const result = await myService.getAll({ projectId: 1 }); expect(apiClient.get).toHaveBeenCalledWith('/my-endpoint', expect.any(Object)); expect(result).toEqual(mockData); }); }); ``` ### Pattern C — Component Test ```ts // File: components/[folder]/[Component].test.tsx // Change Log: 2026-06-XX - สร้างใหม่สำหรับ Phase X Coverage import { render, screen, waitFor } from '@testing-library/react'; import { vi } from 'vitest'; import { createTestQueryClient } from '@/lib/test-utils'; import { MyComponent } from './MyComponent'; // mock hooks ที่ component ใช้ vi.mock('@/hooks/use-my-hook', () => ({ useMyHook: vi.fn() })); import { useMyHook } from '@/hooks/use-my-hook'; const renderWithQueryClient = (ui: React.ReactElement) => { const { wrapper } = createTestQueryClient(); return render(ui, { wrapper }); }; describe('MyComponent', () => { beforeEach(() => { vi.mocked(useMyHook).mockReturnValue({ data: [{ publicId: '019505a1-7c3e-7000-8000-abc123def456', name: 'Test' }], isLoading: false, isError: false } as ReturnType); }); it('ควร render รายการข้อมูล', () => { renderWithQueryClient(); expect(screen.getByText('Test')).toBeInTheDocument(); }); it('ควร render loading state', () => { vi.mocked(useMyHook).mockReturnValue({ isLoading: true } as ReturnType); renderWithQueryClient(); expect(screen.getByRole('status')).toBeInTheDocument(); // หรือ loading spinner }); }); ``` --- ## Decisions | Decision | Rationale | |----------|-----------| | ใช้ `*.test.ts` ไม่ใช่ `*.spec.ts` | vitest.config.ts include pattern กำหนดไว้แล้ว | | ใช้ `vi.mock` ไม่ใช่ MSW | MSW ไม่ได้ติดตั้ง, apiClient ถูก mock globally ใน setup.ts | | ใช้ `createTestQueryClient` จาก `@/lib/test-utils` | helper มีอยู่แล้ว ไม่ต้องสร้างใหม่ | | วาง test file ใน `__tests__/` subfolder | ตาม pattern ที่มีอยู่ใน codebase แล้ว | | `publicId` เสมอใน mock data | ADR-019 Tier 1 — ห้ามใช้ `id` ตัวเลข | | `vi.clearAllMocks()` ใน `beforeEach` | ป้องกัน test pollution ระหว่าง test cases |