chore/frontend/vue-app/e2e/mode_parent/tasks/kindness-default.spec.ts

// spec: frontend/vue-app/e2e/plans/parent-item-management.plan.md
// Merged from kindness-convert-default.spec.ts and kindness-delete-default.spec.ts.
// Both tests touch "Be good for the day" so they MUST run serially.

import { test, expect, type APIRequestContext } from '@playwright/test'

const BACKEND = 'http://localhost:5000'

async function cleanupBeGoodTasks(request: APIRequestContext): Promise<void> {
  const res = await request.get(`${BACKEND}/task/list`)
  if (!res.ok()) return
  const { tasks }: { tasks: Array<{ id: string; name: string; user_id: string | null }> } =
    await res.json()
  for (const task of tasks) {
    if (
      task.user_id !== null &&
      (task.name === 'Be good today (edited)' || task.name === 'Be good for the day')
    ) {
      await request.delete(`${BACKEND}/task/${task.id}`)
    }
  }
}

test.describe('Default kindness act management', () => {
  test.describe.configure({ mode: 'serial' })

  test.beforeEach(async ({ request }) => {
    await cleanupBeGoodTasks(request)
  })

  test('Convert a default kindness act to a user item by editing', async ({ page }) => {
    await page.goto('/parent/tasks/chores')
    await page.click('text=Kindness Acts')
    // find a default act
    await expect(page.locator('text=Be good for the day')).toBeVisible()
    await expect(
      page.locator('text=Be good for the day >> .. >> button[aria-label="Delete item"]'),
    ).toHaveCount(0)

    // edit it — rename so there is no name collision with the delete-default test
    await page.click('text=Be good for the day')
    await page.locator('#name').fill('Be good today (edited)')
    await page.locator('#points').fill('7')
    await page.getByRole('button', { name: 'Save' }).click()

    // renamed item should now be deletable
    await expect(
      page
        .getByText('Be good today (edited)', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toBeVisible()

    // clean up: delete the user item so the next test sees "Be good for the day" as a system default
    await page
      .getByText('Be good today (edited)', { exact: true })
      .locator('..')
      .locator('button[aria-label="Delete item"]')
      .click()
    await page.getByRole('button', { name: 'Delete', exact: true }).click()
  })

  test('Edit default kindness act "Be good for the day" and verify system act restoration on delete', async ({
    page,
  }) => {
    await page.goto('/parent/tasks/chores')
    await page.getByText('Kindness Acts').click()

    // 1. Verify 'Be good for the day' is the system default (visible, no delete icon)
    await expect(page.getByText('Be good for the day', { exact: true })).toBeVisible()
    await expect(
      page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toHaveCount(0)

    // 2. Click 'Be good for the day' to open the edit form and change points
    await page.getByText('Be good for the day', { exact: true }).click()
    await expect(page.locator('input#name').inputValue()).resolves.toBe('Be good for the day')

    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('#points', '3')
    })

    // expect: Save button becomes enabled because the form is dirty
    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
    await page.getByRole('button', { name: 'Save' }).click()

    // 3. Verify exactly one 'Be good for the day' is in the list and it now has a delete icon
    await expect(page.getByText('Be good for the day', { exact: true })).toHaveCount(1)
    await expect(
      page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toBeVisible()
    // expect: points display reflects the updated value
    await expect(
      page.getByText('Be good for the day', { exact: true }).locator('..').locator('.value'),
    ).toHaveText('3 pts')

    // 4. Delete the modified 'Be good for the day' and verify the system default is restored
    await page
      .getByText('Be good for the day', { exact: true })
      .locator('..')
      .locator('button[aria-label="Delete item"]')
      .click()
    await expect(page.locator('text=Are you sure')).toBeVisible()
    await page.getByRole('button', { name: 'Delete', exact: true }).click()

    // expect: 'Be good for the day' is still on the list (system default restored)
    await expect(page.getByText('Be good for the day', { exact: true })).toBeVisible()
    // expect: no delete icon (it's a system default again)
    await expect(
      page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toHaveCount(0)
    // expect: original points (15 pts) are restored
    await expect(
      page.getByText('Be good for the day', { exact: true }).locator('..').locator('.value'),
    ).toHaveText('15 pts')
  })
})