Genarrative/src/components/image-editor/ImageCanvasExportModel.test.ts

import { describe, expect, it, vi } from 'vitest';

import {
  buildLayerExportMetadata,
  dataUrlToBlob,
  formatExportDate,
  getImageExtensionFromTypeOrSrc,
  getLayerAssetExtensionFromTypeOrSrc,
  getLayerExportKey,
  readLayerAssetBlob,
  sanitizeExportFilePart,
} from './ImageCanvasExportModel';
import type { CanvasLayer } from './ImageCanvasEditorTypes';
import {
  DEFAULT_ICON_DESCRIPTIONS,
  UI_DESIGN_ASSET_EXTRACTION_PROMPT,
} from './ImageCanvasGenerationModel';

describe('ImageCanvasExportModel', () => {
  it('normalizes export file names and dates', () => {
    expect(sanitizeExportFilePart('  角色/草图:*?  ', 'fallback')).toBe(
      '角色 草图',
    );
    expect(sanitizeExportFilePart('   ', 'fallback')).toBe('fallback');
    expect(formatExportDate(new Date('2026-06-17T01:02:03.000Z'))).toBe(
      '20260617',
    );
  });

  it('chooses stable image export keys by persistence identity', () => {
    expect(
      getLayerExportKey({
        ...buildLayer(),
        assetObjectId: 'object-1',
        objectKey: 'object-key',
        sourceAssetId: 'asset-1',
        src: 'data:image/png;base64,one',
      }),
    ).toBe('object-1');
    expect(
      getLayerExportKey({
        ...buildLayer(),
        objectKey: 'object-key',
        sourceAssetId: 'asset-1',
        src: 'data:image/png;base64,one',
      }),
    ).toBe('object-key');
    expect(
      getLayerExportKey({
        ...buildLayer(),
        mediaType: 'image-sequence',
        taskId: 'sequence-task',
        imageSequenceFrames: [
          {
            frameIndex: 1,
            imageSrc: '/generated-character-drafts/editor/frame01.png',
            width: 1024,
            height: 1024,
          },
        ],
      }),
    ).toBe('image-sequence:sequence-task');
  });

  it('detects image extensions from content type before falling back to src', () => {
    expect(getImageExtensionFromTypeOrSrc('image/jpeg', '/image.png')).toBe(
      'jpg',
    );
    expect(getImageExtensionFromTypeOrSrc('', '/image.webp?x=1')).toBe('webp');
    expect(getImageExtensionFromTypeOrSrc('', '/image.unknown')).toBe('png');
    expect(
      getLayerAssetExtensionFromTypeOrSrc(
        'video',
        'video/mp4',
        '/video.png',
      ),
    ).toBe('mp4');
    expect(
      getLayerAssetExtensionFromTypeOrSrc(
        'video',
        '',
        '/generated-character-drafts/editor/preview.mp4',
      ),
    ).toBe('mp4');
    expect(
      getLayerAssetExtensionFromTypeOrSrc(
        'audio',
        '',
        '/generated-audios/effect.wav?token=1',
      ),
    ).toBe('wav');
    expect(
      getLayerAssetExtensionFromTypeOrSrc(
        'image-sequence',
        '',
        '/generated-character-drafts/editor/frame01.png',
      ),
    ).toBe('zip');
  });

  it('converts data URLs and builds layer metadata for manifest files', async () => {
    const blob = dataUrlToBlob('data:text/plain;base64,SGVsbG8=');
    expect(blob.type).toBe('text/plain');
    expect(await blob.text()).toBe('Hello');

    expect(buildLayerExportMetadata(buildLayer(), 'images/001-layer.png')).toEqual({
      title: '导出图层',
      file: 'images/001-layer.png',
      visible: {
        type: '生成图片',
        generationInputs: {
          fields: [{ title: '生成提示词', value: '清爽游戏按钮' }],
          references: [
            {
              title: '参考图',
              label: '角色立绘',
              refType: 'project-resource',
              refId: 'resource-reference',
            },
          ],
        },
        model: 'gpt-image-2',
        task: '1',
        object: 'generated/layer.png',
        resolution: '1024 x 1024 px',
      },
      exportError: undefined,
    });
  });

  it('filters built-in prompts from exported visible generation inputs', () => {
    const metadata = buildLayerExportMetadata(
      buildLayer({
        generationInputs: {
          fields: [
            { title: '生成提示词', value: 'AI 生成图片' },
            { title: '修改要求', value: '修改当前图片' },
            { title: 'prompt', value: '游戏音效' },
            {
              title: 'gpt_description_prompt',
              value: '游戏背景音乐',
            },
            {
              title: '提取提示词',
              value: UI_DESIGN_ASSET_EXTRACTION_PROMPT,
            },
            {
              title: '素材描述',
              value: DEFAULT_ICON_DESCRIPTIONS.join('\n'),
            },
            { title: '用户输入', value: '用户填写的视觉要求' },
            { title: '游戏分类', value: '游戏音效' },
            { title: 'duration', value: '5秒' },
          ],
          references: [],
        },
      }),
      'images/001-layer.png',
    );

    expect(metadata.visible.generationInputs).toEqual({
      fields: [
        { title: '用户输入', value: '用户填写的视觉要求' },
        { title: '游戏分类', value: '游戏音效' },
        { title: 'duration', value: '5秒' },
      ],
      references: [],
    });
  });

  it('reads private object-key assets through signed URLs before exporting', async () => {
    const originalFetch = globalThis.fetch;
    const fetchMock = vi.fn(async (url: string) => {
      if (url.startsWith('/api/assets/read-url?')) {
        return new Response(
          JSON.stringify({
            ok: true,
            data: {
              read: {
                objectKey: 'generated/video.mp4',
                signedUrl: 'https://oss.example.com/generated/video.mp4?x-oss-signature=1',
                expiresAt: '2026-06-20T00:00:00.000Z',
              },
            },
            error: null,
            meta: { apiVersion: '2026-06-16' },
          }),
        );
      }
      if (url === 'https://oss.example.com/generated/video.mp4?x-oss-signature=1') {
        return new Response(new Blob(['video'], { type: 'video/mp4' }));
      }
      return new Response(null, { status: 404 });
    });
    globalThis.fetch = fetchMock as typeof fetch;

    try {
      const blob = await readLayerAssetBlob(
        buildLayer({
          src: '/generated-editor-videos/video.mp4',
          mediaType: 'video',
          objectKey: 'generated/video.mp4',
        }),
      );

      expect(blob.type).toBe('video/mp4');
      expect(fetchMock).toHaveBeenCalledWith(
        expect.stringContaining('/api/assets/read-url?objectKey=generated%2Fvideo.mp4'),
        expect.any(Object),
      );
      expect(fetchMock).toHaveBeenCalledWith(
        'https://oss.example.com/generated/video.mp4?x-oss-signature=1',
      );
    } finally {
      globalThis.fetch = originalFetch;
    }
  });
});

function buildLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
  return {
    id: 'layer-1',
    resourceId: 'resource-1',
    title: '导出图层',
    src: 'data:image/png;base64,one',
    x: 10,
    y: 20,
    width: 512,
    height: 512,
    originalWidth: 1024,
    originalHeight: 1024,
    zIndex: 3,
    sourceType: 'generated',
    prompt: '生成提示',
    actualPrompt: '实际提示',
    model: 'gpt-image-2',
    provider: 'VectorEngine',
    taskId: 'task-1',
    objectKey: 'generated/layer.png',
    sourceResourceId: 'source-resource',
    sourceAssetId: 'asset-1',
    generationInputs: {
      fields: [{ title: '生成提示词', value: '清爽游戏按钮' }],
      references: [
        {
          title: '参考图',
          label: '角色立绘',
          refType: 'project-resource',
          refId: 'resource-reference',
        },
      ],
    },
    groupId: 'group-1',
    hidden: true,
    locked: false,
    flipX: true,
    flipY: false,
    ...overrides,
  };
}