1

src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx

@@ -53,6 +53,16 @@ function renderPuzzleRuntime(
   );
 }
 
+function dispatchPointerEvent(
+  target: HTMLElement,
+  type: string,
+  options: { pointerId: number; clientX: number; clientY: number },
+) {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.assign(event, options);
+  target.dispatchEvent(event);
+}
+
 const clearedRun: PuzzleRunSnapshot = {
   runId: 'run-1',
   entryProfileId: 'profile-1',
@@ -159,12 +169,15 @@ test('通关后显示结算弹窗、排行榜和下一关按钮', () => {
   vi.useRealTimers();
 });
 
-test('关闭通关弹窗后保留底部下一关入口', () => {
-  vi.useFakeTimers();
+test('顶部作者显示头像昵称，底部功能居中放大且不显示等待候选', () => {
+  const runWithoutNext: PuzzleRunSnapshot = {
+    ...clearedRun,
+    recommendedNextProfileId: null,
+  };
 
   renderPuzzleRuntime(
     <PuzzleRuntimeShell
-      run={clearedRun}
+      run={runWithoutNext}
       onBack={vi.fn()}
       onSwapPieces={vi.fn()}
       onDragPiece={vi.fn()}
@@ -172,13 +185,125 @@ test('关闭通关弹窗后保留底部下一关入口', () => {
     />,
   );
 
+  const avatar = screen.getByText('测');
+  const timer = screen.getByText('4:48');
+  const hintButton = screen.getByRole('button', { name: '提示' });
+  const referenceButton = screen.getByRole('button', { name: '原图' });
+  const freezeButton = screen.getByRole('button', { name: '冻结' });
+
+  expect(avatar.className).toContain('rounded-full');
+  expect(screen.getByText('测试作者')).toBeTruthy();
+  expect(timer.className).toContain('text-2xl');
+  expect(hintButton.className).toContain('h-16');
+  expect(referenceButton.className).toContain('h-16');
+  expect(freezeButton.className).toContain('h-16');
+  expect(screen.queryByText('等待下一关候选')).toBeNull();
+});
+
+test('关闭通关弹窗后保留底部下一关入口', () => {
+  vi.useFakeTimers();
+  const onAdvanceNextLevel = vi.fn();
+  const runWithoutRecommendedNextProfile: PuzzleRunSnapshot = {
+    ...clearedRun,
+    recommendedNextProfileId: null,
+    nextLevelMode: 'sameWork',
+    nextLevelProfileId: 'profile-1',
+    nextLevelId: 'puzzle-level-2',
+    recommendedNextWorks: [],
+  };
+
+  renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={runWithoutRecommendedNextProfile}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={onAdvanceNextLevel}
+    />,
+  );
+
   act(() => {
     vi.advanceTimersByTime(1_400);
   });
   fireEvent.click(screen.getByRole('button', { name: '关闭通关弹窗' }));
 
   expect(screen.queryByRole('dialog', { name: '通关完成' })).toBeNull();
-  expect(screen.getByRole('button', { name: /下一关/u })).toBeTruthy();
+  const nextButton = screen.getByRole('button', { name: /下一关/u });
+  expect(nextButton).toBeTruthy();
+
+  fireEvent.click(nextButton);
+
+  expect(onAdvanceNextLevel).toHaveBeenCalledTimes(1);
+  expect(onAdvanceNextLevel).toHaveBeenCalledWith({
+    profileId: 'profile-1',
+    levelId: 'puzzle-level-2',
+  });
+  vi.useRealTimers();
+});
+
+test('当前作品没有下一关时展示三个相似作品并可选择进入', () => {
+  vi.useFakeTimers();
+  const onAdvanceNextLevel = vi.fn();
+  const similarWorksRun: PuzzleRunSnapshot = {
+    ...clearedRun,
+    recommendedNextProfileId: 'profile-similar-1',
+    nextLevelMode: 'similarWorks',
+    nextLevelProfileId: 'profile-similar-1',
+    nextLevelId: null,
+    recommendedNextWorks: [
+      {
+        profileId: 'profile-similar-1',
+        levelName: '雾海遗迹',
+        authorDisplayName: '星桥旅人',
+        themeTags: ['奇幻', '遗迹'],
+        coverImageSrc: null,
+        similarityScore: 0.91,
+      },
+      {
+        profileId: 'profile-similar-2',
+        levelName: '风塔试炼',
+        authorDisplayName: '晨风',
+        themeTags: ['奇幻', '机关'],
+        coverImageSrc: null,
+        similarityScore: 0.84,
+      },
+      {
+        profileId: 'profile-similar-3',
+        levelName: '月井秘路',
+        authorDisplayName: '月井守望',
+        themeTags: ['秘境', '魔法'],
+        coverImageSrc: null,
+        similarityScore: 0.79,
+      },
+    ],
+  };
+
+  renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={similarWorksRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={onAdvanceNextLevel}
+    />,
+  );
+
+  act(() => {
+    vi.advanceTimersByTime(1_400);
+  });
+
+  const dialog = screen.getByRole('dialog', { name: '通关完成' });
+  expect(within(dialog).getByText('雾海遗迹')).toBeTruthy();
+  expect(within(dialog).getByText('风塔试炼')).toBeTruthy();
+  expect(within(dialog).getByText('月井秘路')).toBeTruthy();
+  expect(within(dialog).queryByRole('button', { name: '下一关' })).toBeNull();
+
+  fireEvent.click(within(dialog).getByRole('button', { name: /风塔试炼/u }));
+
+  expect(onAdvanceNextLevel).toHaveBeenCalledTimes(1);
+  expect(onAdvanceNextLevel).toHaveBeenCalledWith({
+    profileId: 'profile-similar-2',
+  });
   vi.useRealTimers();
 });
 
@@ -326,6 +451,106 @@ test('基础单块使用圆角裁剪图片', () => {
   expect(basePiece?.className).toContain('rounded-[0.85rem]');
 });
 
+test('移动端点击拼图片时立即触发一次震动反馈', () => {
+  const originalVibrate = navigator.vibrate;
+  const originalRequestAnimationFrame = window.requestAnimationFrame;
+  const originalCancelAnimationFrame = window.cancelAnimationFrame;
+  const vibrate = vi.fn();
+  const playingRun: PuzzleRunSnapshot = {
+    ...clearedRun,
+    currentLevel: {
+      ...clearedRun.currentLevel!,
+      status: 'playing',
+      startedAtMs: Date.now(),
+      board: {
+        ...clearedRun.currentLevel!.board,
+        allTilesResolved: false,
+      },
+    },
+  };
+
+  Object.defineProperty(navigator, 'vibrate', {
+    configurable: true,
+    value: vibrate,
+  });
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    value: vi.fn(() => 1),
+  });
+  Object.defineProperty(window, 'cancelAnimationFrame', {
+    configurable: true,
+    value: vi.fn(),
+  });
+
+  const { container, unmount } = renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={playingRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+  const piece = container.querySelector(
+    '[data-piece-id="piece-0"]',
+  ) as HTMLElement | null;
+  if (!piece) {
+    throw new Error('缺少测试拼图片');
+  }
+
+  act(() => {
+    dispatchPointerEvent(piece, 'pointerdown', {
+      pointerId: 1,
+      clientX: 100,
+      clientY: 100,
+    });
+  });
+
+  expect(vibrate).toHaveBeenCalledTimes(1);
+  expect(vibrate).toHaveBeenCalledWith([12]);
+
+  act(() => {
+    dispatchPointerEvent(piece, 'pointermove', {
+      pointerId: 1,
+      clientX: 104,
+      clientY: 104,
+    });
+  });
+
+  expect(vibrate).toHaveBeenCalledTimes(1);
+
+  act(() => {
+    dispatchPointerEvent(piece, 'pointermove', {
+      pointerId: 1,
+      clientX: 112,
+      clientY: 100,
+    });
+  });
+  act(() => {
+    dispatchPointerEvent(piece, 'pointermove', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 100,
+    });
+  });
+
+  expect(vibrate).toHaveBeenCalledTimes(1);
+
+  unmount();
+  Object.defineProperty(navigator, 'vibrate', {
+    configurable: true,
+    value: originalVibrate,
+  });
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    value: originalRequestAnimationFrame,
+  });
+  Object.defineProperty(window, 'cancelAnimationFrame', {
+    configurable: true,
+    value: originalCancelAnimationFrame,
+  });
+});
+
 test('道具确认弹窗暂停时间，提示只演示不直接移动拼块', async () => {
   const onPauseChange = vi.fn();
   const onUseProp = vi.fn().mockResolvedValue(clearedRun);