test(frontend): raise overall statement coverage to 30.42% for Phase 1 MVP

specs/300-others/303-frontend-test-coverage/tasks.md

@@ -0,0 +1,221 @@
+# Tasks: Frontend Test Coverage — Phased Improvement
+
+**Input**: Design documents from `specs/300-others/303-frontend-test-coverage/`
+**Prerequisites**: plan.md ✅, spec.md ✅, research.md ✅
+**Branch**: `303-frontend-test-coverage`
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies on each other)
+- **[Story]**: Which Phase/User Story this task belongs to (US1=Phase1, US2=Phase2, US3=Phase3)
+- Include exact file paths in descriptions
+
+## ⚠️ Important Conventions (จาก research.md)
+
+- **Test extension**: `.test.ts` / `.test.tsx` (ไม่ใช่ `.spec.ts`) — ตาม vitest.config.ts include pattern
+- **Test location**: วางใน `__tests__/` subfolder ข้างๆ source (เช่น `hooks/__tests__/use-foo.test.ts`)
+- **Coverage command**: `npm run test:coverage` (ไม่ใช่ `test:cov`)
+- **Mock helper**: ใช้ `createTestQueryClient()` จาก `@/lib/test-utils` สำหรับ hooks + components
+- **apiClient**: mock ไว้ใน `vitest.setup.ts` แล้ว — ไม่ต้อง mock ซ้ำในแต่ละ service test
+- **publicId**: UUIDv7 เสมอในทุก mock data — ห้ามใช้ `id: 1` (ADR-019)
+
+---
+
+## Phase 1: Setup (Shared Infrastructure)
+
+**Purpose**: ตรวจสอบ test environment — helper มีอยู่แล้วใน codebase
+
+- [ ] T001 อ่าน `frontend/vitest.config.ts` ยืนยัน include pattern และ coverage config — ไม่ต้องแก้ไข แค่ทำความเข้าใจ
+- [ ] T002 รัน `npm run test:coverage` ครั้งแรก เพื่อยืนยันว่า environment พร้อม และดู baseline coverage 13.54%
+- [ ] T003 อ่าน `frontend/lib/test-utils.tsx` ทำความเข้าใจ `createTestQueryClient()` pattern
+- [ ] T004 อ่าน test file ตัวอย่าง `frontend/hooks/__tests__/use-correspondence.test.ts` เพื่อ internalize pattern
+
+**Checkpoint**: environment พร้อม, helper และ factory พร้อมใช้
+
+---
+
+## Phase 2: Foundational (Blocking Prerequisites)
+
+**Purpose**: สร้าง test patterns พื้นฐานที่ทุก Phase ใช้ร่วมกัน
+
+**⚠️ CRITICAL**: Phase 3, 4, 5 ต้องรอให้ Phase นี้เสร็จก่อน
+
+- [ ] T007 สร้าง test สำหรับ API client mock pattern ใน `frontend/__tests__/helpers/api-mock.ts` — ตรวจสอบว่า vi.mock ทำงานได้ถูกต้อง
+- [ ] T008 [P] เขียน smoke test สำหรับ 1 hook ง่ายๆ ใน `frontend/hooks/use-auth.spec.ts` เพื่อยืนยัน Vitest + RTL ทำงาน end-to-end
+- [ ] T009 กำหนด test naming convention และ file header format ใน `frontend/__tests__/README.md` (Thai comments, `// File:` header)
+
+**Checkpoint**: Foundation ready — สามารถเริ่ม Phase 3, 4, 5 ได้
+
+---
+
+## Phase 3: User Story 1 — Phase 1 Coverage (13% → 30%) (Priority: P1) 🎯 MVP
+
+**Goal**: ยก Statement Coverage รวมจาก 13.54% ขึ้นเป็น ≥ 30% โดยเน้น hooks/, lib/services/, components/correspondences/
+
+**Independent Test**: รัน `npm run test:coverage` และดูว่า Statements ≥ 30%
+
+### hooks/ — Custom Hooks (19 ที่ยังขาด)
+
+- [ ] T010 [P] [US1] เขียน `frontend/hooks/__tests__/use-master-data.test.ts` — ครอบ `useProjects`, `useOrganizations`, `useUsers` (hook นี้ถูก import ในทุก form)
+- [ ] T011 [P] [US1] เขียน `frontend/hooks/__tests__/use-workflows.test.ts` — ครอบ list + filter workflows, error state
+- [ ] T012 [P] [US1] เขียน `frontend/hooks/__tests__/use-transmittal.test.ts` — ครอบ CRUD operations
+- [ ] T013 [P] [US1] เขียน `frontend/hooks/__tests__/use-numbering.test.ts` — ครอบ document number generation
+- [ ] T014 [P] [US1] เขียน `frontend/hooks/__tests__/use-ai-prompts.test.ts` — ครอบ list, activate prompt
+- [ ] T015 [P] [US1] เขียน `frontend/hooks/__tests__/use-delegation.test.ts` — ครอบ delegation CRUD
+- [ ] T016 [P] [US1] เขียน `frontend/hooks/__tests__/use-dashboard.test.ts` — ครอบ metrics fetch, error
+- [ ] T017 [P] [US1] เขียน `frontend/hooks/__tests__/use-review-teams.test.ts` — ครอบ list + member management
+
+### lib/services/ — Services (25 ที่ยังขาด — เน้น high priority ก่อน)
+
+- [ ] T018 [P] [US1] เขียน `frontend/lib/services/__tests__/rfa.service.test.ts` — ครอบ getAll, getByUuid, create, submit (apiClient mock ใน setup.ts แล้ว)
+- [ ] T019 [P] [US1] เขียน `frontend/lib/services/__tests__/user.service.test.ts` — ครอบ getAll, getById, update
+- [ ] T020 [P] [US1] เขียน `frontend/lib/services/__tests__/transmittal.service.test.ts` — ครอบ CRUD
+- [ ] T021 [P] [US1] เขียน `frontend/lib/services/__tests__/circulation.service.test.ts` — ครอบ CRUD
+- [ ] T022 [P] [US1] เขียน `frontend/lib/services/__tests__/dashboard.service.test.ts` — ครอบ metrics endpoints
+
+### components/correspondences/ — ยังขาด 8 files
+
+- [ ] T023 [P] [US1] เขียน `frontend/components/correspondences/__tests__/list.test.tsx` — ครอบ render, empty state, loading
+- [ ] T024 [P] [US1] เขียน `frontend/components/correspondences/__tests__/circulation-status-card.test.tsx` — ครอบทุก status
+- [ ] T025 [P] [US1] เขียน `frontend/components/correspondences/__tests__/tag-manager.test.tsx` — ครอบ add/remove tags
+
+### components/common/ และ components/ui/
+
+- [ ] T026 [P] [US1] เขียน test สำหรับ components ใน `frontend/components/common/__tests__/` — ยก coverage จาก 26% ขึ้น ≥ 60%
+- [ ] T027 [P] [US1] เขียน test สำหรับ components ใน `frontend/components/ui/__tests__/` — ยก coverage จาก 31% ขึ้น ≥ 60%
+
+**Checkpoint**: รัน `npm run test:coverage` → ยืนยัน Statements ≥ 30% → merge Phase 1 PR
+
+---
+
+## Phase 4: User Story 2 — Phase 2 Coverage (30% → 50%) (Priority: P2)
+
+**Goal**: ยก Statement Coverage รวมจาก 30% ขึ้นเป็น ≥ 50% โดยเน้น rfas/, numbering/, lib/api/, drawings/
+
+**Independent Test**: รัน `npm run test:coverage` และดูว่า Statements ≥ 50%
+
+### components/rfas/ — RFA (Critical Business Feature, 0% → ≥60%)
+
+- [ ] T028 [P] [US2] เขียน `frontend/components/rfas/__tests__/list.test.tsx` — ครอบ render, filter by status, empty state
+- [ ] T029 [P] [US2] เขียน `frontend/components/rfas/__tests__/detail.test.tsx` — ครอบ header display, attachment list, action buttons
+- [ ] T030 [US2] เขียน `frontend/components/rfas/__tests__/form.test.tsx` — ครอบ validation, submit (ไฟล์ใหญ่ 32KB — ต้องแบ่ง test เป็น describe blocks)
+
+### lib/services/ — Services ที่ยังขาด (ต่อจาก Phase 1)
+
+- [ ] T031 [P] [US2] เขียน `frontend/lib/services/__tests__/workflow-engine.service.test.ts` — ครอบ getAll, transition, getHistory
+- [ ] T032 [P] [US2] เขียน `frontend/lib/services/__tests__/document-numbering.service.test.ts` — ครอบ generate, preview, format
+- [ ] T033 [P] [US2] เขียน `frontend/lib/services/__tests__/session.service.test.ts` — ครอบ login, logout, refresh
+
+### components/numbering/ — Document Numbering
+
+- [ ] T034 [P] [US2] เขียน `frontend/components/numbering/__tests__/` tests — ครอบ format display, configuration form, preview
+
+### lib/api/ — API Client Layer (0.38% → ≥70%)
+
+- [ ] T035 [P] [US2] เขียน `frontend/lib/api/__tests__/` tests — ครอบ request interceptors, response handlers, error cases
+
+### components/auth/ และ components/drawings/
+
+- [ ] T036 [P] [US2] เขียน `frontend/components/auth/__tests__/` tests — ครอบ login form, validation
+- [ ] T037 [P] [US2] เขียน `frontend/components/drawings/__tests__/` tests — ครอบ Shop Drawing list, upload, status
+- [ ] T038 [P] [US2] เขียน test เพิ่มสำหรับ `frontend/components/workflows/__tests__/` — ยก coverage จาก 15% ขึ้น ≥ 60%
+- [ ] T039 [P] [US2] เขียน `frontend/hooks/__tests__/use-workflow-history.test.ts` — ครอบ history fetch
+
+**Checkpoint**: รัน `npm run test:coverage` → ยืนยัน Statements ≥ 50% → merge Phase 2 PR
+
+---
+
+## Phase 5: User Story 3 — Phase 3 Coverage (50% → 70%) (Priority: P3)
+
+**Goal**: ยก Statement Coverage รวมจาก 50% ขึ้นเป็น ≥ 70% โดยเน้น admin/, workflow/, layout/
+
+**Independent Test**: รัน `npm run test:cov` และดูว่า Statements ≥ 70%
+
+### components/admin/ — Admin Panel
+
+- [ ] T034 [P] [US3] เขียน test สำหรับ Admin dashboard components ใน `frontend/components/admin/` — ครอบ render, data display
+- [ ] T035 [P] [US3] เขียน test สำหรับ AI Admin panel ใน `frontend/components/admin/ai/` — ครอบ model selection, prompt management (ADR-027)
+- [ ] T036 [P] [US3] เขียน test สำหรับ Admin reference management ใน `frontend/components/admin/reference/`
+- [ ] T037 [P] [US3] เขียน test สำหรับ Admin security settings ใน `frontend/components/admin/security/`
+
+### components/workflow/ — Workflow Engine UI
+
+- [ ] T038 [P] [US3] เขียน test สำหรับ Workflow display components ใน `frontend/components/workflow/` — ครอบ step display, status
+- [ ] T039 [P] [US3] เขียน test สำหรับ Workflow transition buttons — ครอบ disable state, confirmation, submit
+
+### components/layout/ และ Remaining
+
+- [ ] T040 [P] [US3] เขียน test สำหรับ Layout components ใน `frontend/components/layout/` — ครอบ nav, sidebar, header
+- [ ] T041 [P] [US3] เขียน test สำหรับ Transmittal components ใน `frontend/components/transmittal/`
+- [ ] T042 [P] [US3] เขียน test สำหรับ Circulation components ใน `frontend/components/circulation/`
+- [ ] T043 [P] [US3] เขียน test สำหรับ lib/stores/ — ครอบ state initialization, updates, selectors
+- [ ] T044 [P] [US3] เขียน test สำหรับ lib/utils/ — ครอบ utility functions ทั้งหมด (เป็น pure function ควร coverage 100%)
+- [ ] T045 [P] [US3] เขียน test สำหรับ lib/i18n/ — ครอบ translation loading, fallback
+
+**Checkpoint**: รัน `npm run test:coverage` → ยืนยัน Statements ≥ 70% → merge Phase 3 PR
+
+---
+
+## Phase 6: Polish & Cross-Cutting
+
+**Purpose**: ทบทวนคุณภาพ test ทั้งหมด
+
+- [ ] T050 ตรวจสอบ test files ทั้งหมดว่าไม่มี `any` type หรือ `console.log`
+- [ ] T051 [P] ตรวจสอบว่า mock data ทุกที่ใช้ `publicId` (UUIDv7) ไม่ใช่ `id` ตัวเลข (ADR-019)
+- [ ] T052 [P] ตรวจสอบว่าทุก test file มี `// File:` header และ `// Change Log` comment
+- [ ] T053 รัน `npm run test:coverage` ครั้งสุดท้าย บันทึกตัวเลขสุดท้ายใน `specs/300-others/303-frontend-test-coverage/plan.md`
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Phase 1 (Setup)**: ไม่มี dependencies — เริ่มได้ทันที
+- **Phase 2 (Foundational)**: ต้องรอ Phase 1 — BLOCKS Phase 3, 4, 5
+- **Phase 3 (US1)**: ต้องรอ Phase 2 — ทำงานคู่กับ Phase 4, 5 ได้ถ้ามีทีม
+- **Phase 4 (US2)**: ต้องรอ Phase 2 + Phase 3 merge แล้ว
+- **Phase 5 (US3)**: ต้องรอ Phase 2 + Phase 4 merge แล้ว
+- **Phase 6 (Polish)**: รอทุก Phase เสร็จ
+
+### User Story Dependencies
+
+- **US1 (Phase 1 13%→30%)**: เริ่มได้หลัง Foundational — ไม่ขึ้นกับ US อื่น
+- **US2 (Phase 2 30%→50%)**: เริ่มหลัง US1 merge เพื่อ coverage ต่อเนื่อง
+- **US3 (Phase 3 50%→70%)**: เริ่มหลัง US2 merge
+
+### Parallel Opportunities (ภายใน Phase)
+
+Tasks ที่มีป้าย `[P]` ภายใน Phase เดียวกัน สามารถทำพร้อมกันได้เนื่องจากเป็นคนละไฟล์:
+- T003, T004, T005 ทำพร้อมกันได้
+- T010–T022 ทำพร้อมกันได้ (คนละ folder/file)
+- T023–T033 ทำพร้อมกันได้
+
+---
+
+## Implementation Strategy
+
+### MVP First (Phase 3 / US1 เท่านั้น)
+
+1. Phase 1: Setup ✓
+2. Phase 2: Foundational ✓
+3. Phase 3: US1 (hooks + services + correspondences)
+4. **STOP & VALIDATE**: รัน `npm run test:cov` → ดู ≥ 30%
+5. Merge PR แล้วเริ่ม Phase 4
+
+### Incremental Delivery
+
+1. Setup + Foundational → environment พร้อม
+2. US1 → Coverage ≥ 30% → Merge
+3. US2 → Coverage ≥ 50% → Merge
+4. US3 → Coverage ≥ 70% → Merge
+
+---
+
+## Notes
+
+- `[P]` = tasks ต่างไฟล์, ไม่ depends กัน → ทำพร้อมกันได้
+- ทุก test file ต้องมี `// File: path/filename` บรรทัดแรก
+- Mock data ต้องใช้ `publicId` เสมอ — ตัวเลือก `id` ใดๆ ถือเป็น Tier 1 violation (ADR-019)
+- หากพบ bug ระหว่างเขียน test → **fix ทันที** อย่า skip
+- Manual verify coverage ก่อน merge ทุก Phase