All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 3m31s
- Implement tests for creating, editing, and deleting chores, kindness acts, and penalties. - Add tests to verify conversion of default items to user items and restoration of system defaults upon deletion. - Ensure proper cancellation of creation and editing actions. - Create a comprehensive plan document outlining the test scenarios and expected behaviors.
93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
// spec: frontend/vue-app/e2e/plans/parent-item-management.plan.md
|
|
// seed: e2e/seed.spec.ts
|
|
|
|
import { test, expect } from '@playwright/test'
|
|
|
|
test('Edit default chore "Take out trash" and verify system chore restoration on delete', async ({
|
|
page,
|
|
}) => {
|
|
await page.goto('/parent/tasks/chores')
|
|
|
|
// Cleanup: if a previous run left a modified 'Take out trash' (with delete icon), remove it first
|
|
while (
|
|
(await page
|
|
.getByText('Take out trash', { exact: true })
|
|
.locator('..')
|
|
.locator('button[aria-label="Delete item"]')
|
|
.count()) > 0
|
|
) {
|
|
await page
|
|
.getByText('Take out trash', { exact: true })
|
|
.locator('..')
|
|
.locator('button[aria-label="Delete item"]')
|
|
.first()
|
|
.click()
|
|
await page.getByRole('button', { name: 'Delete', exact: true }).click()
|
|
}
|
|
|
|
// 1. Verify 'Take out trash' is the system default (visible, no delete icon)
|
|
await expect(page.getByText('Take out trash', { exact: true })).toBeVisible()
|
|
await expect(
|
|
page
|
|
.getByText('Take out trash', { exact: true })
|
|
.locator('..')
|
|
.locator('button[aria-label="Delete item"]'),
|
|
).toHaveCount(0)
|
|
|
|
// 2. Click 'Take out trash' to open the edit form and change points
|
|
await page.getByText('Take out trash', { exact: true }).click()
|
|
await expect(page.locator('input#name').inputValue()).resolves.toBe('Take out trash')
|
|
|
|
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', '5')
|
|
})
|
|
|
|
// 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 'Take out trash' is in the list and it now has a delete icon
|
|
await expect(page.getByText('Take out trash', { exact: true })).toHaveCount(1)
|
|
await expect(
|
|
page
|
|
.getByText('Take out trash', { exact: true })
|
|
.locator('..')
|
|
.locator('button[aria-label="Delete item"]'),
|
|
).toBeVisible()
|
|
// expect: points display reflects the updated value
|
|
await expect(
|
|
page.getByText('Take out trash', { exact: true }).locator('..').locator('.value'),
|
|
).toHaveText('5 pts')
|
|
|
|
// 4. Delete the modified 'Take out trash' and verify the system default is restored
|
|
await page
|
|
.getByText('Take out trash', { 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: 'Take out trash' is still on the list (system default restored)
|
|
await expect(page.getByText('Take out trash', { exact: true })).toBeVisible()
|
|
// expect: no delete icon (it's a system default again)
|
|
await expect(
|
|
page
|
|
.getByText('Take out trash', { exact: true })
|
|
.locator('..')
|
|
.locator('button[aria-label="Delete item"]'),
|
|
).toHaveCount(0)
|
|
// expect: original points (20 pts) are restored
|
|
await expect(
|
|
page.getByText('Take out trash', { exact: true }).locator('..').locator('.value'),
|
|
).toHaveText('20 pts')
|
|
})
|