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

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>
This commit is contained in:
2026-05-03 16:39:54 +02:00
parent 301471f728
commit dc1d84666f
14 changed files with 2531 additions and 31 deletions

View File

@@ -5,4 +5,5 @@ test('home page loads and shows server health info', async ({ page }) => {
await expect(page.getByTestId('health-dashboard')).toBeVisible()
const heading = page.getByRole('heading', { name: /dance-lessons-coach/i })
await expect(heading).toBeVisible()
await page.screenshot({ path: 'tests/e2e/screenshots/home-page-loads-and-shows-server-health-info.png', fullPage: true })
})

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB