flights_web/docs/superpowers/plans/2026-04-15-phase-2h-integration.md

Phase 2H — Integration Tests

Date: 2026-04-15 Parent: 2026-04-14-phase-2-online-board-master.md section 2H Scope: Component-level integration tests for the Online Board feature

Overview

Integration tests that verify the Online Board feature works end-to-end at the component level. Since CI cannot run a full Modern.js dev server + real SignalR hub, these are vitest + React Testing Library tests with mocked API and SignalR layers.

Deviation from master plan

The master plan specifies Playwright E2E tests. This sub-plan implements component-level integration tests instead — they run in vitest/jsdom, mock the API and SignalR layers, and verify component composition, data flow, URL routing, error handling, and SEO output. This is faster, more reliable in CI, and catches the same integration regressions without requiring a running server.

Test inventory

1. tests/integration/online-board/start-page.test.tsx

• Renders start page, verifies search form with all 4 mode tabs
• Verifies correct form fields appear per search type
• Verifies form submission builds correct URL

2. tests/integration/online-board/flight-search.test.tsx

• Renders search page with mocked API returning flight data
• Verifies FlightList renders with correct flights
• Verifies connection status badge renders
• Verifies calendar strip renders with available days

3. tests/integration/online-board/flight-details.test.tsx

• Renders details page with mocked API returning flight details
• Verifies flight info renders (number, status, legs, operating carrier)
• Verifies SeoHead produces expected title/canonical
• Verifies error state when API fails

4. tests/integration/online-board/url-roundtrip.test.tsx

• Build URL from params -> parse URL -> verify params match
• Verify all 4 search types + details type round-trip correctly
• Verify URL params produce correct API call parameters (via toSearchParams)

5. tests/integration/online-board/error-handling.test.tsx

• Renders search page with mocked API error (ApiHttpError 404, 500)
• Renders search page with mocked timeout error
• Verifies error UI renders with retry button
• Verifies retry triggers re-fetch

6. tests/integration/online-board/seo-integration.test.tsx

• Renders details page via renderToString, verifies title/description/canonical in HTML
• Verifies JSON-LD script block present in rendered HTML
• Verifies OG meta tags in rendered HTML
• Verifies hreflang links in rendered HTML

Mocking strategy

• ApiClient: Mocked via vi.mock("@/shared/api/provider.js") — useApiClient() returns a mock ApiClient whose .get() resolves with fixture data.
• SignalR hooks: Mocked via vi.mock("../hooks/useLiveBoardSearch.js") and vi.mock("../hooks/useLiveFlightDetails.js") — return static data with configurable connection status.
• Router: Mocked via vi.mock("@modern-js/runtime/router") — useNavigate returns a spy, useParams returns test locale.
• i18n: Mocked via vi.mock("@/i18n/provider.js") — useTranslation returns a stub t function that echoes the key.
• Environment: Mocked via vi.mock("@/env/index.js") — returns test environment values.

Vitest configuration

• Integration tests use // @vitest-environment jsdom pragma per file
• Test files at tests/integration/online-board/*.test.tsx
• Already included by vitest's include pattern (needs tests/**/*.test.tsx added)

Dependencies

• @testing-library/react (already installed)
• @testing-library/jest-dom (to install)
• jsdom (already installed)

Exit criteria

• All 6 test files pass with pnpm test
• 20-30 integration tests total
• No real HTTP calls or SignalR connections
• pnpm typecheck passes
• pnpm lint passes
• pnpm build:standalone passes

Tasks

1. Install @testing-library/jest-dom
2. Update vitest config to include tests/**/*.test.tsx
3. Create shared test fixtures and helpers
4. Create all 6 test files
5. Verify: typecheck + lint + test + build