k88936
14f11e77a2
$insertContentAtSelection 的引用分支补 else：referenceFromPart 返回 null 时插入该 part 的 token 文本 此前上游 buildContentFromPastedText 已把 token 摘走，插入端再丢一次就会让这段内容静默消失 新增用例：provider 认得出 token 但插入时已解析不出引用，断言正文保持 `看 @hero 一眼`、不产生芯片 变异验证：去掉该兜底后同一用例变红（正文变成 `看 一眼`），恢复即绿
1627 lines
57 KiB
TypeScript
1627 lines
57 KiB
TypeScript
// @vitest-environment jsdom
|
||
import {
|
||
act,
|
||
cleanup,
|
||
fireEvent,
|
||
render,
|
||
screen,
|
||
waitFor,
|
||
within,
|
||
} from '@testing-library/react';
|
||
import userEvent from '@testing-library/user-event';
|
||
import { $getRoot, $getSelection, $isRangeSelection } from 'lexical';
|
||
import {
|
||
createRef,
|
||
forwardRef,
|
||
StrictMode,
|
||
useCallback,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from 'react';
|
||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||
|
||
import type {
|
||
GameCreationAppAssetManifestEntry,
|
||
GameIterationVersion,
|
||
} from '../../../packages/shared/src/contracts/gameCreationApp';
|
||
import {
|
||
LOCAL_GAME_PREVIEW_INSPECT_MESSAGE,
|
||
parseLocalGamePreviewInspectMessage,
|
||
} from '../src/features/project-workspace/LocalGamePreviewFrame';
|
||
import { attachmentReferenceProvider } from '../src/features/project-workspace/reference-source/attachmentReferenceProvider';
|
||
import { createResourceReferenceProvider } from '../src/features/project-workspace/reference-source/resourceReferenceProvider';
|
||
import { runtimeRegionReferenceProvider } from '../src/features/project-workspace/reference-source/runtimeRegionReferenceProvider';
|
||
import { useSkillReferenceProvider } from '../src/features/project-workspace/reference-source/skillReferenceProvider';
|
||
import type { ReferenceProvider } from '../src/features/project-workspace/reference-source/types';
|
||
import {
|
||
ResourceReferenceInput,
|
||
type ResourceReferenceInputHandle,
|
||
} from '../src/features/project-workspace/ResourceReferenceInput';
|
||
import {
|
||
ResourceReferencePicker,
|
||
ResourceReferencePickerAction,
|
||
type ResourceReferencePickerHandle,
|
||
} from '../src/features/project-workspace/ResourceReferencePicker';
|
||
import {
|
||
type ChatComposerDraft,
|
||
type ChatReference,
|
||
chatReferenceListKey,
|
||
chatReferenceToContentPart,
|
||
currentIterationVersionAssets,
|
||
dedupeChatReferences,
|
||
directCodexContentToPromptText,
|
||
dispatchResourceReferenceInsert,
|
||
dispatchResourceReferenceInsertMany,
|
||
resolveActiveIterationVersion,
|
||
RESOURCE_REFERENCE_FILTERS,
|
||
RESOURCE_REFERENCE_INSERT_EVENT,
|
||
RESOURCE_REFERENCE_INSERT_MANY_EVENT,
|
||
RESOURCE_REFERENCE_SCOPES,
|
||
resourceLabelResolver,
|
||
resourceReferenceCategory,
|
||
resourceReferenceFromAsset,
|
||
resourceReferenceMatchesCategoryFilter,
|
||
resourceReferenceMatchesQuery,
|
||
resourceReferenceMatchesTagSelection,
|
||
resourceReferenceTagLibrary,
|
||
type RuntimeRegionReference,
|
||
} from '../src/features/project-workspace/resourceReferences';
|
||
|
||
/**
|
||
* jsdom 没有 `DragEvent` / `ClipboardEvent` 构造器，而 Lexical 的默认粘贴路径按构造器名字判断
|
||
* 事件类型（`objectKlassEquals`）；真实客户端（Tauri / Chromium）两者都在。这里只补齐测试环境
|
||
* 缺的那部分，名字必须与真实构造器逐字一致，否则 Lexical 会把粘贴数据源当成 `null`。
|
||
*/
|
||
function defineEventClassShim(name: 'DragEvent' | 'ClipboardEvent') {
|
||
if (typeof (globalThis as Record<string, unknown>)[name] === 'function')
|
||
return;
|
||
const shim = class extends Event {};
|
||
Object.defineProperty(shim, 'name', { value: name });
|
||
Object.defineProperty(globalThis, name, {
|
||
value: shim,
|
||
configurable: true,
|
||
writable: true,
|
||
});
|
||
}
|
||
|
||
defineEventClassShim('DragEvent');
|
||
defineEventClassShim('ClipboardEvent');
|
||
|
||
/**
|
||
* jsdom 的 `Range` 没有 `getBoundingClientRect`，而候选菜单打开时会用它测锚点位置
|
||
* （`LexicalTypeaheadMenuPlugin` 的 `getRect`）；真实浏览器两者都在，这里只补测试环境缺的那部分。
|
||
*/
|
||
function defineRangeRectShim() {
|
||
if (typeof Range === 'undefined') return;
|
||
if (typeof Range.prototype.getBoundingClientRect === 'function') return;
|
||
Range.prototype.getBoundingClientRect = () =>
|
||
typeof DOMRect === 'function'
|
||
? new DOMRect()
|
||
: ({
|
||
x: 0,
|
||
y: 0,
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
width: 0,
|
||
height: 0,
|
||
} as DOMRect);
|
||
}
|
||
|
||
defineRangeRectShim();
|
||
|
||
/** jsdom 没有 `ResizeObserver`，候选菜单打开时会构造它；真实浏览器都有。 */
|
||
function defineResizeObserverShim() {
|
||
if (typeof window === 'undefined') return;
|
||
if (typeof window.ResizeObserver === 'function') return;
|
||
window.ResizeObserver = class ResizeObserverStub {
|
||
observe() {}
|
||
|
||
unobserve() {}
|
||
|
||
disconnect() {}
|
||
} as unknown as typeof ResizeObserver;
|
||
}
|
||
|
||
defineResizeObserverShim();
|
||
|
||
function asset(
|
||
id: string,
|
||
kind: string,
|
||
mediaType: string,
|
||
localPath: string,
|
||
): GameCreationAppAssetManifestEntry {
|
||
return {
|
||
id,
|
||
kind,
|
||
mediaType,
|
||
localPath,
|
||
source: { kind: 'uploaded' },
|
||
};
|
||
}
|
||
|
||
function iterationVersion(
|
||
versionId: string,
|
||
resourceIds: string[],
|
||
parentVersionId: string | null = null,
|
||
): GameIterationVersion {
|
||
return {
|
||
versionId,
|
||
parentVersionId,
|
||
projectRevision: 1,
|
||
resourceBindings: resourceIds.map((resourceId, index) => ({
|
||
slotId: `slot-${index}`,
|
||
resourceId,
|
||
})),
|
||
createdReason: 'initial',
|
||
createdAt: 1,
|
||
};
|
||
}
|
||
|
||
async function settleComposer() {
|
||
await new Promise((resolve) => {
|
||
setTimeout(resolve, 0);
|
||
});
|
||
}
|
||
|
||
/** 草稿展示文本：canonical content 是唯一真相；这里刻意不给清单，引用展开成 `@id`。 */
|
||
function draftText(draft: ChatComposerDraft | undefined) {
|
||
return directCodexContentToPromptText(
|
||
draft?.content ?? [],
|
||
resourceLabelResolver([]),
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 测试夹具：按真实宿主的接法把「输入区（注入 provider）+ 宿主渲染的素材选择器」拼起来。
|
||
*
|
||
* 夹具保持旧 props 形状（`assets` / `versions` / `activeVersionId` / `projectPath`），
|
||
* 内部翻译成注入的 provider——用例因此只关心行为，不关心接线。
|
||
* `withSkillProvider` 打开 `$` 候选（只有 DirectProject 宿主才注入它）。
|
||
*/
|
||
const ComposerHost = forwardRef<
|
||
ResourceReferenceInputHandle,
|
||
{
|
||
ariaLabel: string;
|
||
assets?: GameCreationAppAssetManifestEntry[];
|
||
versions?: GameIterationVersion[];
|
||
activeVersionId?: string | null;
|
||
projectPath?: string;
|
||
initialContent?: ChatComposerDraft['content'];
|
||
onChange?: (draft: ChatComposerDraft) => void;
|
||
multiline?: boolean;
|
||
rows?: number;
|
||
showPolishAction?: boolean;
|
||
disabled?: boolean;
|
||
placeholder?: string;
|
||
withSkillProvider?: boolean;
|
||
}
|
||
>(function ComposerHost(
|
||
{
|
||
assets = [],
|
||
versions,
|
||
activeVersionId = null,
|
||
projectPath = 'C:/project',
|
||
withSkillProvider = false,
|
||
...inputProps
|
||
},
|
||
ref,
|
||
) {
|
||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||
const pickerRef = useRef<ResourceReferencePickerHandle | null>(null);
|
||
const localInputRef = useRef<ResourceReferenceInputHandle | null>(null);
|
||
const [pickerOpen, setPickerOpen] = useState(false);
|
||
const skillProvider = useSkillReferenceProvider();
|
||
const assignInputRef = useCallback(
|
||
(handle: ResourceReferenceInputHandle | null) => {
|
||
localInputRef.current = handle;
|
||
if (typeof ref === 'function') {
|
||
ref(handle);
|
||
} else if (ref) {
|
||
ref.current = handle;
|
||
}
|
||
},
|
||
[ref],
|
||
);
|
||
const providers = useMemo(
|
||
() => [
|
||
createResourceReferenceProvider({ assets }),
|
||
...(withSkillProvider ? [skillProvider] : []),
|
||
attachmentReferenceProvider,
|
||
runtimeRegionReferenceProvider,
|
||
],
|
||
[assets, skillProvider, withSkillProvider],
|
||
);
|
||
return (
|
||
<>
|
||
<ResourceReferenceInput
|
||
{...inputProps}
|
||
ref={assignInputRef}
|
||
providers={providers}
|
||
projectPath={projectPath}
|
||
containerRef={containerRef}
|
||
submitSuppressed={pickerOpen}
|
||
inputActions={
|
||
<ResourceReferencePickerAction
|
||
onOpen={() => pickerRef.current?.open()}
|
||
/>
|
||
}
|
||
/>
|
||
<ResourceReferencePicker
|
||
ref={pickerRef}
|
||
anchorRef={containerRef}
|
||
assets={assets}
|
||
versions={versions}
|
||
activeVersionId={activeVersionId}
|
||
projectPath={projectPath}
|
||
onInsert={(references) =>
|
||
localInputRef.current?.insertReferences(references)
|
||
}
|
||
onOpenChange={setPickerOpen}
|
||
/>
|
||
</>
|
||
);
|
||
});
|
||
|
||
/** 草稿里的资源引用 id，按 content 顺序。 */
|
||
function draftResourceIds(draft: ChatComposerDraft | undefined) {
|
||
return (draft?.content ?? []).flatMap((part) =>
|
||
part.type === 'agc_resource_reference' ? [part.resourceId] : [],
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 编辑器文本模型里的字符数。断言「一个引用 = 一个字符」用它而不是 DOM 文本：
|
||
* DOM 里 chip 仍要显示 `@显示名` 给用户看，两者本来就不该相等。
|
||
*/
|
||
function composerEditor(): {
|
||
getEditorState: () => { read: <T>(fn: () => T) => T };
|
||
update: (fn: () => void) => void;
|
||
} {
|
||
const element = screen.getByLabelText('聊天') as HTMLElement & {
|
||
__lexicalEditor?: {
|
||
getEditorState: () => { read: <T>(fn: () => T) => T };
|
||
update: (fn: () => void) => void;
|
||
};
|
||
};
|
||
const editor = element.__lexicalEditor;
|
||
if (!editor) throw new Error('lexical editor instance not found');
|
||
return editor;
|
||
}
|
||
|
||
/**
|
||
* jsdom 里合成一次原生粘贴：Lexical 的 DOM 监听器把 `paste` 事件转成 PASTE_COMMAND，
|
||
* 所以这条链路和真实粘贴一致（含 `clipboardData` 读取与 `preventDefault`）。
|
||
*/
|
||
function pasteComposerText(
|
||
text: string,
|
||
payload: { html?: string; lexical?: string } = {},
|
||
) {
|
||
// 真实粘贴发生在有焦点的编辑器里；jsdom 不会自己给编辑器设选区，这里先落到草稿末尾，
|
||
// 否则 Lexical 默认粘贴处理器拿不到 selection，会直接放弃这次粘贴。
|
||
act(() => {
|
||
composerEditor().update(() => {
|
||
$getRoot().selectEnd();
|
||
});
|
||
});
|
||
const element = screen.getByLabelText('聊天');
|
||
const event = new Event('paste', { bubbles: true, cancelable: true });
|
||
Object.defineProperty(event, 'clipboardData', {
|
||
value: {
|
||
getData: (type: string) => {
|
||
if (type === 'text/plain') return text;
|
||
if (type === 'text/html') return payload.html ?? '';
|
||
if (type === 'application/x-lexical-editor') {
|
||
return payload.lexical ?? '';
|
||
}
|
||
return '';
|
||
},
|
||
},
|
||
});
|
||
act(() => {
|
||
element.dispatchEvent(event);
|
||
});
|
||
return event;
|
||
}
|
||
|
||
/** 草稿里的 Skill 引用名，按 content 顺序。 */
|
||
function draftSkillNames(draft: ChatComposerDraft | undefined) {
|
||
return (draft?.content ?? []).flatMap((part) =>
|
||
part.type === 'agc_skill_reference' ? [part.name] : [],
|
||
);
|
||
}
|
||
|
||
/**
|
||
* jsdom 里键盘输入不会进入 Lexical，所以直接走编辑器 API 写文本；
|
||
* 它触发的是和真实输入同一条更新链路，typeahead 监听器同样会被唤醒。
|
||
*/
|
||
function insertComposerText(text: string) {
|
||
composerEditor().update(() => {
|
||
$getRoot().selectEnd();
|
||
const selection = $getSelection();
|
||
if ($isRangeSelection(selection)) selection.insertText(text);
|
||
});
|
||
}
|
||
|
||
function editorTextSize() {
|
||
return composerEditor()
|
||
.getEditorState()
|
||
.read(() => $getRoot().getTextContentSize());
|
||
}
|
||
|
||
const assets = [
|
||
asset('hero', 'character', 'image/png', 'assets/hero.png'),
|
||
asset('enemy', 'character', 'image/png', 'assets/enemy.png'),
|
||
asset('theme', 'background-music', 'audio/mpeg', 'assets/theme.mp3'),
|
||
];
|
||
|
||
/** 带 manifest 标签的同一批素材：标签筛选用例只换 `tags`，其余口径与 `assets` 一致。 */
|
||
const taggedAssets: GameCreationAppAssetManifestEntry[] = [
|
||
{ ...assets[0]!, tags: ['角色', '主角'] },
|
||
{ ...assets[1]!, tags: ['角色'] },
|
||
{ ...assets[2]!, tags: ['背景乐'] },
|
||
];
|
||
|
||
/**
|
||
* 面板里的候选筛选条由共享组件渲染，标签行是它内部带 `素材筛选标签` 名字的分组。
|
||
* 用这一层 scope 取标签 chip，避免和同名的功能分类按钮（例如「角色与对象」）串。
|
||
*/
|
||
function pickerTagGroup() {
|
||
return within(screen.getByRole('group', { name: '素材筛选标签' }));
|
||
}
|
||
|
||
/** 取某个 aria-label 的引用输入区，把它内部（含 `@` 按钮）的操作局限定在自己身上。 */
|
||
function referenceInputByLabel(ariaLabel: string) {
|
||
const editor = screen.getByLabelText(ariaLabel);
|
||
const root = editor.closest('.resource-reference-input');
|
||
if (!root)
|
||
throw new Error(`resource reference input not found: ${ariaLabel}`);
|
||
return within(root as HTMLElement);
|
||
}
|
||
|
||
async function insertAssetThroughPicker(ariaLabel: string, optionName: RegExp) {
|
||
await userEvent.click(
|
||
referenceInputByLabel(ariaLabel).getByRole('button', {
|
||
name: '插入素材引用',
|
||
}),
|
||
);
|
||
await userEvent.click(
|
||
within(screen.getByRole('dialog', { name: '选择素材' })).getByRole(
|
||
'option',
|
||
{ name: optionName },
|
||
),
|
||
);
|
||
await userEvent.click(screen.getByRole('button', { name: '插入引用' }));
|
||
await settleComposer();
|
||
}
|
||
|
||
afterEach(cleanup);
|
||
|
||
describe('ResourceReferenceInput', () => {
|
||
test('打开 Skill 候选时才向 Tauri command 查询内置 catalog', async () => {
|
||
const invoke = vi.fn(async (command: string) => {
|
||
if (command === 'list_agc_skill_catalog') {
|
||
return [{ name: 'agc-test-skill', description: '测试 Skill' }];
|
||
}
|
||
if (command === 'list_client_extensions') return [];
|
||
throw new Error(`unexpected invoke ${command}`);
|
||
});
|
||
window.__TAURI__ = { core: { invoke: invoke as never } };
|
||
|
||
try {
|
||
render(
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
withSkillProvider
|
||
/>,
|
||
);
|
||
|
||
// 挂载即查询会让「工作区路径非法时不产生任何后端访问」的边界失效。
|
||
expect(invoke).not.toHaveBeenCalled();
|
||
|
||
insertComposerText('$');
|
||
|
||
await waitFor(() => {
|
||
expect(invoke).toHaveBeenCalledWith('list_agc_skill_catalog');
|
||
});
|
||
} finally {
|
||
delete window.__TAURI__;
|
||
}
|
||
});
|
||
|
||
test('粘贴含引用的显示文本：原位重建 chip，其余字符逐字保留', async () => {
|
||
const ref = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<ComposerHost
|
||
ref={ref}
|
||
ariaLabel="聊天"
|
||
assets={assets}
|
||
onChange={vi.fn()}
|
||
/>,
|
||
);
|
||
|
||
pasteComposerText('看 @hero 这一版');
|
||
|
||
await waitFor(() => {
|
||
expect(draftResourceIds(ref.current?.getDraft())).toEqual(['hero']);
|
||
});
|
||
expect(ref.current?.getDraft().content).toEqual([
|
||
{ type: 'input_text', text: '看 ' },
|
||
{ type: 'agc_resource_reference', resourceId: 'hero' },
|
||
{ type: 'input_text', text: ' 这一版' },
|
||
]);
|
||
// 一次粘贴是一条撤销记录、一次文本更新：chip 在文本模型里只占 1 个字符。
|
||
expect(editorTextSize()).toBe('看 '.length + 1 + ' 这一版'.length);
|
||
});
|
||
|
||
test('粘贴解析出的引用若已无法解析，退化成 token 文本而不是整条丢掉', async () => {
|
||
const ref = createRef<ResourceReferenceInputHandle>();
|
||
// provider 认得出这个 token（lookup 有候选），但插入那一刻已经解析不出引用（例如资产刚被删）。
|
||
const ghostProvider: ReferenceProvider = {
|
||
trigger: '@',
|
||
fuzzy_lookup: () => [],
|
||
lookup: () => [resourceReferenceFromAsset(assets[0]!, 'asset-picker')],
|
||
toReference: () => null,
|
||
refresh: (reference) => reference,
|
||
mentionToken: (part) =>
|
||
part.type === 'agc_resource_reference' ? '@hero' : null,
|
||
};
|
||
render(
|
||
<ResourceReferenceInput
|
||
ref={ref}
|
||
providers={[ghostProvider]}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
onChange={vi.fn()}
|
||
/>,
|
||
);
|
||
|
||
pasteComposerText('看 @hero 一眼');
|
||
|
||
await waitFor(() => {
|
||
expect(draftText(ref.current?.getDraft())).toBe('看 @hero 一眼');
|
||
});
|
||
expect(draftResourceIds(ref.current?.getDraft())).toEqual([]);
|
||
});
|
||
|
||
test('粘贴未命中的 token：整段按字面落进正文，不接管、不提示', async () => {
|
||
const ref = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<ComposerHost
|
||
ref={ref}
|
||
ariaLabel="聊天"
|
||
assets={assets}
|
||
onChange={vi.fn()}
|
||
/>,
|
||
);
|
||
|
||
// 项目里没有名为 `hero.png` 的显示名（`@hero` 才是当前清单的口径），所以这条不是引用。
|
||
pasteComposerText('@hero.png 换成夜景');
|
||
|
||
await waitFor(() => {
|
||
expect(draftText(ref.current?.getDraft())).toBe('@hero.png 换成夜景');
|
||
});
|
||
expect(draftResourceIds(ref.current?.getDraft())).toEqual([]);
|
||
});
|
||
|
||
test('粘贴不含引用的纯文本仍走编辑器默认导入（换行成段，不经过解析）', async () => {
|
||
const ref = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<ComposerHost
|
||
ref={ref}
|
||
ariaLabel="聊天"
|
||
assets={assets}
|
||
onChange={vi.fn()}
|
||
/>,
|
||
);
|
||
|
||
pasteComposerText('第一行\n第二行');
|
||
|
||
await waitFor(() => {
|
||
expect(ref.current?.getDraft().content).toEqual([
|
||
{ type: 'input_text', text: '第一行' },
|
||
{ type: 'input_text', text: '\n' },
|
||
{ type: 'input_text', text: '第二行' },
|
||
]);
|
||
});
|
||
});
|
||
|
||
test('剪贴板里带 Lexical 负载时让位给默认导入：文本里的 @显示名 不被解析', async () => {
|
||
const ref = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<ComposerHost
|
||
ref={ref}
|
||
ariaLabel="聊天"
|
||
assets={assets}
|
||
onChange={vi.fn()}
|
||
/>,
|
||
);
|
||
|
||
pasteComposerText('看 @hero 这一版', { lexical: '{"namespace":"other"}' });
|
||
|
||
await waitFor(() => {
|
||
expect(draftText(ref.current?.getDraft())).toBe('看 @hero 这一版');
|
||
});
|
||
expect(draftResourceIds(ref.current?.getDraft())).toEqual([]);
|
||
});
|
||
|
||
test('Skill 目录冷启动：粘贴 `$名称` 保持字面，敲过一次 `$` 之后粘贴才成 chip', async () => {
|
||
const invoke = vi.fn(async (command: string) => {
|
||
if (command === 'list_agc_skill_catalog') {
|
||
return [{ name: 'agc-test-skill', description: '测试 Skill' }];
|
||
}
|
||
if (command === 'list_client_extensions') return [];
|
||
throw new Error(`unexpected invoke ${command}`);
|
||
});
|
||
window.__TAURI__ = { core: { invoke: invoke as never } };
|
||
|
||
try {
|
||
const ref = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<ComposerHost
|
||
ref={ref}
|
||
ariaLabel="聊天"
|
||
assets={assets}
|
||
withSkillProvider
|
||
onChange={vi.fn()}
|
||
/>,
|
||
);
|
||
|
||
// 冷目录：精确查找没有候选，`$名称` 逐字保留，也不替用户去读目录。
|
||
pasteComposerText('用 $agc-test-skill 出图');
|
||
await waitFor(() => {
|
||
expect(draftText(ref.current?.getDraft())).toBe(
|
||
'用 $agc-test-skill 出图',
|
||
);
|
||
});
|
||
expect(invoke).not.toHaveBeenCalled();
|
||
|
||
// 用户敲出 `$`（菜单懒加载）之后目录才就绪，此后粘贴才重建 chip。
|
||
act(() => {
|
||
ref.current?.clear();
|
||
});
|
||
insertComposerText('$');
|
||
await waitFor(() => {
|
||
expect(invoke).toHaveBeenCalledWith('list_agc_skill_catalog');
|
||
});
|
||
act(() => {
|
||
ref.current?.clear();
|
||
});
|
||
pasteComposerText('用 $agc-test-skill 出图');
|
||
await waitFor(() => {
|
||
expect(draftSkillNames(ref.current?.getDraft())).toEqual([
|
||
'agc-test-skill',
|
||
]);
|
||
});
|
||
expect(ref.current?.getDraft().content).toEqual([
|
||
{ type: 'input_text', text: '用 ' },
|
||
{ type: 'agc_skill_reference', name: 'agc-test-skill' },
|
||
{ type: 'input_text', text: ' 出图' },
|
||
]);
|
||
} finally {
|
||
delete window.__TAURI__;
|
||
}
|
||
});
|
||
|
||
test('运行画面引用的判别指纹带上了绑定素材、版本、元素角色与尺寸', () => {
|
||
const base: RuntimeRegionReference = {
|
||
type: 'runtime-region',
|
||
label: 'Play',
|
||
runId: 'run-1',
|
||
versionId: 'v1',
|
||
elementTag: 'button',
|
||
elementRole: 'button',
|
||
text: '开始',
|
||
width: 120,
|
||
height: 40,
|
||
resourceIds: ['hero', 'enemy'],
|
||
source: 'runtime-picker',
|
||
};
|
||
|
||
// 同一个 run 里两个同文案的元素、或重新选点后绑定变了的同一块区域，都是不同引用：
|
||
// 指纹漏字段会让 `dedupeChatReferences` 静默丢掉其中一条。
|
||
const distinctVariants: RuntimeRegionReference[] = [
|
||
{ ...base, resourceIds: ['hero'] },
|
||
{ ...base, versionId: 'v2' },
|
||
{ ...base, elementRole: 'link' },
|
||
{ ...base, width: 200 },
|
||
{ ...base, height: 80 },
|
||
];
|
||
for (const variant of distinctVariants) {
|
||
expect(chatReferenceListKey([variant])).not.toBe(
|
||
chatReferenceListKey([base]),
|
||
);
|
||
expect(dedupeChatReferences([base, variant])).toHaveLength(2);
|
||
}
|
||
|
||
// 绑定素材顺序不影响身份：同一组素材换个顺序还是同一条引用。
|
||
expect(
|
||
dedupeChatReferences([base, { ...base, resourceIds: ['enemy', 'hero'] }]),
|
||
).toHaveLength(1);
|
||
});
|
||
|
||
test('AI 润色只换文本时不会把引用一轮轮追加成重复 @显示名', async () => {
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const reference = resourceReferenceFromAsset(assets[0]!, 'asset-picker');
|
||
function Controlled() {
|
||
const composerRef = createRef<ResourceReferenceInputHandle>();
|
||
return (
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() => composerRef.current?.replaceText('润色后的需求')}
|
||
>
|
||
模拟润色
|
||
</button>
|
||
<ComposerHost
|
||
ref={composerRef}
|
||
initialContent={[
|
||
{ type: 'input_text', text: '原始需求' },
|
||
chatReferenceToContentPart(reference),
|
||
]}
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
render(<Controlled />);
|
||
await settleComposer();
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '模拟润色' }));
|
||
await settleComposer();
|
||
await settleComposer();
|
||
|
||
// 这次替换是对唯一 EditorState 的明确编辑动作，只产生一次派生快照，
|
||
// 不会因为 props 回写而重复触发。
|
||
expect(onChange).toHaveBeenCalledTimes(1);
|
||
const editorText =
|
||
document.querySelector('.resource-reference-input-editor')?.textContent ??
|
||
'';
|
||
expect(editorText).toContain('润色后的需求');
|
||
expect(editorText.match(/@hero/gu) ?? []).toHaveLength(1);
|
||
expect(screen.getByRole('button', { name: '模拟润色' })).not.toBeNull();
|
||
});
|
||
|
||
test('引用后面的段落分隔原样落进 content：读回的 prompt 与编辑器分段逐字一致', async () => {
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const reference = resourceReferenceFromAsset(assets[0]!, 'asset-picker');
|
||
function Controlled() {
|
||
const composerRef = createRef<ResourceReferenceInputHandle>();
|
||
return (
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
composerRef.current?.replaceText('@hero\n把这一版改成夜景')
|
||
}
|
||
>
|
||
模拟润色
|
||
</button>
|
||
<ComposerHost
|
||
ref={composerRef}
|
||
initialContent={[chatReferenceToContentPart(reference)]}
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
render(<Controlled />);
|
||
await settleComposer();
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '模拟润色' }));
|
||
await settleComposer();
|
||
await settleComposer();
|
||
|
||
const draft = onChange.mock.calls.at(-1)?.[0];
|
||
// chip 与后一段各自成段：段落分隔原样留在 canonical content 里（投影不做空白过滤，
|
||
// 也不与相邻 part 合并）。丢掉它读回的 prompt 会粘成 `@hero把这一版改成夜景`，
|
||
// 并原样进 agent、队列文案与润色判据。
|
||
expect(draft?.content).toEqual([
|
||
chatReferenceToContentPart(reference),
|
||
{ type: 'input_text', text: '\n' },
|
||
{ type: 'input_text', text: '把这一版改成夜景' },
|
||
]);
|
||
// token 前后各留一个空白：草稿以引用开头时，读回的 prompt 前面也有那个分隔空白。
|
||
expect(draftText(draft)).toBe(' @hero\n把这一版改成夜景');
|
||
});
|
||
|
||
test('润色改写掉 `@附件名` token 时，附件 part 补在末尾而不是丢掉', async () => {
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const reference = resourceReferenceFromAsset(assets[0]!, 'asset-picker');
|
||
const attachment = {
|
||
type: 'agc_attachment_reference' as const,
|
||
name: '参考图.png',
|
||
mediaType: 'image/png',
|
||
size: 12,
|
||
localPath: 'assets/reference.png',
|
||
status: 'imported',
|
||
};
|
||
const composerRef = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() => composerRef.current?.replaceText('@hero 润色后的需求')}
|
||
>
|
||
模拟润色
|
||
</button>
|
||
<ComposerHost
|
||
ref={composerRef}
|
||
initialContent={[chatReferenceToContentPart(reference), attachment]}
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>
|
||
</>,
|
||
);
|
||
await settleComposer();
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '模拟润色' }));
|
||
await settleComposer();
|
||
const content = onChange.mock.calls.at(-1)?.[0].content;
|
||
expect(content).toEqual([
|
||
chatReferenceToContentPart(reference),
|
||
// 末尾补位用的分隔空格与相邻文本在 Lexical 里合并成一个 TextNode。
|
||
{ type: 'input_text', text: ' 润色后的需求 ' },
|
||
attachment,
|
||
]);
|
||
});
|
||
|
||
test('润色回包还留着 `@名称` token 时，引用与附件都在原位换回真 part', async () => {
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const reference = resourceReferenceFromAsset(assets[0]!, 'asset-picker');
|
||
const attachment = {
|
||
type: 'agc_attachment_reference' as const,
|
||
name: '参考图.png',
|
||
mediaType: 'image/png',
|
||
size: 12,
|
||
localPath: 'assets/reference.png',
|
||
status: 'imported',
|
||
};
|
||
const composerRef = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
composerRef.current?.replaceText('@hero @参考图.png 润色后的需求')
|
||
}
|
||
>
|
||
模拟润色
|
||
</button>
|
||
<ComposerHost
|
||
ref={composerRef}
|
||
initialContent={[
|
||
chatReferenceToContentPart(reference),
|
||
{ type: 'input_text', text: ' ' },
|
||
attachment,
|
||
{ type: 'input_text', text: ' 需求' },
|
||
]}
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>
|
||
</>,
|
||
);
|
||
await settleComposer();
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '模拟润色' }));
|
||
await settleComposer();
|
||
const content = onChange.mock.calls.at(-1)?.[0].content;
|
||
expect(content).toEqual([
|
||
chatReferenceToContentPart(reference),
|
||
{ type: 'input_text', text: ' ' },
|
||
attachment,
|
||
{ type: 'input_text', text: ' 润色后的需求' },
|
||
]);
|
||
});
|
||
|
||
test('引用浮层打开时 Enter 不提交表单，关掉后恢复提交', async () => {
|
||
const onSubmit = vi.fn();
|
||
const user = userEvent.setup();
|
||
function Controlled() {
|
||
const [draft, setDraft] = useState<ChatComposerDraft>({
|
||
content: [{ type: 'input_text', text: '要一个' }],
|
||
});
|
||
return (
|
||
<form
|
||
onSubmit={(event) => {
|
||
event.preventDefault();
|
||
onSubmit();
|
||
}}
|
||
>
|
||
<ComposerHost
|
||
initialContent={draft.content}
|
||
onChange={setDraft}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>
|
||
</form>
|
||
);
|
||
}
|
||
render(<Controlled />);
|
||
|
||
// 候选浮层开着时 Enter 属于浮层（候选菜单用它选引用），输入区的 HIGH 优先级提交
|
||
// 必须先让位，否则用户按 Enter 选候选会变成把这一轮直接发出去。
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
await screen.findByRole('dialog', { name: '选择素材' });
|
||
const composer = screen.getByLabelText('聊天');
|
||
expect(fireEvent.keyDown(composer, { key: 'Enter' })).toBe(false);
|
||
expect(onSubmit).not.toHaveBeenCalled();
|
||
|
||
// 对照：关掉浮层后 Enter 立刻恢复提交语义，说明上面不是编辑器整体坏掉。
|
||
await user.click(screen.getByRole('button', { name: '关闭素材选择' }));
|
||
expect(fireEvent.keyDown(composer, { key: 'Enter' })).toBe(false);
|
||
await waitFor(() => {
|
||
expect(onSubmit).toHaveBeenCalledTimes(1);
|
||
});
|
||
});
|
||
|
||
test('opens the asset picker, supports multi-select, and inserts stable references', async () => {
|
||
const user = userEvent.setup();
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
render(
|
||
<ComposerHost
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
expect(screen.getByRole('dialog', { name: '选择素材' })).not.toBeNull();
|
||
|
||
await user.click(screen.getByRole('option', { name: /hero/u }));
|
||
await user.click(screen.getByRole('option', { name: /enemy/u }));
|
||
await user.click(screen.getByRole('button', { name: '插入引用' }));
|
||
|
||
await waitFor(() => {
|
||
expect(onChange).toHaveBeenCalled();
|
||
});
|
||
const draft = onChange.mock.calls.at(-1)?.[0];
|
||
// canonical content 是编辑器内容的逐字投影：picker 在每个 chip 后插入的分隔空格
|
||
// 也原样进内容（前端不做裁剪），所以派生文本是 `@hero @enemy `，结尾那个空格照样留着；
|
||
// 引用本身仍由稳定 resourceId 表达。
|
||
const heroPart = chatReferenceToContentPart(
|
||
resourceReferenceFromAsset(assets[0]!, 'asset-picker'),
|
||
);
|
||
const enemyPart = chatReferenceToContentPart(
|
||
resourceReferenceFromAsset(assets[1]!, 'asset-picker'),
|
||
);
|
||
expect(draft?.content).toEqual([
|
||
heroPart,
|
||
{ type: 'input_text', text: ' ' },
|
||
enemyPart,
|
||
{ type: 'input_text', text: ' ' },
|
||
]);
|
||
expect(draftText(draft)).toBe(' @hero @enemy ');
|
||
expect(draftResourceIds(draft)).toEqual(['hero', 'enemy']);
|
||
expect(
|
||
document.querySelector('[data-resource-reference-id="hero"]'),
|
||
).not.toBeNull();
|
||
});
|
||
|
||
test('loads image thumbnails through the controlled native preview command', async () => {
|
||
const user = userEvent.setup();
|
||
const invoke = vi.fn().mockResolvedValue({
|
||
dataUrl: 'data:image/png;base64,iVBORw0KGgo=',
|
||
});
|
||
(
|
||
window as unknown as {
|
||
__TAURI__?: { core?: { invoke?: typeof invoke } };
|
||
}
|
||
).__TAURI__ = { core: { invoke } };
|
||
render(
|
||
<StrictMode>
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>
|
||
</StrictMode>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
await waitFor(() => {
|
||
expect(
|
||
document.querySelector('.resource-reference-picker-list img'),
|
||
).not.toBeNull();
|
||
});
|
||
expect(invoke).toHaveBeenCalledWith(
|
||
'read_local_project_image_preview',
|
||
expect.objectContaining({
|
||
projectPath: 'C:/project',
|
||
relativePath: 'assets/hero.png',
|
||
}),
|
||
);
|
||
delete (
|
||
window as unknown as {
|
||
__TAURI__?: { core?: { invoke?: typeof invoke } };
|
||
}
|
||
).__TAURI__;
|
||
});
|
||
|
||
test('filters candidate references by name, id, kind, and functional category', () => {
|
||
const hero = resourceReferenceFromAsset(assets[0]!, 'asset-picker');
|
||
const theme = resourceReferenceFromAsset(assets[2]!, 'asset-picker');
|
||
expect(resourceReferenceMatchesQuery(hero, 'her')).toBe(true);
|
||
expect(resourceReferenceMatchesQuery(hero, 'character')).toBe(true);
|
||
expect(resourceReferenceMatchesQuery(hero, 'missing')).toBe(false);
|
||
expect(resourceReferenceCategory(hero)).toBe('character');
|
||
expect(resourceReferenceCategory(theme)).toBe('audio');
|
||
expect(hero.tags).toEqual([]);
|
||
});
|
||
|
||
test('exposes the six functional categories plus all as the single filter source', () => {
|
||
expect(RESOURCE_REFERENCE_FILTERS).toEqual([
|
||
{ id: 'all', label: '全部' },
|
||
{ id: 'ui-interaction', label: 'UI 交互' },
|
||
{ id: 'character', label: '角色与对象' },
|
||
{ id: 'scene', label: '场景与环境' },
|
||
{ id: 'audio', label: '音频' },
|
||
{ id: 'document', label: '文档' },
|
||
{ id: 'unclassified', label: '待归类' },
|
||
]);
|
||
});
|
||
|
||
test('projects explicit category and manifest tags onto the reference', () => {
|
||
const hero = resourceReferenceFromAsset(
|
||
{
|
||
...assets[0]!,
|
||
category: 'scene',
|
||
tags: ['主舞台', '日夜'],
|
||
},
|
||
'asset-picker',
|
||
);
|
||
expect(hero.category).toBe('scene');
|
||
expect(hero.tags).toEqual(['主舞台', '日夜']);
|
||
expect(resourceReferenceMatchesCategoryFilter(hero, 'scene')).toBe(true);
|
||
expect(resourceReferenceMatchesCategoryFilter(hero, 'character')).toBe(
|
||
false,
|
||
);
|
||
expect(resourceReferenceMatchesCategoryFilter(hero, 'all')).toBe(true);
|
||
});
|
||
|
||
test('falls back to the kind-derived category when the manifest asset omits it', () => {
|
||
const hero = resourceReferenceFromAsset(assets[0]!, 'asset-picker');
|
||
const unclassified = resourceReferenceFromAsset(
|
||
{
|
||
...assets[0]!,
|
||
kind: 'image',
|
||
},
|
||
'asset-picker',
|
||
);
|
||
expect(resourceReferenceMatchesCategoryFilter(hero, 'character')).toBe(
|
||
true,
|
||
);
|
||
expect(resourceReferenceCategory(unclassified)).toBe('unclassified');
|
||
});
|
||
|
||
test('resource-card insertion uses the shared structured reference event', () => {
|
||
const reference = resourceReferenceFromAsset(assets[0]!, 'resource-card');
|
||
const listener = vi.fn();
|
||
window.addEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
|
||
dispatchResourceReferenceInsert(reference);
|
||
window.removeEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
|
||
expect(listener).toHaveBeenCalledTimes(1);
|
||
expect(
|
||
(listener.mock.calls[0]?.[0] as CustomEvent).detail.reference,
|
||
).toEqual(reference);
|
||
});
|
||
|
||
test('批量引用一次派发整批，空批次不派发', () => {
|
||
const listener = vi.fn();
|
||
const references = [
|
||
resourceReferenceFromAsset(assets[0]!, 'resource-card'),
|
||
resourceReferenceFromAsset(assets[2]!, 'resource-card'),
|
||
];
|
||
window.addEventListener(RESOURCE_REFERENCE_INSERT_MANY_EVENT, listener);
|
||
// 画布拖拽批量入口：N 条引用合成一次派发，不拆成 N 次单条事件。
|
||
dispatchResourceReferenceInsertMany(references);
|
||
// 空批次不开一次空事务：监听方连事件都收不到。
|
||
dispatchResourceReferenceInsertMany([]);
|
||
window.removeEventListener(RESOURCE_REFERENCE_INSERT_MANY_EVENT, listener);
|
||
|
||
expect(listener).toHaveBeenCalledTimes(1);
|
||
expect(
|
||
(listener.mock.calls[0]?.[0] as CustomEvent).detail.references,
|
||
).toEqual(references);
|
||
});
|
||
|
||
test('一次 insertReferences 按给定顺序插入整批 chip', async () => {
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const composerRef = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<ComposerHost
|
||
ref={composerRef}
|
||
initialContent={[]}
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
await settleComposer();
|
||
|
||
const references = [
|
||
resourceReferenceFromAsset(assets[2]!, 'resource-card'),
|
||
resourceReferenceFromAsset(assets[0]!, 'resource-card'),
|
||
];
|
||
act(() => composerRef.current?.insertReferences(references));
|
||
await settleComposer();
|
||
|
||
const draft = onChange.mock.calls.at(-1)?.[0];
|
||
// 顺序就是派发顺序：拖拽时按住的那张在 `moves[0]`，整批引用的次序跟着它走。
|
||
expect(draftResourceIds(draft)).toEqual(['theme', 'hero']);
|
||
expect(
|
||
document.querySelector('[data-resource-reference-id="theme"]'),
|
||
).not.toBeNull();
|
||
expect(
|
||
document.querySelector('[data-resource-reference-id="hero"]'),
|
||
).not.toBeNull();
|
||
});
|
||
|
||
test('runtime inspect messages only expose the bounded safe selection shape', () => {
|
||
expect(
|
||
parseLocalGamePreviewInspectMessage({
|
||
type: LOCAL_GAME_PREVIEW_INSPECT_MESSAGE,
|
||
action: 'selected',
|
||
selection: {
|
||
label: '开始游戏',
|
||
elementTag: 'button',
|
||
elementRole: 'button',
|
||
text: '开始游戏',
|
||
width: 120.4,
|
||
height: 40.2,
|
||
// 资源 id 允许 `:` 与非 ASCII（画布规范形态是 `local-asset:<id>`，
|
||
// 落盘文件名派生的 id 还可能是 `persisted-角色草图.png`）；
|
||
// 空白与路径分隔符不是资源 id，照旧丢掉。
|
||
resourceIds: [
|
||
'hero',
|
||
'local-asset:hero',
|
||
'persisted-角色草图.png',
|
||
'bad id',
|
||
'../secret',
|
||
'a/b',
|
||
],
|
||
sourcePath: '/assets/hero.png?token=secret',
|
||
html: '<button>secret</button>',
|
||
},
|
||
}),
|
||
).toEqual({
|
||
action: 'selected',
|
||
selection: {
|
||
label: '开始游戏',
|
||
elementTag: 'button',
|
||
elementRole: 'button',
|
||
text: '开始游戏',
|
||
width: 120.4,
|
||
height: 40.2,
|
||
resourceIds: ['hero', 'local-asset:hero', 'persisted-角色草图.png'],
|
||
sourcePath: '/assets/hero.png',
|
||
},
|
||
});
|
||
expect(
|
||
parseLocalGamePreviewInspectMessage({
|
||
type: 'unknown',
|
||
action: 'selected',
|
||
}),
|
||
).toBeNull();
|
||
});
|
||
|
||
test('runtime-region references travel through the same structured event', () => {
|
||
const reference: ChatReference = {
|
||
type: 'runtime-region',
|
||
label: '开始按钮',
|
||
runId: 'preview-3101',
|
||
elementTag: 'button',
|
||
text: '开始游戏',
|
||
resourceIds: ['hero'],
|
||
source: 'runtime-picker',
|
||
};
|
||
const listener = vi.fn();
|
||
window.addEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
|
||
dispatchResourceReferenceInsert(reference);
|
||
window.removeEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
|
||
expect(
|
||
(listener.mock.calls[0]?.[0] as CustomEvent).detail.reference,
|
||
).toEqual(reference);
|
||
});
|
||
|
||
test('removing a chip keeps the remaining text editable', async () => {
|
||
const user = userEvent.setup();
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
render(
|
||
<ComposerHost
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
await user.click(screen.getByRole('option', { name: /hero/u }));
|
||
await user.click(screen.getByRole('button', { name: '插入引用' }));
|
||
await screen.findByRole('button', { name: '移除引用 hero' });
|
||
|
||
await user.click(screen.getByRole('button', { name: '移除引用 hero' }));
|
||
await waitFor(() => {
|
||
expect(draftResourceIds(onChange.mock.calls.at(-1)?.[0])).toHaveLength(0);
|
||
});
|
||
});
|
||
|
||
test('counts one inserted reference as a single character in the editor text model', async () => {
|
||
const user = userEvent.setup();
|
||
render(
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
await user.click(screen.getByRole('option', { name: /hero/u }));
|
||
await user.click(screen.getByRole('button', { name: '插入引用' }));
|
||
await settleComposer();
|
||
|
||
expect(
|
||
document.querySelector('[data-resource-reference-id="hero"]'),
|
||
).not.toBeNull();
|
||
// 引用是原子节点：编辑器文本模型里只占 1 个字符，加上插入时补的那个分隔空格
|
||
// 一共 2 个。显示名 `hero` 有 4 个字符（`@hero` 是 5），如果引用按显示名算，
|
||
// 这里会是 5 或 6，所以这条断言正好把「1 个引用 = 1 个字符」钉住。
|
||
// 提交用的结构化引用另走 `references`，不受这个占位字符影响。
|
||
expect(editorTextSize()).toBe(2);
|
||
});
|
||
|
||
test('keeps the whole reference after one delete and drops its data in one step', async () => {
|
||
const user = userEvent.setup();
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
render(
|
||
<ComposerHost
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
await user.click(screen.getByRole('option', { name: /hero/u }));
|
||
await user.click(screen.getByRole('button', { name: '插入引用' }));
|
||
await settleComposer();
|
||
|
||
// chip 仍把 `@显示名` 显示给用户看；删除按钮挂在 chip 自己身上
|
||
// （`移除引用 hero` 是 chip 内部的按钮，不是脱离 chip 的独立按钮）。
|
||
const chip = document.querySelector('[data-resource-reference-id="hero"]');
|
||
expect(chip).not.toBeNull();
|
||
expect(chip?.textContent).toBe('@hero');
|
||
const deleteButton = screen.getByRole('button', { name: '移除引用 hero' });
|
||
expect(chip?.contains(deleteButton)).toBe(true);
|
||
|
||
// 草稿 text 是 content 的逐字投影，前端不裁剪：引用节点后的分隔空格照样留在文本里；
|
||
// 结构化引用完整保留，后端按整条消息判断是否有有效内容。
|
||
expect(draftText(onChange.mock.calls.at(-1)?.[0])).toBe(' @hero ');
|
||
expect(draftResourceIds(onChange.mock.calls.at(-1)?.[0])).toEqual(['hero']);
|
||
|
||
// 引用节点是原子的：一次操作删掉整个 chip，不存在"删一半"的中间态。
|
||
await user.click(deleteButton);
|
||
await settleComposer();
|
||
|
||
expect(
|
||
document.querySelector('[data-resource-reference-id="hero"]'),
|
||
).toBeNull();
|
||
expect(draftResourceIds(onChange.mock.calls.at(-1)?.[0])).toHaveLength(0);
|
||
// 引用节点删掉了，只剩插入时补的那个分隔空格；前端不裁剪，草稿文本就是「一个空格」，
|
||
// 有效输入由整条 content 判空，不在派生文本上做空白处理。
|
||
expect(draftText(onChange.mock.calls.at(-1)?.[0])).toBe(' ');
|
||
});
|
||
|
||
test('exposes the current-version and all-canvas scopes as the only two tabs', () => {
|
||
expect(RESOURCE_REFERENCE_SCOPES).toEqual([
|
||
{ id: 'current-version', label: '当前版本素材' },
|
||
{ id: 'all-canvas', label: '全部画布素材' },
|
||
]);
|
||
});
|
||
|
||
test('resolves the current version from activeVersionId or the newest manifest version', () => {
|
||
const versions = [
|
||
iterationVersion('v1', ['hero']),
|
||
iterationVersion('v2', ['theme'], 'v1'),
|
||
];
|
||
expect(resolveActiveIterationVersion(versions, 'v1')?.versionId).toBe('v1');
|
||
expect(resolveActiveIterationVersion(versions, null)?.versionId).toBe('v2');
|
||
expect(resolveActiveIterationVersion(versions, undefined)?.versionId).toBe(
|
||
'v2',
|
||
);
|
||
expect(resolveActiveIterationVersion(versions, 'missing')).toBeNull();
|
||
expect(resolveActiveIterationVersion([], null)).toBeNull();
|
||
expect(resolveActiveIterationVersion(undefined, null)).toBeNull();
|
||
});
|
||
|
||
test('derives current-version assets from bindings and drops dangling bindings', () => {
|
||
const versions = [iterationVersion('v1', ['hero', 'deleted-asset'])];
|
||
expect(
|
||
currentIterationVersionAssets(assets, versions, 'v1').map(
|
||
(entry) => entry.id,
|
||
),
|
||
).toEqual(['hero']);
|
||
expect(currentIterationVersionAssets(assets, versions, 'missing')).toEqual(
|
||
[],
|
||
);
|
||
expect(currentIterationVersionAssets(assets, [], null)).toEqual([]);
|
||
expect(
|
||
currentIterationVersionAssets(assets, [iterationVersion('v1', [])], 'v1'),
|
||
).toEqual([]);
|
||
});
|
||
|
||
test('keeps an independent search and filter state per picker scope', async () => {
|
||
const user = userEvent.setup();
|
||
render(
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={assets}
|
||
versions={[
|
||
iterationVersion('v1', ['hero', 'enemy']),
|
||
iterationVersion('v2', ['theme'], 'v1'),
|
||
]}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
// 没传 activeVersionId 时回退到 manifest 最新版本 v2，只列出该版本绑定的资源。
|
||
expect(
|
||
screen
|
||
.getByRole('tab', { name: '当前版本素材' })
|
||
.getAttribute('aria-selected'),
|
||
).toBe('true');
|
||
expect(screen.getByRole('option', { name: /theme/u })).not.toBeNull();
|
||
expect(screen.queryByRole('option', { name: /hero/u })).toBeNull();
|
||
|
||
await user.type(screen.getByLabelText('搜索当前版本素材'), 'the');
|
||
expect(screen.getByRole('option', { name: /theme/u })).not.toBeNull();
|
||
|
||
await user.click(screen.getByRole('tab', { name: '全部画布素材' }));
|
||
// 另一个页签有自己的搜索与筛选，不受当前版本页签影响。
|
||
const allCanvasSearch = screen.getByLabelText(
|
||
'搜索全部画布素材',
|
||
) as HTMLInputElement;
|
||
expect(allCanvasSearch.value).toBe('');
|
||
expect(screen.getByRole('option', { name: /hero/u })).not.toBeNull();
|
||
expect(screen.getByRole('option', { name: /enemy/u })).not.toBeNull();
|
||
|
||
await user.type(allCanvasSearch, 'hero');
|
||
expect(screen.queryByRole('option', { name: /enemy/u })).toBeNull();
|
||
await user.click(screen.getByRole('button', { name: '音频' }));
|
||
expect(screen.queryByRole('option', { name: /hero/u })).toBeNull();
|
||
expect(screen.getByText('没有匹配的素材')).not.toBeNull();
|
||
|
||
await user.click(screen.getByRole('tab', { name: '当前版本素材' }));
|
||
expect(
|
||
(screen.getByLabelText('搜索当前版本素材') as HTMLInputElement).value,
|
||
).toBe('the');
|
||
expect(screen.getByRole('option', { name: /theme/u })).not.toBeNull();
|
||
});
|
||
|
||
test('shows an empty state when the active version has no bound resources', async () => {
|
||
const user = userEvent.setup();
|
||
render(
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={assets}
|
||
activeVersionId="v1"
|
||
versions={[iterationVersion('v1', ['deleted-asset'])]}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
// 当前版本没有可用素材时默认落到「全部画布素材」，切回当前版本页签是空态。
|
||
await user.click(screen.getByRole('tab', { name: '当前版本素材' }));
|
||
expect(screen.getByText('当前版本还没有绑定素材')).not.toBeNull();
|
||
expect(screen.queryByRole('option')).toBeNull();
|
||
|
||
await user.click(screen.getByRole('tab', { name: '全部画布素材' }));
|
||
expect(screen.getByRole('option', { name: /hero/u })).not.toBeNull();
|
||
});
|
||
|
||
test('shows the current-version empty state when the project has no versions', async () => {
|
||
const user = userEvent.setup();
|
||
render(
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={assets}
|
||
versions={[]}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
await user.click(screen.getByRole('tab', { name: '当前版本素材' }));
|
||
expect(screen.getByText('当前版本还没有绑定素材')).not.toBeNull();
|
||
});
|
||
|
||
test('refreshes chip and candidate display names after a resource rename', async () => {
|
||
const user = userEvent.setup();
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const composerRef = createRef<ResourceReferenceInputHandle>();
|
||
const renamedAssets = [
|
||
asset('hero', 'character', 'image/png', 'assets/hero-final.png'),
|
||
assets[1]!,
|
||
assets[2]!,
|
||
];
|
||
render(
|
||
<ComposerHost
|
||
initialContent={[
|
||
{ type: 'input_text', text: '用这个角色' },
|
||
chatReferenceToContentPart(
|
||
resourceReferenceFromAsset(assets[0]!, 'asset-picker'),
|
||
),
|
||
]}
|
||
ref={composerRef}
|
||
onChange={onChange}
|
||
assets={renamedAssets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await waitFor(() => {
|
||
expect(
|
||
document.querySelector('.resource-reference-chip-label')?.textContent,
|
||
).toBe('hero-final');
|
||
});
|
||
// 改名只影响显示名：canonical content 仍只记稳定 resourceId。
|
||
expect(draftResourceIds(composerRef.current?.getDraft())).toEqual(['hero']);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
expect(screen.getByRole('option', { name: /hero-final/u })).not.toBeNull();
|
||
expect(screen.queryByRole('option', { name: /hero /u })).toBeNull();
|
||
});
|
||
|
||
test('restores a cross-session draft with the caret at the end of the text', async () => {
|
||
const user = userEvent.setup();
|
||
const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const composerRef = createRef<ResourceReferenceInputHandle>();
|
||
render(
|
||
<ComposerHost
|
||
initialContent={[{ type: 'input_text', text: '上一个会话的草稿' }]}
|
||
ref={composerRef}
|
||
onChange={onChange}
|
||
assets={assets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
// 切换 / 重开会话：通过输入区 handle 替换 Lexical 唯一状态。
|
||
composerRef.current?.replaceText('恢复出来的草稿');
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
await user.click(screen.getByRole('option', { name: /hero/u }));
|
||
await user.click(screen.getByRole('button', { name: '插入引用' }));
|
||
await settleComposer();
|
||
|
||
// 恢复的草稿文本 + picker 插入的 chip 与它后面的分隔空格，逐字就是编辑器里的内容。
|
||
expect(
|
||
onChange.mock.calls
|
||
.at(-1)?.[0]
|
||
.content.filter((part) => part.type === 'input_text'),
|
||
).toEqual([
|
||
{ type: 'input_text', text: '恢复出来的草稿' },
|
||
{ type: 'input_text', text: ' ' },
|
||
]);
|
||
});
|
||
|
||
test('标签库按 manifest 标签派生：计数只算候选、排序稳定、多标签取交集', () => {
|
||
const references = taggedAssets.map((entry) =>
|
||
resourceReferenceFromAsset(entry, 'asset-picker'),
|
||
);
|
||
expect(resourceReferenceTagLibrary(references)).toEqual([
|
||
{ tag: '角色', assetCount: 2, assetIds: ['enemy', 'hero'] },
|
||
{ tag: '背景乐', assetCount: 1, assetIds: ['theme'] },
|
||
{ tag: '主角', assetCount: 1, assetIds: ['hero'] },
|
||
]);
|
||
|
||
const hero = references[0]!;
|
||
const enemy = references[1]!;
|
||
const theme = references[2]!;
|
||
// 空选择不过滤；单标签按「素材带这个标签」判。
|
||
expect(resourceReferenceMatchesTagSelection(hero, [])).toBe(true);
|
||
expect(resourceReferenceMatchesTagSelection(theme, ['角色'])).toBe(false);
|
||
// 多标签是 AND：hero 同时有「角色」「主角」才算命中，enemy 只有「角色」。
|
||
expect(resourceReferenceMatchesTagSelection(hero, ['角色', '主角'])).toBe(
|
||
true,
|
||
);
|
||
expect(resourceReferenceMatchesTagSelection(enemy, ['角色', '主角'])).toBe(
|
||
false,
|
||
);
|
||
});
|
||
|
||
test('标签筛选把不符合的候选筛掉，多标签叠加，再与搜索关键字、功能分类叠加', async () => {
|
||
const user = userEvent.setup();
|
||
render(
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={taggedAssets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
// 没传 versions 时默认落在「全部画布素材」，标签行按这一页签的候选派生。
|
||
expect(screen.getAllByRole('option')).toHaveLength(3);
|
||
expect(pickerTagGroup().getByText('角色').parentElement?.textContent).toBe(
|
||
'角色2',
|
||
);
|
||
|
||
await user.click(pickerTagGroup().getByRole('button', { name: /^角色/u }));
|
||
// 只勾一个标签：没带这个标签的素材必须消失，不是"排前面"。
|
||
expect(screen.getByRole('option', { name: /hero/u })).not.toBeNull();
|
||
expect(screen.getByRole('option', { name: /enemy/u })).not.toBeNull();
|
||
expect(screen.queryByRole('option', { name: /theme/u })).toBeNull();
|
||
|
||
await user.click(pickerTagGroup().getByRole('button', { name: /^主角/u }));
|
||
// 第二个标签再收一层：两个标签都命中的只剩 hero。
|
||
expect(screen.getByRole('option', { name: /hero/u })).not.toBeNull();
|
||
expect(screen.queryByRole('option', { name: /enemy/u })).toBeNull();
|
||
expect(
|
||
pickerTagGroup()
|
||
.getByRole('button', { name: /^主角/u })
|
||
.getAttribute('aria-pressed'),
|
||
).toBe('true');
|
||
|
||
// 关键字叠在标签之上：hero 不含 'enemy'，两个标签 + 关键字一起就空了。
|
||
await user.type(screen.getByLabelText('搜索全部画布素材'), 'enemy');
|
||
expect(screen.queryByRole('option')).toBeNull();
|
||
expect(screen.getByText('没有匹配的素材')).not.toBeNull();
|
||
|
||
// 功能分类也参与叠加：hero 是 character，切到「音频」后同样为空。
|
||
await user.clear(screen.getByLabelText('搜索全部画布素材'));
|
||
await user.click(screen.getByRole('button', { name: '音频' }));
|
||
expect(screen.queryByRole('option')).toBeNull();
|
||
|
||
// 取消两个标签，分类仍在生效：只剩音频素材 theme。
|
||
await user.click(pickerTagGroup().getByRole('button', { name: /^主角/u }));
|
||
await user.click(pickerTagGroup().getByRole('button', { name: /^角色/u }));
|
||
expect(screen.getByRole('option', { name: /theme/u })).not.toBeNull();
|
||
expect(screen.queryByRole('option', { name: /hero/u })).toBeNull();
|
||
});
|
||
|
||
test('两个页签各自持有一份独立的标签库与已选标签', async () => {
|
||
const user = userEvent.setup();
|
||
render(
|
||
<ComposerHost
|
||
onChange={vi.fn()}
|
||
assets={taggedAssets}
|
||
versions={[iterationVersion('v1', ['hero', 'theme'])]}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>,
|
||
);
|
||
|
||
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
|
||
// 当前版本 v1 只绑定 hero / theme，标签计数也只看这两个。
|
||
expect(
|
||
screen
|
||
.getByRole('tab', { name: '当前版本素材' })
|
||
.getAttribute('aria-selected'),
|
||
).toBe('true');
|
||
expect(pickerTagGroup().getByText('角色').parentElement?.textContent).toBe(
|
||
'角色1',
|
||
);
|
||
expect(pickerTagGroup().queryByText('主角')).not.toBeNull();
|
||
await user.click(pickerTagGroup().getByRole('button', { name: /^角色/u }));
|
||
expect(screen.getByRole('option', { name: /hero/u })).not.toBeNull();
|
||
expect(screen.queryByRole('option', { name: /theme/u })).toBeNull();
|
||
|
||
await user.click(screen.getByRole('tab', { name: '全部画布素材' }));
|
||
// 另一个页签有自己的已选标签（此时为空）与自己的标签计数。
|
||
expect(screen.getAllByRole('option')).toHaveLength(3);
|
||
expect(
|
||
pickerTagGroup()
|
||
.getByRole('button', { name: /^角色/u })
|
||
.getAttribute('aria-pressed'),
|
||
).toBe('false');
|
||
expect(pickerTagGroup().getByText('角色').parentElement?.textContent).toBe(
|
||
'角色2',
|
||
);
|
||
|
||
await user.click(screen.getByRole('tab', { name: '当前版本素材' }));
|
||
// 切回来仍是自己那份选择与筛后结果。
|
||
expect(
|
||
pickerTagGroup()
|
||
.getByRole('button', { name: /^角色/u })
|
||
.getAttribute('aria-pressed'),
|
||
).toBe('true');
|
||
expect(screen.queryByRole('option', { name: /theme/u })).toBeNull();
|
||
});
|
||
|
||
test('聊天与快速编辑提示词插入同一素材：草稿文本与引用完全一致', async () => {
|
||
const chatOnChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
const quickEditOnChange = vi.fn<(draft: ChatComposerDraft) => void>();
|
||
render(
|
||
<>
|
||
<ComposerHost
|
||
onChange={chatOnChange}
|
||
assets={taggedAssets}
|
||
projectPath="C:/project"
|
||
ariaLabel="聊天"
|
||
/>
|
||
<ComposerHost
|
||
onChange={quickEditOnChange}
|
||
assets={taggedAssets}
|
||
projectPath="C:/project"
|
||
ariaLabel="快速编辑提示词"
|
||
multiline
|
||
rows={3}
|
||
showPolishAction={false}
|
||
/>
|
||
</>,
|
||
);
|
||
|
||
await insertAssetThroughPicker('聊天', /hero/u);
|
||
await insertAssetThroughPicker('快速编辑提示词', /hero/u);
|
||
|
||
const chatDraft = chatOnChange.mock.calls.at(-1)?.[0];
|
||
const quickEditDraft = quickEditOnChange.mock.calls.at(-1)?.[0];
|
||
// 同一个资产在两条入口上插入，回填文本与结构化引用必须逐字相同：
|
||
// 「快速编辑」不允许出现第二种引用格式。
|
||
expect(chatDraft?.content).toEqual([
|
||
{ type: 'agc_resource_reference', resourceId: 'hero' },
|
||
{ type: 'input_text', text: ' ' },
|
||
]);
|
||
expect(quickEditDraft).toEqual(chatDraft);
|
||
expect(
|
||
document.querySelectorAll('[data-resource-reference-id="hero"]'),
|
||
).toHaveLength(2);
|
||
});
|
||
|
||
test('快速编辑提示词输入区不渲染内置润色入口：润色归宿主的 ResourcePromptPolishSlot', async () => {
|
||
render(
|
||
<ComposerHost
|
||
initialContent={[{ type: 'input_text', text: '把夜色改成星空' }]}
|
||
onChange={vi.fn()}
|
||
assets={taggedAssets}
|
||
projectPath="C:/project"
|
||
ariaLabel="快速编辑提示词"
|
||
multiline
|
||
rows={3}
|
||
showPolishAction={false}
|
||
/>,
|
||
);
|
||
|
||
expect(screen.queryByRole('button', { name: 'AI 润色' })).toBeNull();
|
||
// `@` 入口照旧在：润色收起来不影响引用。
|
||
expect(
|
||
referenceInputByLabel('快速编辑提示词').getByRole('button', {
|
||
name: '插入素材引用',
|
||
}),
|
||
).not.toBeNull();
|
||
});
|
||
});
|