105 lines
4.7 KiB
TypeScript
105 lines
4.7 KiB
TypeScript
import { expect, test } from "playwright/test";
|
|
|
|
test.describe("mobile workbench sheet", () => {
|
|
test.use({ viewport: { width: 390, height: 844 } });
|
|
|
|
test("supports all snap heights, keyboard control, and Escape close", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: "打开 Agent 面板" }).click();
|
|
|
|
const sheet = page.getByRole("region", { name: "Agent 工作台抽屉" });
|
|
const handle = page.getByRole("button", { name: /Agent 工作台抽屉高度/ });
|
|
|
|
await expect(sheet).toBeVisible();
|
|
await expect(sheet).toHaveAttribute("data-snap", "half");
|
|
await expect.poll(async () => Math.round((await sheet.boundingBox())?.height ?? 0)).toBe(439);
|
|
await expect
|
|
.poll(async () =>
|
|
sheet.evaluate((element) => {
|
|
const style = getComputedStyle(element);
|
|
const nestedFilters = Array.from(element.querySelectorAll("*")).filter(
|
|
(descendant) => getComputedStyle(descendant).backdropFilter !== "none"
|
|
);
|
|
return {
|
|
backdropFilter: style.backdropFilter,
|
|
nestedFilterCount: nestedFilters.length,
|
|
opacity: style.opacity,
|
|
transform: style.transform
|
|
};
|
|
})
|
|
)
|
|
.toEqual({
|
|
backdropFilter: "blur(24px) saturate(1.08)",
|
|
nestedFilterCount: 0,
|
|
opacity: "1",
|
|
transform: "none"
|
|
});
|
|
|
|
await handle.click();
|
|
await expect(sheet).toHaveAttribute("data-snap", "full");
|
|
await expect.poll(async () => Math.round((await sheet.boundingBox())?.height ?? 0)).toBe(776);
|
|
await expect.poll(async () => Math.round((await sheet.boundingBox())?.y ?? 0)).toBe(68);
|
|
|
|
await handle.focus();
|
|
await page.keyboard.press("Home");
|
|
await expect(sheet).toHaveAttribute("data-snap", "peek");
|
|
await expect.poll(async () => Math.round((await sheet.boundingBox())?.height ?? 0)).toBe(96);
|
|
|
|
await page.keyboard.press("ArrowUp");
|
|
await expect(sheet).toHaveAttribute("data-snap", "half");
|
|
await page.keyboard.press("End");
|
|
await expect(sheet).toHaveAttribute("data-snap", "full");
|
|
|
|
await page.setViewportSize({ width: 390, height: 700 });
|
|
await expect.poll(async () => Math.round((await sheet.boundingBox())?.height ?? 0)).toBe(632);
|
|
await expect.poll(async () => Math.round((await sheet.boundingBox())?.y ?? 0)).toBe(68);
|
|
|
|
await page.keyboard.press("Escape");
|
|
await expect(sheet).toBeHidden();
|
|
});
|
|
|
|
test("keeps Agent and condition sheets mutually exclusive", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
|
|
await page.getByRole("button", { name: "打开 Agent 面板" }).click();
|
|
await expect(page.getByRole("region", { name: "Agent 工作台抽屉" })).toBeVisible();
|
|
await page.keyboard.press("Escape");
|
|
|
|
await page.getByRole("button", { name: "打开工况任务" }).click();
|
|
await expect(page.getByRole("region", { name: "工况任务抽屉" })).toBeVisible();
|
|
await expect(
|
|
page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })
|
|
).toHaveCount(0);
|
|
});
|
|
|
|
test("offers a touch close action for the condition sheet", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: "打开工况任务" }).click();
|
|
|
|
const sheet = page.getByRole("region", { name: "工况任务抽屉" });
|
|
await expect(sheet).toBeVisible();
|
|
await page.getByRole("button", { name: "关闭工况任务抽屉" }).click();
|
|
await expect(sheet).toBeHidden();
|
|
await expect(page.getByRole("button", { name: "打开工况任务" })).toBeVisible();
|
|
});
|
|
|
|
test("keeps condition detail expanded inside the mobile sheet", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: "打开工况任务" }).click();
|
|
const sheet = page.getByRole("region", { name: "工况任务抽屉" });
|
|
|
|
await sheet.getByRole("button", { name: /SCADA 数据诊断/ }).first().click();
|
|
await expect(sheet.getByRole("button", { name: "收起工况任务" })).toBeVisible();
|
|
});
|
|
|
|
test("clears mobile sheet state when crossing into the desktop layout", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: "打开 Agent 面板" }).click();
|
|
await expect(page.getByRole("region", { name: "Agent 工作台抽屉" })).toBeVisible();
|
|
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await expect(page.getByRole("region", { name: "Agent 工作台抽屉" })).toHaveCount(0);
|
|
await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
|
|
});
|
|
});
|