mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
146fe4a063
The guides of the map, bookings, costs, files, collab, lists, road trip and transports now describe the desktop as it is after the redesign: the bars with their icon buttons and filter popovers, the dialogs with the title in the head band and status and type as pills, the three booking views and the booking detail, the compact note cards, the Costs table. Two guides are new: the booking views (cards, list, timeline, the Trip and Day zoom and the detail) and the Costs table view. Every changed text is translated into every locale, and the Plan tab texts call the bookings tab by the label it shows, Book. Every picture of the thirteen trip screens is taken again against the new layout, on one picture day. Scripts follow the new markup; the Dawarich fixture uploads its recording again when the stored one belongs to another run, and the spare poll gets its vote from a member so its winner shows green. server-launch.mjs skips the server build with E2E_SERVER_PREBUILT, so several recordings on their own port pairs can share one dist.
754 lines
34 KiB
TypeScript
754 lines
34 KiB
TypeScript
import { test, expect, type Page, type Locator } from '@playwright/test'
|
|
import { captureGuide, captureHero, beat, typeInto, settle, VIEWPORT, type GuideScript } from './guide'
|
|
import { pickerLabel } from '../dates'
|
|
import { seededTrip, ensureListsFixtures } from './fixtures'
|
|
import { openTrip, modal } from './trip-shared'
|
|
import { tripListsContext, tripListsGuides } from '../../src/help/contexts/tripLists'
|
|
import type { HelpGuide } from '../../src/help/types'
|
|
|
|
/**
|
|
* Actions for the Lists tab of a trip, keyed by the ids in
|
|
* `src/help/contexts/tripLists.ts`. They run on the seeded "Autumn in Japan"
|
|
* with the fixtures' packing template and two extra tasks in place, so Apply
|
|
* template exists and the to-do sidebar has more than one filled filter; what
|
|
* a guide creates it takes away again in `cleanup`, so the next one starts the
|
|
* same.
|
|
*/
|
|
|
|
const guide = (id: string): HelpGuide => {
|
|
const g = tripListsGuides.find(x => x.id === id)
|
|
if (!g) throw new Error(`no registered guide "${id}"`)
|
|
return g
|
|
}
|
|
|
|
/** What the guides make and unmake. Nothing here is in the seed. */
|
|
const NEW_LIST = 'Toiletries'
|
|
const FIRST_ITEM = 'Toothbrush'
|
|
const RENAMED_ITEM = 'Toothbrush and paste'
|
|
const MEMBER = 'mira'
|
|
const SHARED_ITEM = 'Camera'
|
|
const BAG_ITEM = 'Rain jacket'
|
|
const BAG = 'Cabin bag'
|
|
const SAVED_TEMPLATE = 'Autumn in Japan'
|
|
const NEW_TASK = 'Pick up the pocket wifi'
|
|
const NEW_TASK_NOTE = 'Counter is past customs, on the right, open until 22:00.'
|
|
const TASK_LIST = 'On arrival'
|
|
const OTHER_TASK_LIST = 'Before departure'
|
|
const EDITED_TASK = 'Activate JR Pass'
|
|
const ASSIGNEE = 'jonas'
|
|
/** The date picker labels a day cell with the whole date, in the run's English. */
|
|
const DUE_DAY = pickerLabel(4)
|
|
/** The fixtures' template, and the lists it brings with it. */
|
|
const TEMPLATE = { name: 'Japan autumn basics', category: 'Rain kit', items: ['Umbrella', 'Quick-dry towel', 'Dry bag', 'SIM card', 'Plug adapter'] }
|
|
const IMPORT_LINES = 'Toiletries, Toothbrush\nToiletries, Sunscreen, 90\nHealth, Plasters, 30'
|
|
const IMPORTED = ['Toothbrush', 'Sunscreen', 'Plasters']
|
|
/** The seed's packing items, in the order it created them. */
|
|
const SEED_ORDER = ['Passport', 'JR Pass voucher', 'Travel insurance', 'Rain jacket', 'Walking shoes', 'Light layers', 'Type-A adapter', 'Power bank', 'Camera']
|
|
const DOCUMENTS = ['Passport', 'JR Pass voucher', 'Travel insurance']
|
|
/** The count in the label moves with what is ticked, so it is matched, not spelled. */
|
|
const CLEAR_CHECKED = /^Remove \d+ checked$/
|
|
|
|
// ── Locators ─────────────────────────────────────────────────────────────────
|
|
|
|
/** A category card: the list's name is a span in the card's header row. */
|
|
const cat = (page: Page, name: string): Locator =>
|
|
page.getByText(name, { exact: true }).first().locator('xpath=ancestor::div[2]')
|
|
/**
|
|
* The header row of a card. The ⋯ has to be taken from here: every item row
|
|
* carries a ⋯ of its own, so the card as a whole holds several of them.
|
|
*/
|
|
const catHeader = (page: Page, name: string): Locator => cat(page, name).locator('> div').first()
|
|
const catMenu = (page: Page, name: string): Locator =>
|
|
catHeader(page, name).locator('button:has(svg.lucide-more-horizontal)')
|
|
/** The open ⋯ menu is a fixed popover with no class of its own; its last entry names it. */
|
|
const catMenuCard = (page: Page): Locator => page.getByRole('button', { name: 'Delete List' }).locator('xpath=..')
|
|
const item = (page: Page, name: string): Locator =>
|
|
page.locator('.packing-item-row').filter({ hasText: name }).first()
|
|
/** The only item of the list the first guide builds; its name changes mid-guide. */
|
|
const onlyRow = (page: Page): Locator => cat(page, NEW_LIST).locator('.packing-item-row').first()
|
|
/** An item's own ⋯, which holds Move to List, Sharing, Rename and Delete. */
|
|
const rowMenu = (page: Page, name: string): Locator => item(page, name).locator('.packing-row-overflow button')
|
|
/** The open item menu; Sharing is a whole line in it. */
|
|
const rowMenuSharing = (page: Page): Locator =>
|
|
page.locator('.trek-menu-enter').getByRole('button', { name: /^Sharing/ })
|
|
/** The name dialog that Add list and Save as template open. */
|
|
const nameDialog = (page: Page, confirm: string): Locator => page.getByRole('button', { name: confirm, exact: true })
|
|
/** The sharing dropdown is portalled to <body>, so the hint's parent is the card itself. */
|
|
const shareMenu = (page: Page): Locator =>
|
|
page.getByText('In the group pool, visible to everyone').locator('xpath=ancestor::div[1]')
|
|
/** Its click-catcher, the only way back out of the menu once a name is ticked. */
|
|
const shareOverlay = (page: Page): Locator => page.locator('div[role="presentation"][style*="z-index: 1099"]').last()
|
|
/** The bulk-import dialog, a DialogShell whose head band carries its title. */
|
|
const importCard = (page: Page): Locator =>
|
|
page.getByRole('dialog').filter({ has: page.getByText('Import Packing List', { exact: true }) })
|
|
/**
|
|
* The bag picker of a row and the member picker of a bag both hang off the
|
|
* body now, so they are found by their caption rather than inside the row.
|
|
*/
|
|
const bagPicker = (page: Page): Locator => page.locator('.trek-menu-enter').filter({ hasText: 'Bags' }).last()
|
|
const bagMemberPicker = (page: Page): Locator => page.locator('.trek-menu-enter').filter({ hasText: 'Assign members' }).last()
|
|
/** The calendar a date field opens, a portal of its own. */
|
|
const datePicker = (page: Page): Locator => page.getByRole('dialog', { name: 'Date picker' })
|
|
/** The Export button's menu: print, Markdown and CSV. */
|
|
const exportMenu = (page: Page): Locator => page.getByRole('menu')
|
|
/** The printable page inside the preview, a srcdoc frame of its own. */
|
|
const printFrame = (page: Page) => page.frameLocator('iframe[title^="Packing List"]')
|
|
/** The Bags card beside the lists. Total weight is a span in its foot band. */
|
|
const bagSidebar = (page: Page): Locator =>
|
|
page.getByText('Total weight', { exact: true }).locator('xpath=ancestor::div[2]')
|
|
/** The detail pane on the right; its header reads Task. */
|
|
const todoPane = (page: Page): Locator => page.getByText('Task', { exact: true }).locator('xpath=ancestor::div[2]')
|
|
/** A task row is a div with role=button whose name starts with the task's own. */
|
|
const task = (page: Page, name: string): Locator =>
|
|
page.getByRole('button', { name: new RegExp(`^${name}`) }).first()
|
|
const sidebarFilter = (page: Page, name: string): Locator =>
|
|
page.getByRole('button', { name: new RegExp(`^${name}`) })
|
|
|
|
const only = (target: (p: Page) => Locator) => ({ target })
|
|
|
|
// ── Getting there ────────────────────────────────────────────────────────────
|
|
|
|
/** The tab id in the address is the legacy 'listen'; the tab itself reads Lists. */
|
|
async function openLists(page: Page): Promise<void> {
|
|
await openTrip(page, { tab: 'listen' })
|
|
await expect(page.getByRole('button', { name: /^Packing List/ })).toBeVisible({ timeout: 30_000 })
|
|
await settle(page)
|
|
}
|
|
|
|
/**
|
|
* The sub-tab is remembered in sessionStorage, which Playwright never restores,
|
|
* so every guide opens on Packing List and the to-do ones switch over.
|
|
*/
|
|
async function openTodos(page: Page): Promise<void> {
|
|
await openLists(page)
|
|
await page.getByRole('button', { name: /^To-Do/ }).click()
|
|
await expect(page.getByRole('button', { name: 'Add new task' })).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
}
|
|
|
|
// ── Putting the seed back ────────────────────────────────────────────────────
|
|
|
|
interface PackingRow {
|
|
id: number
|
|
name: string
|
|
category: string | null
|
|
}
|
|
|
|
async function packingItems(page: Page): Promise<PackingRow[]> {
|
|
const { tripId } = seededTrip()
|
|
const res = await page.request.get(`/api/trips/${tripId}/packing`)
|
|
const body = (await res.json()) as { items?: PackingRow[] }
|
|
return body.items ?? []
|
|
}
|
|
|
|
async function deleteItems(page: Page, match: (row: PackingRow) => boolean): Promise<void> {
|
|
const { tripId } = seededTrip()
|
|
for (const row of (await packingItems(page)).filter(match)) {
|
|
await page.request.delete(`/api/trips/${tripId}/packing/${row.id}`)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Re-creates the three Documents items the guide really deleted, then writes
|
|
* the seed's order back: without it the re-created rows sort last, the
|
|
* Documents card slides to the end of the two-column grid, and every later
|
|
* guide's picture changes.
|
|
*/
|
|
async function restoreDocuments(page: Page): Promise<void> {
|
|
const { tripId } = seededTrip()
|
|
const present = await packingItems(page)
|
|
for (const name of DOCUMENTS) {
|
|
if (present.some(row => row.name === name)) continue
|
|
await page.request.post(`/api/trips/${tripId}/packing`, { data: { name, category: 'Documents', visibility: 'common' } })
|
|
}
|
|
const after = await packingItems(page)
|
|
const orderedIds = SEED_ORDER.map(name => after.find(row => row.name === name)?.id).filter((id): id is number => id !== undefined)
|
|
await page.request.put(`/api/trips/${tripId}/packing/reorder`, { data: { orderedIds } })
|
|
}
|
|
|
|
async function deleteTemplate(page: Page, name: string): Promise<void> {
|
|
const res = await page.request.get('/api/admin/packing-templates')
|
|
const body = (await res.json()) as { templates?: { id: number; name: string }[] }
|
|
for (const template of (body.templates ?? []).filter(row => row.name === name)) {
|
|
await page.request.delete(`/api/admin/packing-templates/${template.id}`)
|
|
}
|
|
}
|
|
|
|
async function deleteTodo(page: Page, name: string): Promise<void> {
|
|
const { tripId } = seededTrip()
|
|
const res = await page.request.get(`/api/trips/${tripId}/todo`)
|
|
const body = (await res.json()) as { items?: { id: number; name: string }[] }
|
|
for (const row of (body.items ?? []).filter(x => x.name === name)) {
|
|
await page.request.delete(`/api/trips/${tripId}/todo/${row.id}`)
|
|
}
|
|
}
|
|
|
|
async function unassignTodo(page: Page, name: string): Promise<void> {
|
|
const { tripId } = seededTrip()
|
|
const res = await page.request.get(`/api/trips/${tripId}/todo`)
|
|
const body = (await res.json()) as { items?: { id: number; name: string }[] }
|
|
const row = (body.items ?? []).find(x => x.name === name)
|
|
if (row) await page.request.put(`/api/trips/${tripId}/todo/${row.id}`, { data: { assigned_user_id: null } })
|
|
}
|
|
|
|
// ── Scripts ──────────────────────────────────────────────────────────────────
|
|
|
|
const SCRIPTS: Record<string, GuideScript> = {
|
|
'packing-categories': {
|
|
guide: guide('packing-categories'),
|
|
start: openLists,
|
|
steps: [
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Add list' }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Add list' }).click()
|
|
const field = p.getByPlaceholder('List name (e.g. Clothing)')
|
|
await typeInto(p, field, NEW_LIST)
|
|
await nameDialog(p, 'Add').click()
|
|
await expect(cat(p, NEW_LIST)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => cat(p, NEW_LIST).getByRole('button', { name: 'Add item' }),
|
|
act: async p => {
|
|
await cat(p, NEW_LIST).getByRole('button', { name: 'Add item' }).click()
|
|
const field = p.getByPlaceholder('Item name...')
|
|
await typeInto(p, field, FIRST_ITEM)
|
|
// Enter renames the list's '...' row rather than adding a second one,
|
|
// and leaves the field open; Escape is how it closes.
|
|
await field.press('Enter')
|
|
await expect(item(p, FIRST_ITEM)).toBeVisible({ timeout: 20_000 })
|
|
await field.press('Escape')
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => { await onlyRow(p).hover() },
|
|
// A click on the name renames it; the row has no pencil of its own.
|
|
target: p => onlyRow(p).getByRole('button', { name: FIRST_ITEM }),
|
|
act: async p => {
|
|
await onlyRow(p).getByRole('button', { name: FIRST_ITEM }).click()
|
|
// While editing, the name is the row's first input; the quantity and
|
|
// the weight come after it.
|
|
const field = onlyRow(p).locator('input').first()
|
|
await typeInto(p, field, RENAMED_ITEM)
|
|
await field.press('Enter')
|
|
await expect(item(p, RENAMED_ITEM)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => catHeader(p, NEW_LIST).locator('button:has(svg.lucide-user-plus)'),
|
|
act: async p => {
|
|
const plus = catHeader(p, NEW_LIST).locator('button:has(svg.lucide-user-plus)')
|
|
await plus.click()
|
|
await catHeader(p, NEW_LIST).getByRole('button', { name: MEMBER }).click()
|
|
await expect(catHeader(p, NEW_LIST).locator('.assignee-chip')).toHaveCount(1, { timeout: 20_000 })
|
|
await plus.click()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await catMenu(p, NEW_LIST).click()
|
|
await expect(p.getByRole('button', { name: 'Delete List' })).toBeVisible()
|
|
await beat(p, 300)
|
|
},
|
|
target: catMenuCard,
|
|
// The pointer rests on the three dots that opened it, not on an entry.
|
|
// Moved by coordinates: the menu's click-catcher covers the button.
|
|
hover: async p => {
|
|
const b = await catMenu(p, NEW_LIST).boundingBox()
|
|
if (b) await p.mouse.move(b.x + b.width / 2, b.y + b.height / 2)
|
|
},
|
|
act: async p => {
|
|
// The menu sits over a full-viewport catcher; a click in the corner
|
|
// closes it without deleting the list the picture was just taken of.
|
|
await p.mouse.click(20, VIEWPORT.height - 40)
|
|
await expect(p.getByRole('button', { name: 'Delete List' })).toHaveCount(0)
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: async p => {
|
|
const { tripId } = seededTrip()
|
|
await deleteItems(p, row => row.category === NEW_LIST)
|
|
await p.request.put(`/api/trips/${tripId}/packing/category-assignees/${encodeURIComponent(NEW_LIST)}`, { data: { user_ids: [] } })
|
|
},
|
|
},
|
|
'check-off-packing': {
|
|
guide: guide('check-off-packing'),
|
|
start: openLists,
|
|
steps: [
|
|
{
|
|
// The grip is a div, so the tick box is the row's first button.
|
|
target: p => item(p, 'Passport').getByRole('button').first(),
|
|
act: async p => {
|
|
await item(p, 'Passport').getByRole('button').first().click()
|
|
await expect(item(p, 'Passport').locator('.packing-check')).toHaveAttribute('aria-pressed', 'true', { timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
// The count and the percentage, with the bar beside them: the whole card is
|
|
// wider than any frame and would lose both at its edges.
|
|
only(p => p.getByText('/9', { exact: true }).locator('xpath=ancestor::div[2]')),
|
|
{
|
|
prepare: async p => {
|
|
await catMenu(p, 'Documents').click()
|
|
await expect(p.getByRole('button', { name: 'Check All', exact: true })).toBeVisible()
|
|
await beat(p, 300)
|
|
},
|
|
target: p => p.getByRole('button', { name: 'Check All', exact: true }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Check All', exact: true }).click()
|
|
await expect(cat(p, 'Documents').getByText('3/3', { exact: true })).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Open', exact: true }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Open', exact: true }).click()
|
|
await expect(p.getByText('Documents', { exact: true })).toHaveCount(0, { timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => p.getByRole('button', { name: CLEAR_CHECKED }),
|
|
act: async p => {
|
|
// A native window.confirm, which Playwright dismisses unless something
|
|
// accepts it first. The browser's own dialog cannot be pictured, so
|
|
// the step shows the button and the state it leaves behind.
|
|
p.once('dialog', d => { void d.accept() })
|
|
await p.getByRole('button', { name: CLEAR_CHECKED }).click()
|
|
await expect(p.getByRole('button', { name: CLEAR_CHECKED })).toHaveCount(0, { timeout: 30_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: restoreDocuments,
|
|
},
|
|
'apply-packing-template': {
|
|
guide: guide('apply-packing-template'),
|
|
start: openLists,
|
|
steps: [
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Apply template' }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Apply template' }).click()
|
|
await expect(p.locator('.trek-menu-enter').last()).toBeVisible()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => p.locator('.trek-menu-enter').last(),
|
|
act: async p => {
|
|
await p.locator('.trek-menu-enter').last().getByRole('button', { name: new RegExp(`^${TEMPLATE.name}`) }).click()
|
|
await expect(cat(p, TEMPLATE.category)).toBeVisible({ timeout: 30_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
only(p => p.getByRole('button', { name: /^Shared/ })),
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Save as template' }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Save as template' }).click()
|
|
const field = p.getByPlaceholder('Template name')
|
|
await typeInto(p, field, SAVED_TEMPLATE)
|
|
await nameDialog(p, 'Save').click()
|
|
await expect(p.getByText('Packing list saved as template')).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: async p => {
|
|
await deleteItems(p, row => TEMPLATE.items.includes(row.name))
|
|
await deleteTemplate(p, SAVED_TEMPLATE)
|
|
},
|
|
},
|
|
'import-packing-list': {
|
|
guide: guide('import-packing-list'),
|
|
start: openLists,
|
|
steps: [
|
|
{
|
|
// An icon at the right end of the bar, named Import by its label and tooltip.
|
|
target: p => p.getByRole('button', { name: 'Import', exact: true }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Import', exact: true }).click()
|
|
await expect(importCard(p)).toBeVisible()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
// The step's text points at the grey sample, which is the textarea's
|
|
// placeholder: it is only on screen while the box is empty, so the lines
|
|
// are typed after the picture, not before it.
|
|
target: importCard,
|
|
act: async p => {
|
|
await typeInto(p, importCard(p).locator('textarea'), IMPORT_LINES)
|
|
await expect(importCard(p).locator('textarea')).toHaveValue(IMPORT_LINES, { timeout: 20_000 })
|
|
// Out of the box again, or its dark focus ring reads as a second ring
|
|
// in the next two pictures.
|
|
await importCard(p).locator('textarea').blur()
|
|
await settle(p)
|
|
},
|
|
},
|
|
// In the dialog's footer, on the left. Clicking it would open the operating
|
|
// system's file chooser, which is not part of the picture; the button is
|
|
// shown, not pressed.
|
|
only(p => importCard(p).getByRole('button', { name: 'Load CSV/TXT/MD' })),
|
|
{
|
|
target: p => importCard(p).getByRole('button', { name: /^Import \d+$/ }),
|
|
act: async p => {
|
|
await importCard(p).getByRole('button', { name: /^Import \d+$/ }).click()
|
|
await expect(importCard(p)).toHaveCount(0, { timeout: 30_000 })
|
|
await expect(item(p, 'Sunscreen')).toBeVisible({ timeout: 30_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: p => deleteItems(p, row => IMPORTED.includes(row.name)),
|
|
},
|
|
'export-packing-list': {
|
|
guide: guide('export-packing-list'),
|
|
start: openLists,
|
|
steps: [
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Export', exact: true }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Export', exact: true }).click()
|
|
await expect(exportMenu(p)).toBeVisible()
|
|
await settle(p)
|
|
},
|
|
},
|
|
// The two file entries download at once; the step shows them, it does not press them.
|
|
only(exportMenu),
|
|
{
|
|
target: p => exportMenu(p).getByRole('menuitem', { name: 'Print or save as PDF' }),
|
|
act: async p => {
|
|
await exportMenu(p).getByRole('menuitem', { name: 'Print or save as PDF' }).click()
|
|
await expect(printFrame(p).locator('h1')).toBeVisible({ timeout: 15_000 })
|
|
// The page carries the app's own Poppins; the result picture waits for it.
|
|
await printFrame(p).locator('body').evaluate(async () => { await document.fonts.ready })
|
|
await settle(p)
|
|
},
|
|
},
|
|
// Pressing it opens the operating system's print dialog, which is not part
|
|
// of the picture; the button is shown, not pressed. The result picture is the
|
|
// preview itself.
|
|
only(p => p.getByRole('button', { name: 'Print or save as PDF' })),
|
|
],
|
|
cleanup: async p => {
|
|
await p.getByRole('button', { name: 'Close', exact: true }).click()
|
|
},
|
|
},
|
|
'share-packing-item': {
|
|
guide: guide('share-packing-item'),
|
|
start: openLists,
|
|
steps: [
|
|
{
|
|
target: p => p.getByRole('button', { name: /^My list/ }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: /^My list/ }).click()
|
|
await expect(p.getByText('No items match this filter')).toBeVisible({ timeout: 20_000 })
|
|
await p.getByRole('button', { name: /^Shared/ }).click()
|
|
await expect(item(p, SHARED_ITEM)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await item(p, SHARED_ITEM).hover()
|
|
await rowMenu(p, SHARED_ITEM).click()
|
|
await expect(rowMenuSharing(p)).toBeVisible()
|
|
await beat(p, 300)
|
|
},
|
|
target: rowMenuSharing,
|
|
act: async p => {
|
|
await rowMenuSharing(p).click()
|
|
await expect(shareMenu(p)).toBeVisible()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: shareMenu,
|
|
act: async p => {
|
|
await shareMenu(p).getByRole('button', { name: /^Personal/ }).click()
|
|
await expect(item(p, SHARED_ITEM)).toHaveCount(0, { timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => p.getByRole('button', { name: /^My list/ }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: /^My list/ }).click()
|
|
await expect(item(p, SHARED_ITEM)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await item(p, SHARED_ITEM).hover()
|
|
await rowMenu(p, SHARED_ITEM).click()
|
|
await rowMenuSharing(p).click()
|
|
await expect(shareMenu(p)).toBeVisible()
|
|
await beat(p, 300)
|
|
},
|
|
target: p => shareMenu(p).getByRole('button', { name: MEMBER }),
|
|
act: async p => {
|
|
await shareMenu(p).getByRole('button', { name: MEMBER }).click()
|
|
// Ticking a name leaves the menu open on purpose; its catcher closes it,
|
|
// and the item menu under it has one of its own.
|
|
await shareOverlay(p).click({ position: { x: 5, y: 5 } })
|
|
await p.mouse.click(20, VIEWPORT.height - 40)
|
|
await expect(p.locator('.trek-menu-enter')).toHaveCount(0)
|
|
await expect(item(p, SHARED_ITEM).getByLabel('shared with 1')).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: async p => {
|
|
const { tripId } = seededTrip()
|
|
const row = (await packingItems(p)).find(x => x.name === SHARED_ITEM)
|
|
if (row) {
|
|
await p.request.put(`/api/trips/${tripId}/packing/${row.id}/sharing`, { data: { visibility: 'common', recipient_ids: [] } })
|
|
}
|
|
},
|
|
},
|
|
'packing-bags': {
|
|
guide: guide('packing-bags'),
|
|
start: openLists,
|
|
steps: [
|
|
{
|
|
// The weight field's placeholder really is a dash: it is the app's own
|
|
// string, not prose, so it is matched exactly as rendered.
|
|
target: p => item(p, BAG_ITEM).getByPlaceholder('\u2014'),
|
|
act: async p => {
|
|
const field = item(p, BAG_ITEM).getByPlaceholder('\u2014')
|
|
await typeInto(p, field, '620')
|
|
await expect(field).toHaveValue('620', { timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => { await item(p, BAG_ITEM).hover() },
|
|
// The circle is dashed with a parcel in it while the item is in no bag.
|
|
target: p => item(p, BAG_ITEM).locator('button:has(svg.lucide-package)'),
|
|
act: async p => {
|
|
await item(p, BAG_ITEM).locator('button:has(svg.lucide-package)').click()
|
|
await expect(bagPicker(p).getByRole('button', { name: 'Add bag' })).toBeVisible()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => bagPicker(p).getByRole('button', { name: 'Add bag' }),
|
|
act: async p => {
|
|
await bagPicker(p).getByRole('button', { name: 'Add bag' }).click()
|
|
const field = bagPicker(p).getByPlaceholder('Bag name...')
|
|
await typeInto(p, field, BAG)
|
|
await field.press('Enter')
|
|
await expect(bagSidebar(p)).toBeVisible({ timeout: 30_000 })
|
|
await expect(bagPicker(p)).toHaveCount(0)
|
|
await settle(p)
|
|
},
|
|
},
|
|
only(bagSidebar),
|
|
{
|
|
target: p => bagSidebar(p).getByRole('button', { name: 'Set limit' }),
|
|
act: async p => {
|
|
await bagSidebar(p).getByRole('button', { name: 'Set limit' }).click()
|
|
// Entered in kilograms, stored in grams.
|
|
const field = bagSidebar(p).locator('input[aria-label="Weight limit"]')
|
|
await typeInto(p, field, '8')
|
|
await field.press('Enter')
|
|
await expect(bagSidebar(p).getByText('/ 8.0 kg')).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
// The card's member picker is the dashed plus beside the bag's name; the
|
|
// column's other plus, + Bags in its head, adds a bag.
|
|
target: p => bagSidebar(p).locator('button[style*="dashed"]').first(),
|
|
act: async p => {
|
|
await bagSidebar(p).locator('button[style*="dashed"]').first().click()
|
|
await bagMemberPicker(p).getByRole('button', { name: MEMBER }).click()
|
|
// The picker closes on a click anywhere beside it.
|
|
await p.mouse.click(20, VIEWPORT.height - 40)
|
|
await expect(bagSidebar(p).getByRole('button', { name: MEMBER })).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: async p => {
|
|
const { tripId } = seededTrip()
|
|
const res = await p.request.get(`/api/trips/${tripId}/packing/bags`)
|
|
const body = (await res.json()) as { bags?: { id: number; name: string }[] }
|
|
for (const bag of (body.bags ?? []).filter(x => x.name === BAG)) {
|
|
// bag_id is ON DELETE SET NULL, so the item is freed with it.
|
|
await p.request.delete(`/api/trips/${tripId}/packing/bags/${bag.id}`)
|
|
}
|
|
const row = (await packingItems(p)).find(x => x.name === BAG_ITEM)
|
|
if (row) await p.request.put(`/api/trips/${tripId}/packing/${row.id}`, { data: { weight_grams: null } })
|
|
},
|
|
},
|
|
'create-todo': {
|
|
guide: guide('create-todo'),
|
|
start: openTodos,
|
|
steps: [
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Add new task' }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Add new task' }).click()
|
|
await expect(modal(p).getByPlaceholder('Task name')).toBeVisible()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await typeInto(p, modal(p).getByPlaceholder('Task name'), NEW_TASK)
|
|
await typeInto(p, modal(p).getByPlaceholder('Description (optional)'), NEW_TASK_NOTE)
|
|
// Out of the field, so its dark focus border does not read as a second ring.
|
|
await modal(p).getByPlaceholder('Description (optional)').blur()
|
|
await settle(p)
|
|
},
|
|
// The name is typed into the dialog's head band, where Task name stands.
|
|
target: p => modal(p).getByPlaceholder('Task name'),
|
|
},
|
|
{
|
|
target: p => modal(p).getByRole('button', { name: 'No list' }),
|
|
act: async p => {
|
|
await modal(p).getByRole('button', { name: 'No list' }).click()
|
|
// The select's list is portalled to <body>, outside the dialog.
|
|
await p.getByRole('button', { name: TASK_LIST, exact: true }).click()
|
|
await expect(modal(p).getByRole('button', { name: TASK_LIST })).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => modal(p).getByRole('button', { name: 'P1', exact: true }).locator('xpath=..'),
|
|
act: async p => {
|
|
await modal(p).getByRole('button', { name: 'P2', exact: true }).click()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
// Exact: the keyboard button beside it is "Enter date manually", which a
|
|
// loose name match also finds.
|
|
await modal(p).getByRole('button', { name: 'Date', exact: true }).click()
|
|
await expect(datePicker(p)).toBeVisible()
|
|
// The calendar opens on the picture day's month, the last of the trip,
|
|
// and four days later can already be in the next one.
|
|
if (!(await datePicker(p).getByRole('button', { name: DUE_DAY }).isVisible())) {
|
|
await datePicker(p).getByRole('button', { name: 'Next month' }).click()
|
|
}
|
|
await expect(datePicker(p).getByRole('button', { name: DUE_DAY })).toBeVisible()
|
|
await beat(p, 300)
|
|
},
|
|
target: datePicker,
|
|
// The pointer on the day about to be picked, not on whatever the middle is.
|
|
hover: async p => { await datePicker(p).getByRole('button', { name: DUE_DAY }).hover() },
|
|
act: async p => {
|
|
await datePicker(p).getByRole('button', { name: DUE_DAY }).click()
|
|
await modal(p).getByRole('button', { name: 'Unassigned' }).click()
|
|
await p.getByRole('button', { name: ASSIGNEE }).click()
|
|
await expect(modal(p).getByRole('button', { name: ASSIGNEE })).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => modal(p).getByRole('button', { name: 'Create task' }),
|
|
act: async p => {
|
|
await modal(p).getByRole('button', { name: 'Create task' }).click()
|
|
await expect(p.locator('.trek-modal-backdrop')).toHaveCount(0, { timeout: 30_000 })
|
|
await expect(task(p, NEW_TASK)).toBeVisible({ timeout: 30_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: p => deleteTodo(p, NEW_TASK),
|
|
},
|
|
'todo-filters': {
|
|
guide: guide('todo-filters'),
|
|
start: openTodos,
|
|
steps: [
|
|
{
|
|
target: p => sidebarFilter(p, 'Overdue'),
|
|
act: async p => {
|
|
await sidebarFilter(p, 'Overdue').click()
|
|
await expect(p.getByRole('heading', { name: 'Overdue' })).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => sidebarFilter(p, OTHER_TASK_LIST),
|
|
act: async p => {
|
|
await sidebarFilter(p, OTHER_TASK_LIST).click()
|
|
await expect(p.getByRole('heading', { name: OTHER_TASK_LIST })).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await sidebarFilter(p, 'All').click()
|
|
await settle(p)
|
|
},
|
|
target: p => p.getByRole('button', { name: 'Priority', exact: true }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Priority', exact: true }).click()
|
|
await expect(p.locator('div[role="button"][data-no-press]').first()).toContainText(EDITED_TASK, { timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => task(p, EDITED_TASK),
|
|
act: async p => {
|
|
await task(p, EDITED_TASK).click()
|
|
await expect(todoPane(p)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await todoPane(p).getByRole('button', { name: 'Unassigned' }).click()
|
|
await p.getByRole('button', { name: ASSIGNEE }).click()
|
|
await settle(p)
|
|
},
|
|
target: p => todoPane(p).getByRole('button', { name: 'Save changes' }),
|
|
act: async p => {
|
|
await todoPane(p).getByRole('button', { name: 'Save changes' }).click()
|
|
// The row names its assignee as an avatar, labelled with the name.
|
|
await expect(task(p, EDITED_TASK).getByLabel(ASSIGNEE)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: p => unassignTodo(p, EDITED_TASK),
|
|
},
|
|
}
|
|
|
|
// ── Run ───────────────────────────────────────────────────────────────────────
|
|
|
|
test.describe.configure({ mode: 'serial' })
|
|
|
|
test.beforeAll(async ({ request }) => {
|
|
await ensureListsFixtures(request)
|
|
})
|
|
|
|
test('every registered lists guide has a script, and only those', async () => {
|
|
expect(Object.keys(SCRIPTS).sort()).toEqual([...tripListsContext.guides].sort())
|
|
})
|
|
|
|
test('hero: trip-lists', async ({ page }) => {
|
|
await page.setViewportSize(VIEWPORT)
|
|
await captureHero(page, tripListsContext.id, openLists)
|
|
})
|
|
|
|
for (const id of tripListsContext.guides) {
|
|
test(`pictures: ${id}`, async ({ page }) => {
|
|
await page.setViewportSize(VIEWPORT)
|
|
await captureGuide(page, SCRIPTS[id])
|
|
})
|
|
}
|