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

/* @vitest-environment jsdom */

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

import type {
  CanvasLayer,
  CharacterReferenceImage,
  QuickEditPanelState,
  UploadTarget,
} 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(),
  onRequestUpload = vi.fn(),
  onRememberImageModel = vi.fn(),
}: {
  initialPanel: QuickEditPanelState;
  onSubmit?: () => void;
  onRequestUpload?: (target: UploadTarget) => void;
  onRememberImageModel?: (model: string) => void;
}) {
  const [panel, setPanel] = useState<QuickEditPanelState | null>(initialPanel);
  const [isReferenceMenuOpen, setIsReferenceMenuOpen] = useState(false);
  const [isPickingReference, setIsPickingReference] = useState(false);
  const referenceButtonRef = useRef<HTMLButtonElement | null>(null);

  return panel ? (
    <div>
      <ImageCanvasQuickEditPanelView
        panel={panel}
        sourceLayer={createLayer()}
        style={{ left: 10, top: 20 }}
        referenceButtonRef={referenceButtonRef}
        isReferenceMenuOpen={isReferenceMenuOpen}
        setIsReferenceMenuOpen={setIsReferenceMenuOpen}
        setIsPickingQuickEditReferenceFromCanvas={setIsPickingReference}
        renderEditorPortal={(node) => node}
        onRequestUpload={onRequestUpload}
        onRememberImageModel={onRememberImageModel}
        setQuickEditPanel={setPanel}
        onSubmit={onSubmit}
      />
      <output aria-label="当前提示词">{panel.prompt}</output>
      <output aria-label="当前尺寸">{panel.size}</output>
      <output aria-label="当前比例">{panel.aspectRatio ?? '-'}</output>
      <output aria-label="当前图片规格">{panel.imageSize ?? '-'}</output>
      <output aria-label="当前模型">{panel.model}</output>
      <output aria-label="当前状态">{panel.status}</output>
      <output aria-label="当前错误">{panel.errorMessage ?? '-'}</output>
      <output aria-label="参考图数量">
        {panel.quickEditReferences?.length ?? 0}
      </output>
      <output aria-label="画布选择参考图">
        {isPickingReference ? 'picking' : 'idle'}
      </output>
    </div>
  ) : (
    <output aria-label="面板状态">closed</output>
  );
}

describe('ImageCanvasQuickEditPanelView', () => {
  it('updates prompt and clears failed state while keeping model editable', () => {
    const rememberImageModel = vi.fn();
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '旧提示',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gemini-3.1-flash-image-preview',
          status: 'failed',
          errorMessage: '失败原因',
        }}
        onRememberImageModel={rememberImageModel}
      />,
    );

    fireEvent.change(screen.getByLabelText('快速编辑提示词'), {
      target: { value: '新提示' },
    });

    expect(screen.getByPlaceholderText('你希望素材如何修改？')).toBeTruthy();
    expect(screen.getByLabelText('当前提示词').textContent).toBe('新提示');
    expect(screen.getByLabelText('当前尺寸').textContent).toBe('1024x1024');
    expect(screen.getByLabelText('当前模型').textContent).toBe(
      'gemini-3.1-flash-image-preview',
    );
    expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
    expect(screen.getByLabelText('当前错误').textContent).toBe('-');
    expect(
      screen.getByRole('button', { name: '快速编辑尺寸 1:1·1K' }),
    ).toBeTruthy();

    fireEvent.click(
      screen.getByRole('button', { name: '快速编辑模型 nanobanana2' }),
    );
    expect(screen.getByRole('button', { name: 'nanobanana2' })).toBeTruthy();
    fireEvent.click(screen.getByRole('button', { name: 'gpt-image-2' }));
    expect(screen.getByLabelText('当前模型').textContent).toBe('gpt-image-2');
    expect(rememberImageModel).toHaveBeenCalledWith('gpt-image-2');
  });

  it('renders the failure message inside the quick edit alert', () => {
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '调整图集布局',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gpt-image-2',
          status: 'failed',
          errorMessage: '图集快速编辑失败',
        }}
      />,
    );

    expect(screen.getByRole('alert').textContent).toContain(
      '图集快速编辑失败',
    );
  });

  it('submits without rendering a standalone close button', () => {
    const submitQuickEdit = vi.fn();
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '提示',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'nano',
          status: 'idle',
        }}
        onSubmit={submitQuickEdit}
      />,
    );

    fireEvent.click(screen.getByRole('button', { name: '修改' }));

    expect(submitQuickEdit).toHaveBeenCalledTimes(1);
    expect(
      screen.queryByRole('button', { name: '关闭快速编辑图片' }),
    ).toBeNull();
  });

  it('shows configured mud point price inside redraw submit button', () => {
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '重绘提示',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gpt-image-2',
          status: 'idle',
          mode: 'redraw',
        }}
      />,
    );

    expect(screen.getByRole('button', { name: '生成' }).textContent).toBe(
      '生成3泥点',
    );
  });

  it('hides quick edit references from the simplified panel', () => {
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '把原图改成雨天',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gpt-image-2',
          status: 'failed',
          errorMessage: '失败原因',
          quickEditReferences: [
            { id: 'ref-1', label: '天空参考', src: '/sky.png' },
          ],
        }}
      />,
    );

    expect(screen.queryByLabelText('图1')).toBeNull();
    expect(screen.queryByLabelText('原图 图2')).toBeNull();
    expect(
      screen.queryByRole('button', { name: '添加快速编辑参考图' }),
    ).toBeNull();
    expect(screen.getByLabelText('参考图数量').textContent).toBe('1');
  });

  it('does not expose quick edit reference pick actions', () => {
    const requestUpload = vi.fn();
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '提示',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gpt-image-2',
          status: 'idle',
          quickEditReferences: [],
        }}
        onRequestUpload={requestUpload}
      />,
    );

    expect(
      screen.queryByRole('button', { name: '添加快速编辑参考图' }),
    ).toBeNull();
    expect(requestUpload).not.toHaveBeenCalled();
    expect(screen.getByLabelText('画布选择参考图').textContent).toBe('idle');
  });

  it('keeps quick edit reference controls hidden even with many references', () => {
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '提示',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gpt-image-2',
          status: 'idle',
          quickEditReferences: Array.from({ length: 8 }, (_, index) => ({
            id: `ref-${index}`,
            label: `参考${index + 1}`,
            src: `/ref-${index}.png`,
          })) satisfies CharacterReferenceImage[],
        }}
      />,
    );

    expect(
      screen.queryByRole('button', {
        name: '添加快速编辑参考图',
      }),
    ).toBeNull();
    expect(screen.queryByLabelText('原图 图9')).toBeNull();
  });
});