Testing done - van 51% naar 80% accessibility

Vorige: We gaan te snel! De agile wake-up call

14:00 - “Waar was ik gebleven?”

Na 3 dagen pauze open ik Claude Code:

“waar was ik gebleven?”

Claude herinnert zich alles. Session 3 was bezig met Issue #16 (Testing Milestone). Accessibility score was 51%.

Context switching is een non-issue met goede documentatie.

Manual testing afgerond (15 min)

Screenshot script had een bug:

// Before: page.fill('#water-intake', '6') // FAIL - readonly!
// After: 6× page.click('#water-add') // Works!

7 screenshots gemaakt, TC-01 t/m TC-07: ALL PASS!

Cross-browser testing (30 min)

Nieuw script: scripts/cross-browser-test.js

🌐 Chrome:  ✅ 10/10 tests passed (100%)
🌐 Firefox: ✅ 10/10 tests passed (100%)
🌐 Safari:  ✅ 10/10 tests passed (100%)

🎉 All browsers passed!

Playwright maakt het simpel. 30 tests in 2 minuten. Geen excuus om dit over te slaan.

Issue #16 closed!

Alle criteria voldaan:

• ✅ Manual testing: 7/7 PASS
• ✅ Accessibility: 80% (was 51%)
• ✅ Cross-browser: 100%
• ✅ Screenshots: 10 gemaakt

Design Improvements = PRODUCTION READY!

Mega sprint continues…

Na het sluiten van #16 vroeg ik: “ga maar verder met een ander issue”

En Claude ging los.

Issue #7 - Code quality tools (45 min)

• ESLint 9 met flat config
• Prettier + EditorConfig
• Husky + lint-staged pre-commit hooks

npm run lint    # 0 errors!
npm run format  # All files formatted!
git commit      # Auto-lint voor commit!

Geen cowboy code meer!

Issue #4 - CI/CD pipeline (30 min)

Complete GitHub Actions pipeline:

jobs:
  lint → unit-test → e2e-test → build → deploy

CI badge nu in README!

Issue #10 - SVG accessibility (15 min)

Screen readers zeggen nu: “Je huidige gezondheidscore is 86%”

Issue #2 - Testing infrastructure (45 min)

• Vitest configuratie
• 51 unit tests
• 80% coverage threshold

npm test
# ✓ 51 tests passed
# Coverage: 85% statements, 82% branches

Fun fact: Tests ontdekten een bug! Health score kan negatief worden bij invalid input.

Backlog uitgebreid

PO: “We hebben meer backlog nodig voor parallel werken.”

Nieuwe issues #20-25:

• PWA Implementation
• Statistics Dashboard
• Data Import/Export
• Custom Habits Management
• Health Score Animaties
• UX Polish

Milestone status

Phase 0: Foundation - 6/8 issues CLOSED (75%)

Open: #1 (Build Tools), #3 (Module Refactor)

Wat ik leerde

1. Automatische kwaliteit > handmatige discipline

Pre-commit hooks = je KUNT NIET committen zonder lint. Geen excuses.

2. Unit tests vangen bugs vroeg

Tests schreven = bug ontdekt die we anders pas in production hadden gezien.

3. CI/CD is onbetaalbaar

Elke push = automatische tests. Slaap rustig, want CI waakt.

Van chaos naar kwaliteit. Feels good.

Vorige: We gaan te snel! De agile wake-up call · Volgende: De dag dat alles samenkwam →