fix: improve mobile workbench controls
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { expect, test } from "playwright/test";
|
||||
|
||||
test("Agent panel resizes by drag without exceeding half the viewport", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.goto("/", { waitUntil: "networkidle" });
|
||||
|
||||
const panel = page.locator('aside[aria-label="Agent 命令面板"]');
|
||||
const resizeHandle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
||||
@@ -31,3 +31,32 @@ test("Agent resize handle stays hidden in the mobile layout", async ({ page }) =
|
||||
|
||||
await expect(page.getByRole("separator", { name: "调整 Agent 面板宽度" })).toBeHidden();
|
||||
});
|
||||
|
||||
test.describe("mobile touch layout", () => {
|
||||
test.use({ hasTouch: true, isMobile: true, viewport: { width: 375, height: 812 } });
|
||||
|
||||
test("mobile Agent toggle opens the conversation panel by touch", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" });
|
||||
|
||||
const openButton = page.getByRole("button", { name: "打开 Agent 面板" });
|
||||
const buttonBox = await openButton.boundingBox();
|
||||
expect(buttonBox).not.toBeNull();
|
||||
|
||||
await page.touchscreen.tap(buttonBox!.x + buttonBox!.width / 2, buttonBox!.y + buttonBox!.height / 2);
|
||||
|
||||
await expect(page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "关闭 Agent 面板" })).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
|
||||
test("mobile alert summary opens the Agent conversation panel", async ({ page }) => {
|
||||
await page.clock.setFixedTime(new Date("2026-07-21T10:40:00+08:00"));
|
||||
await page.setViewportSize({ width: 375, height: 812 });
|
||||
await page.goto("/", { waitUntil: "networkidle" });
|
||||
|
||||
await page.getByRole("button", { name: /查看异常处置面板/ }).click();
|
||||
await page.getByRole("button", { name: "工况汇总" }).click();
|
||||
|
||||
await expect(page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "关闭 Agent 面板" })).toHaveCount(0);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import { expect, test } from "playwright/test";
|
||||
|
||||
test("map notice is centered in the mobile viewport", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 812 });
|
||||
await page.goto("/", { waitUntil: "networkidle" });
|
||||
|
||||
await page.getByRole("button", { name: "打开用户菜单" }).click();
|
||||
await page.getByRole("menuitem", { name: /查看运行状态/ }).click();
|
||||
|
||||
const notice = page.locator('[role="status"]').filter({ hasText: "数据状态" }).first();
|
||||
await expect(notice).toBeVisible();
|
||||
|
||||
const box = await notice.boundingBox();
|
||||
expect(box).not.toBeNull();
|
||||
|
||||
const leftInset = Math.round(box!.x);
|
||||
const rightInset = Math.round(375 - box!.x - box!.width);
|
||||
expect(Math.abs(leftInset - rightInset)).toBeLessThanOrEqual(1);
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
import { expect, test } from "playwright/test";
|
||||
|
||||
test("top bar uses compact controls on narrow mobile viewports", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto("/", { waitUntil: "networkidle" });
|
||||
|
||||
await expect(page.locator('meta[name="viewport"]')).toHaveAttribute(
|
||||
"content",
|
||||
/width=device-width/
|
||||
);
|
||||
await expect(page.getByRole("button", { name: "切换模拟方案" })).toBeHidden();
|
||||
await expect(page.getByRole("button", { name: "切换地图 Dev Panel" })).toBeHidden();
|
||||
await expect(page.getByRole("button", { name: /查看异常处置面板/ })).toBeVisible();
|
||||
});
|
||||
|
||||
test("top bar keeps text horizontal at the desktop breakpoint", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1024, height: 844 });
|
||||
await page.goto("/", { waitUntil: "networkidle" });
|
||||
|
||||
const header = page.locator("header").first();
|
||||
await expect(header).toBeVisible();
|
||||
await expect.poll(async () => Math.round((await header.boundingBox())?.height ?? 0)).toBe(56);
|
||||
|
||||
await expect.poll(async () => header.evaluate((element) => {
|
||||
return Array.from(element.querySelectorAll("span"))
|
||||
.filter((span) => {
|
||||
const style = getComputedStyle(span);
|
||||
const rect = span.getBoundingClientRect();
|
||||
return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
|
||||
})
|
||||
.map((span) => span.textContent?.trim())
|
||||
.filter((text) => text === "任务浮条" || text === "工况任务" || text === "异常处置").length;
|
||||
})).toBe(0);
|
||||
});
|
||||
Reference in New Issue
Block a user