Ryan Kegel
f250c42e5e
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 3m31s
- Implement tests for creating, editing, and deleting chores, kindness acts, and penalties. - Add tests to verify conversion of default items to user items and restoration of system defaults upon deletion. - Ensure proper cancellation of creation and editing actions. - Create a comprehensive plan document outlining the test scenarios and expected behaviors.
287 lines
7.6 KiB
Markdown
287 lines
7.6 KiB
Markdown
# 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 ✅ IMPLEMENTED
|
|
|
|
**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 (router auto-redirects from /)
|
|
|
|
|
|
- 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'
|
|
- expect: The Create button remains disabled until all required fields are valid
|
|
|
|
4. Enter '8' in the Age field
|
|
|
|
|
|
- expect: The Age field shows '8'
|
|
- expect: The Create button becomes enabled
|
|
|
|
5. Leave the Image field as the default pre-selected value and click the Create button
|
|
|
|
|
|
- expect: No error messages are displayed
|
|
- expect: Navigation returns to /parent
|
|
- 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 with no children in the account
|
|
|
|
|
|
- expect: An empty state message "No children" is shown with an inline 'Create' button
|
|
|
|
2. Click the inline 'Create' button (with class "round-btn")
|
|
|
|
|
|
- expect: The Create Child form is displayed
|
|
|
|
3. Enter 'Bob' in the Name field and '10' in the Age field, then click Create
|
|
|
|
|
|
- expect: Create button is initially disabled, becomes enabled after both fields are filled
|
|
- expect: No errors are displayed
|
|
- expect: Navigation returns to /parent
|
|
- 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 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. Click 'Add from device' button and choose a valid PNG or JPEG file
|
|
|
|
|
|
- expect: The image file is selected and uploaded
|
|
|
|
4. Click the Create button
|
|
|
|
|
|
- expect: Create button becomes enabled after async form initialization
|
|
- expect: No error messages are displayed
|
|
- expect: Navigation returns to /parent
|
|
- expect: 'Grace' appears in the children list with the uploaded image
|
|
|
|
### 2. Validation - Required Fields ✅ IMPLEMENTED
|
|
|
|
**Seed:** `frontend/vue-app/seed.ts`
|
|
|
|
**Note:** Form validation is client-side. Invalid inputs disable the submit button rather than showing error messages.
|
|
|
|
#### 2.1. Reject submission when Name is empty ✅
|
|
|
|
**File:** `tests/create-child/validation.spec.ts`
|
|
|
|
**Steps:**
|
|
|
|
1. Navigate to /parent and click the 'Add Child' FAB
|
|
|
|
|
|
- expect: The Create Child form is displayed at /parent/children/create
|
|
|
|
2. Leave the Name field empty, enter '7' in the Age field
|
|
|
|
|
|
- expect: The Create button remains disabled
|
|
- expect: Form stays on /parent/children/create (no navigation)
|
|
|
|
#### 2.2. Reject submission when Name is whitespace only ✅
|
|
|
|
**File:** `tests/create-child/validation.spec.ts`
|
|
|
|
**Steps:**
|
|
|
|
1. Navigate to /parent and click the 'Add Child' FAB
|
|
|
|
|
|
- expect: The Create Child form is displayed at /parent/children/create
|
|
|
|
2. Enter only spaces ' ' in the Name field, enter '7' in the Age field
|
|
|
|
|
|
- expect: The Create button remains disabled (whitespace is treated as empty)
|
|
- expect: Form stays on /parent/children/create
|
|
|
|
#### 2.3. Reject submission when Age is empty ✅
|
|
|
|
**File:** `tests/create-child/validation.spec.ts`
|
|
|
|
**Steps:**
|
|
|
|
1. Navigate to /parent and click the 'Add Child' FAB
|
|
|
|
|
|
- expect: The Create Child form is displayed at /parent/children/create
|
|
|
|
2. Enter 'Charlie' in the Name field, clear the Age field
|
|
|
|
|
|
- expect: The Create button remains disabled
|
|
- expect: Form stays on /parent/children/create
|
|
|
|
### 3. Validation - Boundary Conditions ✅ IMPLEMENTED
|
|
|
|
**Seed:** `frontend/vue-app/seed.ts`
|
|
|
|
#### 3.1. Reject negative age ✅
|
|
|
|
**File:** `tests/create-child/validation.spec.ts`
|
|
|
|
**Steps:**
|
|
|
|
1. Navigate to /parent and click the 'Add Child' FAB
|
|
|
|
|
|
- expect: The Create Child form is displayed at /parent/children/create
|
|
|
|
2. Enter 'Dave' in the Name field, enter '-1' in the Age field
|
|
|
|
|
|
- expect: The Create button remains disabled (negative age is invalid)
|
|
- expect: Form stays on /parent/children/create
|
|
|
|
#### 3.2. Enforce maximum Name length of 64 characters ✅
|
|
|
|
**File:** `tests/create-child/validation.spec.ts`
|
|
|
|
**Steps:**
|
|
|
|
1. Navigate to /parent and click the 'Add Child' FAB
|
|
|
|
|
|
- expect: The Create Child form is displayed at /parent/children/create
|
|
|
|
2. Attempt to type a name with 65 characters in the Name field
|
|
|
|
|
|
- expect: The input is capped at 64 characters by HTML maxlength attribute
|
|
|
|
3. Enter '5' in the Age field and click Create
|
|
|
|
|
|
- expect: The Create button becomes enabled
|
|
- expect: The form submits successfully with the 64-character name
|
|
- expect: Navigation returns to /parent
|
|
|
|
#### 3.3. Reject age greater than 120 ✅
|
|
|
|
**File:** `tests/create-child/validation.spec.ts`
|
|
|
|
**Steps:**
|
|
|
|
1. Navigate to /parent and click the 'Add Child' FAB
|
|
|
|
|
|
- expect: The Create Child form is displayed at /parent/children/create
|
|
|
|
2. Enter 'Eve' in the Name field, enter '121' in the Age field
|
|
|
|
|
|
- expect: The Create button remains disabled (age > 120 is invalid)
|
|
- expect: Form stays on /parent/children/create
|
|
|
|
### 4. Navigation ✅ IMPLEMENTED
|
|
|
|
**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 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
|
|
- expect: 'Frank' does NOT appear in the children list
|
|
|
|
### 5. Real-Time Updates via SSE ✅ IMPLEMENTED
|
|
|
|
**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
|
|
|
|
|
|
- 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 and 'Hannah' is visible
|
|
|
|
3. Switch to Tab 2 which is still on /parent
|
|
|
|
|
|
- expect: 'Hannah' appears in Tab 2 without a manual refresh (SSE real-time update)
|
|
|
|
### 6. Authorization ✅ IMPLEMENTED
|
|
|
|
**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`
|
|
|
|
**Note:** Uses `chromium-no-pin` project storage state to simulate a user without parent authentication.
|
|
|
|
**Steps:**
|
|
|
|
1. Navigate to /parent using the no-pin storage state (parent auth not present)
|
|
|
|
|
|
- expect: The 'Add Child' FAB is NOT visible on the page
|
|
|
|
## Key Changes from Original Plan
|
|
|
|
1. **Validation Strategy**: Changed from server-side error messages to client-side form validation that disables the submit button for invalid inputs
|
|
2. **Async Form Handling**: Tests include logic to handle async form initialization races with default image loading
|
|
3. **Authorization test**: Uses `STORAGE_STATE_NO_PIN` (chromium-no-pin project) rather than manually clearing localStorage
|