Files
UHD_Media_Tool/apps/web/app/components/agent/agent-nav.test.ts
T
rootandClaude Opus 5.5 93a5341688 fix(agent): 切回看过的会话直接铺出历史,长内容不再从顶滚到底
- 事件流按会话缓存最近 30 条会话的已读事件,切回时直接用缓存渲染,再从最后一个 seq 之后补读
- 消息区跟随:一次多出一屏以上直接跳到底,流式小段增长才平滑跟随
  (原来只有第一次 ResizeObserver 回调算首屏,事件补读回来时整段平滑滚动)

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

153 lines
6.9 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 { isAgentPage, outletKey } 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);
});
});