77 lines
3.6 KiB
TypeScript
77 lines
3.6 KiB
TypeScript
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
|
|
}) => {
|
|
await page.goto("/");
|
|
await expect(page).toHaveTitle(/storybook/i);
|
|
|
|
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 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 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();
|
|
await page.getByRole("textbox", { name: "Launch summary" }).fill(
|
|
"This release coordinates approvals, copy, and rollout risks."
|
|
);
|
|
await page.getByRole("button", { name: "Save settings" }).click();
|
|
await expect(page.locator("pre code").last()).toContainText('"role": "legal"');
|
|
});
|
|
|
|
test("storybook data table story stays interactive", async ({ page }) => {
|
|
await gotoStory(page, "components-data-table--playground");
|
|
|
|
const table = page.getByRole("table", { name: "Routing lanes" });
|
|
await expect(table).toBeVisible();
|
|
await expect(page.getByRole("searchbox", { name: "Search routing lanes" })).toBeVisible();
|
|
|
|
const sortableHeader = page.getByRole("columnheader", { name: /owner/i });
|
|
await sortableHeader.getByRole("button").click();
|
|
await expect(sortableHeader).toHaveAttribute("aria-sort", "ascending");
|
|
|
|
await page.getByRole("checkbox", { name: /select row/i }).first().click();
|
|
await expect(page.getByRole("button", { name: "Clear selection" })).toBeVisible();
|
|
|
|
const nextButton = page.getByRole("button", { name: "Next" });
|
|
await expect(nextButton).toBeEnabled();
|
|
await nextButton.click();
|
|
await expect(page.getByRole("button", { name: "Previous" })).toBeEnabled();
|
|
});
|
|
|
|
test("storybook overlay stories stay interactive", async ({ page }) => {
|
|
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 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 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();
|
|
await expect(page.getByRole("dialog")).toHaveCount(0);
|
|
});
|