coulomb/whynot-design
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

version 0.2.0 replaces fromer version!
Some checks failed
ci / check (push) Has been cancelled
Details
ci / release (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Bernd Worsch
2026-05-25 19:32:22 +02:00
parent 9419f166ce
commit 80252baf53
33 changed files with 3434 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
tests/visual/ui-kit.spec.mjs
View File

@@ -1,48 +1,52 @@
import { test, expect } from "@playwright/test";
// Visual-regression baseline for the whynot-control UI kit.
// Snapshots live next to this file under __screenshots__/.
// Visual-regression baselines for @whynot/design.
//
// Two example pages are covered:
// 1. examples/showcase/index.html — every component, one page
// 2. examples/whynot-control/index.html — full app composition
//
// To update intentionally: pnpm test:visual:update
test.describe("showcase — every component", () => {
test("renders", async ({ page }) => {
await page.goto("/examples/showcase/index.html");
// Wait for custom elements to register + Lit to render.
await page.waitForFunction(() => !!customElements.get("wn-button"));
await page.waitForTimeout(800);
await expect(page).toHaveScreenshot("showcase.png", { fullPage: true });
});
});
test.describe("whynot-control UI kit", () => {
test("prototypes index", async ({ page }) => {
await page.goto("/index.html");
// Wait for Babel + Lucide to hydrate
await page.goto("/examples/whynot-control/index.html");
await page.waitForFunction(() => !!document.querySelector("aside"));
await page.waitForTimeout(500);
await page.waitForTimeout(800);
await expect(page).toHaveScreenshot("01-prototypes.png", { fullPage: true });
});
test("inbox", async ({ page }) => {
await page.goto("/index.html");
await page.goto("/examples/whynot-control/index.html");
await page.waitForFunction(() => !!document.querySelector("aside a"));
await page.click("aside a:has-text('Inbox')");
await page.waitForTimeout(400);
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("02-inbox.png", { fullPage: true });
});
test("signals", async ({ page }) => {
await page.goto("/index.html");
await page.goto("/examples/whynot-control/index.html");
await page.waitForFunction(() => !!document.querySelector("aside a"));
await page.click("aside a:has-text('Signals')");
await page.waitForTimeout(400);
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("03-signals.png", { fullPage: true });
});
test("prototype detail", async ({ page }) => {
await page.goto("/index.html");
await page.waitForFunction(() => !!document.querySelector("article"));
await page.click("article:nth-of-type(1)");
await page.waitForTimeout(400);
await expect(page).toHaveScreenshot("04-prototype-detail.png", { fullPage: true });
});
test("control doc — INTENT.md", async ({ page }) => {
await page.goto("/index.html");
await page.goto("/examples/whynot-control/index.html");
await page.waitForFunction(() => !!document.querySelector("aside a"));
await page.click("aside a:has-text('INTENT.md')");
await page.waitForTimeout(400);
await expect(page).toHaveScreenshot("05-doc-intent.png", { fullPage: true });
await page.waitForTimeout(500);
await expect(page).toHaveScreenshot("04-doc-intent.png", { fullPage: true });
});
});