53 lines
2.1 KiB
JavaScript
53 lines
2.1 KiB
JavaScript
import { test, expect } from "@playwright/test";
|
|
|
|
// 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("/examples/whynot-control/index.html");
|
|
await page.waitForFunction(() => !!document.querySelector("aside"));
|
|
await page.waitForTimeout(800);
|
|
await expect(page).toHaveScreenshot("01-prototypes.png", { fullPage: true });
|
|
});
|
|
|
|
test("inbox", async ({ page }) => {
|
|
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(500);
|
|
await expect(page).toHaveScreenshot("02-inbox.png", { fullPage: true });
|
|
});
|
|
|
|
test("signals", async ({ page }) => {
|
|
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(500);
|
|
await expect(page).toHaveScreenshot("03-signals.png", { fullPage: true });
|
|
});
|
|
|
|
test("control doc — INTENT.md", async ({ page }) => {
|
|
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(500);
|
|
await expect(page).toHaveScreenshot("04-doc-intent.png", { fullPage: true });
|
|
});
|
|
});
|