Files
next-tjwater-frontend/tests/browser/workbench-top-bar-mobile.e2e.ts
jiang f4318a9b9c feat: refine workbench visuals and map controls
Unify the Agent history extension with the header acrylic surface, preserve the full conversation body, and consolidate shared control and status styling.

Restore map flow and SCADA controller behavior, remove obsolete rendering paths, and extend regression coverage. Button press coverage now releases outside the target so state assertions cannot accidentally toggle the control.
2026-07-28 16:39:36 +08:00

61 lines
2.5 KiB
TypeScript

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: "domcontentloaded" });
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();
const alertButton = page.getByRole("button", { name: /查看异常处置面板/ });
const userButton = page.getByRole("button", { name: "打开用户菜单" });
await expect(alertButton).toBeVisible();
await expect(userButton).toBeVisible();
const [alertBox, userBox] = await Promise.all([
alertButton.boundingBox(),
userButton.boundingBox()
]);
expect(alertBox).not.toBeNull();
expect(userBox).not.toBeNull();
expect(alertBox?.width).toBe(40);
expect(alertBox?.height).toBe(40);
expect(userBox?.width).toBe(alertBox?.width);
expect(userBox?.height).toBe(alertBox?.height);
const [alertStyles, userStyles] = await Promise.all([
alertButton.evaluate((element) => {
const styles = getComputedStyle(element);
return { backgroundColor: styles.backgroundColor, borderRadius: styles.borderRadius };
}),
userButton.evaluate((element) => {
const styles = getComputedStyle(element);
return { backgroundColor: styles.backgroundColor, borderRadius: styles.borderRadius };
})
]);
expect(alertStyles).toEqual(userStyles);
});
test("top bar keeps text horizontal at the desktop breakpoint", async ({ page }) => {
await page.setViewportSize({ width: 1024, height: 844 });
await page.goto("/", { waitUntil: "domcontentloaded" });
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);
});