mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
0ed0d98c32
Place details, Day details, Map, Transports, Bookings, Lists, Costs, Files, Collab and Road Trip: 77 guides over 360 steps, each one a task a reader can follow, with the Playwright script that will photograph it. The fixtures they need go in beside ensureDaysFixtures, and every screen is a child of the trip, so the panel folds them under it. The capture now pins the browser's clock to the day the seeded trip ends. A picture has to look the same whoever takes it and whenever: a day later the trip is over, My Trips moves it out of the boarding pass, What's Next has nothing left to list, and a forecast for a day in the past is not a forecast. Only `Date` is pinned, so timers keep running. trip-days is green end to end after its locators were checked against the running app; its route guides read day 6, whose two stops sit next to each other, because day 1's are separated by the flight and have no leg of their own.
482 lines
19 KiB
TypeScript
482 lines
19 KiB
TypeScript
import { test, expect, type Locator, type Page } from '@playwright/test'
|
|
import { captureGuide, captureHero, settle, typeInto, VIEWPORT, type GuideScript } from './guide'
|
|
import { seededTrip, ensureMapFixtures } from './fixtures'
|
|
import { openTrip, openTripOnDay, selectDay, modal } from './trip-shared'
|
|
import { tripMapContext, tripMapGuides } from '../../src/help/contexts/tripMap'
|
|
import type { HelpGuide } from '../../src/help/types'
|
|
|
|
/**
|
|
* Actions for the map in the middle of a trip's plan, keyed by the ids in
|
|
* `src/help/contexts/tripMap.ts`. They run on the seeded "Autumn in Japan"
|
|
* with the Tokyo to Kyoto train added up front, so the bulk booking-route
|
|
* toggle has a second route to draw inside the frame; what a guide changes it
|
|
* puts back in `cleanup`, so the next one starts the same.
|
|
*/
|
|
|
|
const guide = (id: string): HelpGuide => {
|
|
const g = tripMapGuides.find(x => x.id === id)
|
|
if (!g) throw new Error(`no registered guide "${id}"`)
|
|
return g
|
|
}
|
|
|
|
/** The Leaflet map: the whole middle of the plan, with both columns floating over it. */
|
|
const map = (page: Page) => page.locator('#trek-map')
|
|
/** A cluster bubble. Its only text is the number of places folded into it. */
|
|
const clusters = (page: Page) => page.locator('#trek-map .marker-cluster-custom')
|
|
/**
|
|
* A place pin. Cluster bubbles and the explore results are markers too, so both
|
|
* are excluded: a bubble holds `.marker-cluster-custom`, and only a result pin
|
|
* carries an `aria-label` (a place marker is a bare divIcon with no name at all,
|
|
* which is why a specific place can only be found through its order badge).
|
|
*/
|
|
const pins = (page: Page) =>
|
|
page.locator('#trek-map .leaflet-marker-icon:not(:has(.marker-cluster-custom)):not([aria-label])')
|
|
/** The pin of the stop that is number `n` in the open day. */
|
|
const badged = (page: Page, n: number) => pins(page).filter({ hasText: new RegExp(`^\\s*${n}\\s*$`) }).first()
|
|
/** An explore result: the one kind of marker with an accessible name. */
|
|
const poiPins = (page: Page) => page.locator('#trek-map .leaflet-marker-icon[aria-label]')
|
|
/** The end of a drawn booking route. */
|
|
const endpoints = (page: Page) => page.locator('#trek-map .trek-endpoint-marker')
|
|
/** The card that follows the pointer over a pin. */
|
|
const hoverCard = (page: Page) => page.getByTestId('tooltip')
|
|
/**
|
|
* A category of the explore pill. The phone portal renders a second copy of the
|
|
* whole pill, hidden at this width, so this goes by role rather than by
|
|
* `aria-label`, which would match both.
|
|
*/
|
|
const category = (page: Page, label: string) => page.getByRole('button', { name: label, exact: true })
|
|
/** The pill itself: the nearest block holding the first category and the last. */
|
|
const categoryRow = (page: Page) =>
|
|
category(page, 'Restaurants').locator('xpath=ancestor::div[.//button[@aria-label="Activities"]][1]')
|
|
/** The route icon on a booking's row, and the one in the toolbar above the days. */
|
|
const connection = (page: Page, shown: boolean) =>
|
|
page.locator(`button[aria-label="${shown ? 'Hide' : 'Show'} booking routes"]`)
|
|
const allConnections = (page: Page, shown: boolean) =>
|
|
page.locator(`button[aria-label="${shown ? 'Hide' : 'Show'} all booking routes"]`)
|
|
const overviewPanel = (page: Page) => page.getByTestId('trip-overview-panel')
|
|
/** The sheet a booking's endpoint opens. Its own portal, and the only Close on the plan. */
|
|
const sheetClose = (page: Page) => page.getByRole('button', { name: 'Close', exact: true })
|
|
/** A row of the places column. */
|
|
const row = (page: Page, name: string) => page.getByRole('option').filter({ hasText: name }).first()
|
|
/**
|
|
* The card that opens under the map when a place is selected. By its own test
|
|
* id, not by a button in it: the collection button reads Save to Collection or
|
|
* Saved depending on whether that place is already in a list, and the seed puts
|
|
* the three Kyoto places in one, so a locator on the label matches for some
|
|
* pins and for others not.
|
|
*/
|
|
const inspector = (page: Page) => page.getByTestId('inspector-scroll')
|
|
/** The details panel's collapse: it keeps the day selected, where its close would drop it. */
|
|
const collapseDayDetails = (page: Page) => page.locator('button:has(svg.lucide-chevrons-down)')
|
|
|
|
/**
|
|
* A spot on the map with nothing on it: right of the days column, left of the
|
|
* explore pill, and clear of everything the plan floats over the lower half of
|
|
* the map. Map-relative, so it is passed as a click `position`.
|
|
*/
|
|
const EMPTY = { x: 470, y: 80 }
|
|
|
|
/**
|
|
* The first marker of a set the pointer can actually reach. Leaflet stacks
|
|
* markers that overlap and the two columns float over the edges of the map, so
|
|
* `.first()` is regularly one that nothing can hover, let alone click. Explore
|
|
* results are searched from the end because Leaflet draws the southernmost
|
|
* marker on top.
|
|
*/
|
|
async function reachable(locator: Locator, fromEnd = false): Promise<number> {
|
|
const total = await locator.count()
|
|
for (let i = 0; i < total; i++) {
|
|
const index = fromEnd ? total - 1 - i : i
|
|
try {
|
|
await locator.nth(index).hover({ trial: true, timeout: 1500 })
|
|
return index
|
|
} catch {
|
|
// Covered by another marker or by one of the floating columns.
|
|
}
|
|
}
|
|
throw new Error(`no reachable marker among ${total}`)
|
|
}
|
|
|
|
/**
|
|
* Move the map, so "Search this area" appears. Leaflet's own keyboard panning
|
|
* rather than a mouse drag: a drag has to start on bare map, and after a search
|
|
* there are sixty result pins that each swallow the press it starts with.
|
|
*/
|
|
async function panMap(page: Page): Promise<void> {
|
|
await map(page).focus()
|
|
for (let i = 0; i < 4; i++) {
|
|
await page.keyboard.press('ArrowLeft')
|
|
await page.waitForTimeout(250)
|
|
}
|
|
for (let i = 0; i < 2; i++) {
|
|
await page.keyboard.press('ArrowUp')
|
|
await page.waitForTimeout(250)
|
|
}
|
|
await settle(page)
|
|
}
|
|
|
|
/**
|
|
* Open the trip framed on day 1's two Tokyo stops.
|
|
*
|
|
* The frame is what the three guides starting here have in common: one
|
|
* right-clicks a fixed point on the map and needs a street under it, one asks
|
|
* the map what it can see for cafes, one puts imagery under the pins. The
|
|
* whole-trip fit spans Japan, where that fixed point is the Sea of Japan as
|
|
* often as it is a street and the address look-up comes back empty, and zooming
|
|
* into whichever cluster the pointer reaches first lands on Tokyo or on Kyoto by
|
|
* chance. Day 1 is the one frame the seed guarantees is over a city.
|
|
*
|
|
* The details panel is folded rather than closed: closing it deselects the day
|
|
* (`onClose` in `TripPlannerPage` clears both) and the map goes straight back to
|
|
* the whole trip.
|
|
*/
|
|
async function openOnTokyo(page: Page): Promise<void> {
|
|
await openTripOnDay(page, 1)
|
|
await collapseDayDetails(page).last().click()
|
|
await expect(badged(page, 1)).toBeVisible({ timeout: 20_000 })
|
|
await settle(page)
|
|
}
|
|
|
|
async function deleteByName(page: Page, ...names: string[]): Promise<void> {
|
|
const { tripId } = seededTrip()
|
|
const res = await page.request.get(`/api/trips/${tripId}/places`)
|
|
const body = (await res.json()) as { places?: { id: number; name: string }[] } | { id: number; name: string }[]
|
|
const places = Array.isArray(body) ? body : (body.places ?? [])
|
|
for (const place of places.filter(x => names.includes(x.name))) {
|
|
await page.request.delete(`/api/trips/${tripId}/places/${place.id}`)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The markers the running guide works on. Which one is reachable is decided
|
|
* once, by `reachable`, and the steps that follow reuse the answer; `pin` holds
|
|
* a place pin, an explore result or a route endpoint, whichever the guide is
|
|
* about. `found` is the name of the explore result a guide took into the trip,
|
|
* so `cleanup` can take exactly that one out again.
|
|
*/
|
|
let bubble = 0
|
|
let pin = 0
|
|
let found = ''
|
|
|
|
const NEW_PLACE = 'Lunch stop'
|
|
|
|
const SCRIPTS: Record<string, GuideScript> = {
|
|
'map-markers': {
|
|
guide: guide('map-markers'),
|
|
start: async p => {
|
|
await openTrip(p)
|
|
await expect(clusters(p).first()).toBeVisible({ timeout: 30_000 })
|
|
await settle(p)
|
|
bubble = await reachable(clusters(p))
|
|
},
|
|
steps: [
|
|
{
|
|
target: p => clusters(p).nth(bubble),
|
|
act: async p => {
|
|
await clusters(p).nth(bubble).click()
|
|
await expect.poll(() => pins(p).count(), { timeout: 20_000 }).toBeGreaterThan(2)
|
|
await settle(p)
|
|
pin = await reachable(pins(p))
|
|
},
|
|
},
|
|
{
|
|
// captureGuide hovers the target itself; this only makes sure the card
|
|
// is up before the shot rather than a frame after it.
|
|
prepare: async p => {
|
|
await pins(p).nth(pin).hover()
|
|
await expect(hoverCard(p)).toBeVisible({ timeout: 10_000 })
|
|
},
|
|
target: p => pins(p).nth(pin),
|
|
},
|
|
{
|
|
// The picture worth having is the panel the click opens, not the pin
|
|
// again, so the click is the preparation and the panel is the target.
|
|
prepare: async p => {
|
|
await pins(p).nth(pin).click()
|
|
await expect(inspector(p)).toBeVisible({ timeout: 15_000 })
|
|
await settle(p)
|
|
},
|
|
target: p => inspector(p).locator('xpath=..'),
|
|
act: async p => {
|
|
await map(p).click({ position: EMPTY })
|
|
await expect(inspector(p)).toHaveCount(0)
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await selectDay(p, 1)
|
|
// The panel IS the selection, so it is folded away rather than closed:
|
|
// closing it would take the numbers off the pins again.
|
|
await collapseDayDetails(p).last().click()
|
|
await expect(badged(p, 1)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
target: p => badged(p, 1),
|
|
},
|
|
{
|
|
// Picture only, like the other drags in this family: HTML5 drag is what
|
|
// the map hands the day plan, and a synthesised one does not start it.
|
|
prepare: async p => {
|
|
pin = await reachable(pins(p))
|
|
},
|
|
target: p => pins(p).nth(pin),
|
|
dropTo: p => p.getByRole('button', { name: /^2 .*Day 2 / }).locator('xpath=..'),
|
|
},
|
|
],
|
|
},
|
|
'map-nearby-places': {
|
|
guide: guide('map-nearby-places'),
|
|
// A search covers what is on screen, and day 1's fit is the two Tokyo stops
|
|
// with the city between them: enough of a district for the sixty hits to
|
|
// spread over the frame instead of piling up in the middle of it.
|
|
start: openOnTokyo,
|
|
steps: [
|
|
{ target: categoryRow },
|
|
{
|
|
target: p => category(p, 'Cafés'),
|
|
act: async p => {
|
|
await category(p, 'Cafés').click()
|
|
await expect(poiPins(p).first()).toBeVisible({ timeout: 40_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await panMap(p)
|
|
await expect(p.getByRole('button', { name: 'Search this area' })).toBeVisible({ timeout: 15_000 })
|
|
},
|
|
target: p => p.getByRole('button', { name: 'Search this area' }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Search this area' }).click()
|
|
await expect(poiPins(p).first()).toBeVisible({ timeout: 40_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
pin = await reachable(poiPins(p), true)
|
|
},
|
|
target: p => poiPins(p).nth(pin),
|
|
act: async p => {
|
|
await poiPins(p).nth(pin).click()
|
|
const name = modal(p).getByPlaceholder('e.g. Eiffel Tower')
|
|
await expect(name).not.toHaveValue('', { timeout: 20_000 })
|
|
// Which places OpenStreetMap answers with is never the same twice, so
|
|
// the name is read off the form rather than assumed, and `cleanup`
|
|
// deletes exactly what was created.
|
|
found = await name.inputValue()
|
|
await settle(p)
|
|
},
|
|
},
|
|
{ target: p => modal(p).getByPlaceholder('e.g. Eiffel Tower').locator('xpath=ancestor::form[1]') },
|
|
{
|
|
target: p => modal(p).getByRole('button', { name: 'Add', exact: true }),
|
|
act: async p => {
|
|
await modal(p).getByRole('button', { name: 'Add', exact: true }).click()
|
|
await expect(modal(p)).toHaveCount(0)
|
|
await expect(row(p, found)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: p => deleteByName(p, found),
|
|
},
|
|
'map-add-place': {
|
|
guide: guide('map-add-place'),
|
|
start: openOnTokyo,
|
|
steps: [
|
|
{
|
|
target: map,
|
|
// The map fills the frame, so the ring would sit nowhere in particular:
|
|
// park the pointer on the spot the right-click is about to land on.
|
|
hover: async p => {
|
|
const box = await map(p).boundingBox()
|
|
if (!box) throw new Error('the map has no box')
|
|
await p.mouse.move(box.x + EMPTY.x, box.y + EMPTY.y)
|
|
},
|
|
act: async p => {
|
|
await map(p).click({ button: 'right', position: EMPTY })
|
|
await expect(modal(p).getByText('Add Place/Activity')).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
// The address is a look-up of the coordinates and lands after the form.
|
|
await expect(modal(p).getByPlaceholder('Latitude (e.g. 48.8566)')).not.toHaveValue('')
|
|
await expect(modal(p).getByPlaceholder('Street, City, Country')).not.toHaveValue('', { timeout: 30_000 })
|
|
await settle(p)
|
|
},
|
|
target: p => modal(p).getByPlaceholder('Street, City, Country').locator('xpath=ancestor::div[1]'),
|
|
},
|
|
{
|
|
prepare: async p => {
|
|
await typeInto(p, modal(p).getByPlaceholder('e.g. Eiffel Tower'), NEW_PLACE)
|
|
await settle(p)
|
|
},
|
|
target: p => modal(p).getByPlaceholder('e.g. Eiffel Tower').locator('xpath=ancestor::form[1]'),
|
|
},
|
|
{
|
|
target: p => modal(p).getByRole('button', { name: 'Add', exact: true }),
|
|
act: async p => {
|
|
await modal(p).getByRole('button', { name: 'Add', exact: true }).click()
|
|
await expect(modal(p)).toHaveCount(0)
|
|
await expect(row(p, NEW_PLACE)).toBeVisible({ timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
cleanup: p => deleteByName(p, NEW_PLACE),
|
|
},
|
|
'map-satellite': {
|
|
guide: guide('map-satellite'),
|
|
start: async p => {
|
|
await openOnTokyo(p)
|
|
pin = await reachable(pins(p))
|
|
},
|
|
steps: [
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Switch to satellite view' }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Switch to satellite view' }).click()
|
|
await expect(p.getByRole('button', { name: 'Switch to map view' })).toBeVisible()
|
|
// The imagery is raster tiles from a third party; give them a moment
|
|
// or the picture catches the grey underneath.
|
|
await expect(p.locator('#trek-map img.leaflet-tile').first()).toBeVisible({ timeout: 30_000 })
|
|
await settle(p)
|
|
await p.waitForTimeout(1500)
|
|
},
|
|
},
|
|
{ target: p => pins(p).nth(pin) },
|
|
{
|
|
target: p => p.getByRole('button', { name: 'Switch to map view' }),
|
|
act: async p => {
|
|
await p.getByRole('button', { name: 'Switch to map view' }).click()
|
|
await expect(p.getByRole('button', { name: 'Switch to satellite view' })).toBeVisible()
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
// The layer is kept on the account, not on the trip: left on satellite it
|
|
// would be the basemap of every picture taken after this guide.
|
|
cleanup: async p => {
|
|
await p.request.post('/api/settings/bulk', { data: { settings: { map_base_layer: 'default' } } })
|
|
},
|
|
},
|
|
'map-whole-trip': {
|
|
guide: guide('map-whole-trip'),
|
|
start: p => openTrip(p),
|
|
steps: [
|
|
{
|
|
target: p => p.getByTestId('trip-overview-pill'),
|
|
act: async p => {
|
|
await p.getByTestId('trip-overview-pill').click()
|
|
// One router request per leg, paced, so the card takes its time.
|
|
await expect(overviewPanel(p)).toBeVisible({ timeout: 60_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
// The total carries an … until every leg has answered; a picture taken
|
|
// before that shows a partial sum.
|
|
prepare: async p => {
|
|
await expect(overviewPanel(p)).not.toContainText('…', { timeout: 90_000 })
|
|
await settle(p)
|
|
},
|
|
target: overviewPanel,
|
|
},
|
|
{
|
|
target: p => overviewPanel(p).getByRole('button').first(),
|
|
act: async p => {
|
|
await overviewPanel(p).getByRole('button').first().click()
|
|
await settle(p)
|
|
},
|
|
},
|
|
// No act: the guide ends with the whole trip on the map, which is what
|
|
// the result picture is of. `cleanup` presses the button.
|
|
{ target: p => p.getByRole('button', { name: 'Hide whole trip' }) },
|
|
],
|
|
cleanup: async p => {
|
|
const off = p.getByRole('button', { name: 'Hide whole trip' })
|
|
if (await off.isVisible().catch(() => false)) await off.click()
|
|
},
|
|
},
|
|
'map-booking-routes': {
|
|
guide: guide('map-booking-routes'),
|
|
start: p => openTrip(p),
|
|
steps: [
|
|
{ target: p => connection(p, false).first() },
|
|
{
|
|
prepare: async p => {
|
|
await connection(p, false).first().click()
|
|
await expect.poll(() => endpoints(p).count(), { timeout: 30_000 }).toBeGreaterThan(1)
|
|
await settle(p)
|
|
pin = await reachable(endpoints(p))
|
|
},
|
|
target: p => endpoints(p).nth(pin),
|
|
act: async p => {
|
|
await endpoints(p).nth(pin).click()
|
|
await expect(sheetClose(p)).toBeVisible({ timeout: 15_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => sheetClose(p).locator('xpath=ancestor::div[2]'),
|
|
// The booking sheet is its own portal and ignores Escape.
|
|
act: async p => {
|
|
await sheetClose(p).click()
|
|
await expect(sheetClose(p)).toHaveCount(0)
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => allConnections(p, false),
|
|
act: async p => {
|
|
await allConnections(p, false).click()
|
|
await expect.poll(() => endpoints(p).count(), { timeout: 30_000 }).toBeGreaterThan(2)
|
|
await settle(p)
|
|
},
|
|
},
|
|
{
|
|
target: p => allConnections(p, true),
|
|
act: async p => {
|
|
await allConnections(p, true).click()
|
|
await expect(endpoints(p)).toHaveCount(0, { timeout: 20_000 })
|
|
await settle(p)
|
|
},
|
|
},
|
|
],
|
|
// The per-trip choice lives in this browser, not on the server, so it would
|
|
// otherwise carry into every guide that runs after it in the same context.
|
|
cleanup: async p => {
|
|
const { tripId } = seededTrip()
|
|
await p.evaluate(id => localStorage.removeItem(`trek:visible-connections:${id}`), tripId)
|
|
},
|
|
},
|
|
}
|
|
|
|
// ── Run ───────────────────────────────────────────────────────────────────────
|
|
|
|
test.describe.configure({ mode: 'serial' })
|
|
|
|
test.beforeAll(async ({ request }) => {
|
|
await ensureMapFixtures(request)
|
|
})
|
|
|
|
test('every registered map guide has a script, and only those', async () => {
|
|
expect(Object.keys(SCRIPTS).sort()).toEqual([...tripMapContext.guides].sort())
|
|
})
|
|
|
|
test('hero: trip-map', async ({ page }) => {
|
|
await page.setViewportSize(VIEWPORT)
|
|
await captureHero(page, tripMapContext.id, p => openTrip(p))
|
|
})
|
|
|
|
for (const id of tripMapContext.guides) {
|
|
test(`pictures: ${id}`, async ({ page }) => {
|
|
await page.setViewportSize(VIEWPORT)
|
|
await captureGuide(page, SCRIPTS[id])
|
|
})
|
|
}
|