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

/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';
import { describe, expect, it } from 'vitest';

import type { GenerateDialogState } from './ImageCanvasEditorTypes';
import { ImageCanvasSceneStyleControl } from './ImageCanvasSceneStyleControl';

function SceneStyleControlHarness() {
  const [dialog, setDialog] = useState<GenerateDialogState | null>({
    mode: 'scene',
    prompt: '',
    status: 'idle',
    sceneStylePreset: 'anime',
  });

  return dialog ? (
    <ImageCanvasSceneStyleControl
      dialog={dialog}
      setGenerateDialog={setDialog}
      renderEditorPortal={(node) => node}
      buildPortalMenuStyle={() => ({ position: 'fixed', left: 0, top: 0 })}
    />
  ) : null;
}

describe('ImageCanvasSceneStyleControl', () => {
  it('仅在指针停留于对应预览按钮时挂载一张预览图', async () => {
    const user = userEvent.setup();
    render(<SceneStyleControlHarness />);

    await user.click(screen.getByRole('button', { name: '画风预设 日系动画' }));

    expect(screen.queryByRole('img')).toBeNull();

    const animePreviewButton = screen.getByRole('button', {
      name: '预览日系动画画风',
    });
    await user.hover(animePreviewButton);

    expect(
      screen.getByRole('img', { name: '日系动画固定画风预览' }),
    ).toBeTruthy();
    expect(screen.getAllByRole('img')).toHaveLength(1);

    await user.unhover(animePreviewButton);

    expect(screen.queryByRole('img')).toBeNull();
  });

  it('键盘聚焦预览按钮时挂载图片，焦点离开后卸载', async () => {
    const user = userEvent.setup();
    render(<SceneStyleControlHarness />);

    await user.click(screen.getByRole('button', { name: '画风预设 日系动画' }));
    await user.tab();
    await user.tab();

    const animePreviewButton = screen.getByRole('button', {
      name: '预览日系动画画风',
    });
    expect(document.activeElement).toBe(animePreviewButton);
    expect(
      screen.getByRole('img', { name: '日系动画固定画风预览' }),
    ).toBeTruthy();

    await user.tab();

    expect(document.activeElement).toBe(
      screen.getByRole('menuitemradio', { name: /清透水彩/u }),
    );
    expect(screen.queryByRole('img')).toBeNull();
  });
});