SlpSoftware/aidlc-docs/features/react-frontend/construction/build-and-test/integration-test-instructions.md

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

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