Genarrative/src/components/image-editor/ImageCanvasReferenceSlot.test.tsx

/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';

import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';

const useResolvedAssetReadUrlMock = vi.hoisted(() => vi.fn());

vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
  useResolvedAssetReadUrl: useResolvedAssetReadUrlMock,
}));

describe('ImageCanvasReferenceSlot', () => {
  beforeEach(() => {
    useResolvedAssetReadUrlMock.mockImplementation(
      (
        source: string | null | undefined,
        options?: { objectKey?: string | null },
      ) => ({
        resolvedUrl: options?.objectKey
          ? `https://oss.example.com/${options.objectKey}?signature=1`
          : (source ?? ''),
        isResolving: false,
        shouldResolve: Boolean(options?.objectKey),
      }),
    );
  });

  it('resolves private generated reference thumbnails through objectKey', () => {
    const { container } = render(
      <ImageCanvasReferenceSlot
        tone="character"
        icon={<span data-testid="fallback-icon" />}
        imageSrc="/generated-character-drafts/editor/legacy-resources/stale.png"
        objectKey="generated-character-drafts/editor/legacy-resources/editor-resource-1.png"
        label="角色参考"
        ariaLabel="角色参考"
      />,
    );

    const image = container.querySelector('img');

    expect(useResolvedAssetReadUrlMock).toHaveBeenCalledWith(
      '/generated-character-drafts/editor/legacy-resources/stale.png',
      expect.objectContaining({
        objectKey:
          'generated-character-drafts/editor/legacy-resources/editor-resource-1.png',
      }),
    );
    expect(image?.getAttribute('src')).toBe(
      'https://oss.example.com/generated-character-drafts/editor/legacy-resources/editor-resource-1.png?signature=1',
    );
  });

  it('keeps an explicitly marked reference remove action visible', () => {
    render(
      <ImageCanvasReferenceSlot
        icon={<span />}
        imageSrc="/reference.png"
        label="参考图1"
        ariaLabel="参考图1"
        onRemove={vi.fn()}
        alwaysShowRemove
      />,
    );

    expect(
      screen.getByRole('button', { name: '删除参考图1' }).className,
    ).toContain('image-canvas-editor__reference-chip-remove--always-visible');
  });
});