Files
UHD_Media_Tool/apps/web/app/components/agent/agent-nav.test.ts
T
rootandClaude Opus 5.5 bbd7459935 fix(agent): 抽屉开着时路由变化,新对话的上下文跟着页面换
浏览器前进后退或会话里的链接换了页面,抽屉里新对话仍挂着上一页的对象。
按路由推断的上下文随页面更新;页面按钮带进来的上下文、正在看的会话不动。

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
2026-10-06 18:08:19 +08:00

221 lines
9.6 KiB
TypeScript

import type { AgentRunEvent } from "@umt/contracts";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { runGroup } from "~/api/agent.ts";
import { followBehavior } from "~/components/agentui/message-scroller.tsx";
import {
agentListHref,
agentRunHref,
DRAFT_DRAWER_GOAL,
DRAFT_PAGE_GOAL,
groupFromSearch,
readDraft,
resolveGroup,
revealScrollTop,
runDraftKey,
writeDraft,
} from "./agent-nav.ts";
import { CompactPager } from "./agent-session-list.tsx";
import {
agentReturnPath,
clearAgentContext,
isAgentPage,
noteAgentReturnPath,
openAgentDrawer,
outletKey,
setAgentDrawerOpen,
showAgentRunInDrawer,
syncAgentContextToPath,
toggleAction,
useAgentDrawer,
} from "./agent-store.ts";
import { cachedRunEvents, cacheRunEvents } from "./use-agent-stream.ts";
// 智能体页面切换的状态逻辑:整页重挂载 key、分栏与 URL、草稿、滚动策略、快捷键在智能体页面的行为。
describe("主内容区重挂载 key", () => {
it("列表页与各会话页共用一个 key,切换会话不重挂载", () => {
expect(outletKey("/console/agent")).toBe("/console/agent");
expect(outletKey("/console/agent/0b1c")).toBe("/console/agent");
expect(outletKey("/console/agent/9f2e")).toBe(outletKey("/console/agent/0b1c"));
});
it("其它页面仍按路径重挂载", () => {
expect(outletKey("/console/library")).toBe("/console/library");
expect(outletKey("/console/agents-x")).toBe("/console/agents-x");
expect(isAgentPage("/console/agentx")).toBe(false);
});
});
describe("分栏:对话 / 自动巡检", () => {
it("会话所在分栏:巡检 / 事件在自动巡检,子会话随父会话,父会话未知归对话", () => {
expect(runGroup({ trigger: "schedule" })).toBe("auto");
expect(runGroup({ trigger: "event" })).toBe("auto");
expect(runGroup({ trigger: "user" })).toBe("conversation");
expect(runGroup({ trigger: "subagent" }, { trigger: "schedule" })).toBe("auto");
expect(runGroup({ trigger: "subagent" }, { trigger: "user" })).toBe("conversation");
expect(runGroup({ trigger: "subagent" })).toBe("conversation");
});
it("URL 的 tab 只认两个取值", () => {
expect(groupFromSearch("?tab=auto&mock=1")).toBe("auto");
expect(groupFromSearch("?tab=conversation")).toBe("conversation");
expect(groupFromSearch("?tab=xx")).toBeNull();
expect(groupFromSearch("")).toBeNull();
});
it("取值顺序:URL > 当前会话 > 上次 > 对话", () => {
expect(resolveGroup({ fromUrl: "conversation", activeRun: "auto", remembered: "auto" })).toBe("conversation");
expect(resolveGroup({ fromUrl: null, activeRun: "auto", remembered: "conversation" })).toBe("auto");
// 打开巡检会话、快照还没到:沿用点它时所在的分栏,不先闪到「对话」
expect(resolveGroup({ fromUrl: null, activeRun: null, remembered: "auto" })).toBe("auto");
expect(resolveGroup({ fromUrl: null })).toBe("conversation");
});
it("链接:会话页不带 tab(由会话决定),列表页只在自动巡检时带,保留演示开关", () => {
expect(agentRunHref("r1")).toBe("/console/agent/r1");
expect(agentRunHref("r1", true)).toBe("/console/agent/r1?mock=1");
expect(agentListHref()).toBe("/console/agent");
expect(agentListHref("auto")).toBe("/console/agent?tab=auto");
expect(agentListHref("auto", true)).toBe("/console/agent?tab=auto&mock=1");
expect(agentListHref("conversation", true)).toBe("/console/agent?mock=1");
});
});
describe("当前会话滚进可见区", () => {
const vp = { scrollTop: 200, height: 300 };
it("已经完整可见不滚", () => {
expect(revealScrollTop({ top: 250, height: 40 }, vp)).toBeNull();
});
it("在上方:滚到顶边对齐;在下方:滚到底边刚好露出", () => {
expect(revealScrollTop({ top: 120, height: 40 }, vp)).toBe(120);
expect(revealScrollTop({ top: 600, height: 40 }, vp)).toBe(340);
});
});
describe("会话列表分页(窄列表一行)", () => {
const pager = (p: Partial<Parameters<typeof CompactPager>[0]>) =>
renderToStaticMarkup(
createElement(CompactPager, { page: 1, pageSize: 20, total: 0, onPageChange: () => {}, ...p }),
);
it("只有一页不显示", () => {
expect(pager({ total: 12 })).toBe("");
});
it("多页:总数 + 当前页 / 页数,没有每页条数选择", () => {
const html = pager({ total: 48, page: 2 });
expect(html).toContain("共 48 条");
expect(html).toContain("2 / 3");
expect(html).not.toContain("每页");
});
it("还能往后加载时标出已加载条数和「+」", () => {
const html = pager({ total: 20, hasMore: true });
expect(html).toContain("已加载 20 条");
expect(html).toContain("1 / 1+");
});
});
describe("输入草稿", () => {
it("按会话分开记,切走再回来还在,不串到别的会话", () => {
writeDraft(runDraftKey("a"), "A 的草稿");
writeDraft(runDraftKey("b"), "B 的草稿");
expect(readDraft(runDraftKey("a"))).toBe("A 的草稿");
expect(readDraft(runDraftKey("b"))).toBe("B 的草稿");
expect(readDraft(runDraftKey("c"))).toBe("");
});
it("清空(发送成功)后不再恢复;只有空白也算清空", () => {
writeDraft(runDraftKey("a"), "");
writeDraft(runDraftKey("b"), " ");
expect(readDraft(runDraftKey("a"))).toBe("");
expect(readDraft(runDraftKey("b"))).toBe("");
});
it("列表页与抽屉的新对话输入框各记各的;没有键时不记", () => {
writeDraft(DRAFT_PAGE_GOAL, "页面里写了一半");
writeDraft(DRAFT_DRAWER_GOAL, "抽屉里写了一半");
writeDraft(undefined, "不记");
expect(readDraft(DRAFT_PAGE_GOAL)).toBe("页面里写了一半");
expect(readDraft(DRAFT_DRAWER_GOAL)).toBe("抽屉里写了一半");
expect(readDraft(undefined)).toBe("");
});
});
describe("消息区滚动策略", () => {
it("流式的小段增长平滑跟随", () => {
expect(followBehavior({ gap: 48, viewport: 600, reduce: false })).toBe("smooth");
});
it("一次多出一屏以上(打开 / 切回会话铺开历史)直接跳到底", () => {
expect(followBehavior({ gap: 1400, viewport: 600, reduce: false })).toBe("auto");
});
it("减少动态效果时一律直接跳", () => {
expect(followBehavior({ gap: 48, viewport: 600, reduce: true })).toBe("auto");
});
});
describe("切回看过的会话:事件缓存", () => {
const ev = (seq: number) => ({ seq, at: "2026-10-06T00:00:00Z", type: "text_delta", delta: "x" }) as AgentRunEvent;
it("记住最近读到的事件,切回时直接可用", () => {
cacheRunEvents("live:a", [ev(0), ev(1)]);
expect(cachedRunEvents("live:a").map((e) => e.seq)).toEqual([0, 1]);
expect(cachedRunEvents("mock:a")).toEqual([]);
});
it("空列表不覆盖已有缓存;超过 30 条会话丢掉最早看的", () => {
cacheRunEvents("live:a", []);
expect(cachedRunEvents("live:a")).toHaveLength(2);
for (let i = 0; i < 30; i++) cacheRunEvents(`live:n${i}`, [ev(i)]);
expect(cachedRunEvents("live:a")).toEqual([]);
expect(cachedRunEvents("live:n29")).toHaveLength(1);
});
});
describe("Ctrl+J / 智能体入口在不同页面", () => {
it("抽屉开着:收起", () => {
expect(toggleAction({ open: true, runId: "r" }, "/console/library")).toBe("close");
expect(toggleAction({ open: true, runId: null }, "/console/agent/r")).toBe("close");
});
it("已在智能体页面:聚焦页面输入框,不在抽屉里再开一份同一会话", () => {
expect(toggleAction({ open: false, runId: "r" }, "/console/agent/r")).toBe("focus-page");
expect(toggleAction({ open: false, runId: null }, "/console/agent")).toBe("focus-page");
});
it("其它页面:上次的会话还在就接着看,否则开新对话", () => {
expect(toggleAction({ open: false, runId: "r" }, "/console/library")).toBe("restore");
expect(toggleAction({ open: false, runId: null }, "/console/library")).toBe("open");
});
});
describe("会话页「在侧边打开」回到之前的页面", () => {
it("只记非智能体页面,带查询串", () => {
noteAgentReturnPath("/console/library", "?filter=unidentified");
noteAgentReturnPath("/console/agent");
noteAgentReturnPath("/console/agent/r1", "?tab=auto");
expect(agentReturnPath()).toBe("/console/library?filter=unidentified");
noteAgentReturnPath("/console/sites");
expect(agentReturnPath()).toBe("/console/sites");
});
});
describe("抽屉开着时路由变化", () => {
// useAgentDrawer 是 useSyncExternalStore,测试里直接读快照
const snapshot = () => {
let out: ReturnType<typeof useAgentDrawer> | null = null;
const Probe = () => {
out = useAgentDrawer();
return null;
};
renderToStaticMarkup(createElement(Probe));
return out as unknown as ReturnType<typeof useAgentDrawer>;
};
it("新对话的路由上下文跟着页面换", () => {
openAgentDrawer({ label: "作品 aaaa", entityId: "aaaa", fromPath: true });
syncAgentContextToPath("/console/sites/hdh");
expect(snapshot().context).toMatchObject({ siteId: "hdh", fromPath: true });
syncAgentContextToPath("/console/home");
expect(snapshot().context).toBeNull();
});
it("页面按钮带的上下文、正在看的会话、抽屉关着时不动", () => {
openAgentDrawer({ label: "作品:沙丘", entityId: "e1" });
syncAgentContextToPath("/console/sites/hdh");
expect(snapshot().context).toMatchObject({ entityId: "e1" });
clearAgentContext();
showAgentRunInDrawer("r1");
syncAgentContextToPath("/console/sites/hdh");
expect(snapshot().context).toBeNull();
setAgentDrawerOpen(false);
});
});