✨ feat(frontend): Storybook + auto-generated Playwright e2e docs with screenshots #30

arcodange · 2026-05-03T16:40:16+02:00

arcodange commented

2026-05-03 16:40:16 +02:00

Summary

Three additions to make frontend PRs reviewable directly from the Gitea web UI (per user request 2026-05-03):

Storybook 8 for Vue 3 components (with HealthDashboard story)
Playwright config: JSON reporter + screenshot on every test
Auto-generated markdown docs with breadcrumb navigation + embedded screenshots

User's framing: "rien que depuis l'interface gitea en ligne on puisse jauger du travail."

What you can see in this PR (Gitea web UI demo)

Browse to frontend/docs/e2e/README.md — list of e2e tests
Click home-page-loads-and-shows-server-health-info.md — see test status, duration, embedded screenshot
Use the breadcrumb [<- Back to index] to navigate back

Try it locally

cd frontend
npm install
npm run storybook            # http://localhost:6006
npm run docs:gen             # runs Playwright + regenerates docs/e2e/*.md

Files changed

.gitignore: frontend exclusions (storybook-static, test-results, playwright-report)
frontend/.storybook/{main,preview}.ts: Storybook 8 config
frontend/components/HealthDashboard.stories.ts: 1 example story
frontend/playwright.config.ts: JSON reporter + screenshots
frontend/tests/e2e/health.spec.ts: explicit screenshot path
frontend/scripts/generate-test-docs.mjs: doc generator
frontend/docs/README.md: top-level frontend docs index
frontend/docs/e2e/README.md: e2e index (auto-generated, committed)
frontend/docs/e2e/<test-slug>.md: per-test docs (auto-generated, committed)
frontend/tests/e2e/screenshots/<slug>.png: screenshots (committed for Gitea preview)
frontend/package.json + package-lock.json: devDeps + scripts docs:gen, docs:full

Out of scope

Visual regression testing
Storybook hosted preview deployment
More e2e test coverage (only 1 test for now)

Migration context

ARCODANGE Phase 1 - autonomous run via Mistral Vibe with ICM workspace at ~/Work/Vibe/workspaces/frontend-storybook-playwright-docs/. ~95 % autonomy; trainer (Claude) finalized commit/PR (Mistral hit max-turns at €3.87 with code complete).

🤖 Co-Authored-By: Mistral Vibe (devstral-2 / mistral-medium-3.5) + Claude Opus 4.7

## Summary Three additions to make frontend PRs reviewable directly from the Gitea web UI (per user request 2026-05-03): 1. **Storybook 8** for Vue 3 components (with HealthDashboard story) 2. **Playwright config**: JSON reporter + screenshot on every test 3. **Auto-generated markdown docs** with breadcrumb navigation + embedded screenshots User's framing: "rien que depuis l'interface gitea en ligne on puisse jauger du travail." ## What you can see in this PR (Gitea web UI demo) - Browse to [`frontend/docs/e2e/README.md`](frontend/docs/e2e/README.md) — list of e2e tests - Click [home-page-loads-and-shows-server-health-info.md](frontend/docs/e2e/home-page-loads-and-shows-server-health-info.md) — see test status, duration, embedded screenshot - Use the breadcrumb `[<- Back to index]` to navigate back ## Try it locally ```bash cd frontend npm install npm run storybook # http://localhost:6006 npm run docs:gen # runs Playwright + regenerates docs/e2e/*.md ``` ## Files changed - `.gitignore`: frontend exclusions (storybook-static, test-results, playwright-report) - `frontend/.storybook/{main,preview}.ts`: Storybook 8 config - `frontend/components/HealthDashboard.stories.ts`: 1 example story - `frontend/playwright.config.ts`: JSON reporter + screenshots - `frontend/tests/e2e/health.spec.ts`: explicit screenshot path - `frontend/scripts/generate-test-docs.mjs`: doc generator - `frontend/docs/README.md`: top-level frontend docs index - `frontend/docs/e2e/README.md`: e2e index (auto-generated, committed) - `frontend/docs/e2e/<test-slug>.md`: per-test docs (auto-generated, committed) - `frontend/tests/e2e/screenshots/<slug>.png`: screenshots (committed for Gitea preview) - `frontend/package.json` + `package-lock.json`: devDeps + scripts `docs:gen`, `docs:full` ## Out of scope - Visual regression testing - Storybook hosted preview deployment - More e2e test coverage (only 1 test for now) ## Migration context ARCODANGE Phase 1 - autonomous run via Mistral Vibe with ICM workspace at `~/Work/Vibe/workspaces/frontend-storybook-playwright-docs/`. ~95 % autonomy; trainer (Claude) finalized commit/PR (Mistral hit max-turns at €3.87 with code complete). 🤖 Co-Authored-By: Mistral Vibe (devstral-2 / mistral-medium-3.5) + Claude Opus 4.7

arcodange added 1 commit 2026-05-03 16:40:17 +02:00

✨ feat(frontend): Storybook + auto-generated Playwright e2e docs with screenshots dc1d84666f

Adds three things to make frontend PRs reviewable directly from Gitea web UI:

1. Storybook 8 for Vue 3 components
   - .storybook/main.ts + preview.ts
   - HealthDashboard.stories.ts (1 example story)
   - npm run storybook / npm run build-storybook

2. Playwright JSON reporter + screenshot on every test
   - playwright.config.ts: json reporter + screenshot: 'on'
   - health.spec.ts: explicit screenshot path

3. Auto-generated markdown docs with breadcrumbs
   - scripts/generate-test-docs.mjs: reads results.json -> generates docs/e2e/<test>.md per test
   - docs/README.md: top-level frontend docs index
   - docs/e2e/README.md: e2e index with link to each test
   - Each test markdown has breadcrumb [<- Back to index]
   - Screenshots embedded via relative path

Companion to PR #25 (Nuxt scaffold).

Out of scope (future PRs):
- Visual regression testing
- Storybook deployment / hosted preview
- More e2e test coverage

🤖 Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

arcodange merged commit a57bf4dd19 into main

2026-05-03 16:40:29 +02:00

arcodange deleted branch feat/frontend-storybook-and-docs

2026-05-03 16:40:29 +02:00

arcodange referenced this issue from a commit

2026-05-03 16:40:31 +02:00

✨ feat(frontend): Storybook + auto-generated Playwright e2e docs with screenshots (#30)

arcodange referenced this pull request

2026-05-03 17:55:31 +02:00

♻️ refactor(frontend): split HealthDashboard into smart wrapper + dumb View for state-based stories #33

Sign in to join this conversation.