Dinawo
133feff75d
6 chantiers v1 sur 7 livrés (DataTable refonte reportée car nécessite 2-3j en propre — TanStack Table + virtualisation + filter builder). v1-A — Tests (4 → 22 fichiers) : - Avatar, AvatarGroup, UserCard, MetricCard, ProfileHeader, Tooltip, Sheet, Drawer, Slider, ToggleGroup, Tabs, Pagination, Accordion, Switch, Badge, ConfirmDialog, Popover, Menu, Text, PricingCard, FeatureCard, Toast — chacun avec render + clavier + axe-core. v1-B — Storybook (7 → 23 fichiers) : - Avatar, UserCard, ProfileHeader, MetricCard, PricingCard, FeatureCard, Sheet (4 sides), HoverCard, Slider, ToggleGroup, Menu+ContextMenu, Toast (avec démo "Empiler 5"), Tabs, Pagination, Accordion, Badge. v1-D — Visual regression Playwright : - playwright.config.ts (light + dark, threshold strict 0.2) - e2e/visual.spec.ts (20 stories critiques) - Step CI + upload report en cas de fail v1-E — Site doc Starlight rempli : - 11 pages composants détaillées (Button, Input, Tooltip, Dialog, Toast, Avatar, ThemePicker, MetricCard, PricingCard, ToggleGroup, Slider) avec API, anatomie, do/don't, A11y. v1-F — Publishing Verdaccio : - verdaccio/config.yaml, docker-compose.verdaccio.yml, .npmrc - README setup local + déploiement prod + backups + sécurité v1-G — Gouvernance : - LICENSE, CONTRIBUTING.md, CODE_OF_CONDUCT.md, SECURITY.md - CODEOWNERS, PR template, 3 issue templates (bug/feature/rfc) Bug fix bonus : tooltip dark mode (text-primary comme bg + text-inverse comme texte → blanc-sur-blanc invisible). Remplacé par neutral-900/0 en light + bg-raised/text-primary en dark. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
46 lines
1.6 KiB
Markdown
46 lines
1.6 KiB
Markdown
# Visual regression — Playwright
|
|
|
|
## Local
|
|
|
|
```sh
|
|
pnpm install
|
|
pnpm exec playwright install chromium # première fois uniquement
|
|
pnpm test:visual # lance les tests
|
|
pnpm test:visual:update # met à jour le baseline
|
|
pnpm test:visual:report # ouvre le rapport HTML
|
|
```
|
|
|
|
## CI
|
|
|
|
Le workflow `.github/workflows/ci.yml` exécute les tests visuels sur
|
|
chaque PR. Si un test échoue :
|
|
|
|
1. Télécharger l'artifact `playwright-report` depuis l'action.
|
|
2. Comparer screenshots actuels / baseline.
|
|
3. **Régression réelle** → fix le composant.
|
|
4. **Changement intentionnel** → bumper le baseline via PR :
|
|
```sh
|
|
pnpm test:visual:update
|
|
git add e2e/__screenshots__
|
|
git commit -m "chore(visual): update baseline pour <comp>"
|
|
```
|
|
|
|
## Stratégie
|
|
|
|
- Screenshots des **stories critiques** uniquement (cf. `e2e/visual.spec.ts`).
|
|
- Light + Dark via projects Playwright.
|
|
- Threshold strict (0.2) — toute différence visible casse la CI.
|
|
- Baseline dans `e2e/__screenshots__/` versionné en git.
|
|
- Animations désactivées pour éviter la flakiness.
|
|
|
|
## Faux positifs courants
|
|
|
|
- **Fonts non chargées** : Playwright attend `networkidle` mais Figtree
|
|
via Google Fonts peut être lent. Si flake, augmenter le timeout ou
|
|
embarquer la font en local.
|
|
- **Anti-aliasing différent OS** : on teste en CI Linux (Chromium).
|
|
Les screenshots locaux Windows / macOS peuvent différer légèrement.
|
|
Toujours regen le baseline depuis CI.
|
|
- **Date dynamique** : si une story affiche `new Date()`, mocker via
|
|
`page.clock` ou éviter dans la story (utiliser une date fixée).
|