Ryan Kegel
127378797c
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 2m46s
89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
// spec: e2e/plans/bugs-1.0.6-set01.plan.md §4
|
|
|
|
import { test, expect, type APIRequestContext } from '@playwright/test'
|
|
|
|
const CHILD_NAME = 'NotifOverflowChild'
|
|
const LONG_CHORE_NAME = 'This Is A Very Long Chore Name That Should Not Overflow The Card Boundary'
|
|
const CHORE_POINTS = 5
|
|
|
|
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: any) => c.name === name)?.id ?? ''
|
|
}
|
|
|
|
async function createTask(
|
|
request: APIRequestContext,
|
|
name: string,
|
|
points: number,
|
|
): 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, type: 'chore' } })
|
|
const list = await request.get('/api/task/list')
|
|
return (await list.json()).tasks?.find((t: any) => t.name === name)?.id ?? ''
|
|
}
|
|
|
|
test.describe('Notification card overflow', () => {
|
|
let childId = ''
|
|
let choreId = ''
|
|
|
|
test.beforeAll(async ({ request }) => {
|
|
childId = await createChild(request, CHILD_NAME)
|
|
choreId = await createTask(request, LONG_CHORE_NAME, CHORE_POINTS)
|
|
|
|
await request.put(`/api/child/${childId}/set-tasks`, {
|
|
data: { task_ids: [choreId], type: 'chore' },
|
|
})
|
|
|
|
// Confirm chore to create a pending notification
|
|
await request.post(`/api/child/${childId}/confirm-chore`, {
|
|
data: { task_id: choreId },
|
|
})
|
|
})
|
|
|
|
test.afterAll(async ({ request }) => {
|
|
if (childId) await request.delete(`/api/child/${childId}`)
|
|
if (choreId) await request.delete(`/api/task/${choreId}`)
|
|
})
|
|
|
|
test('Notification text does not overflow card boundaries', async ({ page }) => {
|
|
await page.goto('/parent/notifications')
|
|
|
|
const notifItem = page.locator('.list-item').filter({ hasText: LONG_CHORE_NAME })
|
|
await expect(notifItem).toBeVisible({ timeout: 5000 })
|
|
|
|
// Get bounding boxes
|
|
const cardBox = await notifItem.boundingBox()
|
|
expect(cardBox).not.toBeNull()
|
|
|
|
// Verify the card doesn't overflow horizontally beyond its parent
|
|
const parentBox = await notifItem.locator('..').boundingBox()
|
|
expect(parentBox).not.toBeNull()
|
|
|
|
if (cardBox && parentBox) {
|
|
// Card's right edge should not extend beyond parent's right edge
|
|
expect(cardBox.x + cardBox.width).toBeLessThanOrEqual(parentBox.x + parentBox.width + 1)
|
|
}
|
|
})
|
|
|
|
test('Long notification entity name wraps or clips within card', async ({ page }) => {
|
|
await page.goto('/parent/notifications')
|
|
|
|
const notifItem = page.locator('.list-item').filter({ hasText: LONG_CHORE_NAME })
|
|
await expect(notifItem).toBeVisible()
|
|
|
|
// The text content inside the notification should not cause horizontal scroll
|
|
const hasHorizontalScroll = await notifItem.evaluate((el) => {
|
|
return el.scrollWidth > el.clientWidth
|
|
})
|
|
expect(hasHorizontalScroll).toBe(false)
|
|
})
|
|
})
|