329 lines
15 KiB
TypeScript
329 lines
15 KiB
TypeScript
import { expect, test, type Locator } from "@playwright/test";
|
|
import { mockAgentApi } from "./support/mock-agent-api";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
import { responsesFixture } from "./support/responses-fixture";
|
|
|
|
test.use({ launchOptions: { args: ["--enable-unsafe-swiftshader"] } });
|
|
|
|
async function ready(orb: Locator) {
|
|
await expect(orb.locator('.agent-orb-live[data-ready="true"]')).toBeVisible({ timeout: 30000 });
|
|
await expect(orb.locator("canvas")).toBeVisible();
|
|
}
|
|
|
|
async function expectNoPressFeedback(orb: Locator) {
|
|
await expect(orb).toHaveCSS("opacity", "1");
|
|
await expect(orb.locator(".agent-orb-response")).toHaveCSS("transform", "none");
|
|
}
|
|
|
|
async function expectMoving(orb: Locator) {
|
|
const first = await orb.locator("canvas").screenshot();
|
|
await expect
|
|
.poll(async () => !(await orb.locator("canvas").screenshot()).equals(first))
|
|
.toBe(true);
|
|
}
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await mockAgentApi(page);
|
|
});
|
|
|
|
test("first load blends the original still into the animation without a visual cut", async ({ page }) => {
|
|
let release!: () => void;
|
|
const downloadReady = new Promise<void>((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route("**/obsidian-water-v1.riv*", async (route) => {
|
|
await downloadReady;
|
|
await route.continue();
|
|
});
|
|
try {
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const orb = page.getByLabel("Agent 折叠栏").locator("[data-agent-orb]");
|
|
await expect(orb.locator(".agent-orb-canvas")).toHaveCount(1);
|
|
await expect(orb.locator("img")).toBeVisible();
|
|
await expect(orb.locator("img")).toHaveAttribute("src", /obsidian-water-idle\.png\?v=/);
|
|
const transition = orb.evaluate((element) => new Promise<{
|
|
opacity: number;
|
|
width: number;
|
|
height: number;
|
|
}[]>((resolve, reject) => {
|
|
const frames: { opacity: number; width: number; height: number }[] = [];
|
|
const start = performance.now();
|
|
const sample = () => {
|
|
const canvas = element.querySelector(".agent-orb-canvas")!;
|
|
const opacity = Number(getComputedStyle(canvas).opacity);
|
|
const { width, height } = element.getBoundingClientRect();
|
|
frames.push({ opacity, width, height });
|
|
if (opacity === 1) return resolve(frames);
|
|
if (performance.now() - start > 30000) return reject(new Error("Animation did not appear"));
|
|
requestAnimationFrame(sample);
|
|
};
|
|
sample();
|
|
}));
|
|
release();
|
|
const frames = await transition;
|
|
expect(frames[0].opacity).toBe(0);
|
|
expect(frames.some(({ opacity }) => opacity > 0 && opacity < 1)).toBe(true);
|
|
expect(frames.every(({ width, height }) => width === 64 && height === 64)).toBe(true);
|
|
await expect(orb.locator("img")).toBeHidden();
|
|
await expectMoving(orb);
|
|
} finally {
|
|
release();
|
|
}
|
|
});
|
|
|
|
test("renders original Obsidian, caches across reloads and releases offscreen renderers", async ({
|
|
page
|
|
}) => {
|
|
const resources: string[] = [];
|
|
page.on("request", (request) => {
|
|
if (/\.riv(?:\?|$)/.test(request.url())) resources.push(request.url());
|
|
});
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const launcher = page.getByLabel("Agent 折叠栏");
|
|
const orb = launcher.locator("[data-agent-orb]");
|
|
await expect(orb).toHaveAttribute("data-agent-orb", "idle", { timeout: 30000 });
|
|
await ready(orb);
|
|
await expect(orb.locator(".agent-orb-canvas")).toHaveCSS("filter", "none");
|
|
await expectMoving(orb);
|
|
await orb.hover();
|
|
await expect(orb).toHaveAttribute("data-hovered", "true");
|
|
await page.mouse.move(600, 600);
|
|
await expect(orb).toHaveAttribute("data-hovered", "false");
|
|
await orb.evaluate((element) => {
|
|
(element.parentElement as HTMLElement).style.transform = "translateX(-2000px)";
|
|
});
|
|
await expect(orb.locator("canvas")).toHaveCount(0);
|
|
await orb.evaluate((element) => {
|
|
(element.parentElement as HTMLElement).style.transform = "";
|
|
});
|
|
await ready(orb);
|
|
await launcher.getByRole("button").click();
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
await ready(panel.locator("header [data-agent-orb]"));
|
|
await expect(panel.locator("header [data-agent-orb]")).toHaveCSS("width", "64px");
|
|
await expect(page.locator(".agent-orb canvas")).toHaveCount(1);
|
|
await panel.getByRole("button", { name: "折叠 Agent 面板" }).click();
|
|
await ready(orb);
|
|
expect(resources.map((url) => new URL(url).pathname)).toEqual(["/agent/obsidian-water-v1.riv"]);
|
|
// A full reload loses module memory. Block the asset network path to prove the
|
|
// next live renderer reads persistent Cache Storage rather than downloading.
|
|
await page.route("**/obsidian-water-v1.riv*", (route) => route.abort());
|
|
await page.reload({ waitUntil: "domcontentloaded" });
|
|
await ready(orb);
|
|
await expectMoving(orb);
|
|
expect(resources).toHaveLength(1);
|
|
await page.screenshot({
|
|
path: "/tmp/nexttjwater-obsidian-restored/workbench.png",
|
|
clip: { x: 0, y: 56, width: 340, height: 190 }
|
|
});
|
|
});
|
|
|
|
test("pointer coordinates reach the native hover listener in the launcher and header", async ({ page }) => {
|
|
await page.addInitScript(() => {
|
|
const addListener = HTMLCanvasElement.prototype.addEventListener;
|
|
HTMLCanvasElement.prototype.addEventListener = function (type, listener, options) {
|
|
if (type === "mousemove") {
|
|
// Observe delivery to Rive's native canvas event path. A hover boolean
|
|
// alone leaves the resource's pointer target at the sphere center.
|
|
addListener.call(this, type, (event) => {
|
|
const { clientX, clientY } = event as MouseEvent;
|
|
const bounds = this.getBoundingClientRect();
|
|
this.dataset.pointerPosition = JSON.stringify({
|
|
x: (clientX - bounds.left) / bounds.width,
|
|
y: (clientY - bounds.top) / bounds.height
|
|
});
|
|
});
|
|
}
|
|
addListener.call(this, type, listener, options);
|
|
};
|
|
});
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const launcher = page.getByLabel("Agent 折叠栏");
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
for (const orb of [launcher.locator("[data-agent-orb]"), panel.locator("header [data-agent-orb]")]) {
|
|
await ready(orb);
|
|
const bounds = (await orb.boundingBox())!;
|
|
for (const x of [0.25, 0.75, 0.5]) {
|
|
await page.mouse.move(bounds.x + bounds.width * x, bounds.y + bounds.height * 0.5);
|
|
await expect.poll(async () => {
|
|
const point = await orb.locator("canvas").getAttribute("data-pointer-position");
|
|
return point ? JSON.parse(point) : null;
|
|
}).toEqual({ x, y: 0.5 });
|
|
}
|
|
await page.mouse.move(600, 600);
|
|
await expect(orb).toHaveAttribute("data-hovered", "false");
|
|
if (!(await panel.isVisible())) await launcher.getByRole("button").click();
|
|
}
|
|
});
|
|
|
|
test("mouse presses preserve size and brightness while clicking still opens the Agent", async ({ page }) => {
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const orb = page.getByLabel("Agent 折叠栏").locator("[data-agent-orb]");
|
|
await ready(orb);
|
|
await orb.hover();
|
|
await page.mouse.down();
|
|
await expectNoPressFeedback(orb);
|
|
await expect(orb).toHaveAttribute("data-hovered", "true");
|
|
await page.mouse.move(600, 600);
|
|
await page.mouse.up();
|
|
await expectNoPressFeedback(orb);
|
|
await expect(orb).toHaveAttribute("data-hovered", "false");
|
|
await orb.click();
|
|
await expect(page.getByRole("complementary", { name: "Agent 命令面板" })).toBeVisible();
|
|
});
|
|
|
|
test("follows processing and completion while the Agent is collapsed", async ({ page }) => {
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
let release!: () => void;
|
|
const responseReady = new Promise<void>((resolve) => {
|
|
release = resolve;
|
|
});
|
|
await page.route("**/api/v1/responses", async (route) => {
|
|
if (route.request().method() === "OPTIONS") return route.fallback();
|
|
await responseReady;
|
|
await route.fulfill({
|
|
headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/event-stream" },
|
|
body: responsesFixture([
|
|
{ type: "start", messageId: "orb-state-preview" },
|
|
{ type: "text-start", id: "answer" },
|
|
{ type: "text-delta", id: "answer", delta: "动态球状态演练回复。" },
|
|
{ type: "text-end", id: "answer" },
|
|
{ type: "finish", finishReason: "stop" }
|
|
])
|
|
});
|
|
});
|
|
try {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
await panel.locator("textarea").fill("检查当前供水状态");
|
|
await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
|
|
await panel.getByRole("button", { name: "折叠 Agent 面板" }).click();
|
|
const orb = page.getByLabel("Agent 折叠栏").locator("[data-agent-orb]");
|
|
await expect(orb).toHaveAttribute("data-agent-orb", "thinking");
|
|
await ready(orb);
|
|
await expectMoving(orb);
|
|
release();
|
|
await expect(orb).toHaveAttribute("data-agent-orb", "idle");
|
|
await expectMoving(orb);
|
|
} finally {
|
|
release();
|
|
}
|
|
});
|
|
|
|
test("offline plays the resource water loops without press feedback and opens the Agent", async ({
|
|
page
|
|
}) => {
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await page.route("**/api/v1/models", async (route) => {
|
|
if (route.request().method() === "OPTIONS") return route.fallback();
|
|
await route.fulfill({
|
|
status: 503,
|
|
headers: { "Access-Control-Allow-Origin": "*" },
|
|
json: { error: "演练连接失败" }
|
|
});
|
|
});
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const launcher = page.getByLabel("Agent 折叠栏");
|
|
const orb = launcher.locator("[data-agent-orb]");
|
|
await expect(orb).toHaveAttribute("data-agent-orb", "asleep", { timeout: 30000 });
|
|
await ready(orb);
|
|
await expect(orb.locator("img")).toBeHidden();
|
|
await expectMoving(orb);
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await expect(orb.locator("canvas")).toHaveCount(0);
|
|
await expect(orb.locator("img")).toBeVisible();
|
|
await expect(orb.locator("img")).toHaveAttribute("src", /obsidian-water-offline\.png\?v=/);
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await ready(orb);
|
|
await orb.hover();
|
|
await page.mouse.down();
|
|
await expectNoPressFeedback(orb);
|
|
await page.mouse.move(600, 600);
|
|
await page.mouse.up();
|
|
await expectNoPressFeedback(orb);
|
|
await page.screenshot({
|
|
path: "/tmp/nexttjwater-obsidian-restored/offline.png",
|
|
clip: { x: 0, y: 56, width: 340, height: 190 }
|
|
});
|
|
await launcher.getByRole("button").click();
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
await ready(panel.locator("header [data-agent-orb]"));
|
|
await expect(panel.locator("header [data-agent-orb]")).toHaveAttribute("data-agent-orb", "asleep");
|
|
await expect(page.locator(".agent-orb canvas")).toHaveCount(1);
|
|
});
|
|
|
|
test("reduced motion uses a still and keeps keyboard access in forced colors", async ({ page }) => {
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const launcher = page.getByLabel("Agent 折叠栏");
|
|
const orb = launcher.locator("[data-agent-orb]");
|
|
await expect(orb).toHaveAttribute("data-agent-orb", "idle", { timeout: 30000 });
|
|
await expect(orb.locator("canvas")).toHaveCount(0);
|
|
await orb.hover();
|
|
await page.mouse.down();
|
|
await expectNoPressFeedback(orb);
|
|
await page.mouse.move(600, 600);
|
|
await page.mouse.up();
|
|
await expect(orb).toHaveCSS("opacity", "1");
|
|
await page.emulateMedia({ reducedMotion: "reduce", forcedColors: "active" });
|
|
await expect(orb.locator(".agent-orb-contrast")).toBeVisible();
|
|
await expect(orb.locator(".agent-orb-contrast")).toHaveCSS("border-top-color", "rgb(0, 0, 0)");
|
|
await launcher.getByRole("button").focus();
|
|
await page.keyboard.press("Space");
|
|
await expect(page.getByRole("complementary", { name: "Agent 命令面板" })).toBeVisible();
|
|
});
|
|
|
|
test("animation download failure retains the original still and the working launcher", async ({
|
|
page
|
|
}) => {
|
|
await page.route("**/obsidian-water-v1.riv*", (route) => route.abort());
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const launcher = page.getByLabel("Agent 折叠栏");
|
|
await expect(launcher.locator('.agent-orb-live[data-failed="true"]')).toBeVisible({
|
|
timeout: 30000
|
|
});
|
|
await expect(launcher.locator("img")).toBeVisible();
|
|
await expect(launcher.locator("canvas")).toHaveCount(0);
|
|
await launcher.getByRole("button").click();
|
|
await expect(page.getByRole("complementary", { name: "Agent 命令面板" })).toBeVisible();
|
|
});
|
|
|
|
test.describe("touch interaction", () => {
|
|
test.use({ hasTouch: true, viewport: { width: 375, height: 812 } });
|
|
test("mobile presses add no animation and tapping opens the Agent", async ({ page }) => {
|
|
await page.emulateMedia({ reducedMotion: "no-preference" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
const button = page.getByRole("button", { name: "打开 Agent 面板", exact: true });
|
|
const orb = button.locator("[data-agent-orb]");
|
|
await ready(orb);
|
|
await expect(orb).toHaveCSS("width", "40px");
|
|
const bounds = (await orb.boundingBox())!;
|
|
const touch = await page.context().newCDPSession(page);
|
|
await touch.send("Input.dispatchTouchEvent", {
|
|
type: "touchStart",
|
|
touchPoints: [{ x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 }]
|
|
});
|
|
await expectNoPressFeedback(orb);
|
|
await expect(orb).toHaveAttribute("data-hovered", "false");
|
|
await touch.send("Input.dispatchTouchEvent", { type: "touchCancel", touchPoints: [] });
|
|
await expectNoPressFeedback(orb);
|
|
await expect(orb).toHaveAttribute("data-hovered", "false");
|
|
await button.tap();
|
|
await expect(page.getByRole("complementary", { name: "Agent 命令面板" })).toBeVisible();
|
|
await ready(page.locator('[aria-label="Agent 命令面板"] header [data-agent-orb]'));
|
|
await expect(page.locator(".agent-orb canvas")).toHaveCount(1);
|
|
await page.screenshot({ path: "/tmp/nexttjwater-orb-loading/mobile-375.png" });
|
|
await page.setViewportSize({ width: 320, height: 812 });
|
|
await expect(page.locator('[aria-label="Agent 命令面板"] header [data-agent-orb]')).toHaveCSS("width", "64px");
|
|
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
|
|
await page.screenshot({ path: "/tmp/nexttjwater-orb-loading/mobile-320.png" });
|
|
await touch.detach();
|
|
});
|
|
});
|