ryan/chore
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 5 Releases Wiki Activity

Add end-to-end tests for parent item management
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 3m31s
Details

Browse Source 
- 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.
This commit is contained in:
Ryan Kegel
2026-03-12 12:22:37 -04:00
parent accf596bd7
commit f250c42e5e
32 changed files with 1995 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
frontend/vue-app/e2e/plans/create-child.plan.md
View File

@@ -6,169 +6,281 @@ Tests for creating a new child from the Parent dashboard. The user is authentica
## Test Scenarios
### 1. Happy Path
### 1. Happy Path ✅ IMPLEMENTED
**Seed:** `frontend/vue-app/seed.ts`
#### 1.1. Create a child with name and age only
#### 1.1. Create a child with name and age only ✅
**File:** `tests/create-child/happy-path.spec.ts`
**Steps:**
1. Navigate to /parent/children
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
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
3. Enter 'Alice' in the Name field
- expect: The Name field shows 'Alice'
4. Enter '8' in the Age field
- 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'
5. Leave the Image field as the default pre-selected value and click the Save/Submit button
- 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/children
- 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
#### 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
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 Save/Submit
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
#### 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
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
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
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
### 2. Validation - Required Fields ✅ IMPLEMENTED
**Seed:** `frontend/vue-app/seed.ts`
#### 2.1. Reject submission when Name is empty
**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/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
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/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
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/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
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
#### 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
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/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
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
#### 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
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
#### 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
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/children
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
### 5. Real-Time Updates via SSE ✅ IMPLEMENTED
**Seed:** `frontend/vue-app/seed.ts`
#### 5.1. New child appears in list without page reload
#### 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
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/children and 'Hannah' is visible
3. Switch to Tab 2 which is still on /parent/children
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
### 6. Authorization ✅ IMPLEMENTED
**Seed:** `frontend/vue-app/seed.ts`
#### 6.1. Add Child FAB is hidden when parent auth is expired
#### 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. Clear 'parentAuth' from localStorage to simulate expired parent authentication and navigate to /parent/children
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