Expand React race hub analytics

frontend/src/test/DatasetStatusView.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { DatasetStatusView } from '../components/DatasetStatusView'
+import type { DatasetInfo } from '../types'
+
+const allAvailable: Record<string, DatasetInfo> = {
+  meeting: { status: 'available', source: 'local', count: 1 },
+  session: { status: 'available', source: 'local', count: 1 },
+  drivers: { status: 'available', source: 'local', count: 20 },
+  results: { status: 'available', source: 'local', count: 20 },
+  starting_grid: { status: 'available', source: 'local', count: 20 },
+}
+
+const partial: Record<string, DatasetInfo> = {
+  meeting: { status: 'available', source: 'local', count: 1 },
+  session: { status: 'available', source: 'local', count: 1 },
+  drivers: { status: 'missing', source: 'none' },
+  results: { status: 'missing', source: 'none' },
+  starting_grid: { status: 'missing', source: 'none' },
+}
+
+describe('DatasetStatusView', () => {
+  it('shows 5/5 when all available', () => {
+    render(<DatasetStatusView datasets={allAvailable} />)
+    expect(screen.getByText(/5\/5/)).toBeInTheDocument()
+  })
+
+  it('shows local badges for available datasets', () => {
+    render(<DatasetStatusView datasets={allAvailable} />)
+    const localBadges = screen.getAllByText('Local')
+    expect(localBadges).toHaveLength(5)
+  })
+
+  it('shows missing badges for missing datasets', () => {
+    render(<DatasetStatusView datasets={partial} />)
+    const missingBadges = screen.getAllByText('Missing')
+    expect(missingBadges).toHaveLength(3)
+  })
+
+  it('shows the ingest command when data is missing', () => {
+    render(<DatasetStatusView datasets={partial} />)
+    expect(screen.getByText(/ingest-session/i)).toBeInTheDocument()
+  })
+
+  it('does not show ingest command when all available', () => {
+    render(<DatasetStatusView datasets={allAvailable} />)
+    expect(screen.queryByText(/ingest-session/i)).not.toBeInTheDocument()
+  })
+
+  it('shows record counts', () => {
+    render(<DatasetStatusView datasets={allAvailable} />)
+    const twenties = screen.getAllByText('20')
+    expect(twenties.length).toBeGreaterThan(0)
+  })
+})

frontend/src/test/TabBar.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { TabBar } from '../components/TabBar'
+
+describe('TabBar', () => {
+  it('renders all 5 tabs', () => {
+    render(<TabBar active="results" onChange={() => {}} />)
+    expect(screen.getByRole('tab', { name: 'Results' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Grid' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Strategy' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Positions' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Datasets' })).toBeInTheDocument()
+  })
+
+  it('marks the active tab with aria-selected', () => {
+    render(<TabBar active="grid" onChange={() => {}} />)
+    expect(screen.getByRole('tab', { name: 'Grid' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByRole('tab', { name: 'Results' })).toHaveAttribute('aria-selected', 'false')
+  })
+
+  it('applies active class only to the active tab', () => {
+    render(<TabBar active="strategy" onChange={() => {}} />)
+    const strategy = screen.getByRole('tab', { name: 'Strategy' })
+    const results = screen.getByRole('tab', { name: 'Results' })
+    expect(strategy.className).toContain('active')
+    expect(results.className).not.toContain('active')
+  })
+
+  it('calls onChange with the correct tab id when clicked', () => {
+    const onChange = vi.fn()
+    render(<TabBar active="results" onChange={onChange} />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Datasets' }))
+    expect(onChange).toHaveBeenCalledWith('datasets')
+  })
+})