From c6e4a4bd8421fb4d7236c0ea3fa9eceb6570f0eb Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Sun, 24 May 2026 19:42:09 -0300 Subject: [PATCH 1/2] test: browser smoke test for every Storybook story Add a @storybook/test-runner pass that opens every story in headless Chromium and asserts each component paints visible content with no console / page errors. Story images that 404 offline are filtered as resource noise; media elements (img/iframe/...) count as rendered even when their remote asset fails to load. Runs against both the dev server (test-storybook) and the production static build (test-storybook:ci -> storybook build + http-server). Storybook bundles from src/ via Vite, so this validates the components, not the published dist/ artifact (covered by the Next.js integration). Pinned to @storybook/test-runner 0.23.0 (the Storybook 9-compatible line; 0.24+ requires Storybook 10) and playwright 1.60.0, and wired into CI with a Chromium install step. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/test.yml | 10 + CLAUDE.md | 2 + packages/react/.storybook/test-runner.ts | 83 + packages/react/package.json | 11 +- pnpm-lock.yaml | 3381 +++++++++++++++++++++- 5 files changed, 3400 insertions(+), 87 deletions(-) create mode 100644 packages/react/.storybook/test-runner.ts diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index f79112a..1e5f27e 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -70,6 +70,16 @@ jobs: - name: Run test coverage run: pnpm test:coverage + # ── Storybook browser smoke test ──────────────────────────── + # Opens every story in headless Chromium and asserts each component + # paints visible content with no console / page errors. Runs against the + # production static build (storybook build → http-server). + - name: Install Playwright Chromium + run: pnpm --filter @unlayer/react-elements exec playwright install --with-deps chromium + + - name: Storybook smoke test + run: pnpm --filter @unlayer/react-elements test-storybook:ci + # ── Next.js integration test ──────────────────────────────── # Packs the built react-elements as a tarball and installs it # in a real Next.js app — exactly like a consumer would. diff --git a/CLAUDE.md b/CLAUDE.md index 7dcc109..7901792 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -98,6 +98,7 @@ Example: `