Refactor Playwright tests and update configurations
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Has been cancelled
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Has been cancelled
- Consolidated kindness and penalty tests into single files to ensure serial execution and prevent conflicts. - Updated Playwright configuration to define separate test buckets for child options and create child tests, ensuring proper execution order. - Added new tests for child kebab menu options including editing, deleting points, and confirming child deletion. - Removed obsolete tests for kindness and penalty default management. - Updated authentication tokens in user.json for improved security. - Enhanced test reliability by implementing retry logic for UI interactions in the create-child happy path test.
This commit is contained in:
@@ -2,17 +2,17 @@
|
||||
"cookies": [
|
||||
{
|
||||
"name": "refresh_token",
|
||||
"value": "lEN8eJ_pJ1tcLjsFgkyzCxzsZXn3rjDvdUqoQlcGD1w",
|
||||
"value": "cR3-UAhFv9MEhSxeLcU2J-BVxuhbFH4nBYJ3_ot_ylo",
|
||||
"domain": "localhost",
|
||||
"path": "/api/auth",
|
||||
"expires": 1781149918.627695,
|
||||
"expires": 1781234351.04593,
|
||||
"httpOnly": true,
|
||||
"secure": true,
|
||||
"sameSite": "Strict"
|
||||
},
|
||||
{
|
||||
"name": "access_token",
|
||||
"value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiJkYTM5MDQ0OC04YzFiLTRjYmQtYWNjNi1lNWFmNzM5OTRkNzMiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3NzMzNzQ4MTh9.Imxrgn0cjIfrNne918fLKfsLNcWAG_5FaF0crvYroic",
|
||||
"value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUyZUB0ZXN0LmNvbSIsInVzZXJfaWQiOiIzNWYyNzM5NS0xMGRhLTQzMTQtYjVjNC1jMDIwMmJkYjNiNDMiLCJ0b2tlbl92ZXJzaW9uIjowLCJleHAiOjE3NzM0NTkyNTF9.cqUw3IjBTkTvRFinuQCZ_DPZJsmfFeTxyGAnKt-AozQ",
|
||||
"domain": "localhost",
|
||||
"path": "/",
|
||||
"expires": -1,
|
||||
@@ -27,11 +27,11 @@
|
||||
"localStorage": [
|
||||
{
|
||||
"name": "authSyncEvent",
|
||||
"value": "{\"type\":\"logout\",\"at\":1773373918495}"
|
||||
"value": "{\"type\":\"logout\",\"at\":1773458350728}"
|
||||
},
|
||||
{
|
||||
"name": "parentAuth",
|
||||
"value": "{\"expiresAt\":1773546718838}"
|
||||
"value": "{\"expiresAt\":1773631151242}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
async function createTestChild(request: any, name: string, age = 8): Promise<string> {
|
||||
await request.put('/api/child/add', { data: { name, age } })
|
||||
const listRes = await request.get('/api/child/list')
|
||||
const data = await listRes.json()
|
||||
const child = (data.children ?? []).find((c: any) => c.name === name)
|
||||
return child?.id ?? ''
|
||||
}
|
||||
|
||||
test.describe('Child kebab menu – Delete Child', () => {
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
const CHILD_NAME = 'KebabDelete'
|
||||
let childId = ''
|
||||
|
||||
test.afterEach(async ({ request }) => {
|
||||
// Best-effort cleanup in case the test did not delete the child
|
||||
if (childId) await request.delete(`/api/child/${childId}`)
|
||||
childId = ''
|
||||
})
|
||||
|
||||
test('Confirm deletes the child from the list', async ({ page, request }) => {
|
||||
childId = await createTestChild(request, CHILD_NAME)
|
||||
await page.goto('/parent')
|
||||
await expect(page.getByRole('heading', { name: CHILD_NAME })).toBeVisible()
|
||||
|
||||
const card = page.locator('.card').filter({ hasText: CHILD_NAME })
|
||||
await card.getByRole('button', { name: 'Options' }).click()
|
||||
await card.getByRole('button', { name: 'Delete Child' }).click()
|
||||
|
||||
await expect(page.getByText('Are you sure you want to delete this child?')).toBeVisible()
|
||||
await page.getByRole('button', { name: 'Delete' }).click()
|
||||
|
||||
await expect(page.getByRole('heading', { name: CHILD_NAME })).not.toBeVisible()
|
||||
childId = '' // already deleted, skip afterEach cleanup
|
||||
})
|
||||
|
||||
test('Cancel does not delete the child', async ({ page, request }) => {
|
||||
childId = await createTestChild(request, CHILD_NAME)
|
||||
await page.goto('/parent')
|
||||
await expect(page.getByRole('heading', { name: CHILD_NAME })).toBeVisible()
|
||||
|
||||
const card = page.locator('.card').filter({ hasText: CHILD_NAME })
|
||||
await card.getByRole('button', { name: 'Options' }).click()
|
||||
await card.getByRole('button', { name: 'Delete Child' }).click()
|
||||
|
||||
await expect(page.getByText('Are you sure you want to delete this child?')).toBeVisible()
|
||||
await page.getByRole('button', { name: 'Cancel' }).click()
|
||||
|
||||
await expect(page.getByText('Are you sure you want to delete this child?')).not.toBeVisible()
|
||||
await expect(page.getByRole('heading', { name: CHILD_NAME })).toBeVisible()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,40 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
async function createTestChild(request: any, name: string, age = 8): Promise<string> {
|
||||
await request.put('/api/child/add', { data: { name, age } })
|
||||
const listRes = await request.get('/api/child/list')
|
||||
const data = await listRes.json()
|
||||
const child = (data.children ?? []).find((c: any) => c.name === name)
|
||||
return child?.id ?? ''
|
||||
}
|
||||
|
||||
test.describe('Child kebab menu – Delete Points', () => {
|
||||
const CHILD_NAME = 'KebabPoints'
|
||||
let childId = ''
|
||||
|
||||
test.beforeEach(async ({ request }) => {
|
||||
childId = await createTestChild(request, CHILD_NAME)
|
||||
await request.put(`/api/child/${childId}/edit`, { data: { points: 50 } })
|
||||
})
|
||||
|
||||
test.afterEach(async ({ request }) => {
|
||||
if (childId) await request.delete(`/api/child/${childId}`)
|
||||
childId = ''
|
||||
})
|
||||
|
||||
test('Delete Points resets child points to 0', async ({ page }) => {
|
||||
await page.goto('/parent')
|
||||
|
||||
const card = page.locator('.card').filter({ hasText: CHILD_NAME })
|
||||
|
||||
await card.getByRole('button', { name: 'Options' }).click()
|
||||
await expect(card.getByRole('button', { name: 'Options' })).toHaveAttribute(
|
||||
'aria-expanded',
|
||||
'true',
|
||||
)
|
||||
|
||||
await card.getByRole('button', { name: 'Delete Points' }).click()
|
||||
|
||||
await expect(card.getByText('Points: 0')).toBeVisible()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,40 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
async function createTestChild(request: any, name: string, age = 8): Promise<string> {
|
||||
await request.put('/api/child/add', { data: { name, age } })
|
||||
const listRes = await request.get('/api/child/list')
|
||||
const data = await listRes.json()
|
||||
const child = (data.children ?? []).find((c: any) => c.name === name)
|
||||
return child?.id ?? ''
|
||||
}
|
||||
|
||||
test.describe('Child kebab menu – Edit Child', () => {
|
||||
const CHILD_NAME = 'KebabEdit'
|
||||
let childId = ''
|
||||
|
||||
test.beforeEach(async ({ request }) => {
|
||||
childId = await createTestChild(request, CHILD_NAME)
|
||||
})
|
||||
|
||||
test.afterEach(async ({ request }) => {
|
||||
if (childId) await request.delete(`/api/child/${childId}`)
|
||||
childId = ''
|
||||
})
|
||||
|
||||
test('Edit Child menu item navigates to the child editor', async ({ page }) => {
|
||||
await page.goto('/parent')
|
||||
await expect(page.getByRole('heading', { name: CHILD_NAME })).toBeVisible()
|
||||
|
||||
const card = page.locator('.card').filter({ hasText: CHILD_NAME })
|
||||
await card.getByRole('button', { name: 'Options' }).click()
|
||||
await expect(card.getByRole('button', { name: 'Options' })).toHaveAttribute(
|
||||
'aria-expanded',
|
||||
'true',
|
||||
)
|
||||
|
||||
await card.getByRole('button', { name: 'Edit Child' }).click()
|
||||
|
||||
await expect(page).toHaveURL(/\/parent\/[^/]+\/edit/)
|
||||
await expect(page.getByRole('heading', { name: 'Edit Child' })).toBeVisible()
|
||||
})
|
||||
})
|
||||
@@ -26,6 +26,10 @@ async function deleteAllChildren(request: any) {
|
||||
}
|
||||
|
||||
test.describe('Create Child', () => {
|
||||
// Serial mode: the 'empty state' test calls deleteAllChildren() which would
|
||||
// race against sibling tests creating children if they ran in parallel.
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeEach(async ({ page }, testInfo) => {
|
||||
test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
|
||||
})
|
||||
@@ -74,18 +78,20 @@ test.describe('Create Child', () => {
|
||||
})
|
||||
|
||||
test('Create a child via the inline Create button in empty state', async ({ page, request }) => {
|
||||
await deleteAllChildren(request)
|
||||
// 1. Navigate to empty state and click inline Create.
|
||||
// Retry-loop handles SSE-triggered re-renders: a parallel test may add a child
|
||||
// between deleteAllChildren() and the click, detaching the empty-state button.
|
||||
await expect(async () => {
|
||||
await deleteAllChildren(request)
|
||||
await page.goto('/')
|
||||
await expect(page.getByText('No children')).toBeVisible({ timeout: 5000 })
|
||||
await page.getByRole('button', { name: 'Create' }).click({ timeout: 5000 })
|
||||
await expect(page.getByRole('heading', { name: 'Create Child' })).toBeVisible({
|
||||
timeout: 5000,
|
||||
})
|
||||
}).toPass({ timeout: 30000 })
|
||||
|
||||
// 1. Navigate to app root - router redirects to /parent (children list)
|
||||
await page.goto('/')
|
||||
await expect(page.getByText('No children')).toBeVisible()
|
||||
await expect(page.getByRole('button', { name: 'Create' })).toBeVisible()
|
||||
|
||||
// 2. Click the inline 'Create' button
|
||||
await page.getByRole('button', { name: 'Create' }).click()
|
||||
await expect(page.getByRole('heading', { name: 'Create Child' })).toBeVisible()
|
||||
|
||||
// 3. Enter 'Bob' and '10', then submit
|
||||
// 2. Enter 'Bob' and '10', then submit
|
||||
const nameInput = page.getByLabel('Name')
|
||||
const ageInput = page.getByLabel('Age')
|
||||
const createButton = page.getByRole('button', { name: 'Create' })
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
// spec: frontend/vue-app/e2e/plans/parent-item-management.plan.md
|
||||
// seed: e2e/seed.spec.ts
|
||||
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
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 to avoid name collision with kindness-delete-default running in parallel
|
||||
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 created user item so other tests see a clean default state
|
||||
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()
|
||||
})
|
||||
130
frontend/vue-app/e2e/mode_parent/tasks/kindness-default.spec.ts
Normal file
130
frontend/vue-app/e2e/mode_parent/tasks/kindness-default.spec.ts
Normal file
@@ -0,0 +1,130 @@
|
||||
// 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 } from '@playwright/test'
|
||||
|
||||
test.describe('Default kindness act management', () => {
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
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()
|
||||
|
||||
// Cleanup: if a previous run left a modified 'Be good for the day' (with delete icon), remove it first
|
||||
while (
|
||||
(await page
|
||||
.getByText('Be good for the day', { exact: true })
|
||||
.locator('..')
|
||||
.locator('button[aria-label="Delete item"]')
|
||||
.count()) > 0
|
||||
) {
|
||||
await page
|
||||
.getByText('Be good for the day', { exact: true })
|
||||
.locator('..')
|
||||
.locator('button[aria-label="Delete item"]')
|
||||
.first()
|
||||
.click()
|
||||
await page.getByRole('button', { name: 'Delete', exact: true }).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')
|
||||
})
|
||||
})
|
||||
@@ -1,93 +0,0 @@
|
||||
// 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 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()
|
||||
|
||||
// Cleanup: if a previous run left a modified 'Be good for the day' (with delete icon), remove it first
|
||||
while (
|
||||
(await page
|
||||
.getByText('Be good for the day', { exact: true })
|
||||
.locator('..')
|
||||
.locator('button[aria-label="Delete item"]')
|
||||
.count()) > 0
|
||||
) {
|
||||
await page
|
||||
.getByText('Be good for the day', { exact: true })
|
||||
.locator('..')
|
||||
.locator('button[aria-label="Delete item"]')
|
||||
.first()
|
||||
.click()
|
||||
await page.getByRole('button', { name: 'Delete', exact: true }).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')
|
||||
})
|
||||
@@ -17,8 +17,11 @@ test('Convert a default penalty to a user item by editing', async ({ page }) =>
|
||||
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
|
||||
// now should have delete option (match the updated name exactly)
|
||||
await expect(
|
||||
page.locator('text=Fighting >> .. >> button[aria-label="Delete item"]'),
|
||||
page
|
||||
.getByText('Fighting (custom)', { exact: true })
|
||||
.locator('..')
|
||||
.locator('button[aria-label="Delete item"]'),
|
||||
).toBeVisible()
|
||||
})
|
||||
|
||||
131
frontend/vue-app/e2e/mode_parent/tasks/penalty-default.spec.ts
Normal file
131
frontend/vue-app/e2e/mode_parent/tasks/penalty-default.spec.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
// 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')
|
||||
})
|
||||
})
|
||||
@@ -1,93 +0,0 @@
|
||||
// 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 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')
|
||||
})
|
||||
107
frontend/vue-app/e2e/plans/child-options.plan.md
Normal file
107
frontend/vue-app/e2e/plans/child-options.plan.md
Normal file
@@ -0,0 +1,107 @@
|
||||
# Child Kebab Menu Options
|
||||
|
||||
## Application Overview
|
||||
|
||||
Tests for the per-child kebab (⋮) menu on the Parent dashboard (`/parent`). The menu is only visible when the parent is authenticated (PIN entered). Each option card exposes an "Options" button (`aria-label="Options"`) that opens a dropdown with three actions: **Edit Child**, **Delete Points**, and **Delete Child**.
|
||||
|
||||
All tests run under the `chromium-child-options` project which completes before `chromium-create-child` starts, preventing `deleteAllChildren()` in the create-child suite from interfering with children created by these tests.
|
||||
|
||||
Each test creates its own named child via the API in `beforeEach` and cleans up in `afterEach`, so the tests are fully isolated and can run in parallel with each other.
|
||||
|
||||
## Test Scenarios
|
||||
|
||||
### 1. Edit Child ✅ IMPLEMENTED
|
||||
|
||||
**File:** `e2e/mode_parent/child-options/edit-child.spec.ts`
|
||||
|
||||
**Seed child:** `KebabEdit` (created via `PUT /api/child/add`, deleted in `afterEach`)
|
||||
|
||||
#### 1.1. Edit Child menu item navigates to the child editor ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabEdit` via API in `beforeEach`
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
- expect: A card with heading `KebabEdit` is visible
|
||||
|
||||
3. Click the "Options" button on the `KebabEdit` card
|
||||
|
||||
- expect: The kebab dropdown opens (`aria-expanded="true"` on the Options button)
|
||||
|
||||
4. Click "Edit Child" in the dropdown
|
||||
|
||||
- expect: URL matches `/parent/<id>/edit`
|
||||
- expect: Page heading "Edit Child" is visible
|
||||
|
||||
---
|
||||
|
||||
### 2. Delete Points ✅ IMPLEMENTED
|
||||
|
||||
**File:** `e2e/mode_parent/child-options/delete-points.spec.ts`
|
||||
|
||||
**Seed child:** `KebabPoints` (created via `PUT /api/child/add`, seeded to 50 points via `PUT /api/child/:id/edit`, deleted in `afterEach`)
|
||||
|
||||
#### 2.1. Delete Points resets child points to 0 ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabPoints` with 50 points via API in `beforeEach`
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
3. Click the "Options" button on the `KebabPoints` card
|
||||
|
||||
- expect: The kebab dropdown opens (`aria-expanded="true"` on the Options button)
|
||||
|
||||
4. Click "Delete Points" in the dropdown
|
||||
|
||||
- expect: The card shows `Points: 0`
|
||||
|
||||
---
|
||||
|
||||
### 3. Delete Child ✅ IMPLEMENTED
|
||||
|
||||
**File:** `e2e/mode_parent/child-options/delete-child.spec.ts`
|
||||
|
||||
**Seed child:** `KebabDelete` (created per-test, cleaned up in `afterEach`)
|
||||
|
||||
**Note:** The two tests in this file share the same child name and use `test.describe.configure({ mode: 'serial' })` to guarantee they never run in parallel with each other.
|
||||
|
||||
#### 3.1. Confirm deletes the child from the list ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabDelete` via API
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
- expect: Card with heading `KebabDelete` is visible
|
||||
|
||||
3. Click "Options" → "Delete Child"
|
||||
|
||||
- expect: Confirmation dialog "Are you sure you want to delete this child?" appears
|
||||
|
||||
4. Click the "Delete" button in the dialog
|
||||
|
||||
- expect: The `KebabDelete` card is no longer visible in the list
|
||||
|
||||
#### 3.2. Cancel does not delete the child ✅
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Create child `KebabDelete` via API
|
||||
|
||||
2. Navigate to `/parent`
|
||||
|
||||
- expect: Card with heading `KebabDelete` is visible
|
||||
|
||||
3. Click "Options" → "Delete Child"
|
||||
|
||||
- expect: Confirmation dialog "Are you sure you want to delete this child?" appears
|
||||
|
||||
4. Click the "Cancel" button in the dialog
|
||||
|
||||
- expect: The confirmation dialog is dismissed
|
||||
- expect: The `KebabDelete` card is still visible in the list
|
||||
Reference in New Issue
Block a user