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

/* @vitest-environment jsdom */

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

import { setPlainTextEditorValue } from '../common/AutoGrowTextArea.test-utils';
import type {
  CharacterReferenceImage,
  QuickEditPanelState,
  UploadTarget,
} from './ImageCanvasEditorTypes';
import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';

function QuickEditPanelHarness({
  initialPanel,
  onSubmit = vi.fn(),
  onRequestUpload = vi.fn(),
  onRememberImageModel = vi.fn(),
  promptActionSlot,
}: {
  initialPanel: QuickEditPanelState;
  onSubmit?: () => void;
  onRequestUpload?: (target: UploadTarget) => void;
  onRememberImageModel?: (model: string) => void;
  promptActionSlot?: ReactNode;
}) {
  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}
        style={{ left: 10, top: 20 }}
        referenceButtonRef={referenceButtonRef}
        isReferenceMenuOpen={isReferenceMenuOpen}
        setIsReferenceMenuOpen={setIsReferenceMenuOpen}
        setIsPickingQuickEditReferenceFromCanvas={setIsPickingReference}
        renderEditorPortal={(node) => node}
        onRequestUpload={onRequestUpload}
        onRememberImageModel={onRememberImageModel}
        setQuickEditPanel={setPanel}
        onSubmit={onSubmit}
        promptActionSlot={promptActionSlot}
      />
      <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}
      />,
    );

    setPlainTextEditorValue(screen.getByLabelText('快速编辑提示词'), '新提示');

    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('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();
  });

  it('forwards the host prompt action slot and keeps it absent by default', () => {
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '把原图改成雨天',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gpt-image-2',
          status: 'idle',
        }}
      />,
    );
    const panel = screen.getByRole('dialog', { name: '快速编辑图片' });
    expect(panel.querySelector('.test-quick-edit-slot')).toBeNull();

    cleanup();
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '把原图改成雨天',
          size: '1024x1024',
          aspectRatio: '1:1',
          imageSize: '1K',
          model: 'gpt-image-2',
          status: 'idle',
        }}
        promptActionSlot={
          <button type="button" className="test-quick-edit-slot">
            AI 润色
          </button>
        }
      />,
    );

    const panelWithSlot = screen.getByRole('dialog', { name: '快速编辑图片' });
    const prompt = within(panelWithSlot).getByRole('textbox', {
      name: '快速编辑提示词',
    });
    const slot = panelWithSlot.querySelector('.test-quick-edit-slot');
    expect(within(panelWithSlot).getByRole('button', { name: 'AI 润色' })).toBe(
      slot,
    );
    expect(
      prompt.compareDocumentPosition(slot!) & Node.DOCUMENT_POSITION_FOLLOWING,
    ).toBeTruthy();
  });
});