18 — QA Pipeline and Testing

PRD Document · Savoy Signature Hotels — Multi-Site Headless Platform
Version: 1.0 · Date: 2026-03-04
Related docs: 02_Infrastructure_and_Environments.md, 04_Frontend_Architecture.md, 14_Accessibility_and_Compliance.md

1. Purpose

This document defines the quality assurance strategy, testing pipeline, and the role of the openClaw AI QA Agent across the Savoy Signature platform. It covers unit, integration, visual regression, and accessibility testing, as well as the CI/CD quality gates.

2. Testing Architecture

2.1 Testing Pyramid

2.2 Tool Stack

Layer	Tool	Scope
Unit	Vitest	Mappers, utility functions, data transformations
Component	Vitest + React Testing Library	Module rendering, props, variants
Storybook	Chromatic or Percy	Visual regression across themes and viewports
E2E	Playwright	Full user flows (navigation, forms, language switch, booking bar)
Accessibility	axe-core (via Playwright + Storybook)	WCAG 2.1 AA compliance
Performance	Lighthouse CI	Core Web Vitals budget enforcement
AI QA	openClaw	Holistic audit: a11y, performance, visual consistency, broken links

3. Test Scope per Layer

3.1 Unit Tests (Vitest)

What to Test	Example
Module mappers	`mapHeroSlider()` transforms API response → correct `HeroSliderProps`
Utility functions	`buildCacheTags()`, `generateHreflangMap()`, `sanitizeSlug()`
Site resolver	`getSiteConfig('savoy-palace')` returns correct domain, theme, locale config
URL builder	`buildUrl(siteKey, locale, slug)` constructs correct path

3.2 Component Tests (React Testing Library)

What to Test	Example
Render variants	`HeroSlider` renders correct number of slides, autoplay toggle
Accessibility	`Accordion` has correct `aria-expanded`, keyboard interaction
Theme application	Component renders correctly with `data-theme="savoy-palace"`
Edge cases	`CardGrid` with empty `cards[]` renders gracefully (no crash)

3.3 Visual Regression (Chromatic / Percy)

Storybook stories are the source of truth.
Every PR triggers a visual snapshot comparison across:
- 8 themes (subset: 3 representative themes for speed).
- 3 viewports: Mobile (375px), Tablet (768px), Desktop (1440px).
Reviewers approve visual diffs in the Chromatic/Percy dashboard before merge.

3.4 End-to-End Tests (Playwright)

Critical user flows tested against the STAGE environment:

Flow	Steps
Homepage → Room Detail	Navigate to homepage → click room card → verify room detail page loads with gallery, amenities, and Booking Bar
Language Switch	Visit `/pt/alojamento` → switch to EN → verify URL changes to `/en/accommodation` and content is in English
Contact Form Submit	Navigate to Contact page → fill form → submit → verify success message
404 Handling	Navigate to a non-existent URL → verify themed 404 page renders
Booking Bar Flow	Open Booking Bar → select dates → submit → verify redirect to Synxis with correct query params
Search	Use search functionality → verify results are scoped to current site
Gallery Lightbox	Open gallery → click image → verify lightbox opens, swipe navigation works

3.5 openClaw AI QA Agent

The openClaw agent runs automatically on every PR merge to develop, staging, or main. It performs a holistic audit:

Audit Area	What It Checks
Accessibility	axe-core scan of all rendered pages (WCAG 2.1 AA)
Performance	Lighthouse CI scores (Performance ≥ 90, A11y ≥ 95, SEO ≥ 95)
Broken Links	Crawl all internal links and verify no 404/500 responses
Visual Consistency	Screenshot comparison against baseline
SEO	Verify `<title>`, `<meta>`, `hreflang`, `robots`, JSON-LD presence
Console Errors	Flag any JavaScript errors in the browser console

4. CI/CD Quality Gates

4.1 PR Pipeline (GitHub Actions)

4.2 Merge Pipeline (develop → STAGE)

4.3 Quality Gate Thresholds

Gate	Threshold	Blocks Deploy?
ESLint errors	0	✅ Yes
TypeScript errors	0	✅ Yes
Unit test failures	0	✅ Yes
Visual regression diffs	Must be approved	✅ Yes
Lighthouse Performance	≥ 90	✅ Yes
Lighthouse Accessibility	≥ 95	✅ Yes
axe-core critical violations	0	✅ Yes
E2E test failures	0	✅ Yes
Console errors on STAGE	0	⚠️ Warning

5. Test Data Management

5.1 STAGE Environment Content

STAGE mirrors PROD content structure but uses test data (placeholder copy, test images).
A scheduled Umbraco task syncs content structure (not data) from PROD to STAGE weekly.
E2E tests rely on known, seeded content on STAGE (e.g., “Test Room Deluxe” with predictable slugs).

5.2 Test Fixtures

export const testRoom = {
  name: 'Test Room Deluxe',
  slug: 'test-room-deluxe',
  contentType: 'roomDetailPage',
  siteKey: 'savoy-palace',
  locale: 'pt',
  // ... complete fixture
};

6. Acceptance Criteria

Unit test coverage ≥ 80% for mapper functions and utility packages.
All module stories in Storybook have visual regression snapshots.
Playwright E2E suite covers all critical user flows and runs on STAGE after every deploy.
openClaw AI QA Agent blocks releases with critical accessibility or performance regressions.
Lighthouse CI scores are tracked over time and never drop below thresholds.
Zero ESLint, TypeScript, or unit test errors are allowed in merged PRs.

Next document: 19_Booking_Engine_Integration.md