diff --git a/docs/superpowers/plans/2026-04-15-phase-2h-integration.md b/docs/superpowers/plans/2026-04-15-phase-2h-integration.md new file mode 100644 index 00000000..183a7726 --- /dev/null +++ b/docs/superpowers/plans/2026-04-15-phase-2h-integration.md @@ -0,0 +1,86 @@ +# 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