chore/frontend/vue-app/e2e/plans/child-options.plan.md

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