Files
box-box/tests/visual/helpers.ts
AmanTahiliani 02a84f67b4 feat(race-story): polish chapter strip, controls, graph, and map UX (#68)
Consolidate the Race Story section into a cohesive timeline surface: custom
chapter-strip scrolling with active-card sync, unified segmented playback
controls, chapter bands on the position graph with decimated axes and
de-collided labels, map toggle gated by an on-mount replay/outline probe,
and shared empty-state cards. Adds vitest coverage and visual snapshots.

Note: replay/outline queries now probe on mount (not only when Map opens) so
the toggle can be hidden before users hit a dead panel.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-12 13:23:07 -04:00

74 lines
2.7 KiB
TypeScript

import { expect, type Locator, type Page } from '@playwright/test'
export const VIEWPORTS = {
desktop: { width: 1280, height: 800 },
tablet: { width: 768, height: 1024 },
mobile: { width: 390, height: 844 },
} as const
export const FULL_SESSION = 9472
/** Wait for web fonts and layout to settle before screenshots. */
export async function waitForScreenshotReady(page: Page): Promise<void> {
await page.evaluate(() => document.fonts.ready)
await page.waitForTimeout(150)
}
export async function gotoCommandCenterReady(page: Page): Promise<void> {
await page.goto('/')
await expect(page.getByTestId('command-center')).toBeVisible()
await expect(page.getByTestId('cc-focus')).toBeVisible()
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
// The e2e stack runs with an unreachable OpenF1 base URL, so wait for the
// season-calendar query to settle on its local fallback before screenshotting.
await expect(
page.getByText('Using local meetings because the full calendar could not load.'),
).toBeVisible()
await waitForScreenshotReady(page)
}
export async function gotoRaceHubReady(page: Page, sessionKey = FULL_SESSION): Promise<void> {
await page.goto(`/race-hub?session_key=${sessionKey}`)
await expect(page.getByTestId('race-hub')).toBeVisible()
await expect(page.getByTestId('rh-identity')).toBeVisible()
await expect(page.getByTestId(`rh-session-${sessionKey}`)).toBeVisible()
await expect(page.getByTestId('rh-overview')).toBeVisible()
await waitForScreenshotReady(page)
}
export async function gotoRaceStoryReady(page: Page, sessionKey = FULL_SESSION): Promise<void> {
await page.goto(`/race-hub?session_key=${sessionKey}`)
await expect(page.getByTestId('race-hub')).toBeVisible()
await page.getByRole('tab', { name: 'Race Story' }).click()
await expect(page.getByTestId('position-chart')).toBeVisible()
await waitForScreenshotReady(page)
}
export async function gotoDataLibraryReady(page: Page): Promise<void> {
await page.goto('/admin')
await expect(page.getByTestId('data-library')).toBeVisible()
await expect(page.getByTestId('dl-meeting-1229')).toBeVisible()
await expect(page.getByTestId('meeting-detail')).toBeVisible()
await waitForScreenshotReady(page)
}
export async function gotoLiveEmptyReady(page: Page): Promise<void> {
await page.goto('/live')
await expect(page.locator('.loading-state')).toHaveCount(0)
await expect(page.getByTestId('live-empty')).toBeVisible()
await waitForScreenshotReady(page)
}
export async function screenshotPage(
page: Page,
name: string,
options?: { mask?: Locator[] },
): Promise<void> {
await expect(page).toHaveScreenshot(`${name}.png`, {
fullPage: true,
animations: 'disabled',
caret: 'hide',
mask: options?.mask,
})
}