394 lines
18 KiB
TypeScript
394 lines
18 KiB
TypeScript
import { expect, test, type Locator, type Page } from "@playwright/test";
|
|
import { mockAgentApi } from "./support/mock-agent-api";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await mockAgentApi(page);
|
|
});
|
|
|
|
async function expectPanelWidth(panel: Locator, width: number) {
|
|
await expect.poll(async () => Math.round((await panel.boundingBox())!.width)).toBe(width);
|
|
}
|
|
|
|
async function openAgentPanel(page: Page) {
|
|
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
|
|
await expect(page.getByRole("complementary", { name: "Agent 命令面板" })).toBeVisible();
|
|
}
|
|
|
|
test("the docked Agent collapses and restores the main workspace", async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await openAgentPanel(page);
|
|
|
|
const agentPanel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
const workspace = page.locator("#main-workspace");
|
|
await expect
|
|
.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0))
|
|
.toBeGreaterThan(400);
|
|
const expandedOffset = Math.round((await workspace.boundingBox())?.x ?? 0);
|
|
await expect
|
|
.poll(async () => Math.round((await agentPanel.boundingBox())?.width ?? 0))
|
|
.toBe(expandedOffset);
|
|
|
|
await page.getByRole("button", { name: "折叠 Agent 面板" }).click();
|
|
await expect(page.getByLabel("Agent 折叠栏")).toBeVisible();
|
|
await expect(page.getByLabel("Agent 折叠栏")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
|
await expect(page.getByLabel("Agent 折叠栏").getByLabel("Agent 状态")).toBeVisible();
|
|
for (const width of [1440, 1024]) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
const rail = page.getByLabel("Agent 折叠栏");
|
|
await expectPanelWidth(rail, 64);
|
|
await expect.poll(async () => {
|
|
const [orb, header] = await Promise.all([
|
|
rail.boundingBox(),
|
|
page.locator(".workbench-top-bar").boundingBox()
|
|
]);
|
|
return {
|
|
left: Math.round(orb!.x),
|
|
top: Math.round(orb!.y - header!.y - header!.height),
|
|
height: Math.round(orb!.height)
|
|
};
|
|
}).toEqual({ left: 12, top: 12, height: 64 });
|
|
}
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
await page.getByLabel("Agent 折叠栏").screenshot({ path: "/tmp/nexttjwater-agent-start-preview/collapsed-persona.png" });
|
|
await page.screenshot({ path: "/tmp/nexttjwater-obsidian-orb/workbench.png", clip: { x: 0, y: 56, width: 340, height: 190 } });
|
|
await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(0);
|
|
|
|
const cdp = await page.context().newCDPSession(page);
|
|
await cdp.send("Emulation.setEmulatedMedia", {
|
|
features: [{ name: "prefers-reduced-transparency", value: "reduce" }]
|
|
});
|
|
await expect(page.getByLabel("Agent 折叠栏")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
|
await expect(page.getByLabel("Agent 折叠栏")).toHaveCSS("backdrop-filter", "none");
|
|
await cdp.detach();
|
|
|
|
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).focus();
|
|
await page.keyboard.press("Shift+Tab");
|
|
await page.keyboard.press("Tab");
|
|
await expect(page.getByRole("button", { name: /展开 Agent 助手面板/ })).toBeFocused();
|
|
await page.keyboard.press("Enter");
|
|
await expect(agentPanel).toBeVisible();
|
|
await expect(agentPanel.locator("header").getByLabel("Agent 状态")).toBeVisible();
|
|
await expect
|
|
.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0))
|
|
.toBe(expandedOffset);
|
|
});
|
|
|
|
test("dragging the Agent edge keeps the workspace attached and preserves the draft", async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await openAgentPanel(page);
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
const workspace = page.locator("#main-workspace");
|
|
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
|
const prompt = panel.getByPlaceholder("询问供水问题，或描述需要处理的任务");
|
|
await expect(panel.getByText("当前上下文", { exact: true })).toHaveCount(0);
|
|
await prompt.fill("保留尚未发送的诊断问题");
|
|
await expectPanelWidth(panel, 500);
|
|
await page.waitForFunction(() =>
|
|
Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
|
|
!window.__waterNetworkMap?.isMoving()
|
|
);
|
|
const cameraBefore = await readCamera(page);
|
|
expect(await handle.evaluate((element) => (element as HTMLElement).tabIndex)).toBe(0);
|
|
await expect(handle).toHaveAttribute("data-slot", "resizable-handle");
|
|
const grip = handle.locator(".resizable-grip");
|
|
await expect(grip).toBeVisible();
|
|
const box = (await handle.boundingBox())!;
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await expect(handle).toHaveAttribute("data-separator", "hover");
|
|
await page.screenshot({ path: "/tmp/nexttjwater-agent-resize-hover.png" });
|
|
await page.mouse.down();
|
|
await expect(handle).toHaveAttribute("data-separator", "active");
|
|
await expectPanelWidth(panel, 500);
|
|
for (const nextWidth of [540, 580, 620]) {
|
|
await page.mouse.move(nextWidth, box.y + box.height / 2);
|
|
await expectPanelWidth(panel, nextWidth);
|
|
const panelBox = (await panel.boundingBox())!;
|
|
const workspaceBox = (await workspace.boundingBox())!;
|
|
expect(workspaceBox.x).toBe(panelBox.x + panelBox.width);
|
|
}
|
|
await page.screenshot({ path: "test-results/agent-history-ui/desktop-resizing.png" });
|
|
await page.mouse.up();
|
|
await expect(handle).not.toHaveAttribute("data-separator", "active");
|
|
await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
|
|
await expect.poll(() => readCamera(page)).toEqual(cameraBefore);
|
|
await page.mouse.move(1000, 450);
|
|
await expect(grip).toBeVisible();
|
|
await expectPanelWidth(panel, 620);
|
|
await page.getByRole("button", { name: "折叠 Agent 面板" }).click();
|
|
await expect(page.getByLabel("Agent 折叠栏")).toBeVisible();
|
|
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
|
|
await expectPanelWidth(panel, 620);
|
|
await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
|
|
});
|
|
|
|
async function readCamera(page: Page) {
|
|
return page.evaluate(() => {
|
|
const map = window.__waterNetworkMap!;
|
|
return {
|
|
center: map.getCenter().toArray(),
|
|
zoom: map.getZoom(),
|
|
bearing: map.getBearing(),
|
|
pitch: map.getPitch()
|
|
};
|
|
});
|
|
}
|
|
|
|
test("Agent Resizable supports keyboard limits and preserves its width across mobile", async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await openAgentPanel(page);
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
|
await panel.locator("textarea").fill("键盘调整后仍保留的草稿");
|
|
await page.waitForFunction(() => Boolean(window.__waterNetworkMap));
|
|
await page.evaluate(() => Object.assign(window, { originalResizeMap: window.__waterNetworkMap }));
|
|
await handle.focus();
|
|
await expect(handle).toBeFocused();
|
|
await page.keyboard.press("ArrowRight");
|
|
await expect(handle.locator(".resizable-grip")).toHaveCSS("outline-style", "solid");
|
|
await expect.poll(async () => (await panel.boundingBox())!.width).toBeGreaterThan(500);
|
|
await page.keyboard.press("Home");
|
|
await expectPanelWidth(panel, 400);
|
|
await page.keyboard.press("End");
|
|
await expectPanelWidth(panel, 640);
|
|
await page.setViewportSize({ width: 375, height: 812 });
|
|
await expect(handle).toBeHidden();
|
|
await expect.poll(async () => (await page.locator("#main-workspace").boundingBox())!.width).toBe(375);
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
await expectPanelWidth(panel, 640);
|
|
await expect(panel.locator("textarea")).toHaveValue("键盘调整后仍保留的草稿");
|
|
expect(await page.evaluate(() => window.__waterNetworkMap === (window as unknown as { originalResizeMap: unknown }).originalResizeMap)).toBe(true);
|
|
});
|
|
|
|
test("Agent dragging stays within usable widths and adapts to the viewport", async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await openAgentPanel(page);
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
|
const workspace = page.locator("#main-workspace");
|
|
for (const [targetX, expectedWidth] of [[250, 400], [1000, 640], [620, 620]]) {
|
|
const box = (await handle.boundingBox())!;
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(targetX, box.y + box.height / 2);
|
|
await page.mouse.up();
|
|
await expectPanelWidth(panel, expectedWidth);
|
|
await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(expectedWidth);
|
|
if (expectedWidth === 400) {
|
|
await page.screenshot({ path: "test-results/agent-history-ui/desktop-resize-minimum.png" });
|
|
}
|
|
}
|
|
await page.setViewportSize({ width: 1024, height: 768 });
|
|
await expectPanelWidth(panel, 500);
|
|
await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(500);
|
|
await page.setViewportSize({ width: 1920, height: 1080 });
|
|
await expectPanelWidth(panel, 620);
|
|
await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(620);
|
|
});
|
|
|
|
test("the map stays painted while the Agent and viewport change size", async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await openAgentPanel(page);
|
|
await page.waitForFunction(() =>
|
|
Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
|
|
!window.__waterNetworkMap?.isMoving()
|
|
);
|
|
const initialAlpha = await page.evaluate(() => {
|
|
const map = window.__waterNetworkMap!;
|
|
const canvas = map.getCanvas();
|
|
const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
|
|
if (!gl) throw new Error("The map has no WebGL context");
|
|
const pixel = new Uint8Array(4);
|
|
const readAlpha = () => {
|
|
gl.readPixels(
|
|
Math.floor(gl.drawingBufferWidth / 2), Math.floor(gl.drawingBufferHeight / 2),
|
|
1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel
|
|
);
|
|
return pixel[3];
|
|
};
|
|
const state = window as typeof window & {
|
|
__mapResizeProbe?: { samples: number; blankFrames: number; sameMap: boolean };
|
|
};
|
|
const probe = { samples: 0, blankFrames: 0, sameMap: true };
|
|
state.__mapResizeProbe = probe;
|
|
map.on("resize", () => queueMicrotask(() => {
|
|
probe.samples += 1;
|
|
if (readAlpha() === 0) probe.blankFrames += 1;
|
|
probe.sameMap &&= window.__waterNetworkMap === map;
|
|
}));
|
|
map.redraw();
|
|
return readAlpha();
|
|
});
|
|
expect(initialAlpha).toBe(255);
|
|
const cameraBefore = await readCamera(page);
|
|
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
|
const box = (await handle.boundingBox())!;
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(620, box.y + box.height / 2, { steps: 12 });
|
|
await page.mouse.up();
|
|
for (const viewport of [
|
|
{ width: 1280, height: 800 }, { width: 1920, height: 1080 }
|
|
]) {
|
|
await page.setViewportSize(viewport);
|
|
await expect.poll(async () => page.evaluate(() => {
|
|
const canvas = window.__waterNetworkMap!.getCanvas();
|
|
return canvas.clientWidth === document.querySelector("#workspace-map")!.clientWidth;
|
|
})).toBe(true);
|
|
}
|
|
const probe = await page.evaluate(() => (window as typeof window & {
|
|
__mapResizeProbe?: { samples: number; blankFrames: number; sameMap: boolean };
|
|
}).__mapResizeProbe!);
|
|
expect(probe.samples).toBeGreaterThan(0);
|
|
expect(probe.sameMap).toBe(true);
|
|
expect(probe.blankFrames).toBe(0);
|
|
await expect.poll(() => readCamera(page)).toEqual(cameraBefore);
|
|
});
|
|
|
|
test("the map canvas follows workspace resizing before the next paint", async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await openAgentPanel(page);
|
|
await page.waitForFunction(() =>
|
|
Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
|
|
!window.__waterNetworkMap?.isMoving()
|
|
);
|
|
await page.evaluate(() => {
|
|
const map = window.__waterNetworkMap!;
|
|
const container = map.getContainer();
|
|
const probe = { samples: 0, mismatches: 0, maxWidthDifference: 0 };
|
|
(window as typeof window & {
|
|
__mapSizeProbe?: typeof probe;
|
|
}).__mapSizeProbe = probe;
|
|
new ResizeObserver(() => queueMicrotask(() => {
|
|
const difference = Math.abs(container.clientWidth - map.getCanvas().clientWidth);
|
|
probe.samples += 1;
|
|
if (difference > 0) probe.mismatches += 1;
|
|
probe.maxWidthDifference = Math.max(probe.maxWidthDifference, difference);
|
|
})).observe(container);
|
|
});
|
|
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
|
const box = (await handle.boundingBox())!;
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await page.mouse.down();
|
|
for (const width of [620, 420, 600]) {
|
|
await page.mouse.move(width, box.y + box.height / 2, { steps: 12 });
|
|
}
|
|
await page.mouse.up();
|
|
const probe = await page.evaluate(() => (window as typeof window & {
|
|
__mapSizeProbe?: { samples: number; mismatches: number; maxWidthDifference: number };
|
|
}).__mapSizeProbe!);
|
|
expect(probe.samples).toBeGreaterThan(1);
|
|
expect(probe.maxWidthDifference).toBe(0);
|
|
});
|
|
|
|
test("the floating condition feed coordinates with the docked Agent", async ({ page }) => {
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await mockWorkbenchContext(page);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await openAgentPanel(page);
|
|
|
|
await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
|
|
const workspace = page.locator("#main-workspace");
|
|
await expect
|
|
.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0))
|
|
.toBeGreaterThan(400);
|
|
const expandedOffset = Math.round((await workspace.boundingBox())?.x ?? 0);
|
|
const prompt = page.getByPlaceholder("询问供水问题，或描述需要处理的任务");
|
|
await prompt.fill("保留尚未发送的诊断问题");
|
|
const conditionToggle = page
|
|
.locator("header.acrylic-navigation")
|
|
.getByRole("button", { name: "工况任务", exact: true });
|
|
await conditionToggle.click();
|
|
const conditionPanel = page.getByRole("region", { name: "工况任务", exact: true });
|
|
await expect(conditionPanel).toBeVisible();
|
|
await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
|
|
await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
|
|
await conditionPanel.getByRole("button", { name: "展开工况任务" }).click();
|
|
await expect(page.getByLabel("Agent 折叠栏")).toBeVisible();
|
|
await expect(conditionPanel.getByRole("button", { name: "收起工况任务" })).toBeVisible();
|
|
await conditionPanel.getByRole("button", { name: "收起工况任务" }).click();
|
|
await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
|
|
await expect
|
|
.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0))
|
|
.toBe(expandedOffset);
|
|
await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
|
|
await conditionToggle.click();
|
|
await expect(conditionPanel).toBeHidden();
|
|
});
|
|
|
|
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 mockWorkbenchContext(page);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
|
|
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 面板" })).toBeVisible();
|
|
});
|
|
});
|
|
|
|
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 mockWorkbenchContext(page, {
|
|
availability: "ready",
|
|
source: "none",
|
|
scenario_availability: "not_configured",
|
|
artifact_availability: "not_configured",
|
|
schedule_availability: "not_configured",
|
|
work_order_availability: "not_configured",
|
|
alert_availability: "ready",
|
|
generated_at: "2026-07-21T02:40:00Z",
|
|
conditions: [],
|
|
alerts: [{
|
|
id: "test-alert",
|
|
condition_id: null,
|
|
source: { task_type: "other_task", task_id: "test-task", run_id: "test-run" },
|
|
title: "供水压力告警",
|
|
description: "待核对压力异常。",
|
|
occurred_at: "2026-07-21T02:30:00Z",
|
|
severity: "warning"
|
|
}],
|
|
scenarios: [],
|
|
latest_analysis: null,
|
|
work_orders: []
|
|
});
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
|
|
await page.getByRole("button", { name: "查看待办与告警，当前 1 条待处理事项" }).click();
|
|
await expect(page.getByText("业务告警来源：后端运行态", { exact: true })).toBeVisible();
|
|
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 面板" })).toBeVisible();
|
|
await expect(page.getByText("已发起工况汇总", { exact: true })).toBeVisible();
|
|
});
|