ZacharyZhang-NY/Ely-GPUI-Components
2
2 Fork 0
Code Issues Pull Requests Actions 3 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/live.spec.ts
+24 -18
View File
@@ -5,10 +5,10 @@ const STARTS = 45_000;
async function live(page: Page, path: string) {
await page.goto(path);
const frame = page.frameLocator(".stage iframe");
// The host hides its state once the gallery says it is ready.
await expect(page.locator(".stage .state")).toBeHidden({ timeout: STARTS });
return frame;
await expect(page.locator(".live iframe")).toHaveCount(1);
// The host drops its state once the gallery says it is ready.
await expect(page.locator(".live .live-state")).toHaveCount(0, { timeout: STARTS });
return page.frameLocator(".live iframe");
}
test("a story runs live and follows the site's mode", async ({ page }) => {
@@ -16,33 +16,33 @@ test("a story runs live and follows the site's mode", async ({ page }) => {
const frame = await live(page, "/components/buttons/button/");
await expect(frame.locator("canvas")).toBeVisible();
await expect(frame.locator("html")).not.toHaveClass(/dark/);
await page.locator("[data-mode]").click();
await page.getByRole("button", { name: "Dark mode" }).click();
await expect(frame.locator("html")).toHaveClass(/dark/);
});
test("the live story leaves focus with the host until it is pressed", async ({ page, isMobile }) => {
test("a starting story leaves focus with the host", async ({ page, isMobile }) => {
test.skip(isMobile, "no hardware keyboard");
await live(page, "/components/forms/input-textfield-clearableinput/");
await page.waitForTimeout(1000);
expect(await page.evaluate(() => document.activeElement?.tagName)).not.toBe("IFRAME");
await page.keyboard.press("/");
await expect(page.getByRole("dialog", { name: "Search components" })).toBeVisible();
await page.goto("/");
await page.getByRole("link", { name: "Browse" }).first().focus();
await page.locator(".feature").first().scrollIntoViewIfNeeded();
await expect(page.locator(".feature .live .live-state")).toHaveCount(0, { timeout: STARTS });
await expect(page.getByRole("link", { name: "Browse" }).first()).toBeFocused();
});
test("a skip link passes the live example", async ({ page, isMobile }) => {
test("the skip control passes the live example", async ({ page, isMobile }) => {
test.skip(isMobile, "no hardware keyboard");
await page.goto("/components/buttons/button/");
const skip = page.getByRole("link", { name: "Skip the live example" });
const skip = page.getByRole("button", { name: "Skip the live example" });
await skip.focus();
await expect(skip).toBeVisible();
await page.keyboard.press("Enter");
await expect(page.locator("#after-stage")).toBeFocused();
await expect(page.locator(".live + span")).toBeFocused();
});
test("typing reaches a live field after a press", async ({ page, isMobile }) => {
test.skip(isMobile, "no hardware keyboard");
const frame = await live(page, "/components/forms/input-textfield-clearableinput/");
const box = (await page.locator(".stage iframe").boundingBox())!;
const box = (await page.locator(".live iframe").boundingBox())!;
// The first field sits under the section's note, as the gallery lays it.
await page.mouse.click(box.x + 120, box.y + 72);
const before = await frame.locator("canvas").screenshot();
@@ -53,11 +53,17 @@ test("typing reaches a live field after a press", async ({ page, isMobile }) =>
test("full screen covers the page and Escape leaves it", async ({ page }) => {
await live(page, "/components/buttons/button/");
await page.locator(".stage").hover();
await page.locator(".live").hover();
await page.getByRole("button", { name: "Full screen" }).click();
await expect(page.locator(".stage")).toHaveClass(/full/);
await expect(page.locator(".live")).toHaveClass(/full/);
await page.keyboard.press("Escape");
await expect(page.locator(".stage")).not.toHaveClass(/full/);
await expect(page.locator(".live")).not.toHaveClass(/full/);
});
test("home frames run only near the view", async ({ page }) => {
await page.goto("/");
await page.locator(".close").scrollIntoViewIfNeeded();
await expect(page.locator(".feature iframe")).toHaveCount(0);
});
// One story from every fifth chapter, each drawn in its frame.