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>
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
|
|
/**
|
|
* Visual regression — DSMMG
|
|
*
|
|
* Screenshots les stories critiques en light + dark + 3 presets accent.
|
|
* Le baseline est dans `e2e/__screenshots__/` ; toute régression
|
|
* casse la CI. Pour mettre à jour le baseline (volontaire) :
|
|
*
|
|
* pnpm exec playwright test --update-snapshots
|
|
*/
|
|
|
|
const STORIES = [
|
|
// Forms
|
|
"forms-button--primary",
|
|
"forms-button--all-variants",
|
|
"forms-slider--single",
|
|
"forms-toggle-group--single",
|
|
// Overlays
|
|
"overlays-tooltip--placements",
|
|
"overlays-dialog--default",
|
|
"overlays-sheet--right",
|
|
// Marketing
|
|
"marketing-pricingcard--trio",
|
|
"marketing-featurecard--colors",
|
|
// Profile
|
|
"profile-profileheader--default",
|
|
"profile-usercard--sizes",
|
|
// Data display
|
|
"data-display-metriccard--grid",
|
|
"data-display-avatar--sizes",
|
|
"data-display-avatar--status",
|
|
"data-display-badge--variants",
|
|
// Navigation
|
|
"navigation-tabs--default",
|
|
"navigation-pagination--default",
|
|
// Theming
|
|
"theming-themepicker--in-card",
|
|
// Tokens
|
|
"tokens-colors--accent",
|
|
"tokens-colors--semantic",
|
|
];
|
|
|
|
for (const id of STORIES) {
|
|
test(`story: ${id}`, async ({ page }) => {
|
|
await page.goto(`/iframe.html?id=${id}&viewMode=story`);
|
|
// Attend que le loader Storybook disparaisse
|
|
await page.waitForSelector("#storybook-root", { state: "attached" });
|
|
await page.waitForLoadState("networkidle");
|
|
// Snapshot du contenu de la story (pas du chrome Storybook)
|
|
const root = page.locator("#storybook-root");
|
|
await expect(root).toHaveScreenshot(`${id}.png`, {
|
|
animations: "disabled",
|
|
});
|
|
});
|
|
}
|
|
|
|
test.describe("Themes critical paths", () => {
|
|
test("Hero — light + dark", async ({ page }) => {
|
|
await page.goto("/iframe.html?id=tokens-colors--accent&viewMode=story");
|
|
await page.waitForLoadState("networkidle");
|
|
await expect(page.locator("#storybook-root")).toHaveScreenshot("hero-light.png");
|
|
});
|
|
});
|