Files
fete/specs/006-create-event/plan-review-fixes.md
nitrix 6aeb4b8bca Migrate project artifacts to spec-kit format
- Move cross-cutting docs (personas, design system, implementation phases,
  Ideen.md) to .specify/memory/
- Move cross-cutting research and plans to .specify/memory/research/ and
  .specify/memory/plans/
- Extract 5 setup tasks from spec/setup-tasks.md into individual
  specs/001-005/spec.md files with spec-kit template format
- Extract 20 user stories from spec/userstories.md into individual
  specs/006-026/spec.md files with spec-kit template format
- Relocate feature-specific research and plan docs into specs/[feature]/
- Add spec-kit constitution, templates, scripts, and slash commands
- Slim down CLAUDE.md to Claude-Code-specific config, delegate principles
  to .specify/memory/constitution.md
- Update ralph.sh with stream-json output and per-iteration logging
- Delete old spec/ and docs/agents/ directories
- Gitignore Ralph iteration JSONL logs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 20:19:41 +01:00

4.8 KiB
Raw Permalink Blame History

US-1 Review Fixes — Agent Instructions

Date: 2026-03-05 Origin: Code review and exploratory browser testing of US-1 "Create Event"

Context

US-1 has been implemented across all 7 phases (OpenAPI spec, DB migration, domain model, application service, persistence adapter, web adapter, frontend). All 42 tests pass. A code review with exploratory browser testing found 2 bugs and 2 minor issues that need to be fixed before the story can be committed.

Resources

  • Test report: .agent-tests/2026-03-05-us1-review-test/report.md — full browser test protocol with screenshots
  • Screenshots: .agent-tests/2026-03-05-us1-review-test/screenshots/ — visual evidence (0108)
  • US-1 spec: spec/userstories.md — acceptance criteria
  • Implementation plan: docs/agents/plan/2026-03-04-us1-create-event.md
  • Design system: spec/design-system.md
  • Primary file to modify: frontend/src/views/EventCreateView.vue
  • Secondary file to modify: frontend/index.html

Fix Instructions

Fix 1: Validation errors must clear reactively (Bug — Medium)

Problem: After submitting the empty form, validation errors appear correctly. But when the user then fills in the fields, the error messages persist until the next submit. See screenshot 05-form-filled.png — all fields filled, errors still visible.

Root cause: validate() (line 125) calls clearErrors() only on submit. There is no reactive clearing on input.

Fix: Add a watch on the form reactive object that clears the corresponding field error when the value changes. Do NOT re-validate on every keystroke — just clear the error for the field that was touched.

// Clear individual field errors when the user types
watch(() => form.title, () => { errors.title = '' })
watch(() => form.dateTime, () => { errors.dateTime = '' })
watch(() => form.expiryDate, () => { errors.expiryDate = '' })

Also clear serverError when any field changes, so stale server errors don't linger.

Test: Add a test to frontend/src/views/__tests__/EventCreateView.spec.ts that:

  1. Submits the empty form (triggers validation errors)
  2. Types into the title field
  3. Asserts that the title error is cleared but other errors remain

Fix 2: Network errors must show a user-visible message (Bug — High)

Problem: When the backend is unreachable, the form submits silently — no error message, no feedback. The serverError element (line 77) exists but is never populated because openapi-fetch throws an unhandled exception on network errors instead of returning an { error } object.

Root cause: handleSubmit() (line 150) has no try-catch around the api.POST() call (line 164). When fetch fails (network error), openapi-fetch throws, the promise rejects, and the function exits without setting serverError or resetting submitting.

Fix: Wrap the API call and response handling in a try-catch:

try {
  const { data, error } = await api.POST('/events', { body: { ... } })

  submitting.value = false

  if (error) {
    // ... existing error handling ...
    return
  }

  if (data) {
    // ... existing success handling ...
  }
} catch {
  submitting.value = false
  serverError.value = 'Could not reach the server. Please try again.'
}

Test: Add a test to EventCreateView.spec.ts that mocks the API to throw (simulating network failure) and asserts that serverError text appears in the DOM.

Fix 3: Page title (Minor — Low)

Problem: frontend/index.html line 7 still has <title>Vite App</title>.

Fix: Change to <title>fete</title>. Also set lang="en" on the <html> tag (line 2 currently has lang="").

File: frontend/index.html

Fix 4: Favicon (Minor — Low)

Problem: The favicon is the Vite default. The project should either have its own favicon or remove the link entirely.

Fix: For now, remove the <link rel="icon" href="/favicon.ico"> line and delete frontend/public/favicon.ico if it exists. A proper favicon can be added later as part of branding work.

File: frontend/index.html, frontend/public/favicon.ico

Execution Order

  1. Fix 3 + Fix 4 (trivial, index.html + favicon cleanup)
  2. Fix 1 (reactive error clearing + test)
  3. Fix 2 (try-catch + test)
  4. Run all frontend tests: cd frontend && npm run test:unit
  5. Verify visually with browser-interactive-testing skill:
    • Start dev server, open /create
    • Submit empty → errors appear
    • Fill title → title error clears, others remain
    • Fill all fields → all errors gone
    • Submit with no backend → "Could not reach the server" message appears

Constraints

  • Follow existing code style and patterns in EventCreateView.vue
  • Do not refactor unrelated code
  • Do not add dependencies
  • Tests must follow existing test patterns in EventCreateView.spec.ts
  • TDD: write/update tests first, then fix