抓大鹅F3实现

src/components/match3d-runtime/Match3DRuntimeShell.test.tsx

@@ -0,0 +1,68 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, test, vi } from 'vitest';
+
+import type {
+  Match3DClickItemRequest,
+  Match3DRunSnapshot,
+} from '../../../packages/shared/src/contracts/match3dRuntime';
+import {
+  confirmLocalMatch3DClick,
+  startLocalMatch3DRun,
+} from '../../services/match3d-runtime';
+import { Match3DRuntimeShell } from './Match3DRuntimeShell';
+
+function renderRuntime(run: Match3DRunSnapshot) {
+  let currentRun = run;
+  let authorityRun = run;
+  const onClickItem = vi.fn(async (payload: Match3DClickItemRequest) => {
+    const result = await confirmLocalMatch3DClick(authorityRun, payload);
+    authorityRun = result.run;
+    return result;
+  });
+  const onOptimisticRunChange = vi.fn((nextRun: Match3DRunSnapshot) => {
+    currentRun = nextRun;
+    rerender(
+      <Match3DRuntimeShell
+        run={currentRun}
+        onBack={vi.fn()}
+        onRestart={vi.fn()}
+        onOptimisticRunChange={onOptimisticRunChange}
+        onClickItem={onClickItem}
+      />,
+    );
+  });
+  const { rerender } = render(
+    <Match3DRuntimeShell
+      run={currentRun}
+      onBack={vi.fn()}
+      onRestart={vi.fn()}
+      onOptimisticRunChange={onOptimisticRunChange}
+      onClickItem={onClickItem}
+    />,
+  );
+  return {
+    onClickItem,
+    onOptimisticRunChange,
+  };
+}
+
+test('展示圆形空间和 7 格备选栏', () => {
+  renderRuntime(startLocalMatch3DRun(4));
+
+  expect(screen.getByTestId('match3d-board')).toBeTruthy();
+  expect(screen.getAllByTestId('match3d-tray-slot')).toHaveLength(7);
+});
+
+test('点击可见物品后先乐观入槽再等待确认', async () => {
+  const run = startLocalMatch3DRun(4);
+  const clickableItem = run.items.find((item) => item.clickable);
+  expect(clickableItem).toBeTruthy();
+  const { onClickItem, onOptimisticRunChange } = renderRuntime(run);
+
+  fireEvent.click(screen.getByTestId(`match3d-item-${clickableItem!.itemInstanceId}`));
+
+  expect(onOptimisticRunChange).toHaveBeenCalled();
+  await waitFor(() => expect(onClickItem).toHaveBeenCalledTimes(1));
+});