Genarrative/src/components/SelectionCustomizationModals.test.tsx

/* @vitest-environment jsdom */

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

import { createEmptyCustomWorldCreatorIntent } from '../services/customWorldCreatorIntent';
import {
  CharacterDraftModal,
  CustomWorldCreatorModal,
} from './SelectionCustomizationModals';

test('角色自定义错误提示复用暗色 PlatformStatusMessage chrome', () => {
  render(
    <CharacterDraftModal
      isOpen
      characterLabel="试剑客"
      draftName="沈行"
      draftBackstory="旧雨里走来的人。"
      error="名字不能为空。"
      onNameChange={vi.fn()}
      onBackstoryChange={vi.fn()}
      onClose={vi.fn()}
      onConfirm={vi.fn()}
    />,
  );

  const errorMessage = screen.getByText('名字不能为空。');
  const cancelButton = screen.getByRole('button', { name: '取消' });
  const confirmButton = screen.getByRole('button', { name: '确认进入' });
  const closeButton = screen.getByRole('button', { name: '关闭角色自定义' });
  const currentCharacterPanel = screen.getByText('当前角色：试剑客');
  const nameInput = screen.getByLabelText('角色名字');
  const backstoryTextarea = screen.getByLabelText('背景补充');
  const footer = screen.getByTestId('selection-modal-footer');

  expect(errorMessage.className).toContain('platform-status-message');
  expect(errorMessage.className).toContain('border-rose-300/15');
  expect(errorMessage.className).toContain('bg-rose-500/10');
  expect(errorMessage.className).toContain('text-rose-50/90');
  expect(nameInput.className).toContain('platform-text-field--editor-dark');
  expect(nameInput.className).toContain('focus:border-emerald-400/40');
  expect(backstoryTextarea.className).toContain(
    'platform-text-field--editor-dark',
  );
  expect(backstoryTextarea.className).toContain('resize-none');
  expect(cancelButton.className).toContain(
    'platform-action-button--editor-dark',
  );
  expect(cancelButton.className).toContain('bg-white/5');
  expect(confirmButton.className).toContain(
    'platform-action-button--editor-dark',
  );
  expect(confirmButton.className).toContain('bg-emerald-400');
  expect(closeButton.className).toContain(
    'platform-modal-close-button--editor-dark',
  );
  expect(footer.className).toContain('platform-dark-modal-footer');
  expect(footer.className).toContain('border-t');
  expect(currentCharacterPanel.className).toContain('border-white/10');
  expect(currentCharacterPanel.className).toContain('bg-black/25');
});

test('自定义世界生成提示复用暗色状态条和平台进度条', () => {
  render(
    <CustomWorldCreatorModal
      isOpen
      draft="雾海边境。"
      isGenerating
      progress={42.4}
      progressLabel="正在生成世界"
      error="生成失败，请重试。"
      onDraftChange={vi.fn()}
      onClose={vi.fn()}
      onSubmit={vi.fn()}
    />,
  );

  const progressMessage = screen
    .getByText('正在生成世界')
    .closest('.platform-status-message');
  const errorMessage = screen.getByText('生成失败，请重试。');
  const progressbar = screen.getByRole('progressbar', {
    name: '自定义世界生成进度',
  });
  const generatingButton = screen.getByRole('button', { name: '生成中...' });
  const draftTextarea = screen.getByPlaceholderText(
    '例：一个被潮雾与失落列岛切碎的边境世界，旧盟约、沉船秘术与灯塔守望者纠缠在一起……',
  );

  expect(progressMessage?.className).toContain('border-sky-300/15');
  expect(progressMessage?.className).toContain('bg-sky-500/10');
  expect(errorMessage.className).toContain('platform-status-message');
  expect(errorMessage.className).toContain('border-rose-300/15');
  expect(progressbar.className).toContain('platform-progress-track');
  expect(progressbar.getAttribute('aria-valuenow')).toBe('42');
  expect(generatingButton.className).toContain(
    'platform-action-button--editor-dark',
  );
  expect(generatingButton.className).toContain('bg-sky-400');
  expect(generatingButton.hasAttribute('disabled')).toBe(true);
  expect(draftTextarea.className).toContain('platform-text-field--editor-dark');
  expect(draftTextarea.className).toContain('focus:border-sky-400/40');
});

test('自定义世界生成模式选择复用暗色平台输入框', () => {
  render(
    <CustomWorldCreatorModal
      isOpen
      creatorIntent={{
        ...createEmptyCustomWorldCreatorIntent('card'),
        rawSettingText: '雾海边境。',
      }}
      generationMode="fast"
      isGenerating={false}
      progress={0}
      progressLabel=""
      onCreatorIntentChange={vi.fn()}
      onGenerationModeChange={vi.fn()}
      onClose={vi.fn()}
      onSubmit={vi.fn()}
    />,
  );

  const modeSelect = screen.getByLabelText('生成模式');

  expect(modeSelect.className).toContain('platform-text-field--editor-dark');
  expect(modeSelect.className).toContain('focus:border-sky-400/40');
});