chore/frontend/vue-app/e2e/plans/create-child.plan.md

Create Child

Application Overview

Tests for creating a new child from the Parent dashboard. The user is authenticated and in parent mode via stored auth state (tests/.auth/user.json). All tests start at /parent/children (Children List view).

Test Scenarios

1. Happy Path

Seed: frontend/vue-app/seed.ts

1.1. Create a child with name and age only

File: tests/create-child/happy-path.spec.ts

Steps:

1. Navigate to /parent/children - expect: The Children List page is displayed
2. Click the 'Add Child' floating action button (FAB) in the bottom-right corner - expect: The Create Child form is displayed with Name, Age, and Image fields
3. Enter 'Alice' in the Name field - expect: The Name field shows 'Alice'
4. Enter '8' in the Age field - expect: The Age field shows '8'
5. Leave the Image field as the default pre-selected value and click the Save/Submit button - expect: No error messages are displayed - expect: Navigation returns to /parent/children - expect: The child 'Alice' appears in the children list

1.2. Create a child via the inline 'Create' button in empty state

File: tests/create-child/happy-path.spec.ts

Steps:

1. Navigate to /parent/children with no children in the account - expect: An empty state message is shown with an inline 'Create' button
2. Click the inline 'Create' button - expect: The Create Child form is displayed
3. Enter 'Bob' in the Name field and '10' in the Age field, then click Save/Submit - expect: No errors are displayed - expect: 'Bob' appears in the children list

1.3. Create a child with a custom uploaded image

File: tests/create-child/happy-path.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Enter 'Grace' in the Name field and '6' in the Age field - expect: Name and Age fields are populated
3. In the Image field, select the option to upload a local file and choose a valid PNG or JPEG - expect: The image is selected and shown as a preview
4. Click the Save/Submit button - expect: No error messages are displayed - expect: 'Grace' appears in the children list with the uploaded image

2. Validation - Required Fields

Seed: frontend/vue-app/seed.ts

2.1. Reject submission when Name is empty

File: tests/create-child/validation.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Leave the Name field empty, enter '7' in the Age field, and click Save/Submit - expect: Error message 'Child name is required.' is displayed - expect: The form does not navigate away

2.2. Reject submission when Name is whitespace only

File: tests/create-child/validation.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Enter only spaces in the Name field, enter '7' in the Age field, and click Save/Submit - expect: Error message 'Child name is required.' is displayed - expect: The form does not navigate away

2.3. Reject submission when Age is empty

File: tests/create-child/validation.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Enter 'Charlie' in the Name field, clear the Age field, and click Save/Submit - expect: An age validation error is displayed - expect: The form does not navigate away

3. Validation - Boundary Conditions

Seed: frontend/vue-app/seed.ts

3.1. Reject negative age

File: tests/create-child/validation.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Enter 'Dave' in the Name field, enter '-1' in the Age field, and click Save/Submit - expect: Error message 'Age must be a non-negative number.' is displayed - expect: The form does not navigate away

3.2. Enforce maximum Name length of 64 characters

File: tests/create-child/validation.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Attempt to type a name with 65 or more characters in the Name field - expect: The input is capped at 64 characters
3. Enter '5' in the Age field and click Save/Submit - expect: The form submits successfully with the 64-character name

3.3. Reject age greater than 120

File: tests/create-child/validation.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Enter 'Eve' in the Name field, enter '121' in the Age field, and click Save/Submit - expect: A validation error is shown or the value is capped at 120

4. Navigation

Seed: frontend/vue-app/seed.ts

4.1. Cancel navigates back without saving

File: tests/create-child/navigation.spec.ts

Steps:

1. Navigate to /parent/children and click the 'Add Child' FAB - expect: The Create Child form is displayed
2. Enter 'Frank' in the Name field and '9' in the Age field, then click the Cancel button - expect: Navigation returns to /parent/children - expect: 'Frank' does NOT appear in the children list

5. Real-Time Updates via SSE

Seed: frontend/vue-app/seed.ts

5.1. New child appears in list without page reload

File: tests/create-child/sse.spec.ts

Steps:

1. Open two browser tabs both on /parent/children - expect: Both tabs show the Children List page
2. In Tab 1, click 'Add Child' FAB, fill in name 'Hannah' and age '4', then submit - expect: Tab 1 navigates to /parent/children and 'Hannah' is visible
3. Switch to Tab 2 which is still on /parent/children - expect: 'Hannah' appears in Tab 2 without a manual refresh (SSE real-time update)

6. Authorization

Seed: frontend/vue-app/seed.ts

6.1. Add Child FAB is hidden when parent auth is expired

File: tests/create-child/authorization.spec.ts

Steps:

1. Clear 'parentAuth' from localStorage to simulate expired parent authentication and navigate to /parent/children - expect: The 'Add Child' FAB is NOT visible on the page