238 lines
9.3 KiB
TypeScript
238 lines
9.3 KiB
TypeScript
import { expect, test, type Page } from "playwright/test";
|
|
|
|
test("frontend actions replace SCADA analysis results and remain legible at 375px", async ({ page }) => {
|
|
const receipts: Array<Record<string, unknown>> = [];
|
|
await mockAgentActions(page, receipts);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.waitForFunction(() => Boolean(
|
|
window.__waterNetworkMap?.getSource("agent-scada-analysis")
|
|
));
|
|
await expect(
|
|
page.getByRole("button", { name: "选择 Agent 模型" }).filter({ visible: true }).first()
|
|
).toContainText("测试模型");
|
|
|
|
await page.evaluate(() => {
|
|
const map = window.__waterNetworkMap;
|
|
[
|
|
"agent-scada-analysis-label",
|
|
"agent-scada-analysis-indicator",
|
|
"agent-scada-analysis-level",
|
|
"agent-scada-analysis-casing"
|
|
].forEach((id) => {
|
|
if (map?.getLayer(id)) map.removeLayer(id);
|
|
});
|
|
});
|
|
|
|
const prompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
|
|
await prompt.fill("将 MP01 标为高、MP02 标为低并显示编号");
|
|
await page.getByRole("button", { name: "发送 Agent 指令" }).filter({ visible: true }).first().click();
|
|
|
|
await expect(page.getByText("已渲染 1 个，高 0、中 0、低 1。")).toBeVisible();
|
|
await page.waitForFunction(() => {
|
|
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
|
|
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
|
|
};
|
|
const features = source?._data?.features ?? [];
|
|
return features.length === 1 && features[0].properties?.sensor_id === "MP02";
|
|
});
|
|
await page.waitForFunction(() => {
|
|
const map = window.__waterNetworkMap;
|
|
return Boolean(
|
|
map?.isSourceLoaded("agent-scada-analysis") &&
|
|
map.queryRenderedFeatures(undefined, { layers: ["agent-scada-analysis-level"] }).length > 0 &&
|
|
map.queryRenderedFeatures(undefined, { layers: ["agent-scada-analysis-label"] }).length > 0
|
|
);
|
|
});
|
|
const rendered = await page.evaluate(() => {
|
|
const map = window.__waterNetworkMap;
|
|
const source = map?.getSource("agent-scada-analysis") as unknown as {
|
|
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
|
|
};
|
|
const feature = source?._data?.features?.[0];
|
|
const labelLayer = map?.getLayer("agent-scada-analysis-label");
|
|
const levelLayer = map?.getLayer("agent-scada-analysis-level");
|
|
const indicatorLayer = map?.getLayer("agent-scada-analysis-indicator");
|
|
return {
|
|
label: feature?.properties?.analysis_label,
|
|
labelLayer: labelLayer?.type,
|
|
labelSize: map?.getLayoutProperty("agent-scada-analysis-label", "text-size"),
|
|
labelFont: map?.getLayoutProperty("agent-scada-analysis-label", "text-font"),
|
|
level: feature?.properties?.analysis_level,
|
|
levelLayer: levelLayer?.type,
|
|
levelColors: map?.getPaintProperty("agent-scada-analysis-level", "circle-stroke-color"),
|
|
indicatorLayer: indicatorLayer?.type
|
|
};
|
|
});
|
|
expect(rendered).toEqual({
|
|
label: "MP02 · 低",
|
|
labelLayer: "symbol",
|
|
labelSize: 15,
|
|
labelFont: ["Noto Sans Regular"],
|
|
level: "low",
|
|
levelLayer: "circle",
|
|
levelColors: [
|
|
"match",
|
|
["get", "analysis_level"],
|
|
"high", "#DC2626",
|
|
"medium", "#F59E0B",
|
|
"low", "#16A34A",
|
|
"#7C3AED"
|
|
],
|
|
indicatorLayer: "circle"
|
|
});
|
|
|
|
await expect.poll(() => receipts.length).toBe(2);
|
|
expect(receipts).toEqual(expect.arrayContaining([
|
|
expect.objectContaining({ status: "failed", error: expect.objectContaining({ code: "ACTION_SUPERSEDED" }) }),
|
|
expect.objectContaining({
|
|
status: "succeeded",
|
|
output: expect.objectContaining({ rendered_ids: ["MP02"], fitted: true })
|
|
})
|
|
]));
|
|
|
|
await page.setViewportSize({ width: 375, height: 812 });
|
|
await page.evaluate(() => window.__waterNetworkMap?.resize());
|
|
await expect(page.getByText("已渲染 1 个，高 0、中 0、低 1。")).toBeVisible();
|
|
expect(await page.evaluate(() => {
|
|
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
|
|
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
|
|
};
|
|
return {
|
|
label: source?._data?.features?.[0]?.properties?.analysis_label,
|
|
viewportWidth: document.documentElement.clientWidth
|
|
};
|
|
})).toEqual({ label: "MP02 · 低", viewportWidth: 375 });
|
|
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
await page.getByRole("button", { name: "新建 Agent 对话" }).filter({ visible: true }).click();
|
|
await page.waitForFunction(() => {
|
|
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
|
|
_data?: { features?: unknown[] };
|
|
};
|
|
return source?._data?.features?.length === 0;
|
|
});
|
|
|
|
const nextPrompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
|
|
await nextPrompt.fill("新一组分析：将 MP01 标为高、MP02 标为低并显示编号");
|
|
await page.getByRole("button", { name: "发送 Agent 指令" }).filter({ visible: true }).first().click();
|
|
await page.waitForFunction(() => {
|
|
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
|
|
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
|
|
};
|
|
const features = source?._data?.features ?? [];
|
|
return features.length === 1 && features[0].properties?.analysis_label === "MP02 · 低";
|
|
});
|
|
await page.waitForTimeout(250);
|
|
expect(await page.evaluate(() => {
|
|
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
|
|
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
|
|
};
|
|
return source?._data?.features?.map((feature) => feature.properties?.analysis_label);
|
|
})).toEqual(["MP02 · 低"]);
|
|
await expect.poll(() => receipts.length).toBe(4);
|
|
});
|
|
|
|
async function mockAgentActions(page: Page, receipts: Array<Record<string, unknown>>) {
|
|
let streamRequestCount = 0;
|
|
|
|
await page.route("**/api/map-features", async (route) => {
|
|
const body = route.request().postDataJSON() as { featureIds?: string[] };
|
|
const sensorId = body.featureIds?.[0] ?? "";
|
|
if (sensorId === "MP01") await new Promise((resolve) => setTimeout(resolve, 150));
|
|
await route.fulfill({
|
|
json: {
|
|
type: "FeatureCollection",
|
|
features: [{
|
|
type: "Feature",
|
|
geometry: { type: "Point", coordinates: sensorId === "MP01" ? [120.7, 28] : [120.72, 28.02] },
|
|
properties: { sensor_id: sensorId }
|
|
}]
|
|
}
|
|
});
|
|
});
|
|
|
|
await page.route("**/api/v1/agent/chat/**", async (route) => {
|
|
const url = new URL(route.request().url());
|
|
const path = url.pathname;
|
|
if (/\/frontend-actions\/[^/]+\/result$/.test(path)) {
|
|
receipts.push(route.request().postDataJSON() as Record<string, unknown>);
|
|
await route.fulfill({ json: { ok: true } });
|
|
return;
|
|
}
|
|
if (path.endsWith("/frontend-action-registry")) {
|
|
await route.fulfill({ json: {
|
|
schema_version: "frontend-action-registry@1",
|
|
actions: [
|
|
{ id: "render_scada_analysis", version: "frontend-action@1" },
|
|
{ id: "clear_scada_analysis", version: "frontend-action@1" }
|
|
]
|
|
} });
|
|
return;
|
|
}
|
|
if (path.endsWith("/models")) {
|
|
await route.fulfill({ json: {
|
|
default_model: "test/model",
|
|
models: [{ id: "test/model", label: "测试模型", description: "SCADA 动作测试", icon: "bolt" }]
|
|
} });
|
|
return;
|
|
}
|
|
if (path.endsWith("/sessions")) {
|
|
await route.fulfill({ json: { sessions: [] } });
|
|
return;
|
|
}
|
|
if (path.endsWith("/ui-registry")) {
|
|
await route.fulfill({ json: { schema_version: "agent-ui-registry@1", components: [], actions: [] } });
|
|
return;
|
|
}
|
|
if (path.endsWith("/stream") && route.request().method() === "POST") {
|
|
streamRequestCount += 1;
|
|
const now = Date.now();
|
|
const sessionId = `scada-session-${streamRequestCount}`;
|
|
const chunks = [
|
|
{ type: "start", messageId: `assistant-scada-action-${streamRequestCount}` },
|
|
frontendActionChunk(`action-${streamRequestCount}-first`, `call-${streamRequestCount}-first`, sessionId, "MP01", "high", now),
|
|
frontendActionChunk(`action-${streamRequestCount}-second`, `call-${streamRequestCount}-second`, sessionId, "MP02", "low", now),
|
|
{ type: "text-start", id: "answer" },
|
|
{ type: "text-delta", id: "answer", delta: "已更新地图结果。" },
|
|
{ type: "text-end", id: "answer" },
|
|
{ type: "finish", finishReason: "stop" }
|
|
];
|
|
await route.fulfill({
|
|
headers: {
|
|
"Cache-Control": "no-cache",
|
|
"Content-Type": "text/event-stream",
|
|
"X-Vercel-AI-UI-Message-Stream": "v1"
|
|
},
|
|
body: chunks.map((chunk) => `data: ${JSON.stringify(chunk)}\n\n`).join("")
|
|
});
|
|
return;
|
|
}
|
|
await route.fulfill({ json: {} });
|
|
});
|
|
}
|
|
|
|
function frontendActionChunk(
|
|
actionId: string,
|
|
toolCallId: string,
|
|
sessionId: string,
|
|
sensorId: string,
|
|
level: "high" | "low",
|
|
now: number
|
|
) {
|
|
return {
|
|
type: "data-frontend_action",
|
|
data: {
|
|
version: "frontend-action@1",
|
|
actionId,
|
|
toolCallId,
|
|
sessionId,
|
|
session_id: sessionId,
|
|
name: "render_scada_analysis",
|
|
params: { items: [{ sensor_id: sensorId, level }] },
|
|
issuedAt: now,
|
|
expiresAt: now + 15_000
|
|
},
|
|
transient: true
|
|
};
|
|
}
|