np-dms/lcbp3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9c5df0abdb1ff82feb2d81867e5a8998c16b73c3
lcbp3/specs/300-others/303-frontend-test-coverage/tasks.md
T

14 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink