Files
Dinawo 133feff75d
Release / Release / open changeset PR (push) Has been cancelled
CI / Build, typecheck, test, a11y (push) Has been cancelled
feat(v1): bloquants release v1 — tests, stories, visual regression, gouvernance, publishing
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>
2026-05-04 22:29:35 +02:00

1.6 KiB

Visual regression — Playwright

Local

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 :
    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).