121 lines
8.3 KiB
TypeScript
121 lines
8.3 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
import { investigationFixture, mockInvestigationPresentation } from "./support/mock-investigation-presentation";
|
|
import type { OperationalTaskNotification } from "../../src/features/workbench/api/operational-task-client";
|
|
|
|
for (const { width, reducedMotion } of [{ width: 1280, reducedMotion: false }, { width: 375, reducedMotion: false }, { width: 320, reducedMotion: false }, { width: 320, reducedMotion: true }]) {
|
|
test(`待办和告警可独立移除且刷新后保持 ${width}${reducedMotion ? " 减少动态效果" : ""}`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.emulateMedia({ reducedMotion: reducedMotion ? "reduce" : "no-preference" });
|
|
const task = investigationFixture(1, "通知移除测试调查");
|
|
const notification: OperationalTaskNotification = {
|
|
notification_id: "96000000-0000-4000-8000-000000000011", task_id: task.task_id,
|
|
kind: "human_input_required", title: "待补充现场流量记录", description: "请核对现场记录后补充资料。",
|
|
required_permission: null, lifecycle_status: "active", subject_type: "question", subject_id: null,
|
|
resolved_at: null, resolution_reason: null, status: "unread", version: 1,
|
|
created_at: task.created_at, read_at: null, read_by: null
|
|
};
|
|
await mockInvestigationPresentation(page, [task], [], [notification]);
|
|
const alert = { id: "pressure-alert-1", source: { kind: "scada_replay", replay_id: "replay-1", rule_id: "pressure-low", batch_sequence: 1 }, condition_id: `operational-task:${task.task_id}`,
|
|
title: "SCADA 压力持续偏低需要核查现场情况", description: "压力监测点连续出现异常读数，请查看关联调查。",
|
|
occurred_at: task.created_at, severity: "warning" };
|
|
let cursor = 10;
|
|
await page.route("https://tjwater-api.invalid/api/v1/workbench/sync-snapshot", (route) => route.fulfill({ json: {
|
|
schema: "workbench-sync-snapshot@1", event_cursor: cursor, generated_at: task.created_at,
|
|
runtime: { availability: "not_configured", source: "none", scenario_availability: "not_configured",
|
|
artifact_availability: "not_configured", schedule_availability: "not_configured", work_order_availability: "not_configured",
|
|
alert_availability: "ready", generated_at: task.created_at, conditions: [], alerts: [alert], scenarios: [], latest_analysis: null, work_orders: [] },
|
|
tasks: [Object.fromEntries(Object.entries(task).filter(([key]) =>
|
|
!["latest_plan", "latest_report", "latest_progress", "evidence", "actions", "access_requests", "work_order_snapshot", "permissions", "questions"].includes(key)))], notifications: [notification]
|
|
} }));
|
|
const writes: string[] = [];
|
|
page.on("request", (request) => {
|
|
if (request.url().startsWith("https://tjwater-api.invalid/") && ["POST", "PUT", "PATCH", "DELETE"].includes(request.method())) writes.push(request.url());
|
|
});
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const trigger = page.getByRole("button", { name: /查看待办与告警/ });
|
|
// Runtime alerts and task notifications finish loading independently on a cold page.
|
|
await expect(trigger).toHaveAccessibleName("查看待办与告警，当前 2 条待处理事项", { timeout: 15_000 });
|
|
await trigger.click();
|
|
const menu = page.getByRole("menu");
|
|
await expect(menu).toBeVisible();
|
|
const removeTask = page.getByRole("menuitem", { name: `移除通知：${notification.title}` });
|
|
await expect(removeTask).toBeVisible();
|
|
const openTask = page.getByRole("menuitem", { name: `打开通知：${notification.title}` });
|
|
await expect(openTask).toHaveText("");
|
|
const notificationRow = page.locator(`[data-alert-id="operational-task-notification:${notification.notification_id}"]`);
|
|
const titleBounds = await notificationRow.locator("p").first().boundingBox();
|
|
const rowBounds = await notificationRow.boundingBox();
|
|
expect(rowBounds!.height).toBeLessThanOrEqual(82);
|
|
const hit = await page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.closest("button")?.getAttribute("aria-label"),
|
|
{ x: titleBounds!.x + titleBounds!.width / 2, y: titleBounds!.y + titleBounds!.height / 2 });
|
|
expect(hit).toBe(`打开通知：${notification.title}`);
|
|
await openTask.hover();
|
|
await expect(notificationRow).toHaveCSS("background-color", "rgb(218, 229, 253)");
|
|
await expect(notificationRow).toHaveCSS("border-color", "rgb(66, 99, 199)");
|
|
for (const action of [removeTask]) {
|
|
await action.hover();
|
|
await expect(action).toHaveCSS("background-color", "rgb(66, 99, 199)");
|
|
await expect(action).toHaveCSS("color", "rgb(255, 255, 255)");
|
|
}
|
|
await testInfo.attach(`alert-hover-${width}`, { body: await page.screenshot({ path: testInfo.outputPath("alert-hover.png"), style: "[data-sonner-toaster] { visibility: hidden !important; }" }), contentType: "image/png" });
|
|
await page.mouse.move(0, 0);
|
|
const removePosition = await removeTask.evaluate((element) => {
|
|
const remove = element.getBoundingClientRect();
|
|
const row = element.closest("[data-alert-id]")!.getBoundingClientRect();
|
|
return { top: remove.top - row.top, right: row.right - remove.right };
|
|
});
|
|
expect(removePosition.top).toBeLessThanOrEqual(6);
|
|
expect(removePosition.right).toBeLessThanOrEqual(6);
|
|
const box = await menu.boundingBox();
|
|
expect(box!.x).toBeGreaterThanOrEqual(0);
|
|
expect(box!.x + box!.width).toBeLessThanOrEqual(width);
|
|
await testInfo.attach(`alert-menu-${width}`, { body: await page.screenshot({ path: testInfo.outputPath("alert-menu.png"), style: "[data-sonner-toaster] { visibility: hidden !important; }" }), contentType: "image/png" });
|
|
const row = page.locator(`[data-alert-id="operational-task-notification:${notification.notification_id}"]`);
|
|
if (!reducedMotion) {
|
|
const exitState = await removeTask.evaluate(async (element) => {
|
|
const row = element.closest("[data-alert-id]")!;
|
|
(element as HTMLElement).click();
|
|
const list = row.parentElement!;
|
|
let opacity = 1;
|
|
for (let frame = 0; frame < 30 && opacity === 1; frame++) {
|
|
await new Promise(requestAnimationFrame);
|
|
opacity = Number(getComputedStyle(row).opacity);
|
|
}
|
|
const style = getComputedStyle(row);
|
|
return { retained: row.isConnected, opacity, pointerEvents: style.pointerEvents,
|
|
overflowX: getComputedStyle(list).overflowX,
|
|
pageOverflows: document.documentElement.scrollWidth > window.innerWidth };
|
|
});
|
|
expect(exitState.retained).toBe(true);
|
|
expect(exitState.opacity).toBeGreaterThan(0);
|
|
expect(exitState.opacity).toBeLessThan(1);
|
|
expect(exitState.pointerEvents).toBe("none");
|
|
expect(exitState.overflowX).toBe("hidden");
|
|
expect(exitState.pageOverflows).toBe(false);
|
|
} else {
|
|
await removeTask.click();
|
|
}
|
|
await expect(row).toHaveCount(0);
|
|
await expect(menu).toBeVisible();
|
|
await expect(trigger).toHaveAccessibleName("查看待办与告警，当前 1 条待处理事项");
|
|
await expect(page.getByRole("region", { name: "工况任务", exact: true })).toHaveCount(0);
|
|
// A repeated business snapshot must not restore the removed notification.
|
|
await page.evaluate((event) => {
|
|
(window as unknown as { emitInvestigationTestEvent: (value: unknown) => void }).emitInvestigationTestEvent(event);
|
|
}, { schema: "workbench-event@1", event_seq: ++cursor, event_id: "96000000-0000-4000-8000-000000000012",
|
|
project_id: task.project_id, topic: "workbench.alert.changed", aggregate_type: "task_alert",
|
|
aggregate_id: alert.id, aggregate_revision: 2, occurred_at: task.created_at, metadata: {} });
|
|
await page.getByRole("menuitem", { name: `移除通知：${alert.title}` }).focus();
|
|
await page.keyboard.press("Enter");
|
|
await expect(menu).toContainText("当前无待处理事项");
|
|
await expect(trigger).toHaveAccessibleName("查看待办与告警，当前 0 条待处理事项");
|
|
await page.keyboard.press("Escape");
|
|
await expect(trigger).toBeFocused();
|
|
await page.reload({ waitUntil: "domcontentloaded" });
|
|
await expect(trigger).toHaveAccessibleName("查看待办与告警，当前 0 条待处理事项");
|
|
await trigger.click();
|
|
await expect(page.getByRole("menu")).toContainText("当前无待处理事项");
|
|
expect(writes).toEqual([]);
|
|
});
|
|
}
|