118 lines
3.5 KiB
TypeScript
118 lines
3.5 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 {
|
|
CanvasLayer,
|
|
QuickEditPanelState,
|
|
} from './ImageCanvasEditorTypes';
|
|
import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
|
|
|
|
function createLayer(): CanvasLayer {
|
|
return {
|
|
id: 'layer-a',
|
|
resourceId: 'resource-a',
|
|
title: '源图',
|
|
src: 'data:image/png;base64,c291cmNl',
|
|
x: 0,
|
|
y: 0,
|
|
width: 320,
|
|
height: 180,
|
|
originalWidth: 320,
|
|
originalHeight: 180,
|
|
zIndex: 1,
|
|
sourceType: 'uploaded',
|
|
};
|
|
}
|
|
|
|
function QuickEditPanelHarness({
|
|
initialPanel,
|
|
onSubmit = vi.fn(),
|
|
}: {
|
|
initialPanel: QuickEditPanelState;
|
|
onSubmit?: () => void;
|
|
}) {
|
|
const [panel, setPanel] = useState<QuickEditPanelState | null>(initialPanel);
|
|
|
|
return panel ? (
|
|
<div>
|
|
<ImageCanvasQuickEditPanelView
|
|
panel={panel}
|
|
sourceLayer={createLayer()}
|
|
style={{ left: 10, top: 20 }}
|
|
sizeOptions={['1024x1024', '2048x1152']}
|
|
modelOptions={[
|
|
{ label: 'nanobanana2', value: 'nano' },
|
|
{ label: 'gpt-image-2', value: 'gpt' },
|
|
]}
|
|
setQuickEditPanel={setPanel}
|
|
onSubmit={onSubmit}
|
|
/>
|
|
<output aria-label="当前提示词">{panel.prompt}</output>
|
|
<output aria-label="当前尺寸">{panel.size}</output>
|
|
<output aria-label="当前模型">{panel.model}</output>
|
|
<output aria-label="当前状态">{panel.status}</output>
|
|
<output aria-label="当前错误">{panel.errorMessage ?? '-'}</output>
|
|
</div>
|
|
) : (
|
|
<output aria-label="面板状态">closed</output>
|
|
);
|
|
}
|
|
|
|
describe('ImageCanvasQuickEditPanelView', () => {
|
|
it('updates prompt, size, model and clears failed state', () => {
|
|
render(
|
|
<QuickEditPanelHarness
|
|
initialPanel={{
|
|
sourceLayerId: 'layer-a',
|
|
prompt: '旧提示',
|
|
size: '1024x1024',
|
|
model: 'nano',
|
|
status: 'failed',
|
|
errorMessage: '失败原因',
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
fireEvent.change(screen.getByLabelText('快速编辑提示词'), {
|
|
target: { value: '新提示' },
|
|
});
|
|
fireEvent.change(screen.getByLabelText('快速编辑尺寸'), {
|
|
target: { value: '2048x1152' },
|
|
});
|
|
fireEvent.change(screen.getByLabelText('快速编辑模型'), {
|
|
target: { value: 'gpt' },
|
|
});
|
|
|
|
expect(screen.getByLabelText('当前提示词').textContent).toBe('新提示');
|
|
expect(screen.getByLabelText('当前尺寸').textContent).toBe('2048x1152');
|
|
expect(screen.getByLabelText('当前模型').textContent).toBe('gpt');
|
|
expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
|
|
expect(screen.getByLabelText('当前错误').textContent).toBe('-');
|
|
});
|
|
|
|
it('submits and closes through its interface', () => {
|
|
const submitQuickEdit = vi.fn();
|
|
render(
|
|
<QuickEditPanelHarness
|
|
initialPanel={{
|
|
sourceLayerId: 'layer-a',
|
|
prompt: '提示',
|
|
size: '1024x1024',
|
|
model: 'nano',
|
|
status: 'idle',
|
|
}}
|
|
onSubmit={submitQuickEdit}
|
|
/>,
|
|
);
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '生成' }));
|
|
fireEvent.click(screen.getByRole('button', { name: '关闭快速编辑图片' }));
|
|
|
|
expect(submitQuickEdit).toHaveBeenCalledTimes(1);
|
|
expect(screen.getByLabelText('面板状态').textContent).toBe('closed');
|
|
});
|
|
});
|