Add harness workflow and Material showcase design system

This commit is contained in:
2026-03-23 17:30:30 +08:00
parent c570431dba
commit 5d02bf9df4
46 changed files with 3343 additions and 1068 deletions
+14 -10
View File
@@ -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();