mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 11:54:59 -04:00
418 lines
15 KiB
TypeScript
418 lines
15 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
// The e2e server runs with BOXBOX_DISABLE_LIVE=1, so the real feed is silent.
|
|
// These tests mock /api/v1/live/state with a race snapshot to exercise the
|
|
// full timing page: flag banner, weather strip, battles, stints, and pinning.
|
|
|
|
const driver = (
|
|
num: string,
|
|
pos: number,
|
|
interval: string,
|
|
gap: string,
|
|
overrides: Record<string, unknown> = {},
|
|
) => ({
|
|
RacingNumber: num,
|
|
Position: pos,
|
|
PrevPosition: pos,
|
|
GapToLeader: gap,
|
|
Interval: interval,
|
|
LastLapTime: '1:21.345',
|
|
LastLapPB: false,
|
|
LastLapOB: false,
|
|
BestLapTime: '1:20.987',
|
|
BestLapPB: true,
|
|
BestLapOB: false,
|
|
BestLapNum: 22,
|
|
InPit: false,
|
|
PitOut: false,
|
|
Retired: false,
|
|
KnockedOut: false,
|
|
Cutoff: false,
|
|
OnFlyingLap: false,
|
|
NumberOfLaps: 30,
|
|
SpeedTrap: '312',
|
|
Sectors: [],
|
|
...overrides,
|
|
})
|
|
|
|
const info = (num: string, tla: string, first: string, last: string, team: string, colour: string) => ({
|
|
RacingNumber: num,
|
|
BroadcastName: `${first[0]} ${last.toUpperCase()}`,
|
|
Tla: tla,
|
|
TeamName: team,
|
|
TeamColour: colour,
|
|
FirstName: first,
|
|
LastName: last,
|
|
})
|
|
|
|
const raceSnapshot = {
|
|
is_live: true,
|
|
data: {
|
|
Drivers: {
|
|
'1': driver('1', 1, '', '', { NumberOfLaps: 30 }),
|
|
'4': driver('4', 2, '+0.523', '+0.523'),
|
|
'44': driver('44', 3, '+3.214', '+3.737'),
|
|
'63': driver('63', 4, '+12.001', '+15.738', { InPit: true }),
|
|
},
|
|
DriverInfo: {
|
|
'1': info('1', 'VER', 'Max', 'Verstappen', 'Red Bull Racing', '3671C6'),
|
|
'4': info('4', 'NOR', 'Lando', 'Norris', 'McLaren', 'FF8000'),
|
|
'44': info('44', 'HAM', 'Lewis', 'Hamilton', 'Ferrari', 'E80020'),
|
|
'63': info('63', 'RUS', 'George', 'Russell', 'Mercedes', '27F4D2'),
|
|
},
|
|
Tyres: {
|
|
'1': { Compound: 'HARD', New: false, Age: 12 },
|
|
'4': { Compound: 'MEDIUM', New: false, Age: 8 },
|
|
'44': { Compound: 'MEDIUM', New: true, Age: 3 },
|
|
'63': { Compound: 'HARD', New: true, Age: 0 },
|
|
},
|
|
Stints: {
|
|
'1': [
|
|
{ Compound: 'MEDIUM', New: true, Laps: 18 },
|
|
{ Compound: 'HARD', New: false, Laps: 12 },
|
|
],
|
|
'4': [
|
|
{ Compound: 'SOFT', New: true, Laps: 14 },
|
|
{ Compound: 'MEDIUM', New: true, Laps: 16 },
|
|
],
|
|
},
|
|
RCMessages: [
|
|
{ Time: '2026-07-03T14:05:00Z', Category: 'Flag', Flag: 'YELLOW', Message: 'YELLOW IN SECTOR 2', Lap: 29 },
|
|
],
|
|
Weather: {
|
|
AirTemp: 22.5,
|
|
TrackTemp: 41.3,
|
|
Humidity: 58,
|
|
WindSpeed: 3.4,
|
|
WindDir: 180,
|
|
Rainfall: false,
|
|
},
|
|
Session: {
|
|
MeetingName: 'Testonia Grand Prix',
|
|
CircuitName: 'Testring',
|
|
SessionType: 'Race',
|
|
SessionName: 'Race',
|
|
},
|
|
TrackStatus: '2',
|
|
CurrentLap: 30,
|
|
TotalLaps: 57,
|
|
Clock: '',
|
|
ClockRefTime: '',
|
|
ClockExtrapolating: false,
|
|
},
|
|
}
|
|
|
|
const sprintQualifyingSnapshot = {
|
|
is_live: true,
|
|
data: {
|
|
...raceSnapshot.data,
|
|
Drivers: Object.fromEntries(
|
|
Array.from({ length: 22 }, (_, index) => {
|
|
const num = String(index + 1)
|
|
return [
|
|
num,
|
|
driver(num, index + 1, index === 0 ? '' : `+${(index * 0.123).toFixed(3)}`, index === 0 ? '' : `+${(index * 0.123).toFixed(3)}`, {
|
|
LastLapTime: index < 2 ? '1:29.273' : '',
|
|
BestLapTime: `1:${String(29 + Math.floor(index / 10)).padStart(2, '0')}.${String(273 + index).padStart(3, '0')}`,
|
|
NumberOfLaps: 4,
|
|
Sectors: index === 7
|
|
? [{ Value: '28.573', PersonalFastest: false, OverallFastest: false }, { Value: '', PersonalFastest: false, OverallFastest: false }, { Value: '', PersonalFastest: false, OverallFastest: false }]
|
|
: [],
|
|
OnFlyingLap: index === 7,
|
|
}),
|
|
]
|
|
}),
|
|
),
|
|
DriverInfo: Object.fromEntries(
|
|
Array.from({ length: 22 }, (_, index) => {
|
|
const num = String(index + 1)
|
|
return [num, info(num, `D${index + 1}`, 'Driver', String(index + 1), 'Test Team', index % 2 ? 'FF8000' : '27F4D2')]
|
|
}),
|
|
),
|
|
Tyres: Object.fromEntries(
|
|
Array.from({ length: 22 }, (_, index) => [String(index + 1), { Compound: 'MEDIUM', New: false, Age: index % 4 }]),
|
|
),
|
|
Session: {
|
|
MeetingName: 'British Grand Prix',
|
|
CircuitName: 'Silverstone',
|
|
SessionType: 'Sprint Qualifying',
|
|
SessionName: 'Sprint Qualifying',
|
|
},
|
|
TrackStatus: '1',
|
|
CurrentLap: 0,
|
|
TotalLaps: 0,
|
|
Clock: '00:02:11',
|
|
ClockRefTime: '2026-07-03T15:39:49Z',
|
|
ClockExtrapolating: false,
|
|
},
|
|
}
|
|
|
|
// Practice: the feed sets best laps but no GapToLeader/Interval, and there is
|
|
// no race lap-total concept. Exercises computed gaps, the non-race banner, the
|
|
// collapsed-by-default tyre panel, and the 390px core-field layout.
|
|
const practiceSnapshot = {
|
|
is_live: true,
|
|
data: {
|
|
...raceSnapshot.data,
|
|
Drivers: Object.fromEntries(
|
|
Array.from({ length: 10 }, (_, index) => {
|
|
const num = String(index + 1)
|
|
return [
|
|
num,
|
|
driver(num, index + 1, '', '', {
|
|
// Distinct, increasing best laps; P1 fastest, +0.200s per position.
|
|
BestLapTime: `1:${(45.9 + index * 0.2).toFixed(3).padStart(6, '0')}`,
|
|
LastLapTime: '1:46.500',
|
|
NumberOfLaps: 12,
|
|
Sectors: index === 0
|
|
? [
|
|
{ Value: '28.500', PersonalFastest: true, OverallFastest: false },
|
|
{ Value: '52.100', PersonalFastest: false, OverallFastest: false },
|
|
{ Value: '25.344', PersonalFastest: false, OverallFastest: false },
|
|
]
|
|
: [],
|
|
}),
|
|
]
|
|
}),
|
|
),
|
|
DriverInfo: Object.fromEntries(
|
|
Array.from({ length: 10 }, (_, index) => {
|
|
const num = String(index + 1)
|
|
return [num, info(num, `D${index + 1}`, 'Driver', String(index + 1), 'Test Team', index % 2 ? 'FF8000' : '27F4D2')]
|
|
}),
|
|
),
|
|
Tyres: Object.fromEntries(
|
|
Array.from({ length: 10 }, (_, index) => [String(index + 1), { Compound: 'SOFT', New: false, Age: index % 4 }]),
|
|
),
|
|
Session: {
|
|
MeetingName: 'Belgian Grand Prix',
|
|
CircuitName: 'Spa-Francorchamps',
|
|
SessionType: 'Practice',
|
|
SessionName: 'Practice 2',
|
|
},
|
|
TrackStatus: '1',
|
|
CurrentLap: 0,
|
|
TotalLaps: 0,
|
|
Clock: '00:45:00',
|
|
ClockRefTime: '2026-07-17T13:00:00Z',
|
|
ClockExtrapolating: false,
|
|
},
|
|
}
|
|
|
|
test.describe('Live Timing (mocked snapshot)', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route('**/api/v1/live/state', (route) =>
|
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(raceSnapshot) }),
|
|
)
|
|
// A single heartbeat then EOF; the page keeps the query snapshot either way.
|
|
await page.route('**/api/v1/live/stream', (route) =>
|
|
route.fulfill({
|
|
contentType: 'text/event-stream',
|
|
body: 'event: heartbeat\ndata: {}\n\n',
|
|
}),
|
|
)
|
|
await page.goto('/live')
|
|
})
|
|
|
|
test('renders timing tower with drivers from the snapshot', async ({ page }) => {
|
|
await expect(page.getByTestId('live-page')).toBeVisible()
|
|
const tower = page.locator('.live-tower')
|
|
await expect(tower).toBeVisible()
|
|
await expect(tower).toContainText('VER')
|
|
await expect(tower).toContainText('NOR')
|
|
await expect(tower).toContainText('HAM')
|
|
await expect(tower.locator('tr.in-pit')).toContainText('RUS')
|
|
})
|
|
|
|
test('shows yellow flag banner from TrackStatus', async ({ page }) => {
|
|
const banner = page.getByTestId('track-banner')
|
|
await expect(banner).toBeVisible()
|
|
await expect(banner).toContainText('YELLOW FLAG')
|
|
})
|
|
|
|
test('shows weather strip with track temperature', async ({ page }) => {
|
|
const weather = page.getByTestId('weather-strip')
|
|
await expect(weather).toBeVisible()
|
|
await expect(weather).toContainText('41°C')
|
|
})
|
|
|
|
test('detects the VER/NOR battle and highlights it', async ({ page }) => {
|
|
const chips = page.getByTestId('battle-chips')
|
|
await expect(chips).toBeVisible()
|
|
await expect(chips).toContainText('VER ⚔ NOR')
|
|
// The in-pit car must never be part of a battle group.
|
|
await expect(chips).not.toContainText('RUS')
|
|
})
|
|
|
|
test('renders stint history for drivers that have stints', async ({ page }) => {
|
|
await page.locator('.live-tower tbody tr', { hasText: 'VER' }).click()
|
|
await expect(page.getByTestId('stint-seq').first()).toBeVisible()
|
|
})
|
|
|
|
test('clicking a pin button pins the driver to the focus strip', async ({ page }) => {
|
|
await page.locator('.live-tower tbody tr', { hasText: 'VER' }).locator('.pin-btn').click()
|
|
const pinned = page.getByTestId('pinned-strip')
|
|
await expect(pinned).toBeVisible()
|
|
await expect(pinned).toContainText('VER')
|
|
|
|
// Unpin restores the empty strip.
|
|
await page.locator('.live-tower tbody tr', { hasText: 'VER' }).locator('.pin-btn').click()
|
|
await expect(page.getByTestId('pinned-strip')).toHaveCount(0)
|
|
})
|
|
})
|
|
|
|
test.describe('Live Timing (mocked Sprint Qualifying)', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route('**/api/v1/live/state', (route) =>
|
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(sprintQualifyingSnapshot) }),
|
|
)
|
|
await page.route('**/api/v1/live/stream', (route) =>
|
|
route.fulfill({
|
|
contentType: 'text/event-stream',
|
|
body: 'event: heartbeat\ndata: {}\n\n',
|
|
}),
|
|
)
|
|
await page.goto('/live')
|
|
})
|
|
|
|
test('shows SQ1 phase, large clock, and 22-car cutoff after P17', async ({ page }) => {
|
|
await expect(page.getByText('SQ1', { exact: true })).toBeVisible()
|
|
await expect(page.getByTestId('live-clock')).toContainText('00:02:11')
|
|
await expect(page.getByTestId('qualifying-cutoff')).toContainText('P17 advance')
|
|
await expect(page.getByTestId('qualifying-cutoff')).toContainText('P18-P22 at risk')
|
|
await expect(page.locator('.live-tower tbody tr', { hasText: 'D18' })).toHaveClass(/danger-row/)
|
|
await expect(page.locator('.live-tower tbody tr', { hasText: 'D8' })).toHaveClass(/flying-row/)
|
|
})
|
|
})
|
|
|
|
test.describe('Live Timing (mocked Practice)', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route('**/api/v1/live/state', (route) =>
|
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(practiceSnapshot) }),
|
|
)
|
|
await page.route('**/api/v1/live/stream', (route) =>
|
|
route.fulfill({ contentType: 'text/event-stream', body: 'event: heartbeat\ndata: {}\n\n' }),
|
|
)
|
|
await page.goto('/live')
|
|
})
|
|
|
|
test('derives a gap to P1 from best laps and marks the leader', async ({ page }) => {
|
|
const tower = page.locator('.live-tower')
|
|
await expect(tower).toBeVisible()
|
|
// P1 shows a leader marker, not a fabricated gap.
|
|
await expect(tower.locator('tbody tr').first()).toContainText('—')
|
|
// P2 shows the computed +0.200 delta.
|
|
await expect(tower).toContainText('+0.200')
|
|
})
|
|
|
|
test('omits the race lap counter and keeps the session clock for practice', async ({ page }) => {
|
|
await expect(page.getByTestId('live-lap-counter')).toHaveCount(0)
|
|
await expect(page.getByTestId('live-clock')).toContainText('00:45:00')
|
|
await expect(page.locator('.live-banner')).not.toContainText('L-/-')
|
|
})
|
|
|
|
test('collapses the tyre panel by default so the tower is above the fold', async ({ page }) => {
|
|
await expect(page.getByTestId('tyredeg-panel')).toBeVisible()
|
|
await expect(page.getByTestId('tyredeg-row')).toHaveCount(0)
|
|
await expect(page.locator('.live-tower')).toBeVisible()
|
|
})
|
|
|
|
test('labels Race Control times as UTC', async ({ page }) => {
|
|
await expect(page.getByTestId('rc-timezone')).toContainText('UTC')
|
|
})
|
|
|
|
test('marks Live as active in the primary navigation', async ({ page }) => {
|
|
await expect(page.getByTestId('nav-live')).toHaveAttribute('data-live-active', 'true')
|
|
await expect(page.getByTestId('nav-live').locator('.nav-live-dot')).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe('Live Timing (390px practice viewport)', () => {
|
|
test.use({ viewport: { width: 390, height: 844 } })
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route('**/api/v1/live/state', (route) =>
|
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(practiceSnapshot) }),
|
|
)
|
|
await page.route('**/api/v1/live/stream', (route) =>
|
|
route.fulfill({ contentType: 'text/event-stream', body: 'event: heartbeat\ndata: {}\n\n' }),
|
|
)
|
|
await page.goto('/live')
|
|
})
|
|
|
|
test('shows the five core fields with no horizontal overflow', async ({ page }) => {
|
|
const tower = page.locator('.live-tower')
|
|
await expect(tower).toBeVisible()
|
|
|
|
// Core comparison fields are present in the header.
|
|
await expect(tower.locator('thead')).toContainText('Pos')
|
|
await expect(tower.locator('thead')).toContainText('Driver')
|
|
await expect(tower.locator('thead')).toContainText('Tyre')
|
|
await expect(tower.locator('thead')).toContainText('Best')
|
|
await expect(tower.locator('thead')).toContainText('Gap to P1')
|
|
|
|
// Sectors are hidden from the initial mobile tower (reachable via expand).
|
|
const firstSector = tower.locator('thead th', { hasText: 'S1' })
|
|
await expect(firstSector).toBeHidden()
|
|
|
|
// The document must not scroll horizontally.
|
|
const overflow = await page.evaluate(
|
|
() => document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
|
)
|
|
expect(overflow).toBeLessThanOrEqual(0)
|
|
})
|
|
|
|
test('exposes sectors through the row detail interaction', async ({ page }) => {
|
|
// Sector columns are not in the initial mobile tower...
|
|
await expect(page.locator('.live-tower thead th', { hasText: 'S1' })).toBeHidden()
|
|
// ...but the P1 row's sectors are reachable by expanding the row.
|
|
await page.locator('.live-tower tbody tr', { hasText: 'D1' }).first().click()
|
|
const sectors = page.getByTestId('expanded-sectors')
|
|
await expect(sectors).toBeVisible()
|
|
await expect(sectors).toContainText('28.500')
|
|
})
|
|
})
|
|
|
|
test.describe('Live Timing (no session)', () => {
|
|
test('shows the empty state when the feed has no snapshot', async ({ page }) => {
|
|
await page.goto('/live')
|
|
await expect(page.getByTestId('live-empty')).toBeVisible()
|
|
await expect(page.getByTestId('live-page')).toContainText('No live session active')
|
|
})
|
|
|
|
test('renders an archived snapshot only after View Last Session', async ({ page }) => {
|
|
await page.route('**/api/v1/live/state', (route) =>
|
|
route.fulfill({
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
is_live: false,
|
|
data: null,
|
|
last_snapshot: {
|
|
...raceSnapshot.data,
|
|
SessionStatus: 'Finished',
|
|
},
|
|
last_positions: {
|
|
'1': { x: 100, y: -50, z: 2, status: 'OnTrack' },
|
|
},
|
|
last_snapshot_at: '2026-07-04T14:00:00Z',
|
|
}),
|
|
}),
|
|
)
|
|
await page.route('**/api/v1/live/stream', (route) =>
|
|
route.fulfill({
|
|
contentType: 'text/event-stream',
|
|
body: 'event: heartbeat\ndata: {}\n\n',
|
|
}),
|
|
)
|
|
|
|
await page.goto('/live')
|
|
await expect(page.getByTestId('live-empty')).toContainText('No live session active')
|
|
await expect(page.getByText('Timing Tower')).toHaveCount(0)
|
|
|
|
await page.getByRole('button', { name: 'View Last Session' }).click()
|
|
await expect(page.getByTestId('live-archive-strip')).toContainText('Archived snapshot')
|
|
await expect(page.getByText('Timing Tower')).toBeVisible()
|
|
await expect(page.locator('.live-state')).toContainText('archive')
|
|
})
|
|
})
|