81 lines
3.3 KiB
Markdown
81 lines
3.3 KiB
Markdown
---
|
|
phase: 1
|
|
slug: design-token-foundation
|
|
status: draft
|
|
nyquist_compliant: false
|
|
wave_0_complete: false
|
|
created: 2026-03-11
|
|
---
|
|
|
|
# Phase 1 — Validation Strategy
|
|
|
|
> Per-phase validation contract for feedback sampling during execution.
|
|
|
|
---
|
|
|
|
## Test Infrastructure
|
|
|
|
| Property | Value |
|
|
|----------|-------|
|
|
| **Framework** | vitest (not yet installed — Wave 0 installs) |
|
|
| **Config file** | `frontend/vite.config.ts` (extend with `test` block) or `frontend/vitest.config.ts` |
|
|
| **Quick run command** | `cd frontend && bun vitest run --reporter=verbose` |
|
|
| **Full suite command** | `cd frontend && bun vitest run` |
|
|
| **Estimated runtime** | ~5 seconds |
|
|
|
|
---
|
|
|
|
## Sampling Rate
|
|
|
|
- **After every task commit:** Run `cd frontend && bun vitest run src/lib/palette.test.ts src/components/InlineEditCell.test.tsx`
|
|
- **After every plan wave:** Run `cd frontend && bun vitest run`
|
|
- **Before `/gsd:verify-work`:** Full suite must be green
|
|
- **Max feedback latency:** 10 seconds
|
|
|
|
---
|
|
|
|
## Per-Task Verification Map
|
|
|
|
| Task ID | Plan | Wave | Requirement | Test Type | Automated Command | File Exists | Status |
|
|
|---------|------|------|-------------|-----------|-------------------|-------------|--------|
|
|
| 01-01-01 | 01 | 0 | DSGN-02 | unit | `bun vitest run src/lib/palette.test.ts -t "exports all categories"` | ❌ W0 | ⬜ pending |
|
|
| 01-01-02 | 01 | 0 | DSGN-05 | unit | `bun vitest run src/lib/palette.test.ts -t "amountColorClass"` | ❌ W0 | ⬜ pending |
|
|
| 01-01-03 | 01 | 0 | DSGN-03 | unit | `bun vitest run src/lib/palette.test.ts -t "headerGradient"` | ❌ W0 | ⬜ pending |
|
|
| 01-01-04 | 01 | 0 | FIX-02 | unit | `bun vitest run src/components/InlineEditCell.test.tsx` | ❌ W0 | ⬜ pending |
|
|
| 01-XX-XX | XX | X | DSGN-01 | manual | visual check — CSS oklch chroma values | manual-only | ⬜ pending |
|
|
| 01-XX-XX | XX | X | DSGN-04 | manual | visual check — hero hierarchy | manual-only | ⬜ pending |
|
|
|
|
*Status: ⬜ pending · ✅ green · ❌ red · ⚠️ flaky*
|
|
|
|
---
|
|
|
|
## Wave 0 Requirements
|
|
|
|
- [ ] `cd frontend && bun add -d vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom` — install test framework
|
|
- [ ] `frontend/vite.config.ts` — add `test: { environment: 'jsdom', globals: true, setupFiles: ['./src/test-setup.ts'] }`
|
|
- [ ] `frontend/src/test-setup.ts` — `import '@testing-library/jest-dom'`
|
|
- [ ] `frontend/src/lib/palette.test.ts` — stubs for DSGN-02, DSGN-03, DSGN-05
|
|
- [ ] `frontend/src/components/InlineEditCell.test.tsx` — stubs for FIX-02
|
|
|
|
---
|
|
|
|
## Manual-Only Verifications
|
|
|
|
| Behavior | Requirement | Why Manual | Test Instructions |
|
|
|----------|-------------|------------|-------------------|
|
|
| All `:root` oklch values have non-zero chroma | DSGN-01 | CSS token values require visual browser inspection | Open app in browser, inspect `:root` variables, verify all color tokens have chroma > 0 |
|
|
| FinancialOverview/AvailableBalance visual hierarchy | DSGN-04 | Typographic hierarchy is a visual judgment | Open dashboard, verify hero elements are visually dominant above secondary content |
|
|
|
|
---
|
|
|
|
## Validation Sign-Off
|
|
|
|
- [ ] All tasks have `<automated>` verify or Wave 0 dependencies
|
|
- [ ] Sampling continuity: no 3 consecutive tasks without automated verify
|
|
- [ ] Wave 0 covers all MISSING references
|
|
- [ ] No watch-mode flags
|
|
- [ ] Feedback latency < 10s
|
|
- [ ] `nyquist_compliant: true` set in frontmatter
|
|
|
|
**Approval:** pending
|