From 14d9bd3dd48a7ac0578fdef1eb8a339e3b697a6a Mon Sep 17 00:00:00 2001
From: AmanTahiliani <amantahiliani7437@gmail.com>
Date: Sun, 12 Jul 2026 20:13:07 -0400
Subject: [PATCH] fix(#83): align prod Race Story smoke with final running
 order outcome

Replace the removed "Final Classification" literal with an accessible
race-story-outcome region and assert VER is P1 in the built SPA smoke.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/components/RaceStoryCanvas.tsx |  7 ++++++-
 frontend/src/test/RaceStoryCanvas.test.tsx  |  9 +++++++++
 tests/production-smoke.spec.ts              | 11 +++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/RaceStoryCanvas.tsx b/frontend/src/components/RaceStoryCanvas.tsx
index 9d5f62f..4945ad4 100644
--- a/frontend/src/components/RaceStoryCanvas.tsx
+++ b/frontend/src/components/RaceStoryCanvas.tsx
@@ -704,7 +704,12 @@ export function RaceStoryCanvas({ data }: Props) {
       </div>
 
       {displayResults.length > 0 && (
-        <div className="rs-field-list">
+        <div
+          className="rs-field-list"
+          role="region"
+          aria-label="Final running order"
+          data-testid="race-story-outcome"
+        >
           {displayResults.map((r, i) => {
             const gridPos = grid.find((g) => g.driver_number === r.driver_number)?.position ?? 0
             const currentPos = scrubTime !== null ? i + 1 : r.position
diff --git a/frontend/src/test/RaceStoryCanvas.test.tsx b/frontend/src/test/RaceStoryCanvas.test.tsx
index b822f25..32f6e79 100644
--- a/frontend/src/test/RaceStoryCanvas.test.tsx
+++ b/frontend/src/test/RaceStoryCanvas.test.tsx
@@ -278,6 +278,15 @@ describe('RaceStoryCanvas replay map', () => {
     expect(screen.getByTestId('chapter-card-0')).not.toHaveClass('active')
   })
 
+  it('exposes the final running order outcome region with winner position', () => {
+    renderCanvas()
+
+    const outcome = screen.getByTestId('race-story-outcome')
+    expect(outcome).toHaveAttribute('aria-label', 'Final running order')
+    expect(outcome).toHaveTextContent('VER')
+    expect(outcome.querySelector('.rs-pos-col')).toHaveTextContent('1')
+  })
+
   it('renders the empty-state card when positions are unavailable', () => {
     renderCanvas({
       datasets: { positions: { status: 'missing', source: 'local', count: 0 } },
diff --git a/tests/production-smoke.spec.ts b/tests/production-smoke.spec.ts
index bdfa9be..a1065bf 100644
--- a/tests/production-smoke.spec.ts
+++ b/tests/production-smoke.spec.ts
@@ -18,8 +18,15 @@ test.describe('Production serving (Go + built React)', () => {
     await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()
 
     await page.getByRole('tab', { name: 'Race Story' }).click()
-    await expect(page.getByText('Final Classification')).toBeVisible()
-    await expect(page.locator('.drv-code', { hasText: 'VER' })).toBeVisible()
+
+    const outcome = page.getByRole('region', { name: 'Final running order' })
+    await expect(outcome).toBeVisible()
+    await expect(outcome).toHaveAttribute('data-testid', 'race-story-outcome')
+
+    const verRow = page.locator('.rs-driver-row', {
+      has: page.locator('.rs-driver-name', { hasText: 'VER' }),
+    })
+    await expect(verRow.locator('.rs-pos-col')).toHaveText('1')
   })
 
   test('serves admin / data health route', async ({ page }) => {