1

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

@@ -1,9 +1,10 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { expect, test, vi } from 'vitest';
 
 import type { PuzzleRunSnapshot } from '../../../packages/shared/src/contracts/puzzleRuntimeSession';
+import { AuthUiContext } from '../auth/AuthUiContext';
 import { PuzzleRuntimeShell } from './PuzzleRuntimeShell';
 
 vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
@@ -18,6 +19,34 @@ vi.mock('../ResolvedAssetImage', () => ({
   ResolvedAssetImage: () => null,
 }));
 
+function createAuthValue() {
+  return {
+    user: null,
+    canAccessProtectedData: false,
+    openLoginModal: () => {},
+    requireAuth: (action: () => void) => action(),
+    openSettingsModal: () => {},
+    openAccountModal: () => {},
+    logout: async () => {},
+    musicVolume: 0.42,
+    setMusicVolume: vi.fn(),
+    platformTheme: 'light' as const,
+    setPlatformTheme: vi.fn(),
+    isHydratingSettings: false,
+    isPersistingSettings: false,
+    settingsError: null,
+  };
+}
+
+function renderPuzzleRuntime(
+  ui: React.ReactElement,
+  authValue = createAuthValue(),
+) {
+  return render(
+    <AuthUiContext.Provider value={authValue}>{ui}</AuthUiContext.Provider>,
+  );
+}
+
 const clearedRun: PuzzleRunSnapshot = {
   runId: 'run-1',
   entryProfileId: 'profile-1',
@@ -85,9 +114,10 @@ const clearedRun: PuzzleRunSnapshot = {
 };
 
 test('通关后显示结算弹窗、排行榜和下一关按钮', () => {
+  vi.useFakeTimers();
   const onAdvanceNextLevel = vi.fn();
 
-  render(
+  renderPuzzleRuntime(
     <PuzzleRuntimeShell
       run={clearedRun}
       onBack={vi.fn()}
@@ -97,6 +127,13 @@ test('通关后显示结算弹窗、排行榜和下一关按钮', () => {
     />,
   );
 
+  expect(screen.queryByRole('dialog', { name: '通关完成' })).toBeNull();
+  expect(screen.getByTestId('puzzle-clear-flash')).toBeTruthy();
+
+  act(() => {
+    vi.advanceTimersByTime(1_400);
+  });
+
   const dialog = screen.getByRole('dialog', { name: '通关完成' });
   expect(within(dialog).getAllByText('0:12.34').length).toBeGreaterThan(0);
   expect(within(dialog).getByText('排行榜')).toBeTruthy();
@@ -106,10 +143,13 @@ test('通关后显示结算弹窗、排行榜和下一关按钮', () => {
   fireEvent.click(within(dialog).getByRole('button', { name: '下一关' }));
 
   expect(onAdvanceNextLevel).toHaveBeenCalledTimes(1);
+  vi.useRealTimers();
 });
 
 test('关闭通关弹窗后保留底部下一关入口', () => {
-  render(
+  vi.useFakeTimers();
+
+  renderPuzzleRuntime(
     <PuzzleRuntimeShell
       run={clearedRun}
       onBack={vi.fn()}
@@ -119,8 +159,91 @@ test('关闭通关弹窗后保留底部下一关入口', () => {
     />,
   );
 
+  act(() => {
+    vi.advanceTimersByTime(1_400);
+  });
   fireEvent.click(screen.getByRole('button', { name: '关闭通关弹窗' }));
 
   expect(screen.queryByRole('dialog', { name: '通关完成' })).toBeNull();
   expect(screen.getByRole('button', { name: /下一关/u })).toBeTruthy();
+  vi.useRealTimers();
+});
+
+test('右上角设置按钮打开拼图设置并支持音量调节', () => {
+  const authValue = createAuthValue();
+
+  renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={clearedRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+    authValue,
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: '打开拼图设置' }));
+
+  const dialog = screen.getByRole('dialog', { name: '拼图设置' });
+  const slider = within(dialog).getByRole('slider', { name: '拼图音乐音量' });
+  fireEvent.change(slider, { target: { value: '77' } });
+
+  expect(within(dialog).getByText('第 1 关')).toBeTruthy();
+  expect(authValue.setMusicVolume).toHaveBeenCalledWith(0.77);
+});
+
+test('合并块按实际拼块外轮廓描边', () => {
+  const mergedRun: PuzzleRunSnapshot = {
+    ...clearedRun,
+    currentLevel: {
+      ...clearedRun.currentLevel!,
+      status: 'playing',
+      board: {
+        ...clearedRun.currentLevel!.board,
+        allTilesResolved: false,
+        mergedGroups: [
+          {
+            groupId: 'group-l',
+            pieceIds: ['piece-0', 'piece-1', 'piece-3'],
+            occupiedCells: [
+              { row: 0, col: 0 },
+              { row: 0, col: 1 },
+              { row: 1, col: 0 },
+            ],
+          },
+        ],
+        pieces: clearedRun.currentLevel!.board.pieces.map((piece) =>
+          ['piece-0', 'piece-1', 'piece-3'].includes(piece.pieceId)
+            ? { ...piece, mergedGroupId: 'group-l' }
+            : piece,
+        ),
+      },
+    },
+  };
+
+  const { container } = renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={mergedRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+  const outlinedPieces = container.querySelectorAll(
+    '[data-merged-piece-outline="true"]',
+  );
+
+  expect(outlinedPieces).toHaveLength(3);
+  expect(container.querySelector('.ring-2.ring-emerald-100\\/58')).toBeNull();
+  expect(outlinedPieces[0]?.className).toContain('border-r-0');
+  expect(outlinedPieces[0]?.className).toContain('border-b-0');
+  expect(outlinedPieces[0]?.className).toContain('rounded-tl-[0.85rem]');
+  expect(outlinedPieces[0]?.className).toContain('rounded-tr-none');
+  expect(outlinedPieces[0]?.className).toContain('rounded-bl-none');
+  expect(outlinedPieces[1]?.className).toContain('border-l-0');
+  expect(outlinedPieces[1]?.className).toContain('rounded-tr-[0.85rem]');
+  expect(outlinedPieces[2]?.className).toContain('border-t-0');
+  expect(outlinedPieces[2]?.className).toContain('rounded-bl-[0.85rem]');
 });