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

# 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