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

481
frontend/vue-app/e2e/plans/parent-item-management.plan.md Normal file
View File

@@ -0,0 +1,481 @@
# Parent create and edit chores, kindness acts, and penalties
## Application Overview
Focus on parent-mode flows: a parent logs in via PIN, then creates, edits, and deletes three types of items (chore, kindness act, penalty) separately. Each scenario assumes the parent is already authenticated (PIN entered) and navigates to `/parent/tasks/chores`, then switches tabs as needed.
Tests are executed in parent mode; children should not be able to perform these operations. The intent is to verify that creation forms work, that existing items can be updated correctly, and that proper deletion and default-item restoration logic functions.
All item names use a `${Date.now()}` suffix to avoid collisions between parallel test runs.
## Test Scenarios
### 1. Chore management
**Seed:** `e2e/seed.spec.ts`
#### 1.1. Create a new chore (parent mode)
**File:** `e2e/mode_parent/tasks/chore-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`
- expect: The chores list loads and the default chore 'Clean your mess' is visible
2. Click the 'Create Chore' button
- expect: The Create Chore form is displayed with a 'Chore Name' field and a Points field
3. Enter a unique name (e.g. `Wash dishes ${suffix}`) and '10' in Points using DOM events
- expect: Submit/Create button becomes enabled
4. Click the Create button
- expect: No `.error` elements are shown
- expect: The new chore appears in the chores list
#### 1.2. Cancel chore creation
**File:** `e2e/mode_parent/tasks/chore-cancel.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores` and click 'Create Chore'
- expect: Create Chore form appears with 'Chore Name' label visible
2. Fill in 'Test' for name and '5' for points, then click 'Cancel'
- expect: User is returned to the chores list (default chore 'Clean your mess' is visible with exact match)
- expect: No element with text 'Test' exists in the list
#### 1.3. Edit an existing chore
**File:** `e2e/mode_parent/tasks/chore-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`; create `Wash dishes ${suffix}` if it doesn't already exist
- expect: The chore appears in the list
2. Click the chore row to open the edit form
- expect: Edit form appears with 'Chore Name' label visible
3. Change the name to `Wash car ${suffix}` and points using DOM events
- expect: Save button becomes enabled
4. Click Save
- expect: No errors are displayed
- expect: The updated chore name `Wash car ${suffix}` appears in the list
#### 1.4. Cancel chore edit
**File:** `e2e/mode_parent/tasks/chore-cancel.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`; create 'Wash dishes' if it doesn't exist; click the row
- expect: Edit form is displayed
2. Change the name to 'Should not save' via DOM events, then click 'Cancel'
- expect: The list is visible again (default chore 'Clean your mess' shown with exact match)
- expect: 'Wash dishes' (exact) is still present; 'Should not save' does not appear
#### 1.5. Convert a default chore to a user item by editing
**File:** `e2e/mode_parent/tasks/chore-convert-default.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores` and locate the default chore 'Clean your mess'
- expect: Item is visible and has no delete button (`button[aria-label="Delete item"]` count is 0)
2. Click the row to open the edit form
- expect: Edit form opens with `input#name` value of 'Clean your mess'
3. Change the name to 'Clean your mess (custom)' and points to '20' via DOM events
- expect: Save button becomes enabled
4. Click Save
- expect: The chore row for 'Clean your mess' now has a visible delete button
#### 1.6. Delete a chore
**File:** `e2e/mode_parent/tasks/chore-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`; create a uniquely-named chore if necessary
- expect: The chore appears in the list with a delete control
2. Click the delete icon (`button[aria-label="Delete item"]`) and confirm the dialog
- expect: The item is removed from the list
#### 1.7. Edit default chore points and verify system restoration on delete
**File:** `e2e/mode_parent/tasks/chore-delete-default.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`; clean up any leftover user-copy of 'Take out trash' (with delete icon) from previous runs
2. Verify the default 'Take out trash' is visible with no delete icon
3. Click 'Take out trash' to open the edit form; confirm `input#name` reads 'Take out trash'; change points to '5' via DOM events
- expect: Save button becomes enabled
4. Click Save
- expect: Exactly one 'Take out trash' row is in the list
- expect: A delete icon is now visible on the 'Take out trash' row
- expect: The points display reads '5 pts'
5. Click the delete icon and confirm the dialog
- expect: 'Take out trash' is still visible in the list (system default restored)
- expect: No delete icon on the 'Take out trash' row
- expect: Points display is restored to '20 pts'
### 2. Kindness act management
**Seed:** `e2e/seed.spec.ts`
#### 2.1. Create a new kindness act (parent mode)
**File:** `e2e/mode_parent/tasks/kindness-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores` and click the 'Kindness Acts' tab
- expect: Kindness acts list is visible
2. Click 'Create Kindness Act'
- expect: Create form appears with a 'Name' field
3. Enter a unique name (e.g. `Share toys ${suffix}`) and '5' in Points via DOM events
- expect: Create button becomes enabled
4. Click Create
- expect: No `.error` elements shown
- expect: The new kindness act name appears in the list
#### 2.2. Cancel kindness act creation
**File:** `e2e/mode_parent/tasks/kindness-cancel.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Kindness Acts', then click 'Create Kindness Act'
- expect: Create form is visible
2. Fill in 'Test' for name and '5' for points, then click 'Cancel'
- expect: Returned to the list
- expect: 'Should not save' does not appear in the list
#### 2.3. Edit an existing kindness act
**File:** `e2e/mode_parent/tasks/kindness-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Kindness Acts'; create `Share toys ${suffix}` fresh
- expect: Item is displayed in the list
2. Click the row to open the edit form
- expect: Edit form appears with 'Name' label and Save button visible
3. Change name to `Help with homework ${suffix}` and points to '8' via DOM events
- expect: Save button becomes enabled
4. Click Save
- expect: The updated name `Help with homework ${suffix}` appears in the list
#### 2.4. Cancel kindness act edit
**File:** `e2e/mode_parent/tasks/kindness-cancel.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Kindness Acts'; ensure 'Share toys' (exact) exists; click its row
- expect: Edit form is displayed
2. Change name to 'Never saved' via DOM events, then click 'Cancel'
- expect: 'Share toys' (exact) is still visible in the list
#### 2.5. Convert a default kindness act to a user item by editing
**File:** `e2e/mode_parent/tasks/kindness-convert-default.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Kindness Acts'; locate the default 'Be good for the day'
- expect: Item is visible with no delete icon
2. Click the row; rename to 'Be good today (edited)' and change points to '7' via `#name`/`#points` inputs
- expect: Save button becomes enabled
3. Click Save
- expect: 'Be good today (edited)' row has a visible delete icon
4. _(Cleanup)_ Click the delete icon and confirm — restores the default so other tests see a clean state
#### 2.6. Delete a kindness act
**File:** `e2e/mode_parent/tasks/kindness-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Kindness Acts'; create a uniquely-named act
- expect: The item appears in the list with a delete control
2. Click the delete icon and confirm
- expect: The act is removed from the list
#### 2.7. Edit default kindness act points and verify system restoration on delete
**File:** `e2e/mode_parent/tasks/kindness-delete-default.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Kindness Acts'; clean up any leftover user-copy of 'Be good for the day' from previous runs
2. Verify the default 'Be good for the day' is visible with no delete icon
3. Click the row; confirm `input#name` reads 'Be good for the day'; change points to '3' via DOM events
- expect: Save button becomes enabled
4. Click Save
- expect: Exactly one 'Be good for the day' row is in the list
- expect: A delete icon is now visible on the row
- expect: Points display reads '3 pts'
5. Click the delete icon and confirm the dialog
- expect: 'Be good for the day' is still visible (system default restored)
- expect: No delete icon on the row
- expect: Points display is restored to '15 pts'
### 3. Penalty management
**Seed:** `e2e/seed.spec.ts`
#### 3.1. Create a new penalty (parent mode)
**File:** `e2e/mode_parent/tasks/penalty-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores` and click the 'Penalties' tab
- expect: Penalties list is shown
2. Click 'Create Penalty'
- expect: Create Penalty form appears
3. Enter a unique name (e.g. `No screen time ${suffix}`) and '30' in Points via DOM events
- expect: Create button becomes enabled
4. Click Create
- expect: No validation errors
- expect: The new penalty name appears in the list
#### 3.2. Cancel penalty creation
**File:** `e2e/mode_parent/tasks/penalty-cancel.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Penalties', then click 'Create Penalty'
- expect: Create penalty form is visible
2. Fill 'Should not save' and '10' points via DOM events, then click 'Cancel'
- expect: 'Should not save' does not appear in the list
#### 3.3. Edit an existing penalty
**File:** `e2e/mode_parent/tasks/penalty-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Penalties'; create `No screen time ${suffix}` fresh
- expect: Item appears in list
2. Click the row; wait for `#name` to have the original value
- expect: Edit form opens with existing name pre-filled
3. Change name to `No dessert ${suffix}` and points to '20' via DOM events
- expect: Save button becomes enabled
4. Click Save
- expect: `No dessert ${suffix}` appears in the list
#### 3.4. Cancel penalty edit
**File:** `e2e/mode_parent/tasks/penalty-cancel.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Penalties'; ensure 'No screen time' (exact) exists; click the row
- expect: Edit form is displayed
2. Change name to 'Never saved' via DOM events, then click 'Cancel'
- expect: 'No screen time' (exact) is still visible
#### 3.5. Convert a default penalty to a user item by editing
**File:** `e2e/mode_parent/tasks/penalty-convert-default.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Penalties'; locate the default 'Fighting'
- expect: Item is visible with no delete icon
2. Click the row; rename to 'Fighting (custom)' and change points to '15' via `#name`/`#points` inputs
- expect: Save button becomes enabled
3. Click Save
- expect: 'Fighting' row now has a visible delete icon
#### 3.6. Delete a penalty
**File:** `e2e/mode_parent/tasks/penalty-create-edit.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Penalties'; create a uniquely-named penalty
- expect: Delete control (`button[aria-label="Delete item"]`) is visible on the row
2. Click the delete icon and confirm via `button.btn-danger`
- expect: Item is removed from the list
#### 3.7. Edit default penalty points and verify system restoration on delete
**File:** `e2e/mode_parent/tasks/penalty-delete-default.spec.ts`
**Steps:**
1. Navigate to `/parent/tasks/chores`, click 'Penalties'; clean up any leftover user-copy of 'Fighting' from previous runs
2. Verify the default 'Fighting' is visible with no delete icon
3. Click the row; confirm `input#name` reads 'Fighting'; change points to '3' via DOM events
- expect: Save button becomes enabled
4. Click Save
- expect: Exactly one 'Fighting' row is in the list
- expect: A delete icon is now visible on the row
- expect: Points display reads '3 pts'
5. Click the delete icon and confirm the dialog
- expect: 'Fighting' is still visible (system default restored)
- expect: No delete icon on the row
- expect: Points display is restored to '10 pts'