kdletters
602d24695d
将 external_generation_job 扩展为含价格、确认时间、退款流水和事件审计的正式生成任务事实源 新增外部生成任务列表与确认 BFF，并让平台入口按后端任务补弹完成或失败提示 保护画布生成队列超时、快照回写和自动保存覆盖场景 将 worker 计费退款流水写入 externalGenerationJobId，并补充冷备份后 worker/controller 恢复守护
1071 lines
34 KiB
TypeScript
1071 lines
34 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { act, render, screen, waitFor } from '@testing-library/react';
|
|
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
|
|
import type {
|
|
CanvasGenerationDialogState,
|
|
CanvasLayer,
|
|
CanvasViewport,
|
|
} from './ImageCanvasEditorTypes';
|
|
import { useImageCanvasProjectPersistence } from './useImageCanvasProjectPersistence';
|
|
import type { EditorProjectSnapshot } from '../../services/image-editor/editorProjectClient';
|
|
|
|
const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
|
|
const loadEditorProjectMock = vi.hoisted(() => vi.fn());
|
|
const loadOrCreateRecentEditorProjectMock = vi.hoisted(() => vi.fn());
|
|
const saveEditorProjectLayoutMock = vi.hoisted(() => vi.fn());
|
|
const EDITOR_PROJECT_RECENT_SESSION_CACHE_KEY =
|
|
'genarrative.imageCanvas.projectSnapshot.v1:recent';
|
|
|
|
vi.mock('../../services/image-editor/editorProjectClient', async () => {
|
|
const actual = await vi.importActual<
|
|
typeof import('../../services/image-editor/editorProjectClient')
|
|
>('../../services/image-editor/editorProjectClient');
|
|
return {
|
|
...actual,
|
|
createEditorProjectResource: createEditorProjectResourceMock,
|
|
loadEditorProject: loadEditorProjectMock,
|
|
loadOrCreateRecentEditorProject: loadOrCreateRecentEditorProjectMock,
|
|
saveEditorProjectLayout: saveEditorProjectLayoutMock,
|
|
};
|
|
});
|
|
|
|
function createLayer(
|
|
id: string,
|
|
overrides: Partial<CanvasLayer> = {},
|
|
): CanvasLayer {
|
|
return {
|
|
id,
|
|
resourceId: `local-${id}`,
|
|
title: '账号素材A',
|
|
src: 'data:image/png;base64,YQ==',
|
|
x: 10,
|
|
y: 20,
|
|
width: 320,
|
|
height: 240,
|
|
originalWidth: 320,
|
|
originalHeight: 240,
|
|
zIndex: 3,
|
|
sourceType: 'uploaded',
|
|
sourceAssetId: 'asset-a',
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function createDeferred<T>() {
|
|
let resolve!: (value: T) => void;
|
|
let reject!: (reason?: unknown) => void;
|
|
const promise = new Promise<T>((promiseResolve, promiseReject) => {
|
|
resolve = promiseResolve;
|
|
reject = promiseReject;
|
|
});
|
|
return { promise, resolve, reject };
|
|
}
|
|
|
|
function ProjectPersistenceHarness({
|
|
canAccessProtectedData = true,
|
|
initialGenerationDialogs = [],
|
|
}: {
|
|
canAccessProtectedData?: boolean;
|
|
initialGenerationDialogs?: CanvasGenerationDialogState[];
|
|
}) {
|
|
const [layers, setLayers] = useState<CanvasLayer[]>([]);
|
|
const [generationDialogs, setGenerationDialogs] = useState<
|
|
CanvasGenerationDialogState[]
|
|
>(initialGenerationDialogs);
|
|
const [viewport, setViewport] = useState<CanvasViewport>({
|
|
x: 0,
|
|
y: 0,
|
|
scale: 1,
|
|
});
|
|
const [projectTitle, setProjectTitle] = useState('');
|
|
const [projectRenameValue, setProjectRenameValue] = useState('');
|
|
const layersRef = useRef(layers);
|
|
const viewportRef = useRef(viewport);
|
|
const canvasGenerationDialogsRef = useRef(generationDialogs);
|
|
const selectedLayerRef = useRef<string | null>(null);
|
|
const layerCounterRef = useRef(0);
|
|
const openEditorLoginModalRef = useRef(vi.fn());
|
|
|
|
layersRef.current = layers;
|
|
viewportRef.current = viewport;
|
|
canvasGenerationDialogsRef.current = generationDialogs;
|
|
const selectSingleLayer = useCallback((layerId: string | null) => {
|
|
selectedLayerRef.current = layerId;
|
|
}, []);
|
|
const setLayerCounter = useCallback((value: number) => {
|
|
layerCounterRef.current = value;
|
|
}, []);
|
|
const persistenceRefs = useMemo(
|
|
() => ({
|
|
layersRef,
|
|
viewportRef,
|
|
canvasGenerationDialogsRef,
|
|
}),
|
|
[],
|
|
);
|
|
const persistenceSetters = useMemo(
|
|
() => ({
|
|
setProjectTitle,
|
|
setProjectRenameValue,
|
|
setViewport,
|
|
setLayers,
|
|
selectSingleLayer,
|
|
setLayerCounter,
|
|
restoreCanvasGenerationDialogs: setGenerationDialogs,
|
|
}),
|
|
[selectSingleLayer, setLayerCounter],
|
|
);
|
|
|
|
const persistence = useImageCanvasProjectPersistence({
|
|
refs: persistenceRefs,
|
|
setters: persistenceSetters,
|
|
layers,
|
|
canvasGenerationDialogs: generationDialogs,
|
|
viewport,
|
|
canAccessProtectedData,
|
|
openEditorLoginModal: openEditorLoginModalRef.current,
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<span data-testid="project-id">{persistence.projectId ?? '-'}</span>
|
|
<span data-testid="project-title">{projectTitle}</span>
|
|
<span data-testid="project-rename">{projectRenameValue}</span>
|
|
<span data-testid="layers">
|
|
{layers
|
|
.map(
|
|
(layer) =>
|
|
`${layer.id}:${layer.resourceId}:${layer.assetKind ?? '-'}:${
|
|
layer.generationInputs?.fields[0]?.value ?? '-'
|
|
}:${layer.objectKey ?? '-'}:${layer.assetObjectId ?? '-'}`,
|
|
)
|
|
.join(',')}
|
|
</span>
|
|
<span data-testid="selected">{selectedLayerRef.current ?? '-'}</span>
|
|
<span data-testid="counter">{layerCounterRef.current}</span>
|
|
<span data-testid="viewport">
|
|
{viewport.x},{viewport.y},{viewport.scale}
|
|
</span>
|
|
<span data-testid="generation-dialogs">
|
|
{generationDialogs
|
|
.map((dialog) => `${dialog.id}:${dialog.prompt}:${dialog.placeholder?.x}`)
|
|
.join(',')}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
persistence.appendCanvasLayersWithResources([
|
|
createLayer('layer-a', {
|
|
src: 'https://signed.example.test/asset-a.png?expires=1',
|
|
objectKey: 'generated-character-drafts/editor/assets/asset-a.png',
|
|
assetObjectId: 'asset-object-a',
|
|
}),
|
|
]);
|
|
}}
|
|
>
|
|
append
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
persistence.appendCanvasLayersWithResources([
|
|
createLayer('layer-server-resource', {
|
|
resourceId: 'resource-from-generation-bff',
|
|
title: '后端已保存图片',
|
|
sourceType: 'generated',
|
|
}),
|
|
]);
|
|
}}
|
|
>
|
|
append server resource
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
persistence.appendCanvasLayersWithResources([
|
|
createLayer('layer-character', {
|
|
title: '角色形象',
|
|
src: 'https://signed.example.test/character-new.png?expires=1',
|
|
objectKey: 'generated/character-new.png',
|
|
assetObjectId: 'asset-object-character-new',
|
|
sourceType: 'generated',
|
|
assetKind: 'character',
|
|
generationInputs: {
|
|
fields: [{ title: '角色设定', value: '银发游侠' }],
|
|
references: [],
|
|
},
|
|
}),
|
|
]);
|
|
}}
|
|
>
|
|
append character
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
persistence.appendCanvasLayersWithResources([
|
|
createLayer('layer-private-object', {
|
|
src: 'https://signed.example.test/private.png?expires=1',
|
|
objectKey: 'generated-character-drafts/editor/private.png',
|
|
title: '私有对象素材',
|
|
sourceType: 'generated',
|
|
}),
|
|
]);
|
|
}}
|
|
>
|
|
append private object
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const generatedLayer = createLayer('layer-generated');
|
|
persistence.appendCanvasLayersWithResources([
|
|
{
|
|
...generatedLayer,
|
|
title: '生成图片',
|
|
sourceType: 'generated',
|
|
sourceAssetId: undefined,
|
|
},
|
|
]);
|
|
}}
|
|
>
|
|
append generated
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setGenerationDialogs((currentDialogs) =>
|
|
currentDialogs.map((dialog) =>
|
|
dialog.id === 'generation-dialog-1'
|
|
? {
|
|
...dialog,
|
|
prompt: '移动后的生成器',
|
|
placeholder: dialog.placeholder
|
|
? { ...dialog.placeholder, x: 88 }
|
|
: dialog.placeholder,
|
|
}
|
|
: dialog,
|
|
),
|
|
);
|
|
}}
|
|
>
|
|
move generation
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setGenerationDialogs((currentDialogs) =>
|
|
currentDialogs.map((dialog) =>
|
|
dialog.id === 'generation-dialog-1'
|
|
? {
|
|
...dialog,
|
|
prompt: '第二次移动后的生成器',
|
|
placeholder: dialog.placeholder
|
|
? { ...dialog.placeholder, x: 120 }
|
|
: dialog.placeholder,
|
|
}
|
|
: dialog,
|
|
),
|
|
);
|
|
}}
|
|
>
|
|
move generation again
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
persistence.applyProjectSnapshot({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
layerId: 'layer-generated',
|
|
resourceId: 'resource-generated',
|
|
title: '生成结果',
|
|
x: 42,
|
|
y: 56,
|
|
width: 420,
|
|
height: 420,
|
|
originalWidth: 420,
|
|
originalHeight: 420,
|
|
zIndex: 1,
|
|
sourceType: 'generated',
|
|
},
|
|
{
|
|
itemType: 'generation-dialog',
|
|
layerId: 'generation-dialog:generation-dialog-1',
|
|
resourceId: 'generation-dialog:generation-dialog-1',
|
|
dialog: {
|
|
id: 'generation-dialog-1',
|
|
mode: 'generate',
|
|
prompt: '后端完成生成器',
|
|
status: 'idle',
|
|
composerOpen: true,
|
|
generatedLayerId: 'layer-generated',
|
|
placeholder: {
|
|
x: 42,
|
|
y: 56,
|
|
width: 420,
|
|
height: 420,
|
|
originalWidth: 420,
|
|
originalHeight: 420,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
resources: [
|
|
{
|
|
resourceId: 'resource-generated',
|
|
projectId: 'editor-project-default',
|
|
imageSrc: '/generated/result.png',
|
|
objectKey: 'generated/result.png',
|
|
assetObjectId: 'asset-object-result',
|
|
width: 420,
|
|
height: 420,
|
|
sourceType: 'generated',
|
|
},
|
|
],
|
|
updatedAt: '2026-06-12T00:00:01.000Z',
|
|
});
|
|
}}
|
|
>
|
|
apply completed project
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
describe('useImageCanvasProjectPersistence', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
try {
|
|
globalThis.sessionStorage?.clear();
|
|
} catch {
|
|
// ignore session storage cleanup errors in jsdom
|
|
}
|
|
loadOrCreateRecentEditorProjectMock.mockResolvedValue({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:00.000Z',
|
|
});
|
|
createEditorProjectResourceMock.mockResolvedValue({
|
|
resourceId: 'resource-added-asset-a',
|
|
projectId: 'editor-project-default',
|
|
imageSrc: '/generated-character-drafts/editor/assets/asset-a.png',
|
|
objectKey: 'generated-character-drafts/editor/assets/asset-a.png',
|
|
assetObjectId: 'asset-object-a',
|
|
width: 320,
|
|
height: 240,
|
|
sourceType: 'uploaded',
|
|
});
|
|
saveEditorProjectLayoutMock.mockResolvedValue({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:00.000Z',
|
|
});
|
|
});
|
|
|
|
it('saves appended layers with the server resource id immediately after resource creation', async () => {
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
expect(screen.getByTestId('project-title').textContent).toBe('空画布项目');
|
|
expect(screen.getByTestId('project-rename').textContent).toBe(
|
|
'空画布项目',
|
|
);
|
|
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'append' }).click();
|
|
});
|
|
|
|
expect(screen.getByTestId('layers').textContent).toBe(
|
|
'layer-a:local-layer-a:-:-:generated-character-drafts/editor/assets/asset-a.png:asset-object-a',
|
|
);
|
|
await waitFor(() => {
|
|
expect(screen.getByTestId('layers').textContent).toBe(
|
|
'layer-a:resource-added-asset-a:-:-:generated-character-drafts/editor/assets/asset-a.png:asset-object-a',
|
|
);
|
|
});
|
|
await waitFor(() => {
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
layers: expect.arrayContaining([
|
|
expect.objectContaining({
|
|
layerId: 'layer-a',
|
|
resourceId: 'resource-added-asset-a',
|
|
sourceAssetId: 'asset-a',
|
|
objectKey: 'generated-character-drafts/editor/assets/asset-a.png',
|
|
}),
|
|
]),
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
it('writes a lightweight session cache when saving layout changes', async () => {
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'append' }).click();
|
|
});
|
|
|
|
await waitFor(() => {
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
layers: expect.arrayContaining([
|
|
expect.objectContaining({
|
|
layerId: 'layer-a',
|
|
resourceId: 'resource-added-asset-a',
|
|
objectKey: 'generated-character-drafts/editor/assets/asset-a.png',
|
|
}),
|
|
]),
|
|
}),
|
|
);
|
|
});
|
|
|
|
const cachedRaw = globalThis.sessionStorage.getItem(
|
|
EDITOR_PROJECT_RECENT_SESSION_CACHE_KEY,
|
|
);
|
|
expect(cachedRaw).toBeTruthy();
|
|
expect(cachedRaw).not.toContain('data:image');
|
|
const cached = JSON.parse(cachedRaw ?? '{}') as {
|
|
project?: EditorProjectSnapshot;
|
|
};
|
|
expect(cached.project?.resources).toEqual([
|
|
expect.objectContaining({
|
|
resourceId: 'resource-added-asset-a',
|
|
imageSrc: '/generated-character-drafts/editor/assets/asset-a.png',
|
|
objectKey: 'generated-character-drafts/editor/assets/asset-a.png',
|
|
assetObjectId: 'asset-object-a',
|
|
}),
|
|
]);
|
|
});
|
|
|
|
it('loads and saves viewport scale with display zoom semantics', async () => {
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
expect(screen.getByTestId('viewport').textContent).toBe('0,0,0.5');
|
|
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'append server resource' }).click();
|
|
});
|
|
|
|
await waitFor(() => {
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
it('does not create a project resource again for backend-persisted generated layers', async () => {
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'append server resource' }).click();
|
|
});
|
|
|
|
expect(screen.getByTestId('layers').textContent).toBe(
|
|
'layer-server-resource:resource-from-generation-bff:-:-:-:-',
|
|
);
|
|
expect(createEditorProjectResourceMock).not.toHaveBeenCalled();
|
|
await waitFor(() => {
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
layers: expect.arrayContaining([
|
|
expect.objectContaining({
|
|
layerId: 'layer-server-resource',
|
|
resourceId: 'resource-from-generation-bff',
|
|
sourceType: 'generated',
|
|
}),
|
|
]),
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
it('persists generated layer metadata on the project resource and restores it from resources', async () => {
|
|
loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
|
|
projectId: 'editor-project-default',
|
|
title: '已有角色项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
layerId: 'layer-character',
|
|
resourceId: 'resource-character',
|
|
title: '角色形象',
|
|
x: 10,
|
|
y: 20,
|
|
width: 320,
|
|
height: 240,
|
|
originalWidth: 320,
|
|
originalHeight: 240,
|
|
zIndex: 3,
|
|
sourceType: 'generated',
|
|
},
|
|
],
|
|
resources: [
|
|
{
|
|
resourceId: 'resource-character',
|
|
projectId: 'editor-project-default',
|
|
imageSrc: '/generated/character.png',
|
|
objectKey: 'generated/character.png',
|
|
assetObjectId: 'asset-object-character',
|
|
width: 320,
|
|
height: 240,
|
|
sourceType: 'generated',
|
|
assetKind: 'character',
|
|
generationInputs: {
|
|
fields: [{ title: '角色设定', value: '银发游侠' }],
|
|
references: [],
|
|
},
|
|
},
|
|
],
|
|
updatedAt: '2026-06-12T00:00:00.000Z',
|
|
});
|
|
createEditorProjectResourceMock.mockResolvedValueOnce({
|
|
resourceId: 'resource-character-new',
|
|
projectId: 'editor-project-default',
|
|
imageSrc: '/generated/character-new.png',
|
|
objectKey: 'generated/character-new.png',
|
|
assetObjectId: 'asset-object-character-new',
|
|
width: 320,
|
|
height: 240,
|
|
sourceType: 'generated',
|
|
assetKind: 'character',
|
|
generationInputs: {
|
|
fields: [{ title: '角色设定', value: '银发游侠' }],
|
|
references: [],
|
|
},
|
|
});
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByTestId('layers').textContent).toBe(
|
|
'layer-character:resource-character:character:银发游侠:generated/character.png:asset-object-character',
|
|
);
|
|
});
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'append character' }).click();
|
|
});
|
|
|
|
await waitFor(() => {
|
|
expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
imageSrc: '/generated/character-new.png',
|
|
objectKey: 'generated/character-new.png',
|
|
assetObjectId: 'asset-object-character-new',
|
|
sourceType: 'generated',
|
|
assetKind: 'character',
|
|
generationInputs: {
|
|
fields: [{ title: '角色设定', value: '银发游侠' }],
|
|
references: [],
|
|
},
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
it('creates project resources from objectKey without posting heavy signed URLs', async () => {
|
|
createEditorProjectResourceMock.mockResolvedValueOnce({
|
|
resourceId: 'resource-private-object',
|
|
projectId: 'editor-project-default',
|
|
imageSrc: '/generated-character-drafts/editor/private.png',
|
|
objectKey: 'generated-character-drafts/editor/private.png',
|
|
width: 320,
|
|
height: 240,
|
|
sourceType: 'generated',
|
|
});
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'append private object' }).click();
|
|
});
|
|
|
|
await waitFor(() => {
|
|
expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
imageSrc: '/generated-character-drafts/editor/private.png',
|
|
objectKey: 'generated-character-drafts/editor/private.png',
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
it('saves generation dialogs in the project layout and restores them on load', async () => {
|
|
const savedDialog: CanvasGenerationDialogState = {
|
|
id: 'generation-dialog-1',
|
|
mode: 'generate',
|
|
prompt: '刷新后继续生成',
|
|
status: 'generating',
|
|
composerOpen: false,
|
|
placeholder: {
|
|
x: 42,
|
|
y: 56,
|
|
width: 420,
|
|
height: 420,
|
|
originalWidth: 2048,
|
|
originalHeight: 2048,
|
|
},
|
|
};
|
|
loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
itemType: 'generation-dialog',
|
|
layerId: 'generation-dialog:generation-dialog-1',
|
|
resourceId: 'generation-dialog:generation-dialog-1',
|
|
dialog: savedDialog,
|
|
},
|
|
],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:00.000Z',
|
|
});
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
await waitFor(() => {
|
|
expect(screen.getByTestId('generation-dialogs').textContent).toBe(
|
|
'generation-dialog-1:刷新后继续生成:42',
|
|
);
|
|
});
|
|
|
|
vi.useFakeTimers();
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'move generation' }).click();
|
|
});
|
|
expect(screen.getByTestId('generation-dialogs').textContent).toBe(
|
|
'generation-dialog-1:移动后的生成器:88',
|
|
);
|
|
act(() => {
|
|
vi.advanceTimersByTime(451);
|
|
});
|
|
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
layers: expect.arrayContaining([
|
|
expect.objectContaining({
|
|
itemType: 'generation-dialog',
|
|
dialog: expect.objectContaining({
|
|
id: 'generation-dialog-1',
|
|
prompt: '移动后的生成器',
|
|
placeholder: expect.objectContaining({ x: 88 }),
|
|
}),
|
|
}),
|
|
]),
|
|
}),
|
|
);
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
it('serializes project layout saves and only sends the latest pending snapshot while a save is running', async () => {
|
|
const savedDialog: CanvasGenerationDialogState = {
|
|
id: 'generation-dialog-1',
|
|
mode: 'generate',
|
|
prompt: '刷新后继续生成',
|
|
status: 'generating',
|
|
composerOpen: false,
|
|
placeholder: {
|
|
x: 42,
|
|
y: 56,
|
|
width: 420,
|
|
height: 420,
|
|
originalWidth: 2048,
|
|
originalHeight: 2048,
|
|
},
|
|
};
|
|
loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
itemType: 'generation-dialog',
|
|
layerId: 'generation-dialog:generation-dialog-1',
|
|
resourceId: 'generation-dialog:generation-dialog-1',
|
|
dialog: savedDialog,
|
|
},
|
|
],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:00.000Z',
|
|
});
|
|
const saveResolvers: Array<(value: unknown) => void> = [];
|
|
saveEditorProjectLayoutMock.mockImplementation(
|
|
() =>
|
|
new Promise((resolve) => {
|
|
saveResolvers.push(resolve);
|
|
}),
|
|
);
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
vi.useFakeTimers();
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'move generation' }).click();
|
|
});
|
|
act(() => {
|
|
vi.advanceTimersByTime(451);
|
|
});
|
|
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledTimes(1);
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenLastCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
layers: expect.arrayContaining([
|
|
expect.objectContaining({
|
|
itemType: 'generation-dialog',
|
|
dialog: expect.objectContaining({
|
|
id: 'generation-dialog-1',
|
|
prompt: '移动后的生成器',
|
|
placeholder: expect.objectContaining({ x: 88 }),
|
|
}),
|
|
}),
|
|
]),
|
|
}),
|
|
);
|
|
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'move generation again' }).click();
|
|
});
|
|
act(() => {
|
|
vi.advanceTimersByTime(451);
|
|
});
|
|
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledTimes(1);
|
|
|
|
await act(async () => {
|
|
saveResolvers[0]?.({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:01.000Z',
|
|
});
|
|
await Promise.resolve();
|
|
});
|
|
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledTimes(2);
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenLastCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
layers: expect.arrayContaining([
|
|
expect.objectContaining({
|
|
itemType: 'generation-dialog',
|
|
dialog: expect.objectContaining({
|
|
id: 'generation-dialog-1',
|
|
prompt: '第二次移动后的生成器',
|
|
placeholder: expect.objectContaining({ x: 120 }),
|
|
}),
|
|
}),
|
|
]),
|
|
}),
|
|
);
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
it('drops stale pending generating saves when a backend completion snapshot is applied', async () => {
|
|
const savedDialog: CanvasGenerationDialogState = {
|
|
id: 'generation-dialog-1',
|
|
mode: 'generate',
|
|
prompt: '刷新后继续生成',
|
|
status: 'generating',
|
|
composerOpen: false,
|
|
placeholder: {
|
|
x: 42,
|
|
y: 56,
|
|
width: 420,
|
|
height: 420,
|
|
originalWidth: 2048,
|
|
originalHeight: 2048,
|
|
},
|
|
};
|
|
loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
itemType: 'generation-dialog',
|
|
layerId: 'generation-dialog:generation-dialog-1',
|
|
resourceId: 'generation-dialog:generation-dialog-1',
|
|
dialog: savedDialog,
|
|
},
|
|
],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:00.000Z',
|
|
});
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
vi.useFakeTimers();
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'move generation' }).click();
|
|
});
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'apply completed project' }).click();
|
|
});
|
|
expect(screen.getByTestId('generation-dialogs').textContent).toBe(
|
|
'generation-dialog-1:后端完成生成器:42',
|
|
);
|
|
expect(screen.getByTestId('layers').textContent).toBe(
|
|
'layer-generated:resource-generated:-:-:generated/result.png:asset-object-result',
|
|
);
|
|
act(() => {
|
|
vi.advanceTimersByTime(451);
|
|
});
|
|
|
|
expect(saveEditorProjectLayoutMock).not.toHaveBeenCalled();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
it('saves generated layers together with their generator snapshots', async () => {
|
|
const savedDialog: CanvasGenerationDialogState = {
|
|
id: 'generation-dialog-1',
|
|
mode: 'generate',
|
|
prompt: '已生成也要保存生成器',
|
|
status: 'idle',
|
|
composerOpen: true,
|
|
generatedLayerId: 'layer-generated',
|
|
placeholder: {
|
|
x: 70,
|
|
y: 80,
|
|
width: 420,
|
|
height: 420,
|
|
originalWidth: 2048,
|
|
originalHeight: 2048,
|
|
},
|
|
};
|
|
loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
|
|
projectId: 'editor-project-default',
|
|
title: '空画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
itemType: 'generation-dialog',
|
|
layerId: 'generation-dialog:generation-dialog-1',
|
|
resourceId: 'generation-dialog:generation-dialog-1',
|
|
dialog: savedDialog,
|
|
},
|
|
],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:00.000Z',
|
|
});
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
expect(screen.getByTestId('generation-dialogs').textContent).toBe(
|
|
'generation-dialog-1:已生成也要保存生成器:70',
|
|
);
|
|
act(() => {
|
|
screen.getByRole('button', { name: 'append generated' }).click();
|
|
});
|
|
|
|
await waitFor(() => {
|
|
expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
|
|
'editor-project-default',
|
|
expect.objectContaining({
|
|
layers: expect.arrayContaining([
|
|
expect.objectContaining({
|
|
layerId: 'layer-generated',
|
|
sourceType: 'generated',
|
|
}),
|
|
expect.objectContaining({
|
|
itemType: 'generation-dialog',
|
|
dialog: expect.objectContaining({
|
|
id: 'generation-dialog-1',
|
|
generatedLayerId: 'layer-generated',
|
|
prompt: '已生成也要保存生成器',
|
|
placeholder: expect.objectContaining({
|
|
x: 70,
|
|
width: 420,
|
|
}),
|
|
}),
|
|
}),
|
|
]),
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
it('keeps backend layout as the project truth when loading generating dialogs', async () => {
|
|
loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
|
|
projectId: 'editor-project-default',
|
|
title: '角色画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
itemType: 'generation-dialog',
|
|
layerId: 'generation-dialog:generation-dialog-4',
|
|
resourceId: 'generation-dialog:generation-dialog-4',
|
|
dialog: {
|
|
id: 'generation-dialog-4',
|
|
mode: 'character',
|
|
prompt: '挥舞武器',
|
|
status: 'generating',
|
|
composerOpen: false,
|
|
imageModel: 'gpt-image-2',
|
|
placeholder: {
|
|
x: 2851,
|
|
y: -521,
|
|
width: 1024,
|
|
height: 1024,
|
|
originalWidth: 1024,
|
|
originalHeight: 1024,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
resources: [
|
|
{
|
|
resourceId: 'editor-resource-character',
|
|
projectId: 'editor-project-default',
|
|
imageSrc: '/api/assets/read-url?objectKey=character.png',
|
|
objectKey:
|
|
'generated-character-drafts/editor/character-images/vector-engine-edit/image.png',
|
|
assetObjectId: 'asset-object-character',
|
|
width: 1254,
|
|
height: 1254,
|
|
sourceType: 'generated',
|
|
prompt: '挥舞武器',
|
|
actualPrompt: '挥舞武器',
|
|
model: 'gpt-image-2',
|
|
provider: 'VectorEngine',
|
|
taskId: 'vector-engine-edit-1',
|
|
assetKind: 'character',
|
|
generationInputs: {
|
|
fields: [{ title: '角色设定', value: '挥舞武器' }],
|
|
references: [],
|
|
},
|
|
updatedAt: '2026-06-21T12:16:22.000Z',
|
|
},
|
|
],
|
|
updatedAt: '2026-06-21T12:15:00.000Z',
|
|
});
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
expect(await screen.findByText('editor-project-default')).toBeTruthy();
|
|
expect(screen.getByTestId('layers').textContent).toBe('');
|
|
expect(screen.getByTestId('generation-dialogs').textContent).toBe(
|
|
'generation-dialog-4:挥舞武器:2851',
|
|
);
|
|
expect(saveEditorProjectLayoutMock).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('restores a cached lightweight snapshot before backend load without autosaving it', async () => {
|
|
const backendProjectLoad = createDeferred<EditorProjectSnapshot>();
|
|
loadOrCreateRecentEditorProjectMock.mockReturnValueOnce(
|
|
backendProjectLoad.promise,
|
|
);
|
|
globalThis.sessionStorage.setItem(
|
|
EDITOR_PROJECT_RECENT_SESSION_CACHE_KEY,
|
|
JSON.stringify({
|
|
cachedAt: Date.now(),
|
|
project: {
|
|
projectId: 'editor-project-default',
|
|
title: '缓存画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [
|
|
{
|
|
layerId: 'layer-cache',
|
|
resourceId: 'resource-cache',
|
|
title: '缓存素材',
|
|
x: 10,
|
|
y: 20,
|
|
width: 320,
|
|
height: 240,
|
|
originalWidth: 320,
|
|
originalHeight: 240,
|
|
zIndex: 1,
|
|
sourceType: 'uploaded',
|
|
},
|
|
],
|
|
resources: [
|
|
{
|
|
resourceId: 'resource-cache',
|
|
projectId: 'editor-project-default',
|
|
imageSrc: '/generated/cache.png',
|
|
objectKey: 'generated/cache.png',
|
|
width: 320,
|
|
height: 240,
|
|
sourceType: 'uploaded',
|
|
},
|
|
],
|
|
updatedAt: '2026-06-12T00:00:01.000Z',
|
|
} satisfies EditorProjectSnapshot,
|
|
}),
|
|
);
|
|
|
|
render(<ProjectPersistenceHarness />);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByTestId('project-title').textContent).toBe(
|
|
'缓存画布项目',
|
|
);
|
|
});
|
|
expect(screen.getByTestId('layers').textContent).toBe(
|
|
'layer-cache:resource-cache:-:-:generated/cache.png:-',
|
|
);
|
|
expect(saveEditorProjectLayoutMock).not.toHaveBeenCalled();
|
|
|
|
await act(async () => {
|
|
backendProjectLoad.resolve({
|
|
projectId: 'editor-project-default',
|
|
title: '后端画布项目',
|
|
viewport: { x: 0, y: 0, scale: 1 },
|
|
layers: [],
|
|
resources: [],
|
|
updatedAt: '2026-06-12T00:00:02.000Z',
|
|
});
|
|
await backendProjectLoad.promise;
|
|
});
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByTestId('project-title').textContent).toBe(
|
|
'后端画布项目',
|
|
);
|
|
});
|
|
expect(screen.getByTestId('layers').textContent).toBe('');
|
|
expect(saveEditorProjectLayoutMock).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('does not load protected project data before login is available', () => {
|
|
render(<ProjectPersistenceHarness canAccessProtectedData={false} />);
|
|
|
|
expect(loadOrCreateRecentEditorProjectMock).not.toHaveBeenCalled();
|
|
expect(loadEditorProjectMock).not.toHaveBeenCalled();
|
|
expect(screen.getByTestId('project-id').textContent).toBe('-');
|
|
});
|
|
});
|