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-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')
+  })
+})