# Integration Test Instructions

## Purpose
This feature consists of a single unit (`react-frontend-app`, a static marketing site with no backend service and no other units to integrate with). There is no cross-service integration to test. Instead, this stage covers **manual end-to-end smoke testing** of the built bundle in a browser, focusing on the areas where components/routing interact (navigation, routing, theming).

## Test Scenarios

### Scenario 1: Full Page Render & Navigation Flow
- **Description**: Verify that the whole single-page site renders and that in-page navigation (Nav links, Hero CTAs, package CTA) scrolls to the correct sections repeatedly, without ever reverting to the top.
- **Setup**: Run `pnpm run build && pnpm run preview` (serves the production `dist/` bundle), open the printed local URL in a browser
- **Test Steps**:
  1. Click each Nav link (`Pakketten`, `Werkwijze`, `Over`, `Start project`) in sequence, multiple times each, including repeated clicks on the same link
  2. Click the Hero CTAs (`Bekijk pakketten`, `Plan een gesprek`)
  3. Click a package card's CTA (`Kies ...` / `Vraag offerte aan`)
  4. Click the logo (`SLP.Software`) to return to `#top`
- **Expected Results**: Every click smoothly scrolls to the correct section every time; the page never snaps back to the top on a repeated/second click (this was the regression fixed via `handleAnchorClick`/`scrollToHash`); the URL hash is not required to change for scrolling to work
- **Cleanup**: Stop the `pnpm run preview` process

### Scenario 2: Theme Toggle Integration
- **Description**: Verify the theme toggle correctly switches and persists across the whole page (all sections read from the same theme context)
- **Setup**: Same as Scenario 1
- **Test Steps**: Toggle the theme control in the Nav; observe all sections (Hero, Packages, Process, About, Contact)
- **Expected Results**: All sections switch theme consistently; no section is left in the previous theme
- **Cleanup**: None

## Setup Integration Test Environment

### 1. Build and Serve the Production Bundle
```bash
pnpm run build
pnpm run preview
```

### 2. Configure Service Endpoints
Not applicable — no external services or APIs are called by this unit.

## Run Integration Tests

### 1. Execute Manual Smoke Test Suite
Follow Scenario 1 and Scenario 2 above in a browser against the `pnpm run preview` URL.

### 2. Verify Behaviors
- **Test Scenarios**: Navigation/scroll repeatability (Scenario 1), theme consistency (Scenario 2)
- **Expected Results**: See per-scenario expectations above
- **Logs Location**: Browser DevTools console (should show no errors/warnings during navigation)

### 3. Cleanup
Stop the preview server (`Ctrl+C` or terminate the process).

## Status
- **Automated integration/contract tests**: N/A — single static unit, no service boundaries to test
- **Manual smoke test**: Recommended before each deployment; the navigation-scroll regression (Scenario 1) was manually verified as fixed during this session