Add harness workflow and Material showcase design system
This commit is contained in:
@@ -1,4 +1,9 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
|
||||
async function gotoStory(page: Page, storyId: string) {
|
||||
await page.goto(`/iframe.html?id=${storyId}&viewMode=story`);
|
||||
await expect(page).toHaveTitle(new RegExp(storyId, "i"), { timeout: 15_000 });
|
||||
}
|
||||
|
||||
test("storybook button, select, and static-motion form stories stay interactive", async ({
|
||||
page
|
||||
@@ -6,21 +11,20 @@ test("storybook button, select, and static-motion form stories stay interactive"
|
||||
await page.goto("/");
|
||||
await expect(page).toHaveTitle(/storybook/i);
|
||||
|
||||
await page.goto("/iframe.html?id=components-button--playground&viewMode=story");
|
||||
await gotoStory(page, "components-button--playground");
|
||||
const button = page.getByRole("button", { name: "Save changes" });
|
||||
await expect(button).toBeVisible();
|
||||
await button.focus();
|
||||
await expect(button).toBeFocused();
|
||||
|
||||
await page.goto("/iframe.html?id=components-select--playground&viewMode=story");
|
||||
await gotoStory(page, "components-select--playground");
|
||||
const selectTrigger = page.locator('[data-slot="trigger"]').first();
|
||||
await expect(selectTrigger).toBeVisible();
|
||||
await selectTrigger.click();
|
||||
await expect(page.getByRole("option", { name: "Legal review" })).toBeVisible();
|
||||
|
||||
await page.goto(
|
||||
"/iframe.html?id=components-form--launch-settings&viewMode=story&globals=motion:reduced"
|
||||
);
|
||||
await page.goto("/iframe.html?id=components-form--launch-settings&viewMode=story&globals=motion:reduced");
|
||||
await expect(page).toHaveTitle(/components-form--launch-settings/i, { timeout: 15_000 });
|
||||
await page.getByRole("textbox", { name: "Email address" }).fill("team@cadence.dev");
|
||||
await page.getByRole("combobox", { name: "Review lane" }).click();
|
||||
await page.getByRole("option", { name: "Legal" }).click();
|
||||
@@ -32,7 +36,7 @@ test("storybook button, select, and static-motion form stories stay interactive"
|
||||
});
|
||||
|
||||
test("storybook data table story stays interactive", async ({ page }) => {
|
||||
await page.goto("/iframe.html?id=components-data-table--playground&viewMode=story");
|
||||
await gotoStory(page, "components-data-table--playground");
|
||||
|
||||
const table = page.getByRole("table", { name: "Routing lanes" });
|
||||
await expect(table).toBeVisible();
|
||||
@@ -52,19 +56,19 @@ test("storybook data table story stays interactive", async ({ page }) => {
|
||||
});
|
||||
|
||||
test("storybook overlay stories stay interactive", async ({ page }) => {
|
||||
await page.goto("/iframe.html?id=components-dialog--playground&viewMode=story");
|
||||
await gotoStory(page, "components-dialog--playground");
|
||||
await page.getByRole("button", { name: "Open approval dialog" }).click();
|
||||
await expect(page.getByRole("dialog", { name: "Launch this release?" })).toBeVisible();
|
||||
await page.getByRole("button", { name: "Close dialog" }).click();
|
||||
await expect(page.getByRole("dialog")).toHaveCount(0);
|
||||
|
||||
await page.goto("/iframe.html?id=components-popover--playground&viewMode=story");
|
||||
await gotoStory(page, "components-popover--playground");
|
||||
await page.getByRole("button", { name: "Inspect summary" }).click();
|
||||
await expect(page.getByText("Release health")).toBeVisible();
|
||||
await page.getByRole("button", { name: "Dismiss" }).click();
|
||||
await expect(page.getByText("Release health")).toHaveCount(0);
|
||||
|
||||
await page.goto("/iframe.html?id=components-sheet--playground&viewMode=story");
|
||||
await gotoStory(page, "components-sheet--playground");
|
||||
await page.getByRole("button", { name: "Open right sheet" }).click();
|
||||
await expect(page.getByRole("dialog", { name: "Launch settings" })).toBeVisible();
|
||||
await page.getByRole("button", { name: "Close sheet" }).click();
|
||||
|
||||
@@ -172,11 +172,12 @@ import {
|
||||
DialogTrigger,
|
||||
Input
|
||||
} from "@ai-ui/ui";
|
||||
import { setTheme } from "@ai-ui/tokens";
|
||||
import { setDynamicColor, setTheme } from "@ai-ui/tokens";
|
||||
|
||||
import "./styles.css";
|
||||
|
||||
setTheme("morandi");
|
||||
setTheme("violet");
|
||||
setDynamicColor("#6750A4");
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -285,12 +286,12 @@ async function main() {
|
||||
});
|
||||
|
||||
console.log("Verifying CommonJS package entrypoints");
|
||||
await run(process.execPath, ["-e", 'const ui=require("@ai-ui/ui"); const tokens=require("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme){throw new Error("Missing CommonJS export.");}'], {
|
||||
await run(process.execPath, ["-e", 'const ui=require("@ai-ui/ui"); const tokens=require("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme||!tokens.setDynamicColor){throw new Error("Missing CommonJS export.");}'], {
|
||||
cwd: projectDir
|
||||
});
|
||||
|
||||
console.log("Verifying ESM package entrypoints");
|
||||
await run(process.execPath, ["--input-type=module", "-e", 'const ui=await import("@ai-ui/ui"); const tokens=await import("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme){throw new Error("Missing ESM export.");}'], {
|
||||
await run(process.execPath, ["--input-type=module", "-e", 'const ui=await import("@ai-ui/ui"); const tokens=await import("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme||!tokens.setDynamicColor){throw new Error("Missing ESM export.");}'], {
|
||||
cwd: projectDir
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user