Files
chore/frontend/vue-app/e2e/plans/parent-item-management.plan.md
Ryan Kegel f250c42e5e
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 3m31s
Add end-to-end tests for parent item management
- 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.
2026-03-12 12:22:37 -04:00

482 lines
12 KiB
Markdown

# 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'