Add end-to-end tests for parent rewards management

- Implement tests for creating, editing, canceling, and deleting rewards in parent mode.
- Include scenarios for converting default rewards to user items and verifying restoration of default rewards after deletion.
- Create a comprehensive test plan outlining the steps and expectations for each scenario.

frontend/vue-app/e2e/mode_parent/rewards/reward-cancel.spec.ts

@@ -0,0 +1,77 @@
+// spec: frontend/vue-app/e2e/plans/parent-rewards-management.plan.md
+// seed: e2e/seed.spec.ts
+
+import { test, expect } from '@playwright/test'
+
+test.describe('Reward cancellation', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
+  })
+
+  test.describe.configure({ mode: 'serial' })
+
+  test('Cancel reward creation', async ({ page }) => {
+    // 1. Navigate and open create form
+    await page.goto('/parent/rewards')
+    await page.getByRole('button', { name: 'Create Reward' }).click()
+    await expect(page.locator('text=Reward Name')).toBeVisible()
+
+    // 2. Fill then cancel
+    await page.evaluate(() => {
+      const setVal = (sel: string, val: string) => {
+        const el = document.querySelector(sel) as HTMLInputElement | null
+        if (el) {
+          el.value = val
+          el.dispatchEvent(new Event('input', { bubbles: true }))
+          el.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+      }
+      setVal('#name', 'Test')
+      setVal('#cost', '5')
+    })
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    // verify return to list and no "Test" item
+    await expect(page.getByText('Test')).toHaveCount(0)
+  })
+
+  test('Cancel reward edit', async ({ page }) => {
+    // 1. Ensure Toy car exists and open edit
+    const suffix = Date.now()
+    const original = `Toy car ${suffix}`
+    await page.goto('/parent/rewards')
+    if (!(await page.locator(`text=${original}`).count())) {
+      await page.getByRole('button', { name: 'Create Reward' }).click()
+      await page.evaluate((name) => {
+        const setVal = (sel: string, val: string) => {
+          const el = document.querySelector(sel) as HTMLInputElement | null
+          if (el) {
+            el.value = val
+            el.dispatchEvent(new Event('input', { bubbles: true }))
+            el.dispatchEvent(new Event('change', { bubbles: true }))
+          }
+        }
+        setVal('#name', name)
+        setVal('#cost', '20')
+      }, original)
+      await page.getByRole('button', { name: 'Create' }).click()
+    }
+    await expect(page.locator(`text=${original}`)).toBeVisible()
+    await page.click(`text=${original}`)
+    await expect(page.locator('text=Reward Name')).toBeVisible()
+
+    // 2. make a change then cancel
+    await page.evaluate(() => {
+      const el = document.querySelector('#name') as HTMLInputElement | null
+      if (el) {
+        el.value = 'Should not save'
+        el.dispatchEvent(new Event('input', { bubbles: true }))
+        el.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+    })
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    await expect(page.locator('text=Should not save')).toHaveCount(0)
+    await expect(page.locator(`text=${original}`)).toBeVisible()
+  })
+})

frontend/vue-app/e2e/mode_parent/rewards/reward-convert-default.spec.ts

@@ -0,0 +1,60 @@
+// spec: frontend/vue-app/e2e/plans/parent-rewards-management.plan.md
+// seed: e2e/seed.spec.ts
+
+import { test, expect } from '@playwright/test'
+
+test.describe('Convert default reward', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
+  })
+
+  test.describe.configure({ mode: 'serial' })
+
+  test('Convert a default reward to a user item', async ({ page }) => {
+    await page.goto('/parent/rewards')
+
+    // remove any row that has a delete button (covers custom copies and renamed originals)
+    const allRows = page.locator('text=Choose meal')
+    const total = await allRows.count()
+    for (let i = 0; i < total; i++) {
+      const r = allRows.nth(i)
+      const delBtn = r.locator('..').getByRole('button', { name: 'Delete' })
+      if ((await delBtn.count()) > 0) {
+        await delBtn.click()
+        await expect(page.locator('text=Are you sure you want to delete')).toBeVisible()
+        await page.locator('button.btn-danger:has-text("Delete")').click()
+      }
+    }
+
+    // locate the remaining default reward (exact text)
+    const row = page.getByText('Choose meal', { exact: true }).first()
+    await expect(row).toBeVisible()
+    // delete button should not exist initially on default
+    await expect(row.locator('..').getByRole('button', { name: 'Delete' })).toHaveCount(0)
+
+    // open edit form
+    await row.click()
+    await expect(page.locator('input#name')).toHaveValue('Choose meal')
+
+    // change fields
+    await page.evaluate(() => {
+      const setVal = (sel: string, val: string) => {
+        const el = document.querySelector(sel) as HTMLInputElement | null
+        if (el) {
+          el.value = val
+          el.dispatchEvent(new Event('input', { bubbles: true }))
+          el.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+      }
+      setVal('#name', 'Choose meal (custom)')
+      setVal('#cost', '35')
+    })
+    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
+    await page.click('button:has-text("Save")')
+
+    // after save, ensure row now has delete control
+    const updated = page.locator('text=Choose meal (custom)').first()
+    await expect(updated).toBeVisible()
+    await expect(updated.locator('..').getByRole('button', { name: 'Delete' })).toBeVisible()
+  })
+})

frontend/vue-app/e2e/mode_parent/rewards/reward-create-edit.spec.ts

@@ -0,0 +1,139 @@
+// spec: frontend/vue-app/e2e/plans/parent-rewards-management.plan.md
+// seed: e2e/seed.spec.ts
+
+import { test, expect } from '@playwright/test'
+
+test.describe('Reward management', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
+  })
+
+  test.describe.configure({ mode: 'serial' })
+
+  test('Create a new reward', async ({ page }) => {
+    const suffix = Date.now()
+    const name = `Toy car ${suffix}`
+
+    // 1. Navigate to /parent/rewards and verify default list
+    await page.goto('/parent/rewards')
+    // expect: some reward name visible (use default item)
+    await expect(page.getByText('Choose meal', { exact: true })).toBeVisible()
+
+    // 2. Click the 'Create Reward' FAB
+    await page.getByRole('button', { name: 'Create Reward' }).click()
+    // expect: form appears with fields
+    await expect(page.locator('text=Reward Name')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Create' })).toBeDisabled()
+
+    // 3. Fill in name and cost via DOM events
+    await page.evaluate((name) => {
+      const setVal = (sel: string, val: string) => {
+        const el = document.querySelector(sel) as HTMLInputElement | null
+        if (el) {
+          el.value = val
+          el.dispatchEvent(new Event('input', { bubbles: true }))
+          el.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+      }
+      setVal('#name', name)
+      setVal('#cost', '20')
+    }, name)
+    await expect(page.getByRole('button', { name: 'Create' })).toBeEnabled()
+
+    // 4. Submit
+    await page.click('button:has-text("Create")')
+    await expect(page.locator('.error')).toHaveCount(0)
+    await expect(page).toHaveURL(/\/parent\//)
+    await expect(page.locator(`text=${name}`)).toBeVisible()
+  })
+
+  test('Edit an existing reward', async ({ page }) => {
+    const suffix = Date.now()
+    const original = `Toy car ${suffix}`
+    const updated = `Toy boat ${suffix}`
+
+    // ensure the item exists
+    await page.goto('/parent/rewards')
+    if (!(await page.locator(`text=${original}`).count())) {
+      await page.getByRole('button', { name: 'Create Reward' }).click()
+      await page.evaluate((name) => {
+        const setVal = (sel: string, val: string) => {
+          const el = document.querySelector(sel) as HTMLInputElement | null
+          if (el) {
+            el.value = val
+            el.dispatchEvent(new Event('input', { bubbles: true }))
+            el.dispatchEvent(new Event('change', { bubbles: true }))
+          }
+        }
+        setVal('#name', name)
+        setVal('#cost', '20')
+      }, original)
+      await page.getByRole('button', { name: 'Create' }).click()
+    }
+
+    await expect(page.locator(`text=${original}`)).toBeVisible()
+
+    // open edit form
+    await page.click(`text=${original}`)
+    await expect(page.locator('text=Reward Name')).toBeVisible()
+
+    // change values
+    await page.evaluate((name) => {
+      const setVal = (sel: string, val: string | number) => {
+        const el = document.querySelector(sel) as HTMLInputElement | null
+        if (el) {
+          if (typeof val === 'number') {
+            el.valueAsNumber = val
+          } else {
+            el.value = val
+          }
+          el.dispatchEvent(new Event('input', { bubbles: true }))
+          el.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+      }
+      setVal('#name', name)
+      // set numeric cost to ensure backend receives integer
+      setVal('#cost', 25)
+    }, updated)
+
+    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
+    await page.click('button:has-text("Save")')
+    await expect(page.locator('.error')).toHaveCount(0)
+    await expect(page).toHaveURL(/\/parent\//)
+    // allow extra time for the updated row to appear via SSE
+    await expect(page.locator(`text=${updated}`)).toBeVisible({ timeout: 10000 })
+  })
+
+  test('Delete a reward', async ({ page }) => {
+    const suffix = Date.now()
+    const name = `Toy car ${suffix}`
+
+    await page.goto('/parent/rewards')
+    await page.getByRole('button', { name: 'Create Reward' }).click()
+    await page.evaluate((name) => {
+      const setVal = (sel: string, val: string) => {
+        const el = document.querySelector(sel) as HTMLInputElement | null
+        if (el) {
+          el.value = val
+          el.dispatchEvent(new Event('input', { bubbles: true }))
+          el.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+      }
+      setVal('#name', name)
+      setVal('#cost', '20')
+    }, name)
+    await page.getByRole('button', { name: 'Create' }).click()
+    await expect(page.locator(`text=${name}`)).toBeVisible()
+
+    // delete using row-local button
+    await page
+      .locator(`text=${name}`)
+      .first()
+      .locator('..')
+      .getByRole('button', { name: 'Delete' })
+      .click()
+    await expect(page.locator('text=Are you sure you want to delete')).toBeVisible()
+    await page.locator('button.btn-danger:has-text("Delete")').click()
+    await expect(page.locator(`text=${name}`)).toHaveCount(0)
+  })
+})

frontend/vue-app/e2e/mode_parent/rewards/reward-delete-default.spec.ts

@@ -0,0 +1,124 @@
+// spec: frontend/vue-app/e2e/plans/parent-rewards-management.plan.md
+// seed: e2e/seed.spec.ts
+
+import { test, expect } from '@playwright/test'
+
+test.describe('Default reward cost edit and restore', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
+  })
+
+  test.describe.configure({ mode: 'serial' })
+
+  test('Edit default cost and verify restoration on delete', async ({ page }) => {
+    await page.goto('/parent/rewards')
+
+    // cleanup any user-copy of "Choose meal"
+    // Keep deleting rows until there are none left – avoids DOM-shift race when
+    // multiple matching rows exist (e.g. leftovers from previous specs).  Because
+    // other workers may modify the list concurrently, we also retry the entire
+    // loop once after a short delay if a delete button still shows up.
+    async function purge(): Promise<void> {
+      while (
+        await page
+          .getByText('Choose meal', { exact: true })
+          .locator('..')
+          .getByRole('button', { name: 'Delete' })
+          .count()
+      ) {
+        const btn = page
+          .getByText('Choose meal', { exact: true })
+          .locator('..')
+          .getByRole('button', { name: 'Delete' })
+          .first()
+        await btn.click()
+        await expect(page.locator('text=Are you sure you want to delete')).toBeVisible()
+        await page.locator('button.btn-danger:has-text("Delete")').click()
+        // give UI a moment to refresh the list
+        await page.waitForTimeout(200)
+      }
+    }
+    await purge()
+    // if something else sneaks one in (concurrent spec), wait then try again
+    if (
+      await page
+        .getByText('Choose meal', { exact: true })
+        .locator('..')
+        .getByRole('button', { name: 'Delete' })
+        .count()
+    ) {
+      await page.waitForTimeout(500)
+      await purge()
+    }
+    // reload to make sure the list has settled after all deletions
+    await page.reload()
+    await page.waitForURL('/parent/rewards')
+
+    // ensure default exists with no delete icon
+    const defaultRow = page.getByText('Choose meal', { exact: true }).first()
+    await expect(defaultRow).toBeVisible()
+    // sometimes concurrent specs race and temporarily re-add a delete icon; give
+    // it a moment and retry once
+    let deleteCount = await defaultRow.locator('..').getByRole('button', { name: 'Delete' }).count()
+    if (deleteCount) {
+      await page.waitForTimeout(500)
+      deleteCount = await defaultRow.locator('..').getByRole('button', { name: 'Delete' }).count()
+    }
+    await expect(deleteCount).toBe(0)
+
+    // open edit and change cost
+    await defaultRow.click()
+    await expect(page.locator('input#name')).toHaveValue('Choose meal')
+    await page.evaluate(() => {
+      const setVal = (sel: string, val: string) => {
+        const el = document.querySelector(sel) as HTMLInputElement | null
+        if (el) {
+          el.value = val
+          el.dispatchEvent(new Event('input', { bubbles: true }))
+          el.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+      }
+      setVal('#cost', '50')
+    })
+    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
+    await page.click('button:has-text("Save")')
+
+    // After save: pick the row wrapper that now shows 50 pts (user copy)
+    const customRow = page
+      .getByText('Choose meal', { exact: true })
+      .locator('..')
+      .filter({ has: page.locator('text=50 pts') })
+      .first()
+    await expect(customRow).toBeVisible({ timeout: 10000 })
+    await expect(customRow.getByRole('button', { name: /Delete/ })).toBeVisible()
+
+    // delete and confirm restoration using the same customRow
+    await customRow.getByRole('button', { name: /Delete/ }).click()
+    await expect(page.locator('text=Are you sure you want to delete')).toBeVisible()
+    await page.locator('button.btn-danger:has-text("Delete")').click()
+
+    // wait until the exact 'Choose meal' copy showing the edited cost is gone
+    await expect(
+      page
+        .getByText('Choose meal', { exact: true })
+        .locator('..')
+        .filter({ has: page.locator('text=50 pts') }),
+    ).toHaveCount(0, { timeout: 10000 })
+
+    // reload the list to clear any lingering delete icon artifacts
+    await page.reload()
+    await page.waitForURL('/parent/rewards')
+
+    // ensure no delete button is visible on the exact default 'Choose meal' row
+    await expect(
+      page
+        .getByText('Choose meal', { exact: true })
+        .locator('..')
+        .getByRole('button', { name: 'Delete' }),
+    ).toHaveCount(0, { timeout: 10000 })
+
+    const finalRow = page.getByText('Choose meal', { exact: true }).first()
+    await expect(finalRow).toBeVisible()
+    await expect(finalRow).not.toContainText('50 pts')
+  })
+})