764 lines
21 KiB
TypeScript
764 lines
21 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { act, render, screen, within } from '@testing-library/react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import type { BabyObjectMatchDraft } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
|
|
import {
|
|
BABY_OBJECT_MATCH_EDUTAINMENT_TAG,
|
|
BABY_OBJECT_MATCH_TEMPLATE_ID,
|
|
BABY_OBJECT_MATCH_TEMPLATE_NAME,
|
|
} from '../../../packages/shared/src/contracts/edutainmentBabyObject';
|
|
import type { UseMocapInputResult } from '../../services/useMocapInput';
|
|
import { BabyObjectMatchRuntimeShell } from './BabyObjectMatchRuntimeShell';
|
|
|
|
vi.mock('../ResolvedAssetImage', () => ({
|
|
ResolvedAssetImage: ({
|
|
src,
|
|
alt,
|
|
className,
|
|
'data-testid': dataTestId,
|
|
}: {
|
|
src?: string | null;
|
|
alt?: string;
|
|
className?: string;
|
|
'data-testid'?: string;
|
|
}) =>
|
|
src ? (
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className={className}
|
|
data-testid={dataTestId}
|
|
/>
|
|
) : null,
|
|
}));
|
|
|
|
vi.mock('../../services/useMocapInput', () => ({
|
|
useMocapInput: () => ({
|
|
status: 'idle',
|
|
latestCommand: null,
|
|
rawPacketPreview: null,
|
|
error: null,
|
|
}),
|
|
}));
|
|
|
|
function createDraft(): BabyObjectMatchDraft {
|
|
return {
|
|
draftId: 'baby-object-draft-1',
|
|
profileId: 'baby-object-profile-1',
|
|
templateId: BABY_OBJECT_MATCH_TEMPLATE_ID,
|
|
templateName: BABY_OBJECT_MATCH_TEMPLATE_NAME,
|
|
workTitle: '宝贝识物',
|
|
workDescription: '苹果和香蕉识物分类',
|
|
itemNames: ['苹果', '香蕉'],
|
|
itemAssets: [
|
|
{
|
|
itemId: 'baby-object-item-1',
|
|
itemName: '苹果',
|
|
imageSrc: 'data:image/svg+xml;utf8,apple',
|
|
assetObjectId: null,
|
|
generationProvider: 'placeholder',
|
|
prompt: '苹果',
|
|
},
|
|
{
|
|
itemId: 'baby-object-item-2',
|
|
itemName: '香蕉',
|
|
imageSrc: 'data:image/svg+xml;utf8,banana',
|
|
assetObjectId: null,
|
|
generationProvider: 'placeholder',
|
|
prompt: '香蕉',
|
|
},
|
|
],
|
|
visualPackage: null,
|
|
themeTags: [BABY_OBJECT_MATCH_EDUTAINMENT_TAG, '宝贝识物'],
|
|
publicationStatus: 'published',
|
|
createdAt: '2026-05-11T00:00:00.000Z',
|
|
updatedAt: '2026-05-11T00:00:00.000Z',
|
|
publishedAt: '2026-05-11T00:00:00.000Z',
|
|
};
|
|
}
|
|
|
|
function createVisualPackageDraft(): BabyObjectMatchDraft {
|
|
return {
|
|
...createDraft(),
|
|
visualPackage: {
|
|
themePrompt: '果园主题',
|
|
assets: [
|
|
{
|
|
assetId: 'baby-object-visual-background',
|
|
assetKind: 'background',
|
|
imageSrc: 'data:image/png;base64,background',
|
|
assetObjectId: null,
|
|
generationProvider: 'vector-engine-gpt-image-2',
|
|
prompt: '背景',
|
|
},
|
|
{
|
|
assetId: 'baby-object-visual-ui-frame',
|
|
assetKind: 'ui-frame',
|
|
imageSrc: 'data:image/png;base64,ui',
|
|
assetObjectId: null,
|
|
generationProvider: 'vector-engine-gpt-image-2',
|
|
prompt: 'UI',
|
|
},
|
|
{
|
|
assetId: 'baby-object-visual-gift-box',
|
|
assetKind: 'gift-box',
|
|
imageSrc: 'data:image/png;base64,gift',
|
|
assetObjectId: null,
|
|
generationProvider: 'vector-engine-gpt-image-2',
|
|
prompt: '礼盒',
|
|
},
|
|
{
|
|
assetId: 'baby-object-visual-basket',
|
|
assetKind: 'basket',
|
|
imageSrc: 'data:image/png;base64,basket',
|
|
assetObjectId: null,
|
|
generationProvider: 'vector-engine-gpt-image-2',
|
|
prompt: '篮子',
|
|
},
|
|
{
|
|
assetId: 'baby-object-visual-smoke-puff',
|
|
assetKind: 'smoke-puff',
|
|
imageSrc: 'data:image/png;base64,smoke',
|
|
assetObjectId: null,
|
|
generationProvider: 'vector-engine-gpt-image-2',
|
|
prompt: '烟雾',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
}
|
|
|
|
function createMocapInput(
|
|
overrides: Partial<UseMocapInputResult> = {},
|
|
): UseMocapInputResult {
|
|
return {
|
|
status: 'connected',
|
|
latestCommand: null,
|
|
rawPacketPreview: null,
|
|
error: null,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function createRandomSequence(values: number[]) {
|
|
let index = 0;
|
|
return () => {
|
|
const value = values[index] ?? values[values.length - 1] ?? 0;
|
|
index += 1;
|
|
return value;
|
|
};
|
|
}
|
|
|
|
function dispatchPointerEvent(
|
|
target: HTMLElement,
|
|
type: string,
|
|
options: {
|
|
pointerId: number;
|
|
button?: number;
|
|
clientX: number;
|
|
clientY: number;
|
|
},
|
|
) {
|
|
const event = new Event(type, { bubbles: true, cancelable: true });
|
|
Object.assign(event, options);
|
|
target.dispatchEvent(event);
|
|
}
|
|
|
|
function dragHand(stage: HTMLElement, button: 0 | 2) {
|
|
Object.defineProperty(stage, 'getBoundingClientRect', {
|
|
configurable: true,
|
|
value: () => ({
|
|
x: 0,
|
|
y: 0,
|
|
left: 0,
|
|
top: 0,
|
|
right: 320,
|
|
bottom: 240,
|
|
width: 320,
|
|
height: 240,
|
|
toJSON: () => ({}),
|
|
}),
|
|
});
|
|
|
|
act(() => {
|
|
dispatchPointerEvent(stage, 'pointerdown', {
|
|
pointerId: button + 1,
|
|
button,
|
|
clientX: 20,
|
|
clientY: 140,
|
|
});
|
|
});
|
|
act(() => {
|
|
dispatchPointerEvent(stage, 'pointermove', {
|
|
pointerId: button + 1,
|
|
button,
|
|
clientX: 120,
|
|
clientY: 140,
|
|
});
|
|
});
|
|
act(() => {
|
|
dispatchPointerEvent(stage, 'pointerup', {
|
|
pointerId: button + 1,
|
|
button,
|
|
clientX: 120,
|
|
clientY: 140,
|
|
});
|
|
});
|
|
}
|
|
|
|
async function advanceRoundIntro() {
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(620);
|
|
});
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(640);
|
|
});
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(620);
|
|
});
|
|
}
|
|
|
|
async function advanceFeedback() {
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(1200);
|
|
});
|
|
}
|
|
|
|
test('shows the first gift item after gift and item animations', async () => {
|
|
vi.useFakeTimers();
|
|
render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={createRandomSequence([0, 0])}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText('将物品放入对应的篮子里')).toBeTruthy();
|
|
expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
|
|
|
|
await advanceRoundIntro();
|
|
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
|
|
).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('applies generated visual package to stage, gift box, baskets, smoke and hud', async () => {
|
|
vi.useFakeTimers();
|
|
const { container } = render(
|
|
<BabyObjectMatchRuntimeShell draft={createVisualPackageDraft()} />,
|
|
);
|
|
const stage = container.querySelector('.baby-object-runtime__stage');
|
|
if (!(stage instanceof HTMLElement)) {
|
|
throw new Error('Missing baby object runtime stage');
|
|
}
|
|
|
|
expect(stage.classList.contains('baby-object-runtime__stage--skinned')).toBe(
|
|
true,
|
|
);
|
|
expect(
|
|
screen
|
|
.getByTestId('baby-object-background-image')
|
|
.getAttribute('src'),
|
|
).toBe('data:image/png;base64,background');
|
|
expect(
|
|
stage.style.getPropertyValue('--baby-object-ui-frame-image'),
|
|
).toContain('ui');
|
|
expect(stage.style.getPropertyValue('--baby-object-smoke-image')).toContain(
|
|
'smoke',
|
|
);
|
|
expect(screen.getByAltText('礼物盒')).toBeTruthy();
|
|
expect(
|
|
container.querySelector('.baby-object-runtime__basket-shell-image'),
|
|
).toBeTruthy();
|
|
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(620);
|
|
});
|
|
|
|
expect(screen.getByTestId('baby-object-smoke-effect')).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('removes the gift box after smoke releases the current item', async () => {
|
|
vi.useFakeTimers();
|
|
render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createVisualPackageDraft()}
|
|
random={createRandomSequence([0])}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByLabelText('礼物盒')).toBeTruthy();
|
|
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(620);
|
|
});
|
|
|
|
expect(screen.getByLabelText('礼物盒')).toBeTruthy();
|
|
expect(screen.getByTestId('baby-object-smoke-effect')).toBeTruthy();
|
|
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(640);
|
|
});
|
|
|
|
expect(screen.queryByLabelText('礼物盒')).toBeNull();
|
|
expect(screen.getByTestId('baby-object-smoke-effect')).toBeTruthy();
|
|
|
|
await act(async () => {
|
|
await vi.advanceTimersByTimeAsync(620);
|
|
});
|
|
|
|
expect(screen.queryByLabelText('礼物盒')).toBeNull();
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
|
|
).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('keeps left and right baskets fixed while only the gift item is random', async () => {
|
|
vi.useFakeTimers();
|
|
render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={createRandomSequence([0.99])}
|
|
/>,
|
|
);
|
|
|
|
await advanceRoundIntro();
|
|
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('香蕉'),
|
|
).toBeTruthy();
|
|
expect(screen.getByLabelText('左侧篮子 苹果')).toBeTruthy();
|
|
expect(screen.getByLabelText('右侧篮子 香蕉')).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('mocap camera-right hand movement sends the player left hand item into the left basket', async () => {
|
|
vi.useFakeTimers();
|
|
const random = createRandomSequence([0, 0]);
|
|
const { rerender } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput()}
|
|
/>,
|
|
);
|
|
|
|
await advanceRoundIntro();
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.22, y: 0.45, state: 'open_palm', side: 'right' }],
|
|
primaryHand: { x: 0.22, y: 0.45, state: 'open_palm', side: 'right' },
|
|
leftHand: null,
|
|
rightHand: { x: 0.22, y: 0.45, state: 'open_palm', side: 'right' },
|
|
},
|
|
rawPacketPreview: {
|
|
text: 'camera-right-horizontal-1',
|
|
receivedAtMs: 1,
|
|
},
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.24, y: 0.45, state: 'open_palm', side: 'right' }],
|
|
primaryHand: { x: 0.24, y: 0.45, state: 'open_palm', side: 'right' },
|
|
leftHand: null,
|
|
rightHand: { x: 0.24, y: 0.45, state: 'open_palm', side: 'right' },
|
|
},
|
|
rawPacketPreview: {
|
|
text: 'camera-right-horizontal-2',
|
|
receivedAtMs: 2,
|
|
},
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.22, y: 0.45, state: 'open_palm', side: 'right' }],
|
|
primaryHand: { x: 0.22, y: 0.45, state: 'open_palm', side: 'right' },
|
|
leftHand: null,
|
|
rightHand: { x: 0.22, y: 0.45, state: 'open_palm', side: 'right' },
|
|
},
|
|
rawPacketPreview: {
|
|
text: 'camera-right-horizontal-3',
|
|
receivedAtMs: 3,
|
|
},
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByText('真棒')).toBeNull();
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.31, y: 0.45, state: 'open_palm', side: 'right' }],
|
|
primaryHand: { x: 0.31, y: 0.45, state: 'open_palm', side: 'right' },
|
|
leftHand: null,
|
|
rightHand: { x: 0.31, y: 0.45, state: 'open_palm', side: 'right' },
|
|
},
|
|
rawPacketPreview: {
|
|
text: 'camera-right-horizontal-4',
|
|
receivedAtMs: 4,
|
|
},
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText('真棒')).toBeTruthy();
|
|
expect(screen.getByLabelText('成功次数').textContent).toBe('1/20');
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('mocap camera-left hand movement sends the player right hand item into the right basket', async () => {
|
|
vi.useFakeTimers();
|
|
const random = createRandomSequence([0, 0]);
|
|
const { rerender } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput()}
|
|
/>,
|
|
);
|
|
|
|
await advanceRoundIntro();
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.82, y: 0.45, state: 'open_palm', side: 'left' }],
|
|
primaryHand: { x: 0.82, y: 0.45, state: 'open_palm', side: 'left' },
|
|
leftHand: { x: 0.82, y: 0.45, state: 'open_palm', side: 'left' },
|
|
rightHand: null,
|
|
},
|
|
rawPacketPreview: { text: 'camera-left-horizontal-1', receivedAtMs: 1 },
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.8, y: 0.45, state: 'open_palm', side: 'left' }],
|
|
primaryHand: { x: 0.8, y: 0.45, state: 'open_palm', side: 'left' },
|
|
leftHand: { x: 0.8, y: 0.45, state: 'open_palm', side: 'left' },
|
|
rightHand: null,
|
|
},
|
|
rawPacketPreview: { text: 'camera-left-horizontal-2', receivedAtMs: 2 },
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.82, y: 0.45, state: 'open_palm', side: 'left' }],
|
|
primaryHand: { x: 0.82, y: 0.45, state: 'open_palm', side: 'left' },
|
|
leftHand: { x: 0.82, y: 0.45, state: 'open_palm', side: 'left' },
|
|
rightHand: null,
|
|
},
|
|
rawPacketPreview: { text: 'camera-left-horizontal-3', receivedAtMs: 3 },
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByText('再想一想吧')).toBeNull();
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x: 0.73, y: 0.45, state: 'open_palm', side: 'left' }],
|
|
primaryHand: { x: 0.73, y: 0.45, state: 'open_palm', side: 'left' },
|
|
leftHand: { x: 0.73, y: 0.45, state: 'open_palm', side: 'left' },
|
|
rightHand: null,
|
|
},
|
|
rawPacketPreview: { text: 'camera-left-horizontal-4', receivedAtMs: 4 },
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText('再想一想吧')).toBeTruthy();
|
|
expect(screen.getByLabelText('成功次数').textContent).toBe('0/20');
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('mocap action names do not select a basket without horizontal hand movement', async () => {
|
|
vi.useFakeTimers();
|
|
const random = createRandomSequence([0, 0]);
|
|
const { rerender } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput()}
|
|
/>,
|
|
);
|
|
|
|
await advanceRoundIntro();
|
|
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: ['wave_left_hand', 'wave_right_hand', 'wave'],
|
|
hands: [{ x: 0.5, y: 0.5, state: 'open_palm', side: 'left' }],
|
|
primaryHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
|
|
leftHand: { x: 0.5, y: 0.5, state: 'open_palm', side: 'left' },
|
|
rightHand: null,
|
|
},
|
|
rawPacketPreview: { text: 'action-only-wave', receivedAtMs: 1 },
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByText('真棒')).toBeNull();
|
|
expect(screen.queryByText('再想一想吧')).toBeNull();
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
|
|
).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('mocap unknown hand horizontal movement does not select a basket', async () => {
|
|
vi.useFakeTimers();
|
|
const random = createRandomSequence([0, 0]);
|
|
const { rerender } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput()}
|
|
/>,
|
|
);
|
|
|
|
await advanceRoundIntro();
|
|
|
|
for (let index = 0; index < 4; index += 1) {
|
|
const x = [0.22, 0.24, 0.22, 0.31][index] ?? 0.22;
|
|
rerender(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={random}
|
|
mocapInput={createMocapInput({
|
|
latestCommand: {
|
|
actions: [],
|
|
hands: [{ x, y: 0.45, state: 'open_palm', side: 'unknown' }],
|
|
primaryHand: { x, y: 0.45, state: 'open_palm', side: 'unknown' },
|
|
leftHand: null,
|
|
rightHand: null,
|
|
},
|
|
rawPacketPreview: {
|
|
text: `unknown-horizontal-${index + 1}`,
|
|
receivedAtMs: index + 1,
|
|
},
|
|
})}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
expect(screen.queryByText('真棒')).toBeNull();
|
|
expect(screen.queryByText('再想一想吧')).toBeNull();
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
|
|
).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('left hand horizontal drag sends a correct item into the left basket', async () => {
|
|
vi.useFakeTimers();
|
|
const { container } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={createRandomSequence([0, 0])}
|
|
/>,
|
|
);
|
|
const stage = container.querySelector('.baby-object-runtime__stage');
|
|
if (!(stage instanceof HTMLElement)) {
|
|
throw new Error('Missing baby object runtime stage');
|
|
}
|
|
|
|
await advanceRoundIntro();
|
|
dragHand(stage, 0);
|
|
|
|
expect(screen.getByText('真棒')).toBeTruthy();
|
|
expect(screen.getByLabelText('成功次数').textContent).toBe('1/20');
|
|
expect(screen.getByLabelText('左侧篮子 苹果').className).toContain(
|
|
'baby-object-runtime__basket--correct',
|
|
);
|
|
|
|
await advanceFeedback();
|
|
|
|
expect(screen.queryByText('真棒')).toBeNull();
|
|
expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
|
|
expect(screen.getByLabelText('礼物盒')).toBeTruthy();
|
|
|
|
await advanceRoundIntro();
|
|
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
|
|
).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('ignores drag input until the item animation finishes', async () => {
|
|
vi.useFakeTimers();
|
|
const { container } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={createRandomSequence([0, 0])}
|
|
/>,
|
|
);
|
|
const stage = container.querySelector('.baby-object-runtime__stage');
|
|
if (!(stage instanceof HTMLElement)) {
|
|
throw new Error('Missing baby object runtime stage');
|
|
}
|
|
|
|
dragHand(stage, 0);
|
|
|
|
expect(screen.queryByText('真棒')).toBeNull();
|
|
expect(screen.getByLabelText('成功次数').textContent).toBe('0/20');
|
|
|
|
await advanceRoundIntro();
|
|
dragHand(stage, 0);
|
|
|
|
expect(screen.getByText('真棒')).toBeTruthy();
|
|
expect(screen.getByLabelText('成功次数').textContent).toBe('1/20');
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('correct placement automatically shows the next gift item', async () => {
|
|
vi.useFakeTimers();
|
|
const { container } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={createRandomSequence([0, 0.99])}
|
|
/>,
|
|
);
|
|
const stage = container.querySelector('.baby-object-runtime__stage');
|
|
if (!(stage instanceof HTMLElement)) {
|
|
throw new Error('Missing baby object runtime stage');
|
|
}
|
|
|
|
expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
|
|
|
|
await advanceRoundIntro();
|
|
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
|
|
).toBeTruthy();
|
|
|
|
dragHand(stage, 0);
|
|
|
|
expect(screen.getByText('真棒')).toBeTruthy();
|
|
|
|
await advanceFeedback();
|
|
|
|
expect(screen.queryByText('真棒')).toBeNull();
|
|
expect(screen.getByTestId('baby-object-current-item').textContent).toBe('');
|
|
|
|
await advanceRoundIntro();
|
|
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('香蕉'),
|
|
).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('wrong basket keeps the item active after feedback', async () => {
|
|
vi.useFakeTimers();
|
|
const { container } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={createRandomSequence([0, 0])}
|
|
/>,
|
|
);
|
|
const stage = container.querySelector('.baby-object-runtime__stage');
|
|
if (!(stage instanceof HTMLElement)) {
|
|
throw new Error('Missing baby object runtime stage');
|
|
}
|
|
|
|
await advanceRoundIntro();
|
|
dragHand(stage, 2);
|
|
|
|
expect(screen.getByText('再想一想吧')).toBeTruthy();
|
|
expect(screen.getByLabelText('成功次数').textContent).toBe('0/20');
|
|
|
|
await advanceFeedback();
|
|
|
|
expect(screen.queryByText('再想一想吧')).toBeNull();
|
|
expect(
|
|
within(screen.getByTestId('baby-object-current-item')).getByAltText('苹果'),
|
|
).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test('twenty correct placements completes the level', async () => {
|
|
vi.useFakeTimers();
|
|
const randomValues = Array.from({ length: 40 }, () => 0);
|
|
const { container } = render(
|
|
<BabyObjectMatchRuntimeShell
|
|
draft={createDraft()}
|
|
random={createRandomSequence(randomValues)}
|
|
/>,
|
|
);
|
|
const stage = container.querySelector('.baby-object-runtime__stage');
|
|
if (!(stage instanceof HTMLElement)) {
|
|
throw new Error('Missing baby object runtime stage');
|
|
}
|
|
|
|
for (let index = 0; index < 20; index += 1) {
|
|
await advanceRoundIntro();
|
|
dragHand(stage, 0);
|
|
await advanceFeedback();
|
|
}
|
|
|
|
expect(screen.getAllByText('恭喜你！小朋友！').length).toBeGreaterThan(0);
|
|
expect(screen.getByRole('button', { name: '再来一次' })).toBeTruthy();
|
|
expect(screen.getByRole('button', { name: '下一关' })).toBeTruthy();
|
|
vi.useRealTimers();
|
|
});
|