ZacharyZhang-NY/Ely-GPUI-Components
2
2 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

T46 E2E: the suite follows the new site (hero, features, city, search, rail, keys, captures, live frames, focus, skip, full screen), in Chrome, Firefox and a phone

Browse Source
This commit is contained in:
ZacharyZhang-NY committed 2026-10-01 08:38:05 -04:00
1 parent 37ea96721a
commit faa3dddbfe
3 files changed
+78 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/e2e/site.spec.ts
+53 -43
View File
@@ -1,7 +1,7 @@
import { expect, test, type Page } from "@playwright/test";
import manifest from "../../examples/gallery/stories.json" with { type: "json" };
/** Fails the test on any console error or uncaught exception. */
/** Collects console errors and uncaught exceptions. */
function watch(page: Page): string[] {
const errors: string[] = [];
page.on("console", (m) => m.type() === "error" && errors.push(m.text()));
@@ -9,13 +9,14 @@ function watch(page: Page): string[] {
return errors;
}
test("the home page shows the pitch, the scene and the credits", async ({ page }) => {
test("the home page shows the hero, five features, the city and the credits", async ({ page }) => {
const errors = watch(page);
await page.goto("/");
await expect(page.getByRole("heading", { level: 1 })).toContainText("component library for GPUI");
await expect(page.locator("canvas.iso")).toBeAttached();
await expect(page.getByRole("heading", { level: 1 })).toHaveText("Components for GPUI.");
await expect(page.locator(".hero-iso")).toBeVisible();
await expect(page.locator("#foot")).toContainText("Solar Icons by 480 Design");
await expect(page.locator(".feature")).toHaveCount(5);
await expect(page.locator(".city-names li")).toHaveCount(manifest.pages.length);
await expect(page.locator(".foot")).toContainText("Solar Icons by 480 Design");
expect(errors).toEqual([]);
});
@@ -30,52 +31,61 @@ test("the mode toggles, and a reload keeps it", async ({ page }) => {
await expect(html).toHaveClass(/dark/);
});
test("the index lists every chapter with its story count", async ({ page }) => {
test("the index lists every chapter with its stories", async ({ page }) => {
await page.goto("/components/");
const rows = page.locator(".grid a");
const rows = page.locator(".chapters li");
await expect(rows).toHaveCount(manifest.pages.length);
const first = manifest.pages[0];
await expect(rows.first()).toContainText(`${first.stories.length} stories`);
const [first] = manifest.pages;
await expect(rows.first().locator(".titles a")).toHaveCount(first.stories.length);
});
test("a chapter opens its first story, and paging walks on", async ({ page }) => {
const [chapter] = manifest.pages;
await page.goto(`/components/${chapter.slug}/`);
await expect(page.getByRole("heading", { level: 1 })).toHaveText(chapter.stories[0].title);
await page.locator(".pager a.next").click();
await expect(page).toHaveURL(`/components/${chapter.slug}/${chapter.stories[1].slug}/`);
await expect(page.getByRole("heading", { level: 1 })).toHaveText(chapter.stories[1].title);
});
test("the sidebar filters by story and component name", async ({ page }) => {
test("search filters by story and component name, and Enter opens the first match", async ({ page }) => {
await page.goto("/components/");
await page.getByPlaceholder("Filter components").fill("Toast");
await expect(page.locator(".side li a").first()).toContainText("Toast");
await page.getByPlaceholder("Filter components").fill("zzzz");
await expect(page.locator(".side .none")).toContainText("Nothing matches");
const find = page.getByRole("searchbox", { name: "Search components" });
await find.fill("zzzz");
await expect(page.locator(".none")).toContainText("Nothing matches");
await find.fill("breadcrumb");
await expect(page.locator(".chapters li").first()).toContainText(/Breadcrumb/);
await find.press("Enter");
await expect(page).toHaveURL(/\/components\/[a-z_]+\/.*breadcrumb/);
});
test("search opens with the keyboard and goes where Enter points", async ({ page, isMobile }) => {
test("Slash focuses search from the page", async ({ page, isMobile }) => {
test.skip(isMobile, "no hardware keyboard");
await page.goto("/components/");
await page.keyboard.press("/");
const dialog = page.getByRole("dialog", { name: "Search components" });
await expect(dialog).toBeVisible();
await page.keyboard.type("breadcrumb");
await page.keyboard.press("Enter");
await expect(dialog).toBeHidden();
await expect(page).toHaveURL(/\/components\/navigation\/.*breadcrumb/);
await expect(page.getByRole("searchbox", { name: "Search components" })).toBeFocused();
});
test("the Browse menu opens a chapter's stories beside it", async ({ page, isMobile }) => {
test.skip(isMobile, "hover menu");
await page.goto("/components/");
await page.getByRole("button", { name: "Browse" }).click();
await page.getByRole("menuitem", { name: "Charts" }).hover();
const story = page.getByRole("menuitem", { name: /^RadarChart/ });
await expect(story).toBeVisible();
await story.click();
await expect(page).toHaveURL(/\/components\/charts\/radarchart/);
test("a chapter opens its first story, and the pager and arrows walk on", async ({ page, isMobile }) => {
const [chapter] = manifest.pages;
await page.goto(`/components/${chapter.slug}/`);
await expect(page).toHaveURL(`/components/${chapter.slug}/${chapter.stories[0].slug}/`);
await expect(page.getByRole("heading", { level: 1 })).toHaveText(chapter.stories[0].title);
await page.locator(".pager a.next").click();
await expect(page.getByRole("heading", { level: 1 })).toHaveText(chapter.stories[1].title);
if (isMobile) return;
await page.keyboard.press("ArrowLeft");
await expect(page.getByRole("heading", { level: 1 })).toHaveText(chapter.stories[0].title);
});
test("the rail marks the current story", async ({ page, isMobile }) => {
test.skip(isMobile, "the rail hides on phones");
const chapter = manifest.pages[manifest.pages.length - 1];
const story = chapter.stories[chapter.stories.length - 1];
await page.goto(`/components/${chapter.slug}/${story.slug}/`);
await expect(page.locator('.side li [aria-current="page"]')).toHaveText(story.title);
await expect(page.locator('.side li [aria-current="page"]')).toBeInViewport();
});
test("a chapter's name in the city names it and opens it", async ({ page, isMobile }) => {
test.skip(isMobile, "hover");
await page.goto("/");
const chapter = manifest.pages[15];
await page.locator(".city-names a", { hasText: chapter.title }).first().hover();
await expect(page.locator(".city h2")).toHaveText(`${chapter.title}.`);
await page.locator(".city-names a", { hasText: chapter.title }).first().click();
await expect(page).toHaveURL(`/components/${chapter.slug}/${chapter.stories[0].slug}/`);
});
test("an unknown chapter says so", async ({ page }) => {
@@ -90,14 +100,14 @@ test("a story the web cannot run shows its native capture, in the site's mode",
await page.goto("/components/forms/pathinput/");
const shot = page.locator("img.shot");
await expect(shot).toHaveAttribute("srcset", /pathinput-light\.jpg/);
await expect(page.locator(".stage iframe")).toHaveCount(0);
await page.locator("[data-mode]").click();
await expect(page.locator(".live iframe")).toHaveCount(0);
await page.getByRole("button", { name: "Dark mode" }).click();
await expect(shot).toHaveAttribute("srcset", /pathinput-dark\.jpg/);
await expect.poll(() => shot.evaluate((img: HTMLImageElement) => img.naturalWidth)).toBeGreaterThan(0);
});
test("a live story that opens a window shows that window natively", async ({ page }) => {
await page.goto("/components/shell/aboutdialog/");
await expect(page.locator(".stage iframe")).toHaveCount(1);
await expect(page.locator(".native img.shot")).toHaveAttribute("srcset", /shell-about-window/);
await expect(page.locator(".live iframe")).toHaveCount(1);
await expect(page.locator(".windows img.shot")).toHaveAttribute("srcset", /shell-about-window/);
});