Files
next-tjwater-drainage-frontend/tests/browser/agent-panel-resize.e2e.ts
T

78 lines
3.4 KiB
TypeScript

import { expect, test } from "playwright/test";
test("Agent panel resizes by drag without exceeding half the viewport", async ({ page }) => {
await page.goto("/", { waitUntil: "networkidle" });
const panel = page.locator('aside[aria-label="Agent 命令面板"]');
const resizeHandle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
await expect(panel).toBeVisible();
await expect(resizeHandle).toBeVisible();
const handleBox = await resizeHandle.boundingBox();
expect(handleBox).not.toBeNull();
await page.mouse.move(handleBox!.x + handleBox!.width / 2, handleBox!.y + handleBox!.height / 2);
await page.mouse.down();
await page.mouse.move(1_200, handleBox!.y + handleBox!.height / 2);
await page.mouse.up();
await expect.poll(async () => (await panel.boundingBox())?.width).toBe(720);
await resizeHandle.focus();
await page.keyboard.press("Home");
await expect.poll(async () => (await panel.boundingBox())?.width).toBe(460);
await page.keyboard.press("ArrowRight");
await expect.poll(async () => (await panel.boundingBox())?.width).toBe(476);
});
test("collapsed Agent rail is compact and expands as one clear action", async ({ page }) => {
await page.goto("/", { waitUntil: "networkidle" });
await page.getByRole("button", { name: "折叠 Agent 面板" }).click();
const rail = page.locator('aside[aria-label="Agent 折叠栏"]');
const expandButton = page.getByRole("button", { name: /展开排水助手面板/ });
await expect(rail).toBeVisible();
await expect(rail).toHaveCSS("width", "72px");
await expect(expandButton).toHaveAttribute("title", /当前|正在/);
await expandButton.click();
await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
});
test("Agent resize handle stays hidden in the mobile layout", async ({ page }) => {
await page.setViewportSize({ width: 375, height: 812 });
await page.goto("/", { waitUntil: "domcontentloaded" });
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);
});