Refactor Playwright tests and update configurations
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Has been cancelled
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Has been cancelled
- Consolidated kindness and penalty tests into single files to ensure serial execution and prevent conflicts. - Updated Playwright configuration to define separate test buckets for child options and create child tests, ensuring proper execution order. - Added new tests for child kebab menu options including editing, deleting points, and confirming child deletion. - Removed obsolete tests for kindness and penalty default management. - Updated authentication tokens in user.json for improved security. - Enhanced test reliability by implementing retry logic for UI interactions in the create-child happy path test.
This commit is contained in:
107
frontend/vue-app/e2e/plans/child-options.plan.md
Normal file
107
frontend/vue-app/e2e/plans/child-options.plan.md
Normal file
@@ -0,0 +1,107 @@
|
||||
# Child Kebab Menu Options
|
||||
|
||||
## Application Overview
|
||||
|
||||
Tests for the per-child kebab (⋮) menu on the Parent dashboard (`/parent`). The menu is only visible when the parent is authenticated (PIN entered). Each option card exposes an "Options" button (`aria-label="Options"`) that opens a dropdown with three actions: **Edit Child**, **Delete Points**, and **Delete Child**.
|
||||
|
||||
All tests run under the `chromium-child-options` project which completes before `chromium-create-child` starts, preventing `deleteAllChildren()` in the create-child suite from interfering with children created by these tests.
|
||||
|
||||
Each test creates its own named child via the API in `beforeEach` and cleans up in `afterEach`, so the tests are fully isolated and can run in parallel with each other.
|
||||
|
||||
## Test Scenarios
|
||||
|
||||
### 1. Edit Child ✅ IMPLEMENTED
|
||||
|
||||
**File:** `e2e/mode_parent/child-options/edit-child.spec.ts`
|
||||
|
||||
**Seed child:** `KebabEdit` (created via `PUT /api/child/add`, deleted in `afterEach`)
|
||||
|
||||
#### 1.1. Edit Child menu item navigates to the child editor ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabEdit` via API in `beforeEach`
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
- expect: A card with heading `KebabEdit` is visible
|
||||
|
||||
3. Click the "Options" button on the `KebabEdit` card
|
||||
|
||||
- expect: The kebab dropdown opens (`aria-expanded="true"` on the Options button)
|
||||
|
||||
4. Click "Edit Child" in the dropdown
|
||||
|
||||
- expect: URL matches `/parent/<id>/edit`
|
||||
- expect: Page heading "Edit Child" is visible
|
||||
|
||||
---
|
||||
|
||||
### 2. Delete Points ✅ IMPLEMENTED
|
||||
|
||||
**File:** `e2e/mode_parent/child-options/delete-points.spec.ts`
|
||||
|
||||
**Seed child:** `KebabPoints` (created via `PUT /api/child/add`, seeded to 50 points via `PUT /api/child/:id/edit`, deleted in `afterEach`)
|
||||
|
||||
#### 2.1. Delete Points resets child points to 0 ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabPoints` with 50 points via API in `beforeEach`
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
3. Click the "Options" button on the `KebabPoints` card
|
||||
|
||||
- expect: The kebab dropdown opens (`aria-expanded="true"` on the Options button)
|
||||
|
||||
4. Click "Delete Points" in the dropdown
|
||||
|
||||
- expect: The card shows `Points: 0`
|
||||
|
||||
---
|
||||
|
||||
### 3. Delete Child ✅ IMPLEMENTED
|
||||
|
||||
**File:** `e2e/mode_parent/child-options/delete-child.spec.ts`
|
||||
|
||||
**Seed child:** `KebabDelete` (created per-test, cleaned up in `afterEach`)
|
||||
|
||||
**Note:** The two tests in this file share the same child name and use `test.describe.configure({ mode: 'serial' })` to guarantee they never run in parallel with each other.
|
||||
|
||||
#### 3.1. Confirm deletes the child from the list ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabDelete` via API
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
- expect: Card with heading `KebabDelete` is visible
|
||||
|
||||
3. Click "Options" → "Delete Child"
|
||||
|
||||
- expect: Confirmation dialog "Are you sure you want to delete this child?" appears
|
||||
|
||||
4. Click the "Delete" button in the dialog
|
||||
|
||||
- expect: The `KebabDelete` card is no longer visible in the list
|
||||
|
||||
#### 3.2. Cancel does not delete the child ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabDelete` via API
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
- expect: Card with heading `KebabDelete` is visible
|
||||
|
||||
3. Click "Options" → "Delete Child"
|
||||
|
||||
- expect: Confirmation dialog "Are you sure you want to delete this child?" appears
|
||||
|
||||
4. Click the "Cancel" button in the dialog
|
||||
|
||||
- expect: The confirmation dialog is dismissed
|
||||
- expect: The `KebabDelete` card is still visible in the list
|
||||
Reference in New Issue
Block a user