552 lines
14 KiB
TypeScript
552 lines
14 KiB
TypeScript
/* @vitest-environment jsdom */
|
||
|
||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||
import { afterEach, expect, test, vi } from 'vitest';
|
||
|
||
import * as creationAgentServices from '../../services/creation-agent';
|
||
import { createCreationAgentChatQuickActions } from '../../services/creation-agent';
|
||
import {
|
||
type CreationAgentTheme,
|
||
CreationAgentWorkspace,
|
||
} from './CreationAgentWorkspace';
|
||
|
||
const testTheme: CreationAgentTheme = {
|
||
accentTextClass: 'text-emerald-100',
|
||
accentBgClass: 'bg-emerald-300',
|
||
accentButtonClass: 'bg-emerald-200',
|
||
userBubbleClass: 'bg-emerald-600 text-white',
|
||
heroClass: 'border border-emerald-100/20 bg-slate-900',
|
||
};
|
||
|
||
afterEach(() => {
|
||
vi.restoreAllMocks();
|
||
});
|
||
|
||
function ensureScrollApis() {
|
||
if (!Element.prototype.scrollIntoView) {
|
||
Element.prototype.scrollIntoView = () => {};
|
||
}
|
||
|
||
if (!HTMLElement.prototype.scrollTo) {
|
||
HTMLElement.prototype.scrollTo = () => {};
|
||
}
|
||
}
|
||
|
||
test('creation agent workspace keeps initial chat progress at zero percent', () => {
|
||
ensureScrollApis();
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: null,
|
||
currentTurn: 0,
|
||
progressPercent: 0,
|
||
anchors: [],
|
||
messages: [],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
const progressbar = screen.getByRole('progressbar');
|
||
|
||
expect(progressbar.getAttribute('aria-valuenow')).toBe('0');
|
||
expect(
|
||
(progressbar.firstElementChild as HTMLElement | null)?.style.width,
|
||
).toBe('0%');
|
||
});
|
||
|
||
test('creation agent workspace filters duplicate recommended replies', () => {
|
||
const consoleErrorSpy = vi
|
||
.spyOn(console, 'error')
|
||
.mockImplementation(() => undefined);
|
||
|
||
ensureScrollApis();
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 2,
|
||
progressPercent: 40,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: '',
|
||
role: 'assistant',
|
||
kind: 'chat',
|
||
text: '先把方向收一下。',
|
||
},
|
||
],
|
||
recommendedReplies: [
|
||
'',
|
||
'继续补充冲突',
|
||
'继续补充冲突',
|
||
' 先确定玩家身份 ',
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
expect(screen.getByRole('button', { name: '继续补充冲突' })).toBeTruthy();
|
||
expect(screen.getByRole('button', { name: '先确定玩家身份' })).toBeTruthy();
|
||
expect(screen.queryByRole('button', { name: /^\s*$/u })).toBeNull();
|
||
|
||
const duplicateKeyCalls = consoleErrorSpy.mock.calls.filter((call) =>
|
||
call.some(
|
||
(arg) =>
|
||
typeof arg === 'string' &&
|
||
arg.includes('Encountered two children with the same key'),
|
||
),
|
||
);
|
||
|
||
expect(duplicateKeyCalls).toHaveLength(0);
|
||
});
|
||
|
||
test('creation agent workspace renders streaming assistant text', () => {
|
||
ensureScrollApis();
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 1,
|
||
progressPercent: 20,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: 'message-1',
|
||
role: 'user',
|
||
kind: 'chat',
|
||
text: '我想做一个潮湿压抑的海上世界。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
streamingReplyText="那我先顺着这个方向收一下，开场时你更想让玩家撞上什么麻烦"
|
||
isStreamingReply
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
expect(screen.getByText(/那我先顺着这个方向收一下/u)).toBeTruthy();
|
||
});
|
||
|
||
test('creation agent workspace renders waiting dots before first streamed token', () => {
|
||
ensureScrollApis();
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 1,
|
||
progressPercent: 20,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: 'message-1',
|
||
role: 'user',
|
||
kind: 'chat',
|
||
text: '我想做一个潮湿压抑的海上世界。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
streamingReplyText=""
|
||
isStreamingReply
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
expect(screen.getByTestId('creation-agent-waiting-dots')).toBeTruthy();
|
||
});
|
||
|
||
test('creation agent workspace appends streaming assistant message after stable message list', () => {
|
||
ensureScrollApis();
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 2,
|
||
progressPercent: 40,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: 'message-user-1',
|
||
role: 'user',
|
||
kind: 'chat',
|
||
text: '我想做一个潮湿压抑的海上世界。',
|
||
},
|
||
{
|
||
id: 'message-assistant-1',
|
||
role: 'assistant',
|
||
kind: 'chat',
|
||
text: '我先接住这个方向。',
|
||
},
|
||
{
|
||
id: 'message-user-2',
|
||
role: 'user',
|
||
kind: 'chat',
|
||
text: '开场我想先撞上一场假航灯事故。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
streamingReplyText="那我就把开场事故往沉船旧案上收。"
|
||
isStreamingReply
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
const bubbles = screen
|
||
.getByTestId('creation-agent-message-list')
|
||
.querySelectorAll('.whitespace-pre-wrap');
|
||
const bubbleTexts = Array.from(bubbles).map((node) =>
|
||
node.textContent?.trim(),
|
||
);
|
||
|
||
expect(bubbleTexts).toEqual([
|
||
'我想做一个潮湿压抑的海上世界。',
|
||
'我先接住这个方向。',
|
||
'开场我想先撞上一场假航灯事故。',
|
||
'那我就把开场事故往沉船旧案上收。',
|
||
]);
|
||
});
|
||
|
||
test('creation agent workspace hides anchors and primary action before completed progress', () => {
|
||
ensureScrollApis();
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 2,
|
||
progressPercent: 99,
|
||
anchors: [
|
||
{
|
||
key: 'worldPromise',
|
||
label: '世界承诺',
|
||
value: '一个被潮雾改写航线秩序的群岛世界。',
|
||
status: 'confirmed',
|
||
},
|
||
],
|
||
messages: [
|
||
{
|
||
id: 'message-1',
|
||
role: 'assistant',
|
||
kind: 'chat',
|
||
text: '我们继续把设定收住。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
expect(screen.queryByRole('button', { name: '生成结果页' })).toBeNull();
|
||
expect(screen.queryByText('世界承诺')).toBeNull();
|
||
expect(screen.queryByText('一个被潮雾改写航线秩序的群岛世界。')).toBeNull();
|
||
});
|
||
|
||
test('creation agent workspace shows primary and progress actions at completed progress', () => {
|
||
ensureScrollApis();
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 2,
|
||
progressPercent: 100,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: 'message-1',
|
||
role: 'assistant',
|
||
kind: 'chat',
|
||
text: '设定已经可以进入生成。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
quickActions={createCreationAgentChatQuickActions()}
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
expect(screen.getByRole('button', { name: '生成结果页' })).toBeTruthy();
|
||
expect(screen.getByRole('button', { name: '总结当前设定' })).toBeTruthy();
|
||
expect(screen.getByRole('button', { name: '补充剩余设定' })).toBeTruthy();
|
||
});
|
||
|
||
test('creation agent workspace hides hero copy area when title and summary are absent', () => {
|
||
if (!Element.prototype.scrollIntoView) {
|
||
Element.prototype.scrollIntoView = () => {};
|
||
}
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: null,
|
||
assistantSummary: null,
|
||
currentTurn: 2,
|
||
progressPercent: 60,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: 'message-1',
|
||
role: 'assistant',
|
||
kind: 'chat',
|
||
text: '继续把设定收束到可生成状态。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
expect(screen.queryByText('统一共创')).toBeNull();
|
||
expect(screen.getByText('创作进度')).toBeTruthy();
|
||
});
|
||
|
||
test('creation agent workspace stops auto-follow when user scrolls away from bottom', () => {
|
||
ensureScrollApis();
|
||
|
||
const scrollToSpy = vi.fn();
|
||
HTMLElement.prototype.scrollTo = scrollToSpy;
|
||
|
||
const { rerender } = render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 1,
|
||
progressPercent: 20,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: 'message-1',
|
||
role: 'assistant',
|
||
kind: 'chat',
|
||
text: '先确定一下世界方向。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
const messageList = screen.getByTestId('creation-agent-message-list');
|
||
let scrollTop = 120;
|
||
|
||
Object.defineProperty(messageList, 'scrollHeight', {
|
||
configurable: true,
|
||
value: 640,
|
||
});
|
||
Object.defineProperty(messageList, 'clientHeight', {
|
||
configurable: true,
|
||
value: 240,
|
||
});
|
||
Object.defineProperty(messageList, 'scrollTop', {
|
||
configurable: true,
|
||
get: () => scrollTop,
|
||
set: (value) => {
|
||
scrollTop = Number(value);
|
||
},
|
||
});
|
||
|
||
fireEvent.scroll(messageList);
|
||
scrollToSpy.mockClear();
|
||
|
||
rerender(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: '统一共创',
|
||
currentTurn: 1,
|
||
progressPercent: 20,
|
||
anchors: [],
|
||
messages: [
|
||
{
|
||
id: 'message-1',
|
||
role: 'assistant',
|
||
kind: 'chat',
|
||
text: '先确定一下世界方向。',
|
||
},
|
||
],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
streamingReplyText="继续往下收束开场冲突。"
|
||
isStreamingReply
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
expect(scrollToSpy).not.toHaveBeenCalled();
|
||
});
|
||
|
||
test('creation agent workspace appends parsed document text into composer', async () => {
|
||
ensureScrollApis();
|
||
|
||
vi.spyOn(
|
||
creationAgentServices,
|
||
'parseCreationAgentDocumentInput',
|
||
).mockResolvedValue({
|
||
document: {
|
||
fileName: '世界设定.md',
|
||
contentType: 'text/markdown',
|
||
sizeBytes: 24,
|
||
text: '第一章：潮湿的港口',
|
||
},
|
||
});
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: null,
|
||
currentTurn: 0,
|
||
progressPercent: 0,
|
||
anchors: [],
|
||
messages: [],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
fireEvent.change(screen.getByPlaceholderText('输入消息'), {
|
||
target: {
|
||
value: '已有方向',
|
||
},
|
||
});
|
||
|
||
const input = document.querySelector<HTMLInputElement>('input[type="file"]');
|
||
expect(input).toBeTruthy();
|
||
|
||
fireEvent.change(input!, {
|
||
target: {
|
||
files: [new File(['unused'], '世界设定.md', { type: 'text/markdown' })],
|
||
},
|
||
});
|
||
|
||
await waitFor(() => {
|
||
expect(
|
||
(screen.getByPlaceholderText('输入消息') as HTMLTextAreaElement).value,
|
||
).toBe('已有方向\n\n第一章：潮湿的港口');
|
||
});
|
||
});
|
||
|
||
test('creation agent workspace shows document parse error near composer', async () => {
|
||
ensureScrollApis();
|
||
|
||
vi.spyOn(
|
||
creationAgentServices,
|
||
'parseCreationAgentDocumentInput',
|
||
).mockRejectedValue(new Error('暂时只支持 txt、md、csv、json 文本文档。'));
|
||
|
||
render(
|
||
<CreationAgentWorkspace
|
||
session={{
|
||
sessionId: 'creation-agent-session-1',
|
||
title: null,
|
||
currentTurn: 0,
|
||
progressPercent: 0,
|
||
anchors: [],
|
||
messages: [],
|
||
}}
|
||
theme={testTheme}
|
||
loadingText="正在准备"
|
||
composerPlaceholder="输入消息"
|
||
primaryActionLabel="生成结果页"
|
||
onBack={() => {}}
|
||
onSubmitText={() => {}}
|
||
onPrimaryAction={() => {}}
|
||
/>,
|
||
);
|
||
|
||
const input = document.querySelector<HTMLInputElement>('input[type="file"]');
|
||
expect(input).toBeTruthy();
|
||
|
||
fireEvent.change(input!, {
|
||
target: {
|
||
files: [new File(['unused'], '世界设定.docx')],
|
||
},
|
||
});
|
||
|
||
await waitFor(() => {
|
||
expect(
|
||
screen.getByText('暂时只支持 txt、md、csv、json 文本文档。'),
|
||
).toBeTruthy();
|
||
});
|
||
});
|