feat(tutorial): enhance help button visibility and add dialog tests

- Introduced a mechanism to hide the help button when modal dialogs are open by adding `helpButtonHidden` state in the tutorial controller. - Updated various components to set the help button visibility based on dialog states. - Added tests to verify help button visibility during reward and task confirmation dialogs. - Created new E2E tests for dialog help button functionality across different assignment views. - Refactored existing dialog components to utilize the new help button visibility logic. - Added unit tests for `RewardConfirmDialog` and `TaskConfirmDialog` to ensure correct titles are rendered based on task type. - Enhanced `HelpButton` component tests to validate visibility based on tutorial state.
2026-07-23 01:02:21 -04:00
parent 541bed3a8a
commit cc1189cd9b
22 changed files with 677 additions and 75 deletions
@@ -0,0 +1,133 @@
+import { test, expect, type APIRequestContext } from '@playwright/test'
+
+const CHILD_NAME = 'AssignFabChild'
+const CHORE_NAME = 'AssignFabChore'
+const KINDNESS_NAME = 'AssignFabKindness'
+const PENALTY_NAME = 'AssignFabPenalty'
+const REWARD_NAME = 'AssignFabReward'
+const ROUTINE_NAME = 'AssignFabRoutine'
+
+async function createChild(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/child/list')
+  for (const c of (await pre.json()).children ?? []) {
+    if (c.name === name) await request.delete(`/api/child/${c.id}`)
+  }
+  await request.put('/api/child/add', { data: { name, age: 8 } })
+  const list = await request.get('/api/child/list')
+  return (
+    (await list.json()).children?.find((c: { name: string; id: string }) => c.name === name)?.id ??
+    ''
+  )
+}
+
+async function createTask(
+  request: APIRequestContext,
+  name: string,
+  type: 'chore' | 'kindness' | 'penalty',
+): Promise<string> {
+  const pre = await request.get('/api/task/list')
+  for (const t of (await pre.json()).tasks ?? []) {
+    if (t.name === name) await request.delete(`/api/task/${t.id}`)
+  }
+  await request.put('/api/task/add', { data: { name, points: 5, type } })
+  const list = await request.get('/api/task/list')
+  return (
+    (await list.json()).tasks?.find((t: { name: string; id: string }) => t.name === name)?.id ?? ''
+  )
+}
+
+async function createReward(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/reward/list')
+  for (const r of (await pre.json()).rewards ?? []) {
+    if (r.name === name) await request.delete(`/api/reward/${r.id}`)
+  }
+  await request.put('/api/reward/add', { data: { name, description: 'E2E fab reward', cost: 10 } })
+  const list = await request.get('/api/reward/list')
+  return (
+    (await list.json()).rewards?.find((r: { name: string; id: string }) => r.name === name)?.id ??
+    ''
+  )
+}
+
+async function createRoutine(request: APIRequestContext, name: string): Promise<string> {
+  const pre = await request.get('/api/routine/list')
+  for (const r of (await pre.json()).routines ?? []) {
+    if (r.name === name) await request.delete(`/api/routine/${r.id}`)
+  }
+  const res = await request.put('/api/routine/add', { data: { name, points: 5 } })
+  return (await res.json()).routine?.id ?? ''
+}
+
+test.describe('Assignment views create FAB', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  let childId = ''
+  let choreId = ''
+  let kindnessId = ''
+  let penaltyId = ''
+  let rewardId = ''
+  let routineId = ''
+
+  test.beforeAll(async ({ request }) => {
+    childId = await createChild(request, CHILD_NAME)
+    choreId = await createTask(request, CHORE_NAME, 'chore')
+    kindnessId = await createTask(request, KINDNESS_NAME, 'kindness')
+    penaltyId = await createTask(request, PENALTY_NAME, 'penalty')
+    rewardId = await createReward(request, REWARD_NAME)
+    routineId = await createRoutine(request, ROUTINE_NAME)
+  })
+
+  test.afterAll(async ({ request }) => {
+    if (childId) await request.delete(`/api/child/${childId}`)
+    if (choreId) await request.delete(`/api/task/${choreId}`)
+    if (kindnessId) await request.delete(`/api/task/${kindnessId}`)
+    if (penaltyId) await request.delete(`/api/task/${penaltyId}`)
+    if (rewardId) await request.delete(`/api/reward/${rewardId}`)
+    if (routineId) await request.delete(`/api/routine/${routineId}`)
+  })
+
+  test('Chore assign view FAB navigates to chore creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-chores?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Chores' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Chore' }).click()
+    await page.waitForURL(/\/parent\/tasks\/chores\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Chore' })).toBeVisible()
+  })
+
+  test('Kindness assign view FAB navigates to kindness creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-kindness?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Kindness Acts' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Kindness Act' }).click()
+    await page.waitForURL(/\/parent\/tasks\/kindness\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Kindness Act' })).toBeVisible()
+  })
+
+  test('Penalty assign view FAB navigates to penalty creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-penalties?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Penalties' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Penalty' }).click()
+    await page.waitForURL(/\/parent\/tasks\/penalties\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Penalty' })).toBeVisible()
+  })
+
+  test('Reward assign view FAB navigates to reward creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-rewards?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Rewards' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Reward' }).click()
+    await page.waitForURL(/\/parent\/rewards\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Reward' })).toBeVisible()
+  })
+
+  test('Routine assign view FAB navigates to routine creator', async ({ page }) => {
+    await page.goto(`/parent/${childId}/assign-routines?name=${CHILD_NAME}`)
+    await expect(page.getByRole('heading', { name: 'Assign Routines' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Create Routine' }).click()
+    await page.waitForURL(/\/parent\/tasks\/routines\/create$/)
+    await expect(page.getByRole('heading', { name: 'Create Routine' })).toBeVisible()
+  })
+})