mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-23 15:36:33 +00:00
Maurice
31859651d7
Every help screen checked against the v5 redesign. Tours is documented for the first time, as a screen of its own with twelve screens under it, and notifications get help of their own. All pictures are taken again on a realistic demo trip, with short loops where a still cannot show the motion. The English is plain and every language is written naturally rather than word for word. The switcher shows two levels at most, a screen's overview lists its sub-screens as cards above its guides, each wiki page is linked once, and the help sidebar is wider. Fixes found along the way: Save to Collection keeps a tour's route, a track dropped on the places column opens the Tours import, tour Share on desktop, the unsaved tour draft lives on the account, a route click no longer adds an end point, Trip places leaves the trip's tours out, Escape closes a stage's day menu, confirms before destructive deletes, DWD warnings sharing one id kept apart, a booking's date moves with it, and smaller fixes across notifications, bookings, the day plan, stays, Atlas, Collections, Vacay and the admin screens.
685 lines
33 KiB
TypeScript
685 lines
33 KiB
TypeScript
import { test, expect, type Locator, type Page } from '@playwright/test'
|
|
import { captureGuide, captureHero, beat, typeInto, settle, VIEWPORT, type GuideScript } from './guide'
|
|
import { ordinal, short } from '../dates'
|
|
import { SEED_CHAT } from '../screenshots/seed'
|
|
import { seededTrip, ensureCollabFixtures, COLLAB_SPARE_POLL, WHATS_NEXT_STOPS } from './fixtures'
|
|
import { openTrip } from './trip-shared'
|
|
import { MANAGE_NOTE, MANAGE_NOTE_EDIT, ensureManageNote, removeNotes, restoreNoteCategories } from './fixtures-trip-collab'
|
|
import { tripCollabContext, tripCollabGuides } from '../../src/help/contexts/tripCollab'
|
|
import type { HelpGuide } from '../../src/help/types'
|
|
|
|
/**
|
|
* Actions for the Collab tab of a trip, keyed by the ids in
|
|
* `src/help/contexts/tripCollab.ts`. They run on the seeded "Autumn in Japan",
|
|
* whose collab addon already holds three notes, two polls and a seven message
|
|
* conversation; `ensureCollabFixtures` adds the shared links, a throwaway poll
|
|
* for the one guide that closes a poll for good, and the two upcoming stops
|
|
* What's Next needs. What a guide writes it takes away again in `cleanup`, with
|
|
* one deliberate exception: a deleted chat message cannot be undeleted, which is
|
|
* why `trip-chat` is the last guide of the screen. The note `manage-notes` works
|
|
* on is its own (`fixtures-trip-collab.ts`), written at its start and deleted by
|
|
* its last step; `note-categories` renames and recolours seeded categories and
|
|
* puts them back in `cleanup`.
|
|
*/
|
|
|
|
const guide = (id: string): HelpGuide => {
|
|
const g = tripCollabGuides.find(x => x.id === id)
|
|
if (!g) throw new Error(`no registered guide "${id}"`)
|
|
return g
|
|
}
|
|
|
|
const NOTE = {
|
|
title: 'Luggage forwarding',
|
|
body: 'Takkyubin from the hotel front desk, **before 11:00**, and the bags are in Kyoto the next afternoon.\n\n- One bag per person\n- About 2000 JPY a bag',
|
|
category: 'Transport',
|
|
website: 'https://www.global-yamato.com/en/hc/',
|
|
}
|
|
/** An .example host never resolves, so the chip shows its own glyph offline too. */
|
|
const LINK = { title: 'Hakone ryokan booking', url: 'https://www.hakone-ryokan.example/booking' }
|
|
const POLL = {
|
|
// Plain text on purpose: a bold run in the question would wrap the paragraph
|
|
// in one more element and move the card away from `pollCard`'s ancestor depth.
|
|
question: 'Which evening do we keep for the kaiseki dinner?',
|
|
options: [`${short(-5).split(',')[0]} ${ordinal(-5)}, after Fushimi Inari`, `${short(-4).split(',')[0]} ${ordinal(-4)}, after Arashiyama`, 'Either, decide on the day'],
|
|
}
|
|
/** The seeded poll nobody has voted on yet. */
|
|
const SEEDED_POLL = 'Ryokan or city hotel in Hakone?'
|
|
const CHAT = {
|
|
mine: 'Ryokan check-in is 15:00, so let us aim for the 13:10 train out of Kyoto.',
|
|
/** Typed before the picker opens, so the picture shows the emoji being added to it. */
|
|
emoji: 'Two weeks to go ',
|
|
flag: '🎌',
|
|
theirs: 'Drop bags. I want to be at Senso-ji before the crowds.',
|
|
answer: 'Agreed, bags at the hotel first, then Asakusa.',
|
|
reactTo: SEED_CHAT.teamlab,
|
|
reaction: '👍',
|
|
}
|
|
|
|
// ── Locators ─────────────────────────────────────────────────────────────────
|
|
|
|
/**
|
|
* One of the five cards of the tab, found from the name in its head band. The
|
|
* head band is `CollabPanelHead`, whose name is an h3 set in small capitals, so
|
|
* the match ignores case; the card is the nearest rounded ancestor (the cards
|
|
* inside a panel, notes and polls, are never an ancestor of that heading).
|
|
*/
|
|
const panel = (page: Page, name: RegExp) =>
|
|
page.getByRole('heading', { name }).locator('xpath=ancestor::div[contains(@class,"rounded-2xl")][1]')
|
|
const notesPanel = (page: Page) => panel(page, /^Notes$/i)
|
|
const pollsPanel = (page: Page) => panel(page, /^Polls$/i)
|
|
const linksPanel = (page: Page) => panel(page, /^Links$/i)
|
|
const nextPanel = (page: Page) => panel(page, /^What.s Next$/i)
|
|
|
|
const chatBox = (page: Page) => page.getByPlaceholder('Type a message...')
|
|
/** The row that holds the emoji button, the image button, the box and the arrow. */
|
|
const composer = (page: Page) => chatBox(page).locator('xpath=..')
|
|
/**
|
|
* The quoted message above the box while a reply is being written. With no reply
|
|
* pending the same position is the composer row itself, which is what the step
|
|
* after the send asserts against.
|
|
*/
|
|
const replyQuote = (page: Page) => chatBox(page).locator('xpath=../..').locator('> div').first()
|
|
/** The send button and the emoji button carry no text and no label at all. */
|
|
const sendButton = (page: Page) => page.locator('button:has(svg.lucide-arrow-up)')
|
|
const emojiButton = (page: Page) => page.locator('button:has(svg.lucide-smile)')
|
|
/** The emoji picker is a portal; its three category tabs are the sure thing in it. */
|
|
const emojiPicker = (page: Page) => page.getByRole('button', { name: 'Travel', exact: true }).locator('xpath=../..')
|
|
/** The right-click menu of eight reactions: a 4x2 grid in a portal of its own. */
|
|
const reactionMenu = (page: Page) => page.locator('div[style*="repeat(4"]').last()
|
|
/** One message, by the relative wrapper that also carries its Reply and Delete. */
|
|
const bubble = (page: Page, text: string) =>
|
|
page.getByText(text).first().locator('xpath=ancestor::div[contains(@style,"position: relative")][1]')
|
|
/**
|
|
* Put the pointer on a message's Reply or Delete. The row holding them is
|
|
* `pointer-events: none` until its own bubble is hovered, and it sits at
|
|
* `top: -14px`, outside that bubble's box: hovering the button alone would land
|
|
* on whatever is behind it. `captureGuide` scrolls the target to the middle of
|
|
* the frame between `prepare` and the shot, and that scroll can take the bubble
|
|
* out from under the pointer, so the hover is made again here, bubble first.
|
|
*/
|
|
const hoverMessageAction = (text: string, name: 'Reply' | 'Delete') => async (page: Page): Promise<void> => {
|
|
await page.getByText(text).first().hover()
|
|
await beat(page, 300)
|
|
await bubble(page, text).getByRole('button', { name }).hover()
|
|
}
|
|
|
|
/**
|
|
* The three editors are DialogShell panels (`role="dialog"`), told apart by a
|
|
* field only each of them has. The whole panel is the dialog: the head band
|
|
* with the title typed into it, the body, and the footer with the buttons.
|
|
*/
|
|
const noteDialog = (page: Page) => page.getByRole('dialog').filter({ has: page.getByPlaceholder('Write something...') })
|
|
/** The full view of a note (Expand): a dialog without a text box, holding the note's title. */
|
|
const noteView = (page: Page, title: string) =>
|
|
page.getByRole('dialog').filter({ hasText: title }).filter({ hasNot: page.getByPlaceholder('Write something...') })
|
|
const categoryDialog = (page: Page) => page.getByRole('dialog').filter({ has: page.getByPlaceholder('New category...') })
|
|
/**
|
|
* One row of Manage Categories, from the button that carries its name. Tooltip
|
|
* clones its child instead of wrapping it, so the button's parent is the row
|
|
* with the dot, the name, the six swatches and the bin.
|
|
*/
|
|
const categoryRow = (page: Page, name: string) =>
|
|
categoryDialog(page).getByRole('button', { name, exact: true }).locator('xpath=..')
|
|
/** The box a category's name turns into while it is renamed: the dialog's one field without a placeholder. */
|
|
const renameBox = (page: Page) => categoryDialog(page).locator('input:not([placeholder])')
|
|
/** The card's menu is a ContextMenu portal; its items are plain buttons. */
|
|
const noteMenu = (page: Page) => page.getByRole('menu')
|
|
const openNoteMenu = async (page: Page, title: string): Promise<void> => {
|
|
await noteCard(page, title).getByRole('button', { name: 'More options', exact: true }).click()
|
|
await expect(noteMenu(page)).toBeVisible()
|
|
await beat(page, 300)
|
|
}
|
|
/** The Delete note? question: ConfirmDialog has no dialog role, so its panel is found from its heading. */
|
|
const confirmPanel = (page: Page, title: string) =>
|
|
page.getByRole('heading', { name: title, exact: true }).locator('xpath=ancestor::div[@role="presentation"][1]')
|
|
/** The filter row under the Notes head band: All and one pill per category. */
|
|
const categoryPills = (page: Page) => notesPanel(page).getByRole('button', { name: 'All', exact: true }).locator('xpath=..')
|
|
const pollDialog = (page: Page) => page.getByRole('dialog').filter({ has: page.getByPlaceholder('What should we do?') })
|
|
const linkDialog = (page: Page) => page.getByRole('dialog').filter({ has: page.locator('#collab-link-url') })
|
|
/** A field of an editor with the eyebrow label over it: the box's parent. */
|
|
const field = (box: Locator) => box.locator('xpath=..')
|
|
|
|
/** A note card is an article named by the note's title. */
|
|
const noteCard = (page: Page, title: string) => page.getByRole('article', { name: title, exact: true })
|
|
/** A poll card is an article too, without a name: found from its question. */
|
|
const pollCard = (page: Page, question: string) =>
|
|
page.getByRole('article').filter({ has: page.getByText(question, { exact: true }) })
|
|
const linkChip = (page: Page, title: string) => page.locator('.collab-link-chip').filter({ hasText: title })
|
|
/** A What's Next row, from the place name in it: name → details → row. */
|
|
const nextRow = (page: Page, place: string) =>
|
|
nextPanel(page).getByText(place, { exact: true }).locator('xpath=../..')
|
|
|
|
// ── Start and cleanup ────────────────────────────────────────────────────────
|
|
|
|
const start = async (page: Page): Promise<void> => {
|
|
await openTrip(page, { tab: 'collab' })
|
|
// The Collab panel is a lazy chunk: everything below needs it mounted.
|
|
await expect(page.getByRole('button', { name: 'New Poll', exact: true })).toBeVisible({ timeout: 30_000 })
|
|
await settle(page)
|
|
}
|
|
|
|
const collab = (): string => `/api/trips/${seededTrip().tripId}/collab`
|
|
|
|
/** A category added in Manage Categories and used by no note is kept in this browser only. */
|
|
const NEW_CATEGORY = 'Food'
|
|
/** The renamed category and the recoloured one; `cleanup` puts both back. */
|
|
const RENAME = { from: 'Ideas', to: 'Bad weather' }
|
|
const RECOLOUR = { category: 'Accommodation', swatch: 'Amber' }
|
|
const FILTER = 'Transport'
|
|
|
|
async function listOf<T>(page: Page, path: string, key: string): Promise<T[]> {
|
|
const res = await page.request.get(`${collab()}/${path}`)
|
|
const body = (await res.json()) as Record<string, T[] | undefined>
|
|
return body[key] ?? []
|
|
}
|
|
|
|
async function deleteNote(page: Page, title: string): Promise<void> {
|
|
const notes = await listOf<{ id: number; title: string }>(page, 'notes', 'notes')
|
|
for (const note of notes.filter(n => n.title === title)) {
|
|
await page.request.delete(`${collab()}/notes/${note.id}`)
|
|
}
|
|
}
|
|
|
|
async function deleteLink(page: Page, title: string): Promise<void> {
|
|
const links = await listOf<{ id: number; title: string }>(page, 'links', 'links')
|
|
for (const link of links.filter(l => l.title === title)) {
|
|
await page.request.delete(`${collab()}/links/${link.id}`)
|
|
}
|
|
}
|
|
|
|
async function deletePoll(page: Page, question: string): Promise<void> {
|
|
const polls = await listOf<{ id: number; question: string }>(page, 'polls', 'polls')
|
|
for (const poll of polls.filter(p => p.question === question)) {
|
|
await page.request.delete(`${collab()}/polls/${poll.id}`)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Voting for an option you already chose deletes the row, so one call puts the
|
|
* seeded, unvoted poll back the way the next guide expects it.
|
|
*/
|
|
async function resetVote(page: Page, question: string, optionIndex: number): Promise<void> {
|
|
const polls = await listOf<{ id: number; question: string }>(page, 'polls', 'polls')
|
|
const poll = polls.find(p => p.question === question)
|
|
if (poll) await page.request.post(`${collab()}/polls/${poll.id}/vote`, { data: { option_index: optionIndex } })
|
|
}
|
|
|
|
const only = (target: (page: Page) => Locator) => ({ target })
|
|
|
|
// ── Scripts ──────────────────────────────────────────────────────────────────
|
|
|
|
const SCRIPTS: Record<string, GuideScript> = {
|
|
'write-note': {
|
|
guide: guide('write-note'),
|
|
start,
|
|
steps: [
|
|
{
|
|
target: page => notesPanel(page).getByRole('button', { name: 'New Note', exact: true }),
|
|
act: async page => {
|
|
await notesPanel(page).getByRole('button', { name: 'New Note', exact: true }).click()
|
|
await expect(noteDialog(page)).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
// The title is typed into the dialog's head band, under the New Note eyebrow.
|
|
prepare: page => typeInto(page, noteDialog(page).getByRole('textbox', { name: 'Note title' }), NOTE.title),
|
|
target: page => noteDialog(page).getByRole('textbox', { name: 'Note title' }),
|
|
},
|
|
{
|
|
prepare: page => typeInto(page, noteDialog(page).getByPlaceholder('Write something...'), NOTE.body),
|
|
// The Content eyebrow and the box under it.
|
|
target: page => field(noteDialog(page).getByPlaceholder('Write something...')),
|
|
},
|
|
{
|
|
// Picked before the shot, so the pill and the head band already wear its colour.
|
|
prepare: async page => {
|
|
await noteDialog(page).getByRole('button', { name: NOTE.category, exact: true }).click()
|
|
await expect(noteDialog(page).getByRole('button', { name: NOTE.category, exact: true })).toHaveAttribute('aria-pressed', 'true')
|
|
await beat(page, 300)
|
|
},
|
|
// The Category eyebrow and the row of pills: pill, row, field.
|
|
target: page => noteDialog(page).getByRole('button', { name: NOTE.category, exact: true }).locator('xpath=../..'),
|
|
},
|
|
{
|
|
prepare: page => typeInto(page, noteDialog(page).getByPlaceholder('https://...'), NOTE.website),
|
|
target: page => field(noteDialog(page).getByPlaceholder('https://...')),
|
|
},
|
|
{
|
|
target: page => noteDialog(page).getByRole('button', { name: 'Create', exact: true }),
|
|
act: async page => {
|
|
await noteDialog(page).getByRole('button', { name: 'Create', exact: true }).click()
|
|
await expect(noteDialog(page)).toHaveCount(0, { timeout: 15_000 })
|
|
await expect(noteCard(page, NOTE.title)).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
],
|
|
cleanup: page => deleteNote(page, NOTE.title),
|
|
},
|
|
'manage-notes': {
|
|
guide: guide('manage-notes'),
|
|
start: async page => {
|
|
await ensureManageNote(page.request)
|
|
await start(page)
|
|
await expect(noteCard(page, MANAGE_NOTE.title)).toBeVisible({ timeout: 15_000 })
|
|
},
|
|
steps: [
|
|
{
|
|
target: page => noteCard(page, MANAGE_NOTE.title).getByRole('button', { name: 'More options', exact: true }),
|
|
act: async page => {
|
|
await noteCard(page, MANAGE_NOTE.title).getByRole('button', { name: 'More options', exact: true }).click()
|
|
await expect(noteMenu(page)).toBeVisible()
|
|
},
|
|
},
|
|
{
|
|
// The picture is the note opened in full: its text, its Website and Edit at its foot.
|
|
prepare: async page => {
|
|
await noteMenu(page).getByRole('button', { name: 'Expand', exact: true }).click()
|
|
await expect(noteView(page, MANAGE_NOTE.title)).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
target: page => noteView(page, MANAGE_NOTE.title),
|
|
act: async page => {
|
|
await noteView(page, MANAGE_NOTE.title).getByRole('button', { name: 'Close', exact: true }).click()
|
|
await expect(noteView(page, MANAGE_NOTE.title)).toHaveCount(0)
|
|
},
|
|
},
|
|
{
|
|
// The whole menu, like the other menus of the library: Pin is in it, between Expand and Edit.
|
|
prepare: page => openNoteMenu(page, MANAGE_NOTE.title),
|
|
target: noteMenu,
|
|
hover: async page => { await noteMenu(page).getByRole('button', { name: 'Pin', exact: true }).hover() },
|
|
act: async page => {
|
|
await noteMenu(page).getByRole('button', { name: 'Pin', exact: true }).click()
|
|
await expect(notesPanel(page).getByRole('article').first()).toHaveAttribute('aria-label', MANAGE_NOTE.title, { timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: async page => {
|
|
await openNoteMenu(page, MANAGE_NOTE.title)
|
|
await noteMenu(page).getByRole('button', { name: 'Edit', exact: true }).click()
|
|
await expect(noteDialog(page)).toBeVisible()
|
|
await typeInto(page, noteDialog(page).getByPlaceholder('Write something...'), `${MANAGE_NOTE.content}\n${MANAGE_NOTE_EDIT}`)
|
|
await beat(page, 300)
|
|
},
|
|
target: noteDialog,
|
|
hover: async page => { await noteDialog(page).getByRole('button', { name: 'Save', exact: true }).hover() },
|
|
act: async page => {
|
|
await noteDialog(page).getByRole('button', { name: 'Save', exact: true }).click()
|
|
await expect(noteDialog(page)).toHaveCount(0, { timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: async page => {
|
|
await openNoteMenu(page, MANAGE_NOTE.title)
|
|
await noteMenu(page).getByRole('button', { name: 'Delete', exact: true }).click()
|
|
await expect(confirmPanel(page, 'Delete note?')).toBeVisible()
|
|
await beat(page, 300)
|
|
},
|
|
target: page => confirmPanel(page, 'Delete note?'),
|
|
hover: async page => { await confirmPanel(page, 'Delete note?').getByRole('button', { name: 'Delete', exact: true }).hover() },
|
|
act: async page => {
|
|
await confirmPanel(page, 'Delete note?').getByRole('button', { name: 'Delete', exact: true }).click()
|
|
await expect(noteCard(page, MANAGE_NOTE.title)).toHaveCount(0, { timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
],
|
|
// The last step already deleted it; this is for a run that stopped short.
|
|
cleanup: page => removeNotes(page.request, MANAGE_NOTE.title),
|
|
},
|
|
'note-categories': {
|
|
guide: guide('note-categories'),
|
|
start,
|
|
steps: [
|
|
{
|
|
target: page => notesPanel(page).getByRole('button', { name: 'Manage Categories', exact: true }),
|
|
act: async page => {
|
|
await notesPanel(page).getByRole('button', { name: 'Manage Categories', exact: true }).click()
|
|
await expect(categoryDialog(page)).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: page => typeInto(page, categoryDialog(page).getByPlaceholder('New category...'), NEW_CATEGORY),
|
|
// The box and the plus beside it.
|
|
target: page => categoryDialog(page).getByPlaceholder('New category...').locator('xpath=..'),
|
|
act: async page => {
|
|
await categoryDialog(page).getByRole('button', { name: 'New category...', exact: true }).click()
|
|
await expect(categoryRow(page, NEW_CATEGORY)).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
// The name turns into a box on a click; the picture shows the new name typed into it.
|
|
prepare: async page => {
|
|
await categoryDialog(page).getByRole('button', { name: RENAME.from, exact: true }).click()
|
|
await expect(renameBox(page)).toBeFocused()
|
|
await typeInto(page, renameBox(page), RENAME.to)
|
|
await beat(page, 300)
|
|
},
|
|
target: page => renameBox(page).locator('xpath=..'),
|
|
// Hovering the row would be harmless, but a click elsewhere would blur the box and save early.
|
|
hover: async page => { await renameBox(page).hover() },
|
|
act: async page => {
|
|
await renameBox(page).press('Enter')
|
|
await expect(categoryRow(page, RENAME.to)).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
// Another category than the renamed one: a rename and a new colour on the
|
|
// same category in one Save keep only the name (see the bug list).
|
|
prepare: async page => {
|
|
await categoryRow(page, RECOLOUR.category).getByRole('button', { name: RECOLOUR.swatch, exact: true }).click()
|
|
await expect(categoryRow(page, RECOLOUR.category).getByRole('button', { name: RECOLOUR.swatch, exact: true })).toHaveAttribute('aria-pressed', 'true')
|
|
await beat(page, 300)
|
|
},
|
|
target: page => categoryRow(page, RECOLOUR.category),
|
|
hover: async page => { await categoryRow(page, RECOLOUR.category).getByRole('button', { name: RECOLOUR.swatch, exact: true }).hover() },
|
|
},
|
|
{
|
|
target: page => categoryDialog(page).getByRole('button', { name: 'Save', exact: true }),
|
|
act: async page => {
|
|
await categoryDialog(page).getByRole('button', { name: 'Save', exact: true }).click()
|
|
await expect(categoryDialog(page)).toHaveCount(0, { timeout: 15_000 })
|
|
await expect(categoryPills(page).getByRole('button', { name: RENAME.to, exact: true })).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
target: categoryPills,
|
|
hover: async page => { await categoryPills(page).getByRole('button', { name: FILTER, exact: true }).hover() },
|
|
act: async page => {
|
|
await categoryPills(page).getByRole('button', { name: FILTER, exact: true }).click()
|
|
await expect(categoryPills(page).getByRole('button', { name: FILTER, exact: true })).toHaveAttribute('aria-pressed', 'true')
|
|
await expect(notesPanel(page).getByRole('article')).toHaveCount(1)
|
|
await settle(page)
|
|
},
|
|
},
|
|
],
|
|
cleanup: async page => {
|
|
await restoreNoteCategories(page.request)
|
|
// The added category has no note, so it was only ever kept in this browser.
|
|
await page.evaluate(id => {
|
|
try { localStorage.removeItem(`collab-cats-${id}`) } catch { /* nothing was kept */ }
|
|
}, seededTrip().tripId)
|
|
},
|
|
},
|
|
'shared-links': {
|
|
guide: guide('shared-links'),
|
|
start,
|
|
steps: [
|
|
{
|
|
target: page => linksPanel(page).getByRole('button', { name: 'Add link', exact: true }),
|
|
act: async page => {
|
|
await linksPanel(page).getByRole('button', { name: 'Add link', exact: true }).click()
|
|
await expect(linkDialog(page)).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: async page => {
|
|
// The title sits in the head band, the address in the Link field under it.
|
|
await typeInto(page, linkDialog(page).getByRole('textbox', { name: 'Link title' }), LINK.title)
|
|
await typeInto(page, linkDialog(page).locator('#collab-link-url'), LINK.url)
|
|
await beat(page, 300)
|
|
},
|
|
target: linkDialog,
|
|
act: async page => {
|
|
await linkDialog(page).getByRole('button', { name: 'Save link', exact: true }).click()
|
|
await expect(linkDialog(page)).toHaveCount(0, { timeout: 15_000 })
|
|
await expect(linkChip(page, LINK.title)).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: async page => { await linkChip(page, LINK.title).hover() },
|
|
target: page => linkChip(page, LINK.title).locator('.collab-link-chip__main'),
|
|
},
|
|
{
|
|
target: page => linkChip(page, LINK.title).locator('.collab-link-chip__actions'),
|
|
act: async page => {
|
|
// Exact: an accessible name is matched as a substring, and "Unpin link"
|
|
// holds "Pin link", so the loose form would find both buttons.
|
|
await linkChip(page, LINK.title).getByRole('button', { name: 'Pin link', exact: true }).click()
|
|
await expect(linkChip(page, LINK.title)).toHaveClass(/collab-link-chip--pinned/)
|
|
await expect(page.locator('.collab-link-grid__cells > div').first()).toContainText(LINK.title)
|
|
await settle(page)
|
|
},
|
|
},
|
|
],
|
|
cleanup: page => deleteLink(page, LINK.title),
|
|
},
|
|
'create-poll': {
|
|
guide: guide('create-poll'),
|
|
start,
|
|
steps: [
|
|
{
|
|
target: page => pollsPanel(page).getByRole('button', { name: 'New Poll', exact: true }),
|
|
act: async page => {
|
|
await pollsPanel(page).getByRole('button', { name: 'New Poll', exact: true }).click()
|
|
await expect(pollDialog(page)).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: page => typeInto(page, pollDialog(page).getByPlaceholder('What should we do?'), POLL.question),
|
|
// The Question eyebrow, the box and the Markdown supported hint under it.
|
|
target: page => field(pollDialog(page).getByPlaceholder('What should we do?')),
|
|
},
|
|
{
|
|
prepare: async page => {
|
|
await typeInto(page, pollDialog(page).getByPlaceholder('Option 1'), POLL.options[0])
|
|
await typeInto(page, pollDialog(page).getByPlaceholder('Option 2'), POLL.options[1])
|
|
},
|
|
// The Options field: box, its row, the column of rows, the field with its eyebrow.
|
|
target: page => pollDialog(page).getByPlaceholder('Option 1').locator('xpath=ancestor::div[3]'),
|
|
},
|
|
{
|
|
// The label drops the string's own "+"; the button draws a plus icon instead.
|
|
target: page => pollDialog(page).getByRole('button', { name: 'Add option', exact: true }),
|
|
act: async page => {
|
|
await pollDialog(page).getByRole('button', { name: 'Add option', exact: true }).click()
|
|
await typeInto(page, pollDialog(page).getByPlaceholder('Option 3'), POLL.options[2])
|
|
await beat(page, 300)
|
|
},
|
|
},
|
|
// The switch alone is 36 px wide; ring the row it sits in, which is its label.
|
|
only(page => pollDialog(page).locator('label').filter({ hasText: 'Multiple choice' })),
|
|
{
|
|
target: page => pollDialog(page).getByRole('button', { name: 'Create Poll', exact: true }),
|
|
act: async page => {
|
|
await pollDialog(page).getByRole('button', { name: 'Create Poll', exact: true }).click()
|
|
await expect(pollDialog(page)).toHaveCount(0, { timeout: 15_000 })
|
|
await expect(pollCard(page, POLL.question)).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
],
|
|
cleanup: page => deletePoll(page, POLL.question),
|
|
},
|
|
'vote-poll': {
|
|
guide: guide('vote-poll'),
|
|
start,
|
|
steps: [
|
|
{
|
|
target: page => pollCard(page, SEEDED_POLL).getByRole('button', { name: 'City hotel' }),
|
|
act: async page => {
|
|
await pollCard(page, SEEDED_POLL).getByRole('button', { name: 'City hotel' }).click()
|
|
await expect(pollCard(page, SEEDED_POLL).getByRole('button', { name: /City hotel.*100%/ })).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
// Both bars and both percentages, so the step about reading them has them.
|
|
only(page => pollCard(page, SEEDED_POLL).locator('> div').last()),
|
|
{
|
|
target: page => pollCard(page, SEEDED_POLL).getByRole('button', { name: /^Ryokan with onsen/ }),
|
|
act: async page => {
|
|
await pollCard(page, SEEDED_POLL).getByRole('button', { name: /^Ryokan with onsen/ }).click()
|
|
await expect(pollCard(page, SEEDED_POLL).getByRole('button', { name: /Ryokan with onsen.*100%/ })).toBeVisible({ timeout: 15_000 })
|
|
await expect(pollCard(page, SEEDED_POLL).getByRole('button', { name: /City hotel.*0%/ })).toBeVisible()
|
|
await settle(page)
|
|
},
|
|
},
|
|
// The count is a chip under the question, in the card's head band: "1 vote" / "3 votes".
|
|
only(page => pollCard(page, SEEDED_POLL).getByText(/^\d+ votes?$/)),
|
|
],
|
|
cleanup: page => resetVote(page, SEEDED_POLL, 0),
|
|
},
|
|
'close-poll': {
|
|
guide: guide('close-poll'),
|
|
start,
|
|
steps: [
|
|
{
|
|
// The lock and the bin are round buttons at the right of the card's head band, named by their tooltips.
|
|
target: page => pollCard(page, COLLAB_SPARE_POLL.question).getByRole('button', { name: 'Close', exact: true }),
|
|
act: async page => {
|
|
await pollCard(page, COLLAB_SPARE_POLL.question).getByRole('button', { name: 'Close', exact: true }).click()
|
|
await expect(pollCard(page, COLLAB_SPARE_POLL.question).getByText('Closed', { exact: true })).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
only(page => pollCard(page, COLLAB_SPARE_POLL.question)),
|
|
{
|
|
target: page => pollCard(page, COLLAB_SPARE_POLL.question).getByRole('button', { name: 'Delete', exact: true }),
|
|
act: async page => {
|
|
await pollCard(page, COLLAB_SPARE_POLL.question).getByRole('button', { name: 'Delete', exact: true }).click()
|
|
await expect(pollsPanel(page).getByText(COLLAB_SPARE_POLL.question)).toHaveCount(0, { timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
],
|
|
// The last step normally already removed it; this is for a run that stopped short.
|
|
cleanup: page => deletePoll(page, COLLAB_SPARE_POLL.question),
|
|
},
|
|
'whats-next': {
|
|
guide: guide('whats-next'),
|
|
start,
|
|
steps: [
|
|
only(nextPanel),
|
|
// The time column is the first child of a row; the name, the address and the chips are its last.
|
|
only(page => nextRow(page, WHATS_NEXT_STOPS.timed).locator('> div').first()),
|
|
only(page => nextRow(page, WHATS_NEXT_STOPS.timed).locator('> div').last()),
|
|
],
|
|
// Read-only panel: the guide writes nothing.
|
|
},
|
|
'trip-chat': {
|
|
guide: guide('trip-chat'),
|
|
start,
|
|
steps: [
|
|
{
|
|
prepare: page => typeInto(page, chatBox(page), CHAT.mine),
|
|
target: composer,
|
|
act: async page => {
|
|
await chatBox(page).press('Enter')
|
|
await expect(page.getByText(CHAT.mine)).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: async page => {
|
|
await typeInto(page, chatBox(page), CHAT.emoji)
|
|
await emojiButton(page).click()
|
|
await expect(emojiPicker(page)).toBeVisible()
|
|
await beat(page, 300)
|
|
},
|
|
target: emojiPicker,
|
|
act: async page => {
|
|
await emojiPicker(page).getByRole('button', { name: 'Travel', exact: true }).click()
|
|
await emojiPicker(page).getByRole('button', { name: CHAT.flag }).click()
|
|
await expect(chatBox(page)).toHaveValue(`${CHAT.emoji}${CHAT.flag}`)
|
|
await sendButton(page).click()
|
|
await expect(page.getByText(`${CHAT.emoji}${CHAT.flag}`)).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
// The hover row is pointer-events:none until the bubble under it is hovered,
|
|
// so the bubble has to be hovered before the button can be reached at all.
|
|
prepare: async page => {
|
|
await page.getByText(CHAT.theirs).first().hover()
|
|
await beat(page, 300)
|
|
},
|
|
target: page => bubble(page, CHAT.theirs).getByRole('button', { name: 'Reply' }),
|
|
hover: hoverMessageAction(CHAT.theirs, 'Reply'),
|
|
act: async page => {
|
|
await bubble(page, CHAT.theirs).getByRole('button', { name: 'Reply' }).click()
|
|
await expect(replyQuote(page)).toContainText(CHAT.theirs)
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: page => typeInto(page, chatBox(page), CHAT.answer),
|
|
target: replyQuote,
|
|
act: async page => {
|
|
await chatBox(page).press('Enter')
|
|
await expect(page.getByText(CHAT.answer)).toBeVisible({ timeout: 15_000 })
|
|
await expect(replyQuote(page)).not.toContainText(CHAT.theirs)
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: async page => {
|
|
await page.getByText(CHAT.reactTo).first().click({ button: 'right' })
|
|
await expect(reactionMenu(page)).toBeVisible()
|
|
await beat(page, 300)
|
|
},
|
|
target: reactionMenu,
|
|
act: async page => {
|
|
await reactionMenu(page).getByRole('button', { name: CHAT.reaction }).click()
|
|
await expect(
|
|
bubble(page, CHAT.reactTo).locator('xpath=..').getByRole('button', { name: CHAT.reaction }),
|
|
).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
{
|
|
prepare: async page => {
|
|
await page.getByText(CHAT.mine).first().hover()
|
|
await beat(page, 300)
|
|
},
|
|
target: page => bubble(page, CHAT.mine).getByRole('button', { name: 'Delete' }),
|
|
hover: hoverMessageAction(CHAT.mine, 'Delete'),
|
|
act: async page => {
|
|
await bubble(page, CHAT.mine).getByRole('button', { name: 'Delete' }).click()
|
|
// The bubble shrinks for 400 ms before the request goes out.
|
|
await page.waitForTimeout(1200)
|
|
await expect(page.getByText(/deleted a message/)).toBeVisible({ timeout: 15_000 })
|
|
await settle(page)
|
|
},
|
|
},
|
|
],
|
|
// No cleanup, deliberately: deleting a message is a soft delete and there is
|
|
// no undelete over the API, so undoing anything here would only add more
|
|
// tombstones. This is why trip-chat is the last guide of the screen.
|
|
},
|
|
}
|
|
|
|
// ── Run ───────────────────────────────────────────────────────────────────────
|
|
|
|
test.describe.configure({ mode: 'serial' })
|
|
|
|
test.beforeAll(async ({ request }) => {
|
|
await ensureCollabFixtures(request)
|
|
})
|
|
|
|
test('every registered collab guide has a script, and only those', async () => {
|
|
expect(Object.keys(SCRIPTS).sort()).toEqual([...tripCollabContext.guides].sort())
|
|
})
|
|
|
|
test('hero: trip-collab', async ({ page }) => {
|
|
await page.setViewportSize(VIEWPORT)
|
|
await captureHero(page, tripCollabContext.id, start)
|
|
})
|
|
|
|
for (const id of tripCollabContext.guides) {
|
|
test(`pictures: ${id}`, async ({ page }) => {
|
|
await page.setViewportSize(VIEWPORT)
|
|
await captureGuide(page, SCRIPTS[id])
|
|
})
|
|
}
|