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

// spec: frontend/vue-app/e2e/plans/parent-item-management.plan.md
// Merged from penalty-convert-default.spec.ts and penalty-delete-default.spec.ts.
// Both tests touch "Fighting" so they MUST run serially.

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

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

  test('Convert a default penalty to a user item by editing', async ({ page }) => {
    await page.goto('/parent/tasks/chores')
    await page.click('text=Penalties')
    // locate default penalty
    await expect(page.locator('text=Fighting')).toBeVisible()
    await expect(
      page.locator('text=Fighting >> .. >> button[aria-label="Delete item"]'),
    ).toHaveCount(0)

    // edit it (click the item itself)
    await page.getByText('Fighting', { exact: true }).click()
    await page.locator('#name').fill('Fighting (custom)')
    await page.locator('#points').fill('15')
    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
    await page.getByRole('button', { name: 'Save' }).click()

    // now should have delete option
    await expect(
      page
        .getByText('Fighting (custom)', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toBeVisible()

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

  test('Edit default penalty "Fighting" and verify system penalty restoration on delete', async ({
    page,
  }) => {
    await page.goto('/parent/tasks/chores')
    await page.getByText('Penalties').click()

    // Cleanup: if a previous run left a modified 'Fighting' (with delete icon), remove it first
    while (
      (await page
        .getByText('Fighting', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]')
        .count()) > 0
    ) {
      await page
        .getByText('Fighting', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]')
        .first()
        .click()
      await page.getByRole('button', { name: 'Delete', exact: true }).click()
    }

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

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

    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 'Fighting' is in the list and it now has a delete icon
    await expect(page.getByText('Fighting', { exact: true })).toHaveCount(1)
    await expect(
      page
        .getByText('Fighting', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toBeVisible()
    // expect: points display reflects the updated value
    await expect(
      page.getByText('Fighting', { exact: true }).locator('..').locator('.value'),
    ).toHaveText('3 pts')

    // 4. Delete the modified 'Fighting' and verify the system default is restored
    await page
      .getByText('Fighting', { 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: 'Fighting' is still on the list (system default restored)
    await expect(page.getByText('Fighting', { exact: true })).toBeVisible()
    // expect: no delete icon (it's a system default again)
    await expect(
      page
        .getByText('Fighting', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toHaveCount(0)
    // expect: original points (10 pts) are restored
    await expect(
      page.getByText('Fighting', { exact: true }).locator('..').locator('.value'),
    ).toHaveText('10 pts')
  })
})