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

/* @vitest-environment jsdom */

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

import { AuthUiContext } from '../auth/AuthUiContext';
import { setPlainTextEditorValue } from '../common/AutoGrowTextArea.test-utils';
import { ImageCanvasEditGenerationModalView } from './ImageCanvasEditGenerationModalView';
import type { GenerateDialogState } from './ImageCanvasEditorTypes';

const DARK_AUTH_UI_VALUE = {
  platformTheme: 'dark',
} as ComponentProps<typeof AuthUiContext.Provider>['value'];

function withDarkAuthUi(children: ReactNode) {
  return (
    <AuthUiContext.Provider value={DARK_AUTH_UI_VALUE}>
      {children}
    </AuthUiContext.Provider>
  );
}

function createDialog(
  patch: Partial<GenerateDialogState> = {},
): GenerateDialogState {
  return {
    mode: 'edit',
    prompt: '旧修改提示',
    status: 'idle',
    sourceLayerId: 'layer-a',
    imageModel: 'gpt-image-2',
    imageSize: '1K',
    ...patch,
  };
}

function EditGenerationModalHarness({
  initialDialog = createDialog(),
  onSubmit = vi.fn(),
}: {
  initialDialog?: GenerateDialogState | null;
  onSubmit?: (dialog: GenerateDialogState) => void;
}) {
  const [dialog, setDialog] = useState<GenerateDialogState | null>(
    initialDialog,
  );

  return (
    <div>
      <ImageCanvasEditGenerationModalView
        dialog={dialog}
        setGenerateDialog={setDialog}
        onSubmit={onSubmit}
      />
      <output aria-label="弹窗状态">{dialog ? 'open' : 'closed'}</output>
      <output aria-label="当前提示词">{dialog?.prompt ?? '-'}</output>
    </div>
  );
}

describe('ImageCanvasEditGenerationModalView', () => {
  it('updates prompt and submits edit generation', () => {
    const submitEdit = vi.fn();
    render(
      withDarkAuthUi(<EditGenerationModalHarness onSubmit={submitEdit} />),
    );

    const modal = screen
      .getAllByRole('dialog', { name: '修改图片' })
      .find((element) => element.classList.contains('platform-modal-shell'));
    expect(modal?.parentElement?.className).toContain('platform-theme--light');
    expect(modal?.parentElement?.className).not.toContain(
      'platform-theme--dark',
    );
    setPlainTextEditorValue(screen.getByLabelText('生成提示词'), '新的修改提示');
    fireEvent.click(screen.getByRole('button', { name: '修改3泥点' }));

    expect(screen.getByLabelText('当前提示词').textContent).toBe(
      '新的修改提示',
    );
    expect(submitEdit).toHaveBeenCalledWith(
      expect.objectContaining({ prompt: '新的修改提示' }),
    );
  });

  it('renders failure state and closes through the modal close button', () => {
    render(
      <EditGenerationModalHarness
        initialDialog={createDialog({
          status: 'failed',
          errorMessage: '修改失败',
        })}
      />,
    );

    expect(screen.getByRole('alert').textContent).toContain('修改失败');

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

    expect(screen.getByLabelText('弹窗状态').textContent).toBe('closed');
  });

  it('stays hidden for non-edit dialogs and generating edit dialogs', () => {
    const { rerender } = render(
      <EditGenerationModalHarness
        initialDialog={createDialog({ mode: 'generate' })}
      />,
    );

    expect(screen.queryByRole('dialog', { name: '修改图片' })).toBeNull();

    rerender(
      <EditGenerationModalHarness
        initialDialog={createDialog({ status: 'generating' })}
      />,
    );

    expect(screen.queryByRole('dialog', { name: '修改图片' })).toBeNull();
  });
});