nitrix
6aeb4b8bca
- 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>
110 lines
4.8 KiB
Markdown
110 lines
4.8 KiB
Markdown
# 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 (01–08)
|
||
- **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.
|
||
|
||
```typescript
|
||
// 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`:
|
||
|
||
```typescript
|
||
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
|