收口拼图首访输入与错误提示

将拼图首访提示词文本域迁移到 PlatformTextField 将拼图首访输入错误和登录保存错误迁移到 PlatformStatusMessage 补充拼图首访输入和错误提示公共组件断言更新 PlatformUiKit 文档和 Hermes 决策记录
2026-06-10 13:57:38 +08:00
parent 448b0697ee
commit 71690c3aaa
4 changed files with 162 additions and 8 deletions
@@ -0,0 +1,132 @@
+/* @vitest-environment jsdom */
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { expect, test, vi } from 'vitest';
+
+import {
+  PuzzleOnboardingLoginOverlay,
+  PuzzleOnboardingView,
+  type PuzzleOnboardingPhase,
+} from './PuzzleOnboardingView';
+
+function renderOnboarding({
+  prompt = '月亮糖果工厂',
+  phase = 'input',
+  error = null,
+  onPromptChange = vi.fn(),
+  onSubmit = vi.fn(),
+  onSkip = vi.fn(),
+}: {
+  prompt?: string;
+  phase?: PuzzleOnboardingPhase;
+  error?: string | null;
+  onPromptChange?: (value: string) => void;
+  onSubmit?: () => void;
+  onSkip?: () => void;
+} = {}) {
+  render(
+    <PuzzleOnboardingView
+      prompt={prompt}
+      phase={phase}
+      error={error}
+      copy="把梦做成拼图"
+      onPromptChange={onPromptChange}
+      onSubmit={onSubmit}
+      onSkip={onSkip}
+    />,
+  );
+
+  return { onPromptChange, onSubmit, onSkip };
+}
+
+test('PuzzleOnboardingView uses shared dark textarea and error status chrome', () => {
+  const { onPromptChange } = renderOnboarding({
+    error: '拼图生成失败',
+  });
+
+  const textarea = screen.getByPlaceholderText('把你的梦讲给我听吧');
+  fireEvent.change(textarea, { target: { value: '一座会唱歌的城堡' } });
+
+  expect(textarea.tagName).toBe('TEXTAREA');
+  expect(textarea.className).toContain('platform-text-field--editor-dark');
+  expect(textarea.className).toContain('min-h-32');
+  expect(onPromptChange).toHaveBeenCalledWith('一座会唱歌的城堡');
+  expect(screen.getByText('拼图生成失败').className).toContain(
+    'platform-status-message',
+  );
+  expect(screen.getByText('拼图生成失败').className).toContain(
+    'border-rose-300/15',
+  );
+});
+
+test('PuzzleOnboardingView preserves submit, skip, and disabled phase behavior', () => {
+  const { onSubmit, onSkip } = renderOnboarding();
+
+  fireEvent.click(screen.getByRole('button', { name: '生成' }));
+  fireEvent.click(screen.getByRole('button', { name: '跳过' }));
+
+  expect(onSubmit).toHaveBeenCalledTimes(1);
+  expect(onSkip).toHaveBeenCalledTimes(1);
+
+  cleanup();
+  renderOnboarding({ prompt: '', phase: 'input' });
+  expect(screen.getByRole('button', { name: '生成' })).toHaveProperty(
+    'disabled',
+    true,
+  );
+
+  cleanup();
+  renderOnboarding({ phase: 'generating' });
+  expect(screen.getByPlaceholderText('把你的梦讲给我听吧')).toHaveProperty(
+    'disabled',
+    true,
+  );
+  expect(screen.getByRole('button', { name: '跳过' })).toHaveProperty(
+    'disabled',
+    true,
+  );
+
+  cleanup();
+  renderOnboarding({ phase: 'generated' });
+  expect(screen.getByPlaceholderText('把你的梦讲给我听吧')).toHaveProperty(
+    'disabled',
+    true,
+  );
+  expect(screen.getByRole('button', { name: '生成' })).toHaveProperty(
+    'disabled',
+    true,
+  );
+});
+
+test('PuzzleOnboardingLoginOverlay uses shared error status and keeps login action', () => {
+  const onLogin = vi.fn();
+  const { rerender } = render(
+    <PuzzleOnboardingLoginOverlay
+      isSaving={false}
+      error="保存首访拼图失败"
+      copy="登录后保存你的拼图"
+      onLogin={onLogin}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: '注册账号 / 登录' }));
+
+  expect(onLogin).toHaveBeenCalledTimes(1);
+  expect(screen.getByText('保存首访拼图失败').className).toContain(
+    'platform-status-message',
+  );
+
+  rerender(
+    <PuzzleOnboardingLoginOverlay
+      isSaving
+      error={null}
+      copy="登录后保存你的拼图"
+      onLogin={onLogin}
+    />,
+  );
+
+  expect(screen.getByRole('button', { name: '注册账号 / 登录' })).toHaveProperty(
+    'disabled',
+    true,
+  );
+});