415 lines
16 KiB
TypeScript
415 lines
16 KiB
TypeScript
import { describe, it } from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import React from "react";
|
|
import { fireEvent } from "@testing-library/react";
|
|
|
|
import { RightDrawer } from "../src/components/RightDrawer";
|
|
import { SearchPanel } from "../src/components/SearchPanel";
|
|
import { artifactDrawer, graphCommunitySummaryDrawer, graphNodeSummaryDrawer, graphSelectionDrawer, wikiDrawer, type DrawerState } from "../src/lib/drawer-state";
|
|
import type { ArtifactManifest } from "../src/lib/api";
|
|
import type { GraphCommunitySummaryPayload, GraphNodeSummaryPayload, GraphSummaryCommand, Selection } from "@llm-wiki/graph-engine";
|
|
import { click, pressKey, render, screen } from "./render";
|
|
|
|
describe("RightDrawer interactions", () => {
|
|
it("marks the drawer as open for shell layout", () => {
|
|
renderDrawer(wikiDrawer("wiki/paper.md", { content: "Paper body" }));
|
|
|
|
const drawer = document.querySelector(".drawer-panel-open");
|
|
assert.ok(drawer);
|
|
assert.equal(drawer?.getAttribute("data-drawer-open"), "true");
|
|
});
|
|
|
|
it("resizes by dragging, keyboard shortcuts, and double click reset", async () => {
|
|
const resizeCalls: number[] = [];
|
|
renderDrawer(wikiDrawer("wiki/paper.md", { content: "Paper body" }), {
|
|
width: 420,
|
|
defaultWidth: 480,
|
|
onResize: (width) => resizeCalls.push(width),
|
|
});
|
|
|
|
const handle = screen.getByRole("separator", { name: "调整预览区宽度" });
|
|
stubPointerCapture(handle);
|
|
|
|
fireEvent.pointerDown(handle, { clientX: 900, pointerId: 1 });
|
|
assert.equal(document.body.classList.contains("drawer-resizing"), true);
|
|
fireEvent.pointerMove(handle, { clientX: 852, pointerId: 1 });
|
|
fireEvent.pointerUp(handle, { pointerId: 1 });
|
|
assert.equal(document.body.classList.contains("drawer-resizing"), false);
|
|
|
|
await pressKey(handle, "ArrowLeft");
|
|
await pressKey(handle, "ArrowRight");
|
|
await pressKey(handle, "Home");
|
|
fireEvent.doubleClick(handle);
|
|
|
|
assert.deepEqual(resizeCalls, [468, 444, 396, 480, 480]);
|
|
});
|
|
|
|
it("hides the resize handle while fullscreen and keeps the fullscreen toggle wired", async () => {
|
|
const fullscreenCalls: string[] = [];
|
|
const { rerender } = renderDrawer(wikiDrawer("wiki/paper.md", { content: "Paper body" }), {
|
|
fullscreen: false,
|
|
onToggleFullscreen: () => fullscreenCalls.push("toggle"),
|
|
});
|
|
|
|
assert.ok(screen.getByRole("separator", { name: "调整预览区宽度" }));
|
|
await click(screen.getByRole("button", { name: "全屏" }));
|
|
assert.deepEqual(fullscreenCalls, ["toggle"]);
|
|
|
|
rerender(drawerElement(wikiDrawer("wiki/paper.md", { content: "Paper body" }), {
|
|
fullscreen: true,
|
|
onToggleFullscreen: () => fullscreenCalls.push("toggle"),
|
|
}));
|
|
|
|
assert.equal(document.querySelector(".drawer-panel-fullscreen") !== null, true);
|
|
assert.equal(screen.queryByRole("separator", { name: "调整预览区宽度" }), null);
|
|
await click(screen.getByRole("button", { name: "退出全屏" }));
|
|
assert.deepEqual(fullscreenCalls, ["toggle", "toggle"]);
|
|
});
|
|
|
|
it("closes from the header button and Escape key", async () => {
|
|
const closeReasons: string[] = [];
|
|
renderDrawer(wikiDrawer("wiki/paper.md", { content: "Paper body" }), {
|
|
onClose: (reason) => closeReasons.push(reason),
|
|
});
|
|
|
|
await click(screen.getByRole("button", { name: "关闭" }));
|
|
await pressKey(document, "Escape");
|
|
|
|
assert.deepEqual(closeReasons, ["button", "escape"]);
|
|
});
|
|
|
|
it("does not close the drawer when Escape closes search above it", async () => {
|
|
const closeReasons: string[] = [];
|
|
const searchCloses: string[] = [];
|
|
render(
|
|
<React.Fragment>
|
|
{drawerElement(wikiDrawer("wiki/paper.md", { content: "Paper body" }), {
|
|
onClose: (reason) => closeReasons.push(reason),
|
|
})}
|
|
<SearchPanel
|
|
open
|
|
refs={[{ path: "wiki/paper.md", name: "paper", title: "Paper", category: "entities" }]}
|
|
knowledgeBaseName="AI学习知识库"
|
|
onOpenPage={noopString}
|
|
onClose={() => searchCloses.push("search")}
|
|
/>
|
|
</React.Fragment>,
|
|
);
|
|
|
|
await pressKey(screen.getByLabelText("搜索当前库页面"), "Escape");
|
|
|
|
assert.deepEqual(searchCloses, ["search"]);
|
|
assert.deepEqual(closeReasons, []);
|
|
});
|
|
|
|
it("switches artifact tabs without losing the active tab class", async () => {
|
|
const selectedIds: string[] = [];
|
|
renderDrawer(artifactDrawer([artifact("art-html", "Paper HTML", "html"), artifact("art-pdf", "Paper PDF", "pdf")], "art-html"), {
|
|
onSelectArtifact: (id) => selectedIds.push(id),
|
|
});
|
|
|
|
const first = screen.getByRole("button", { name: /Paper HTML/ });
|
|
const second = screen.getByRole("button", { name: /Paper PDF/ });
|
|
assert.equal(first.classList.contains("drawer-tab-active"), true);
|
|
assert.equal(second.classList.contains("drawer-tab-active"), false);
|
|
|
|
await click(second);
|
|
|
|
assert.deepEqual(selectedIds, ["art-pdf"]);
|
|
});
|
|
|
|
it("dispatches select-neighbors when the +邻居 command is clicked", async () => {
|
|
const commands: GraphSummaryCommand[] = [];
|
|
renderDrawer(graphNodeSummaryDrawer(nodeSummaryFixture()), {
|
|
onGraphSummaryCommand: (command) => commands.push(command),
|
|
});
|
|
|
|
await click(screen.getByRole("button", { name: "+邻居" }));
|
|
|
|
assert.deepEqual(commands, [{ kind: "select-neighbors", nodeId: "alpha-node", label: "+邻居" }]);
|
|
});
|
|
|
|
it("dispatches free-text send as a free graph selection question", async () => {
|
|
const asks: Array<{ actionId: string | null; newConversation: boolean }> = [];
|
|
renderDrawer(graphSelectionDrawer(selectionFixture(), "Alpha/Beta", "只看这两页的差异"), {
|
|
onGraphSelectionAsk: (actionId, newConversation) => asks.push({ actionId, newConversation }),
|
|
});
|
|
|
|
await click(screen.getByRole("button", { name: "发送" }));
|
|
|
|
assert.deepEqual(asks, [{ actionId: null, newConversation: false }]);
|
|
});
|
|
|
|
it("dispatches empty new-conversation from selection drawer with no explicit clicked action", async () => {
|
|
const asks: Array<{ actionId: string | null; newConversation: boolean }> = [];
|
|
renderDrawer(graphSelectionDrawer(selectionFixture(), "Alpha/Beta", ""), {
|
|
onGraphSelectionAsk: (actionId, newConversation) => asks.push({ actionId, newConversation }),
|
|
});
|
|
|
|
await click(screen.getByRole("button", { name: "新对话" }));
|
|
|
|
assert.deepEqual(asks, [{ actionId: null, newConversation: true }]);
|
|
});
|
|
|
|
it("dispatches community free-text send and empty new-conversation without an explicit clicked action", async () => {
|
|
const asks: Array<{ actionId: string | null; newConversation: boolean }> = [];
|
|
const { rerender } = renderDrawer(graphCommunitySummaryDrawer(communitySummaryFixture(), "帮我判断下一步读什么"), {
|
|
onGraphCommunityAsk: (actionId, newConversation) => asks.push({ actionId, newConversation }),
|
|
});
|
|
|
|
await click(screen.getByRole("button", { name: "发送" }));
|
|
assert.deepEqual(asks, [{ actionId: null, newConversation: false }]);
|
|
|
|
asks.length = 0;
|
|
rerender(drawerElement(graphCommunitySummaryDrawer(communitySummaryFixture(), ""), {
|
|
onGraphCommunityAsk: (actionId, newConversation) => asks.push({ actionId, newConversation }),
|
|
}));
|
|
await click(screen.getByRole("button", { name: "新对话" }));
|
|
|
|
assert.deepEqual(asks, [{ actionId: null, newConversation: true }]);
|
|
});
|
|
|
|
it("expands and collapses community core nodes without changing node click behavior", async () => {
|
|
const selectedNodeIds: string[] = [];
|
|
const payload = communitySummaryFixture({
|
|
coreNodeIds: ["alpha-node", "beta-node", "gamma-node", "delta-node"],
|
|
coreNodes: [
|
|
{ nodeId: "alpha-node", label: "Alpha node", type: "topic", role: "核心" },
|
|
{ nodeId: "beta-node", label: "Beta node", type: "entity", role: "相关" },
|
|
{ nodeId: "gamma-node", label: "Gamma node", type: "source", role: "相关" },
|
|
{ nodeId: "delta-node", label: "Delta node", type: "entity", role: "相关" },
|
|
],
|
|
});
|
|
renderDrawer(graphCommunitySummaryDrawer(payload), {
|
|
onGraphSummaryNodeSelect: (nodeId) => selectedNodeIds.push(nodeId),
|
|
});
|
|
|
|
assert.ok(screen.getByRole("button", { name: /Alpha node/ }));
|
|
assert.ok(screen.getByRole("button", { name: /Beta node/ }));
|
|
assert.ok(screen.getByRole("button", { name: /Gamma node/ }));
|
|
assert.equal(screen.queryByRole("button", { name: /Delta node/ }), null);
|
|
|
|
await click(screen.getByRole("button", { name: "查看全部" }));
|
|
assert.ok(screen.getByRole("button", { name: /Delta node/ }));
|
|
assert.ok(screen.getByRole("button", { name: "收起" }));
|
|
|
|
await click(screen.getByRole("button", { name: /Delta node/ }));
|
|
assert.deepEqual(selectedNodeIds, ["delta-node"]);
|
|
|
|
await click(screen.getByRole("button", { name: "收起" }));
|
|
assert.equal(screen.queryByRole("button", { name: /Delta node/ }), null);
|
|
});
|
|
|
|
it("preserves community core node preview callbacks", () => {
|
|
const previews: Array<string | null> = [];
|
|
renderDrawer(graphCommunitySummaryDrawer(communitySummaryFixture()), {
|
|
onGraphSummaryNodePreview: (nodeId) => previews.push(nodeId),
|
|
});
|
|
|
|
const row = screen.getByRole("button", { name: /Alpha node/ });
|
|
fireEvent.mouseEnter(row);
|
|
fireEvent.mouseLeave(row);
|
|
fireEvent.focus(row);
|
|
fireEvent.blur(row);
|
|
|
|
assert.deepEqual(previews, ["alpha-node", null, "alpha-node", null]);
|
|
});
|
|
|
|
it("clears core node preview before opening the node summary drawer", async () => {
|
|
const previews: Array<string | null> = [];
|
|
const selectedNodeIds: string[] = [];
|
|
renderDrawer(graphCommunitySummaryDrawer(communitySummaryFixture()), {
|
|
onGraphSummaryNodePreview: (nodeId) => previews.push(nodeId),
|
|
onGraphSummaryNodeSelect: (nodeId) => selectedNodeIds.push(nodeId),
|
|
});
|
|
|
|
const row = screen.getByRole("button", { name: /Alpha node/ });
|
|
fireEvent.mouseEnter(row);
|
|
await click(row);
|
|
|
|
assert.deepEqual(previews, ["alpha-node", null]);
|
|
assert.deepEqual(selectedNodeIds, ["alpha-node"]);
|
|
});
|
|
|
|
it("resets expanded core nodes when the node-list identity changes", async () => {
|
|
const first = communitySummaryFixture({
|
|
communityId: "alpha",
|
|
label: "Alpha community",
|
|
coreNodeIds: ["alpha-node", "beta-node", "gamma-node", "delta-node"],
|
|
coreNodes: [
|
|
{ nodeId: "alpha-node", label: "Alpha node", type: "topic", role: "核心" },
|
|
{ nodeId: "beta-node", label: "Beta node", type: "entity", role: "相关" },
|
|
{ nodeId: "gamma-node", label: "Gamma node", type: "source", role: "相关" },
|
|
{ nodeId: "delta-node", label: "Delta node", type: "entity", role: "相关" },
|
|
],
|
|
});
|
|
const second = communitySummaryFixture({
|
|
communityId: "alpha",
|
|
label: "Alpha community",
|
|
coreNodeIds: ["one-node", "two-node", "three-node", "four-node"],
|
|
coreNodes: [
|
|
{ nodeId: "one-node", label: "One node", type: "topic", role: "核心" },
|
|
{ nodeId: "two-node", label: "Two node", type: "entity", role: "相关" },
|
|
{ nodeId: "three-node", label: "Three node", type: "source", role: "相关" },
|
|
{ nodeId: "four-node", label: "Four node", type: "entity", role: "相关" },
|
|
],
|
|
});
|
|
const { rerender } = renderDrawer(graphCommunitySummaryDrawer(first));
|
|
|
|
await click(screen.getByRole("button", { name: "查看全部" }));
|
|
assert.ok(screen.getByRole("button", { name: /Delta node/ }));
|
|
|
|
rerender(drawerElement(graphCommunitySummaryDrawer(second)));
|
|
assert.ok(screen.getByRole("button", { name: /One node/ }));
|
|
assert.ok(screen.getByRole("button", { name: /Three node/ }));
|
|
assert.equal(screen.queryByRole("button", { name: /Four node/ }), null);
|
|
assert.ok(screen.getByRole("button", { name: "查看全部" }));
|
|
|
|
rerender(drawerElement(graphCommunitySummaryDrawer(first)));
|
|
assert.ok(screen.getByRole("button", { name: /Alpha node/ }));
|
|
assert.ok(screen.getByRole("button", { name: /Gamma node/ }));
|
|
assert.equal(screen.queryByRole("button", { name: /Delta node/ }), null);
|
|
assert.ok(screen.getByRole("button", { name: "查看全部" }));
|
|
});
|
|
});
|
|
|
|
function nodeSummaryFixture(): GraphNodeSummaryPayload {
|
|
return {
|
|
kind: "node-summary",
|
|
object: { kind: "node", nodeId: "alpha-node" },
|
|
nodeId: "alpha-node",
|
|
label: "Alpha node",
|
|
type: "topic",
|
|
communityId: "alpha",
|
|
sourcePath: "wiki/alpha.md",
|
|
summary: null,
|
|
connectionCount: 2,
|
|
searchHit: false,
|
|
pinHint: { nodeId: "alpha-node", wikiPath: "wiki/alpha.md", pinned: false, position: null },
|
|
selection: {
|
|
input: { kind: "node", id: "alpha-node" },
|
|
selectionId: "node:alpha-node",
|
|
selectedNodeIds: ["alpha-node"],
|
|
selectedCommunityIds: ["alpha"],
|
|
containsCurrentObject: true,
|
|
},
|
|
strongestRelations: [],
|
|
bridgeRelations: [],
|
|
aggregationMarkers: [],
|
|
commands: [
|
|
{ kind: "open-detail-read", nodeId: "alpha-node", path: "wiki/alpha.md", label: "打开详情" },
|
|
{ kind: "select-neighbors", nodeId: "alpha-node", label: "+邻居" },
|
|
{ kind: "set-fixed-position", mode: "fix", nodeId: "alpha-node", wikiPath: "wiki/alpha.md", label: "固定位置" },
|
|
],
|
|
};
|
|
}
|
|
|
|
function communitySummaryFixture(overrides: Partial<GraphCommunitySummaryPayload> = {}): GraphCommunitySummaryPayload {
|
|
return {
|
|
kind: "community-summary",
|
|
object: { kind: "community", communityId: "alpha" },
|
|
communityId: "alpha",
|
|
label: "Alpha community",
|
|
nodeCount: 2,
|
|
facts: { pageCount: 2, internalLinkCount: 1, communityCount: 1, isolatedCount: 0 },
|
|
structureState: "clear",
|
|
description: "这组页面围绕同一主题聚在一起。你可以先看结构，也可以直接让 agent 基于这一组页面继续工作。",
|
|
canEnterCommunity: true,
|
|
coreNodeIds: ["alpha-node", "beta-node"],
|
|
coreNodes: [
|
|
{ nodeId: "alpha-node", label: "Alpha node", type: "topic", role: "核心" },
|
|
{ nodeId: "beta-node", label: "Beta node", type: "entity", role: "相关" },
|
|
],
|
|
searchResultIds: [],
|
|
pinHints: [],
|
|
selection: {
|
|
input: { kind: "community", id: "alpha" },
|
|
selectionId: "community:alpha-node,beta-node",
|
|
selectedNodeIds: ["alpha-node", "beta-node"],
|
|
selectedCommunityIds: ["alpha"],
|
|
containsCurrentObject: true,
|
|
},
|
|
strongestRelations: [],
|
|
bridgeRelations: [],
|
|
aggregationMarkers: [],
|
|
commands: [{ kind: "enter-community", communityId: "alpha", label: "进入社区" }],
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function selectionFixture(): Selection {
|
|
return {
|
|
id: "nodes:a,b",
|
|
nodeIds: ["a", "b"],
|
|
communityIds: ["alpha", "beta"],
|
|
facts: { pageCount: 2, internalLinkCount: 0, communityCount: 2, isolatedCount: 0 },
|
|
input: { kind: "nodes", ids: ["a", "b"] },
|
|
actions: [],
|
|
};
|
|
}
|
|
|
|
function renderDrawer(drawer: DrawerState, props: Partial<RightDrawerProps> = {}) {
|
|
return render(drawerElement(drawer, props));
|
|
}
|
|
|
|
function drawerElement(drawer: DrawerState, props: Partial<RightDrawerProps> = {}) {
|
|
return (
|
|
<RightDrawer
|
|
drawer={drawer}
|
|
fullscreen={props.fullscreen ?? false}
|
|
width={props.width ?? 420}
|
|
defaultWidth={props.defaultWidth ?? 420}
|
|
onSelectArtifact={props.onSelectArtifact ?? noopString}
|
|
onOpenPage={noopString}
|
|
onWikiLinkSeen={noopString}
|
|
onGraphReaderAction={noopString}
|
|
onGraphSummaryCommand={props.onGraphSummaryCommand ?? noop}
|
|
onGraphSummaryNodeSelect={props.onGraphSummaryNodeSelect ?? noopString}
|
|
onGraphSummaryNodePreview={props.onGraphSummaryNodePreview ?? noopPreviewNode}
|
|
onGraphSelectionTextChange={noopString}
|
|
onGraphSelectionAsk={props.onGraphSelectionAsk ?? noopSelectionAsk}
|
|
onGraphCommunityTextChange={noopString}
|
|
onGraphCommunityAsk={props.onGraphCommunityAsk ?? noopSelectionAsk}
|
|
onResize={props.onResize ?? noopNumber}
|
|
onToggleFullscreen={props.onToggleFullscreen ?? noop}
|
|
onClose={props.onClose ?? noopClose}
|
|
/>
|
|
);
|
|
}
|
|
|
|
type RightDrawerProps = React.ComponentProps<typeof RightDrawer>;
|
|
|
|
function stubPointerCapture(element: Element) {
|
|
Object.defineProperties(element, {
|
|
setPointerCapture: { configurable: true, value: () => {} },
|
|
hasPointerCapture: { configurable: true, value: () => true },
|
|
releasePointerCapture: { configurable: true, value: () => {} },
|
|
});
|
|
}
|
|
|
|
function artifact(id: string, title: string, kind: ArtifactManifest["kind"]): ArtifactManifest {
|
|
const extension = kind === "html" ? "html" : kind;
|
|
return {
|
|
id,
|
|
kind,
|
|
renderer: kind === "html" ? "iframe" : "download-only",
|
|
metadata: {
|
|
title,
|
|
createdAt: "2026-06-20T00:00:00.000Z",
|
|
sourceConversationId: "conversation-1",
|
|
sourceKbPath: "/kb",
|
|
sourceSkill: "paper",
|
|
sizeBytes: 128,
|
|
},
|
|
files: [{ name: `artifact.${extension}`, sizeBytes: 128, mimeType: "text/plain" }],
|
|
primaryFile: `artifact.${extension}`,
|
|
};
|
|
}
|
|
|
|
function noop() {}
|
|
function noopString() {}
|
|
function noopNumber() {}
|
|
function noopClose() {}
|
|
function noopPreviewNode() {}
|
|
function noopSelectionAsk() {}
|