Files
Genarrative/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
kdletters d8b935317d 拆分编辑器前端画布视图
抽出素材栏、生成器、舞台工具栏和画布世界视图

补充各拆分视图的聚焦测试

更新 TRACKING.md 记录第三十四阶段验证
2026-06-17 17:48:12 +08:00

102 lines
3.3 KiB
TypeScript

/* @vitest-environment jsdom */
import { fireEvent, render, screen } from '@testing-library/react';
import { useState } from 'react';
import { describe, expect, it, vi } from 'vitest';
import type {
GenerateDialogState,
UploadTarget,
} from './ImageCanvasEditorTypes';
import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
function createDialog(
patch: Partial<GenerateDialogState> = {},
): GenerateDialogState {
return {
mode: 'generate',
prompt: '初始提示',
status: 'idle',
...patch,
};
}
function BasicGenerationHarness({
initialDialog = createDialog(),
onRequestUpload = vi.fn(),
onSubmit = vi.fn(),
onClose = vi.fn(),
}: {
initialDialog?: GenerateDialogState;
onRequestUpload?: (target: UploadTarget) => void;
onSubmit?: (dialog: GenerateDialogState) => void;
onClose?: () => void;
}) {
const [dialog, setDialog] = useState<GenerateDialogState | null>(
initialDialog,
);
return dialog ? (
<div>
<ImageCanvasBasicGenerationComposerView
dialog={dialog}
style={{ left: 10, top: 20 }}
setGenerateDialog={setDialog}
onRequestUpload={onRequestUpload}
onSubmit={onSubmit}
onClose={onClose}
/>
<output aria-label="当前提示词">{dialog.prompt}</output>
<output aria-label="当前状态">{dialog.status}</output>
<output aria-label="当前错误">{dialog.errorMessage ?? '-'}</output>
</div>
) : null;
}
describe('ImageCanvasBasicGenerationComposerView', () => {
it('updates prompt, clears failed state, uploads references and submits', () => {
const requestUpload = vi.fn();
const submitGeneration = vi.fn();
render(
<BasicGenerationHarness
initialDialog={createDialog({
status: 'failed',
errorMessage: '生成失败',
})}
onRequestUpload={requestUpload}
onSubmit={submitGeneration}
/>,
);
fireEvent.change(screen.getByLabelText('生成提示词'), {
target: { value: '新的提示' },
});
fireEvent.click(screen.getByRole('button', { name: '添加参考图' }));
fireEvent.click(screen.getByRole('button', { name: '生成' }));
expect(screen.getByLabelText('当前提示词').textContent).toBe('新的提示');
expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
expect(screen.getByLabelText('当前错误').textContent).toBe('-');
expect(requestUpload).toHaveBeenCalledWith('asset');
expect(submitGeneration).toHaveBeenCalledWith(
expect.objectContaining({ prompt: '新的提示', status: 'idle' }),
);
});
it('runs placeholder actions and closes through its interface', () => {
const closeComposer = vi.fn();
const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
render(<BasicGenerationHarness onClose={closeComposer} />);
fireEvent.click(screen.getByRole('button', { name: '生成比例 1:1 2k 1张' }));
fireEvent.click(screen.getByRole('button', { name: '生成模型 GPT Image' }));
fireEvent.click(screen.getByRole('button', { name: '关闭生成图片' }));
expect(alertSpy).toHaveBeenCalledWith('生成参数功能建设中');
expect(alertSpy).toHaveBeenCalledWith('模型选择功能建设中');
expect(closeComposer).toHaveBeenCalledTimes(1);
alertSpy.mockRestore();
});
});