suzmii
aad8eb2aba
Project CI / AI game creator shell Rust crates (pull_request) Successful in 3m2s
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 4m16s
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 4m49s
Project CI / Backend tests (pull_request) Successful in 7m16s
Project CI / Frontend tests (pull_request) Successful in 3m7s
Project CI / Native shell tests (pull_request) Successful in 6m59s
Project CI / AI game creator shell web tests (pull_request) Successful in 2m40s
Project CI / Repository checks (pull_request) Successful in 5m42s
- useGameReviews 新增第 3 参 publiclyVisible：非公开（game.status !== 'published'，含审核中 / 审核未通过 / 未公开 / 已下架）时 loadPage / loadMine / submit 直接 return，不置错误态 - GameReviews 两栏在非公开时渲染既有 PlatformEmptyState「暂无评价」，不出现错误块 / 重试 / 评分失败 - 封面占位文案新增 resolveNonPublicCoverLabel（pending_review → 审核中、rejected → 审核未通过，其余退回作品级文案），样式 .game-detail-cover__pending 落在本域 CSS - hero 评分与分页在非公开时不渲染 - 已公开（published）行为保持不变 - 新增行为测试：非公开时零请求 + 两栏空态 + 封面文案映射；已公开仍照常发请求
845 lines
28 KiB
TypeScript
845 lines
28 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import {
|
|
act,
|
|
cleanup,
|
|
fireEvent,
|
|
render,
|
|
screen,
|
|
waitFor,
|
|
within,
|
|
} from '@testing-library/react';
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
|
|
|
import type { GameDistributionVersionStatus } from '../../../packages/shared/src/contracts/gameDistribution';
|
|
import type {
|
|
GameDistributionGame,
|
|
GameDistributionMyGame,
|
|
GameDistributionVersionStatusEntry,
|
|
} from '../../services/gameDistributionClient';
|
|
import { GameDetailPage } from './GameDetailPage';
|
|
import { GameGalleryPage } from './GameGalleryPage';
|
|
import { GAME_PLAY_STARTUP_TIMEOUT_MS, GamePlayPage } from './GamePlayPage';
|
|
import { resolveNonPublicCoverLabel } from './gameVersionHistoryModel';
|
|
|
|
const listGamesMock = vi.hoisted(() => vi.fn());
|
|
const getGameMock = vi.hoisted(() => vi.fn());
|
|
const getMyGameMock = vi.hoisted(() => vi.fn());
|
|
const loadVersionRecoveryActionsMock = vi.hoisted(() => vi.fn());
|
|
const resolvedAssetUrlMock = vi.hoisted(() => vi.fn());
|
|
const listGameReviewsMock = vi.hoisted(() => vi.fn());
|
|
const getMyGameReviewMock = vi.hoisted(() => vi.fn());
|
|
|
|
vi.mock('../../services/gameDistributionClient', () => ({
|
|
listGames: listGamesMock,
|
|
getGame: getGameMock,
|
|
getMyGame: getMyGameMock,
|
|
loadVersionRecoveryActions: loadVersionRecoveryActionsMock,
|
|
listGameReviews: listGameReviewsMock,
|
|
getMyGameReview: getMyGameReviewMock,
|
|
}));
|
|
|
|
// 作者视角详情页要按登录身份渲染评价区，这里固定一个可访问受保护数据的用户。
|
|
vi.mock('../auth/AuthUiContext', () => ({
|
|
useAuthUi: () => ({
|
|
user: { id: 'author-1' },
|
|
canAccessProtectedData: true,
|
|
openLoginModal: vi.fn(),
|
|
}),
|
|
}));
|
|
|
|
// 只替换换签结果，测试不发起任何真实请求；返回空串即代表签名失败或字段为空。
|
|
vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
|
|
useResolvedAssetReadUrl: (
|
|
source: string | null | undefined,
|
|
options: { objectKey?: string | null } = {},
|
|
) => {
|
|
const objectKey = (options.objectKey ?? '').trim();
|
|
return {
|
|
resolvedUrl: resolvedAssetUrlMock(objectKey || (source ?? '').trim()),
|
|
isResolving: false,
|
|
shouldResolve: Boolean(objectKey || (source ?? '').trim()),
|
|
};
|
|
},
|
|
}));
|
|
|
|
function deferred<T>() {
|
|
let resolve!: (value: T) => void;
|
|
let reject!: (reason?: unknown) => void;
|
|
const promise = new Promise<T>((resolvePromise, rejectPromise) => {
|
|
resolve = resolvePromise;
|
|
reject = rejectPromise;
|
|
});
|
|
return { promise, reject, resolve };
|
|
}
|
|
|
|
function createGame(
|
|
overrides: Partial<GameDistributionGame> = {},
|
|
): GameDistributionGame {
|
|
return {
|
|
id: 'game-1',
|
|
title: '星轨防线',
|
|
summary: '守住最后一条航线。',
|
|
description: '一款测试游戏。',
|
|
category: '动作',
|
|
tags: ['测试'],
|
|
coverColor: '#d77a51',
|
|
icon: '✦',
|
|
author: { id: 'author-1', name: '测试作者' },
|
|
deviceSupport: { desktop: true, mobile: true, touch: true },
|
|
status: 'published',
|
|
publicationRevision: 1,
|
|
currentVersion: {
|
|
id: 'version-1',
|
|
version: '1.0.0',
|
|
entryUrl: 'https://play.example.test/releases/version-1/index.html',
|
|
sha256: 'sha256',
|
|
publishedAt: '2026-09-18T00:00:00.000Z',
|
|
controls: ['键盘'],
|
|
},
|
|
playCount: 12,
|
|
createdAt: '2026-09-18T00:00:00.000Z',
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function setViewportWidth(width: number) {
|
|
Object.defineProperty(window, 'innerWidth', {
|
|
configurable: true,
|
|
value: width,
|
|
writable: true,
|
|
});
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
configurable: true,
|
|
value: () => ({
|
|
addEventListener: vi.fn(),
|
|
matches: width <= 820,
|
|
removeEventListener: vi.fn(),
|
|
}),
|
|
writable: true,
|
|
});
|
|
}
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
setViewportWidth(1024);
|
|
listGamesMock.mockResolvedValue([]);
|
|
getGameMock.mockResolvedValue(createGame());
|
|
getMyGameMock.mockResolvedValue(null);
|
|
loadVersionRecoveryActionsMock.mockResolvedValue({});
|
|
listGameReviewsMock.mockResolvedValue({
|
|
reviews: [],
|
|
page: 1,
|
|
pageSize: 20,
|
|
total: 0,
|
|
totalPages: 0,
|
|
ratingSummary: { averageScore: null, ratingCount: 0 },
|
|
});
|
|
getMyGameReviewMock.mockResolvedValue({ review: null });
|
|
resolvedAssetUrlMock.mockImplementation((objectKey: string) =>
|
|
objectKey ? `https://assets.example.test/${objectKey}` : '',
|
|
);
|
|
});
|
|
|
|
describe('GameGalleryPage', () => {
|
|
it.each([
|
|
[{ averageScore: 8.2, ratingCount: 26 }, '8.2/10 · 26 人评分'],
|
|
[{ averageScore: 9, ratingCount: 1 }, '9.0/10 · 1 人评分'],
|
|
[{ averageScore: null, ratingCount: 0 }, '暂无评分'],
|
|
[undefined, '评分暂不可用'],
|
|
])('显示列表返回的评分摘要 %#', async (ratingSummary, expected) => {
|
|
listGamesMock.mockResolvedValueOnce([createGame({ ratingSummary })]);
|
|
render(<GameGalleryPage onOpenDetail={vi.fn()} />);
|
|
|
|
expect(await screen.findByText(expected)).toBeTruthy();
|
|
});
|
|
|
|
it('ignores a stale response after search keyword changes', async () => {
|
|
const first = deferred<GameDistributionGame[]>();
|
|
const second = deferred<GameDistributionGame[]>();
|
|
listGamesMock
|
|
.mockImplementationOnce(() => first.promise)
|
|
.mockImplementationOnce(() => second.promise);
|
|
const onOpenDetail = vi.fn();
|
|
const { rerender } = render(
|
|
<GameGalleryPage searchKeyword="" onOpenDetail={onOpenDetail} />,
|
|
);
|
|
|
|
await waitFor(() => expect(listGamesMock).toHaveBeenCalledTimes(1));
|
|
rerender(
|
|
<GameGalleryPage searchKeyword="新搜索" onOpenDetail={onOpenDetail} />,
|
|
);
|
|
await waitFor(() => expect(listGamesMock).toHaveBeenCalledTimes(2));
|
|
|
|
const newerGame = createGame({ id: 'game-new', title: '新搜索结果' });
|
|
second.resolve([newerGame]);
|
|
await screen.findByText('新搜索结果');
|
|
first.resolve([createGame({ id: 'game-old', title: '旧搜索结果' })]);
|
|
await waitFor(() => expect(screen.queryByText('旧搜索结果')).toBeNull());
|
|
});
|
|
});
|
|
|
|
describe('GameDetailPage', () => {
|
|
it('blocks desktop-only games on a mobile viewport', async () => {
|
|
setViewportWidth(375);
|
|
getGameMock.mockResolvedValueOnce(
|
|
createGame({
|
|
deviceSupport: { desktop: true, mobile: false, touch: false },
|
|
}),
|
|
);
|
|
render(
|
|
<GameDetailPage gameId="game-1" onBack={vi.fn()} onPlay={vi.fn()} />,
|
|
);
|
|
|
|
const playButton = await screen.findByRole('button', { name: /立即玩/u });
|
|
expect((playButton as HTMLButtonElement).disabled).toBe(true);
|
|
expect(screen.getByText('请在电脑上游玩')).toBeTruthy();
|
|
});
|
|
|
|
it('rejects an invalid query id without requesting the API', async () => {
|
|
render(<GameDetailPage gameId="" onBack={vi.fn()} onPlay={vi.fn()} />);
|
|
|
|
expect(await screen.findByText('游戏编号无效')).toBeTruthy();
|
|
expect(getGameMock).not.toHaveBeenCalled();
|
|
});
|
|
it('已发布但未标注操作方式时不谎称没有可玩版本', async () => {
|
|
getGameMock.mockResolvedValueOnce(
|
|
createGame({
|
|
currentVersion: { ...createGame().currentVersion!, controls: [] },
|
|
}),
|
|
);
|
|
render(
|
|
<GameDetailPage gameId="game-1" onBack={vi.fn()} onPlay={vi.fn()} />,
|
|
);
|
|
|
|
expect(await screen.findByText('未标注操作方式')).toBeTruthy();
|
|
expect(screen.queryByText('暂未发布可玩版本')).toBeNull();
|
|
});
|
|
|
|
it('优先展示版本声明的输入方式', async () => {
|
|
getGameMock.mockResolvedValueOnce(
|
|
createGame({
|
|
inputModes: ['keyboard', 'touch'],
|
|
currentVersion: { ...createGame().currentVersion!, controls: [] },
|
|
}),
|
|
);
|
|
render(
|
|
<GameDetailPage gameId="game-1" onBack={vi.fn()} onPlay={vi.fn()} />,
|
|
);
|
|
|
|
expect(await screen.findByText('键盘 · 触屏')).toBeTruthy();
|
|
expect(screen.queryByText('未标注操作方式')).toBeNull();
|
|
});
|
|
|
|
it('没有当前版本时才显示暂未发布可玩版本', async () => {
|
|
getGameMock.mockResolvedValueOnce(createGame({ currentVersion: null }));
|
|
render(
|
|
<GameDetailPage gameId="game-1" onBack={vi.fn()} onPlay={vi.fn()} />,
|
|
);
|
|
|
|
expect(await screen.findByText('暂未发布可玩版本')).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
describe('GameDetailPage 作者视角', () => {
|
|
const reviewVersion: GameDistributionVersionStatusEntry = {
|
|
versionId: 'version-2',
|
|
gameId: 'game-1',
|
|
versionNumber: 2,
|
|
packageSha256: 'b'.repeat(64),
|
|
packageBytes: 2048,
|
|
status: 'pending_review',
|
|
publicationRevision: 6,
|
|
reviewReason: '封面需要替换',
|
|
createdAt: '2026-09-20T08:00:00Z',
|
|
updatedAt: '2026-09-20T09:00:00Z',
|
|
};
|
|
const publishedVersion: GameDistributionVersionStatusEntry = {
|
|
versionId: 'version-1',
|
|
gameId: 'game-1',
|
|
versionNumber: 1,
|
|
packageSha256: 'c'.repeat(64),
|
|
packageBytes: 1024,
|
|
status: 'published',
|
|
publicationRevision: 5,
|
|
reviewReason: null,
|
|
createdAt: '2026-09-19T08:00:00Z',
|
|
updatedAt: '2026-09-19T09:00:00Z',
|
|
};
|
|
|
|
function createOwnerGame(
|
|
overrides: Partial<GameDistributionMyGame> = {},
|
|
): GameDistributionMyGame {
|
|
return {
|
|
...createGame({ currentVersion: null, status: 'unpublished' }),
|
|
latestVersion: reviewVersion,
|
|
versions: [reviewVersion],
|
|
...overrides,
|
|
} as GameDistributionMyGame;
|
|
}
|
|
|
|
it('走 owner 路由并展示未公开作品的私有状态，不再请求公开详情', async () => {
|
|
getMyGameMock.mockResolvedValue(createOwnerGame());
|
|
|
|
render(
|
|
<GameDetailPage
|
|
gameId="game-1"
|
|
onBack={vi.fn()}
|
|
onPlay={vi.fn()}
|
|
ownerView
|
|
/>,
|
|
);
|
|
|
|
expect(await screen.findByText('作品状态')).toBeTruthy();
|
|
expect(screen.getByText('未公开')).toBeTruthy();
|
|
expect(
|
|
screen.getByText('驳回理由：封面需要替换', {
|
|
selector: '.game-owner-panel__reason',
|
|
}),
|
|
).toBeTruthy();
|
|
expect(getMyGameMock).toHaveBeenCalledWith('game-1');
|
|
expect(getGameMock).not.toHaveBeenCalled();
|
|
|
|
const playButton = screen.getByRole('button', { name: /立即玩/u });
|
|
expect((playButton as HTMLButtonElement).disabled).toBe(true);
|
|
expect(screen.getByText('作品尚未公开，暂时没有在线可玩版本')).toBeTruthy();
|
|
});
|
|
|
|
it('未公开作品的封面显示审核中，且不请求评价与评分接口', async () => {
|
|
getMyGameMock.mockResolvedValue(createOwnerGame());
|
|
|
|
render(
|
|
<GameDetailPage
|
|
gameId="game-1"
|
|
onBack={vi.fn()}
|
|
onPlay={vi.fn()}
|
|
ownerView
|
|
/>,
|
|
);
|
|
|
|
await screen.findByText('作品状态');
|
|
|
|
// 封面位按最新版本状态给出「审核中」，不再只剩手柄占位图。
|
|
const cover = document.querySelector('.game-detail-cover') as HTMLElement;
|
|
expect(within(cover).getByText('审核中')).toBeTruthy();
|
|
// 两栏评价都是空态：没有错误块、没有重试、没有评分加载失败。
|
|
expect(screen.getAllByText('暂无评价')).toHaveLength(2);
|
|
expect(screen.queryByText('评分加载失败')).toBeNull();
|
|
expect(screen.queryByText('评分加载中…')).toBeNull();
|
|
expect(screen.queryByRole('button', { name: '重试' })).toBeNull();
|
|
expect(screen.queryByRole('textbox')).toBeNull();
|
|
// 代码级门禁：非公开作品一个评价/评分请求都不发。
|
|
expect(listGameReviewsMock).not.toHaveBeenCalled();
|
|
expect(getMyGameReviewMock).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('还没有提交过版本的非公开作品封面显示未公开', async () => {
|
|
getMyGameMock.mockResolvedValue(
|
|
createOwnerGame({ latestVersion: null, versions: [] }),
|
|
);
|
|
|
|
render(
|
|
<GameDetailPage
|
|
gameId="game-1"
|
|
onBack={vi.fn()}
|
|
onPlay={vi.fn()}
|
|
ownerView
|
|
/>,
|
|
);
|
|
|
|
await screen.findByText('还没有提交过版本');
|
|
expect(
|
|
within(
|
|
document.querySelector('.game-detail-cover') as HTMLElement,
|
|
).getByText('未公开'),
|
|
).toBeTruthy();
|
|
expect(screen.queryByText('评分加载失败')).toBeNull();
|
|
expect(listGameReviewsMock).not.toHaveBeenCalled();
|
|
expect(getMyGameReviewMock).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it.each<[string, GameDistributionVersionStatus | null, string]>([
|
|
['unpublished', null, '未公开'],
|
|
['unpublished', 'awaiting_upload', '未公开'],
|
|
['unpublished', 'pending_review', '审核中'],
|
|
['unpublished', 'rejected', '审核未通过'],
|
|
['suspended', 'pending_review', '审核中'],
|
|
['suspended', null, '已被封禁'],
|
|
])('封面文案 %s + %s -> %s', (gameStatus, versionStatus, expected) => {
|
|
expect(resolveNonPublicCoverLabel(gameStatus, versionStatus)).toBe(
|
|
expected,
|
|
);
|
|
});
|
|
|
|
it('审核未通过的作品封面用更准确的驳回文案', async () => {
|
|
const rejected: GameDistributionVersionStatusEntry = {
|
|
...reviewVersion,
|
|
status: 'rejected',
|
|
};
|
|
getMyGameMock.mockResolvedValue(
|
|
createOwnerGame({ latestVersion: rejected, versions: [rejected] }),
|
|
);
|
|
|
|
render(
|
|
<GameDetailPage
|
|
gameId="game-1"
|
|
onBack={vi.fn()}
|
|
onPlay={vi.fn()}
|
|
ownerView
|
|
/>,
|
|
);
|
|
|
|
await screen.findByText('作品状态');
|
|
expect(
|
|
within(
|
|
document.querySelector('.game-detail-cover') as HTMLElement,
|
|
).getByText('审核未通过'),
|
|
).toBeTruthy();
|
|
expect(screen.queryByText('评分加载失败')).toBeNull();
|
|
});
|
|
|
|
it('以已发布版本作为在线版本，并为未完成版本回读下一步动作', async () => {
|
|
getMyGameMock.mockResolvedValue(
|
|
createOwnerGame({
|
|
status: 'published',
|
|
versions: [reviewVersion, publishedVersion],
|
|
}),
|
|
);
|
|
loadVersionRecoveryActionsMock.mockResolvedValue({ 'version-2': 'wait' });
|
|
|
|
render(
|
|
<GameDetailPage
|
|
gameId="game-1"
|
|
onBack={vi.fn()}
|
|
onPlay={vi.fn()}
|
|
ownerView
|
|
/>,
|
|
);
|
|
|
|
expect(await screen.findByText('下一步：等待审核结果')).toBeTruthy();
|
|
expect(loadVersionRecoveryActionsMock).toHaveBeenCalledWith(['version-2']);
|
|
expect(within(screen.getByRole('list')).getByText('v1')).toBeTruthy();
|
|
// 已公开作品照旧请求评价与评分，门禁只作用于非公开作品。
|
|
await waitFor(() =>
|
|
expect(listGameReviewsMock).toHaveBeenCalledWith('game-1', 1),
|
|
);
|
|
expect(getMyGameReviewMock).toHaveBeenCalledWith('game-1');
|
|
const playButton = screen.getByRole('button', { name: /立即玩/u });
|
|
expect((playButton as HTMLButtonElement).disabled).toBe(false);
|
|
});
|
|
|
|
it('作者读不到自己名下作品时按找不到处理', async () => {
|
|
getMyGameMock.mockResolvedValue(null);
|
|
|
|
render(
|
|
<GameDetailPage
|
|
gameId="game-1"
|
|
onBack={vi.fn()}
|
|
onPlay={vi.fn()}
|
|
ownerView
|
|
/>,
|
|
);
|
|
|
|
expect(await screen.findByText('找不到这款游戏')).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
describe('GamePlayPage', () => {
|
|
it('waits for an explicit start before mounting the sandbox iframe', async () => {
|
|
render(<GamePlayPage gameId="game-1" onBack={vi.fn()} />);
|
|
|
|
await screen.findByRole('button', { name: /开始游戏/u });
|
|
expect(screen.queryByTitle('星轨防线 在线游玩')).toBeNull();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /开始游戏/u }));
|
|
const iframe = await screen.findByTitle('星轨防线 在线游玩');
|
|
expect(iframe.getAttribute('sandbox')).toBe('allow-scripts');
|
|
});
|
|
|
|
it('rejects an unsafe release entry URL before rendering an iframe', async () => {
|
|
getGameMock.mockResolvedValueOnce(
|
|
createGame({
|
|
currentVersion: {
|
|
...createGame().currentVersion!,
|
|
entryUrl: 'javascript:alert(1)',
|
|
},
|
|
}),
|
|
);
|
|
render(<GamePlayPage gameId="game-1" onBack={vi.fn()} />);
|
|
|
|
expect(await screen.findByText('游戏入口地址无效')).toBeTruthy();
|
|
expect(screen.queryByTitle('星轨防线 在线游玩')).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe('GameGalleryPage 筛选与返回上下文', () => {
|
|
function resetGalleryContext() {
|
|
window.sessionStorage.clear();
|
|
window.history.replaceState({}, '', '/games');
|
|
}
|
|
|
|
function openGame(title: string) {
|
|
fireEvent.click(screen.getByText(title).closest('button')!);
|
|
}
|
|
|
|
it('设备筛选按真实 deviceSupport 过滤，并写回地址栏', async () => {
|
|
resetGalleryContext();
|
|
listGamesMock.mockResolvedValue([
|
|
createGame({
|
|
id: 'game-desktop',
|
|
title: '桌面专属',
|
|
deviceSupport: { desktop: true, mobile: false, touch: false },
|
|
}),
|
|
createGame({
|
|
id: 'game-mobile',
|
|
title: '移动可玩',
|
|
deviceSupport: { desktop: false, mobile: true, touch: true },
|
|
}),
|
|
]);
|
|
render(<GameGalleryPage onOpenDetail={vi.fn()} />);
|
|
|
|
expect(await screen.findByText('桌面专属')).toBeTruthy();
|
|
const deviceTabs = within(
|
|
screen.getByRole('tablist', { name: '设备筛选' }),
|
|
);
|
|
fireEvent.click(deviceTabs.getByRole('tab', { name: /移动/u }));
|
|
|
|
await waitFor(() => expect(screen.queryByText('桌面专属')).toBeNull());
|
|
expect(screen.getByText('移动可玩')).toBeTruthy();
|
|
expect(window.location.search).toContain('device=');
|
|
expect(decodeURIComponent(window.location.search)).toContain('device=移动');
|
|
});
|
|
|
|
it('筛选结果为空时提供重置筛选，并清理地址栏条件', async () => {
|
|
resetGalleryContext();
|
|
listGamesMock.mockResolvedValue([
|
|
createGame({
|
|
id: 'game-desktop',
|
|
title: '桌面专属',
|
|
deviceSupport: { desktop: true, mobile: false, touch: false },
|
|
}),
|
|
]);
|
|
render(<GameGalleryPage onOpenDetail={vi.fn()} />);
|
|
expect(await screen.findByText('桌面专属')).toBeTruthy();
|
|
|
|
fireEvent.click(
|
|
within(screen.getByRole('tablist', { name: '设备筛选' })).getByRole(
|
|
'tab',
|
|
{ name: /移动/u },
|
|
),
|
|
);
|
|
expect(await screen.findByText('还没有找到对应游戏')).toBeTruthy();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '重置筛选' }));
|
|
expect(await screen.findByText('桌面专属')).toBeTruthy();
|
|
expect(window.location.search).not.toContain('device=');
|
|
});
|
|
|
|
it('从地址栏恢复筛选条件', async () => {
|
|
resetGalleryContext();
|
|
window.history.replaceState(
|
|
{},
|
|
'',
|
|
'/games?keyword=%E6%98%9F%E8%BD%A8&category=%E5%8A%A8%E4%BD%9C&device=%E7%A7%BB%E5%8A%A8',
|
|
);
|
|
listGamesMock.mockResolvedValue([createGame({ title: '星轨防线' })]);
|
|
render(<GameGalleryPage onOpenDetail={vi.fn()} />);
|
|
|
|
await waitFor(() =>
|
|
expect(listGamesMock).toHaveBeenCalledWith({
|
|
keyword: '星轨',
|
|
category: '动作',
|
|
}),
|
|
);
|
|
const search = screen.getByLabelText('搜索游戏') as HTMLInputElement;
|
|
expect(search.value).toBe('星轨');
|
|
const deviceTabs = within(
|
|
screen.getByRole('tablist', { name: '设备筛选' }),
|
|
);
|
|
expect(
|
|
deviceTabs
|
|
.getByRole('tab', { name: /移动/u })
|
|
.getAttribute('aria-selected'),
|
|
).toBe('true');
|
|
});
|
|
|
|
it('返回游戏广场时按上次筛选恢复列表与滚动位置', async () => {
|
|
resetGalleryContext();
|
|
window.sessionStorage.setItem(
|
|
'game-gallery-filters',
|
|
JSON.stringify({ keyword: '', category: '全部', device: '移动' }),
|
|
);
|
|
window.sessionStorage.setItem('game-gallery-scroll:|全部|移动', '320');
|
|
listGamesMock.mockResolvedValue([
|
|
createGame({
|
|
id: 'game-desktop',
|
|
title: '桌面专属',
|
|
deviceSupport: { desktop: true, mobile: false, touch: false },
|
|
}),
|
|
createGame({
|
|
id: 'game-mobile',
|
|
title: '移动可玩',
|
|
deviceSupport: { desktop: false, mobile: true, touch: true },
|
|
}),
|
|
]);
|
|
|
|
const { container } = render(
|
|
<div className="platform-tab-panel">
|
|
<GameGalleryPage onOpenDetail={vi.fn()} />
|
|
</div>,
|
|
);
|
|
const scroller = container.querySelector(
|
|
'.platform-tab-panel',
|
|
) as HTMLElement;
|
|
|
|
expect(await screen.findByText('移动可玩')).toBeTruthy();
|
|
await waitFor(() => expect(scroller.scrollTop).toBe(320));
|
|
expect(screen.queryByText('桌面专属')).toBeNull();
|
|
});
|
|
|
|
it('打开详情时保存目录滚动位置，返回后按同一容器复位', async () => {
|
|
resetGalleryContext();
|
|
const onOpenDetail = vi.fn();
|
|
listGamesMock.mockResolvedValue([createGame({ title: '星轨防线' })]);
|
|
const { container } = render(
|
|
<div className="platform-tab-panel">
|
|
<GameGalleryPage onOpenDetail={onOpenDetail} />
|
|
</div>,
|
|
);
|
|
const scroller = container.querySelector(
|
|
'.platform-tab-panel',
|
|
) as HTMLElement;
|
|
expect(await screen.findByText('星轨防线')).toBeTruthy();
|
|
|
|
scroller.scrollTop = 180;
|
|
openGame('星轨防线');
|
|
|
|
expect(onOpenDetail).toHaveBeenCalledWith('game-1');
|
|
await waitFor(() =>
|
|
expect(
|
|
window.sessionStorage.getItem('game-gallery-scroll:|全部|全部'),
|
|
).toBe('180'),
|
|
);
|
|
});
|
|
|
|
it('首屏「立即试玩」滚动到列表，而不是打开第一款游戏详情', async () => {
|
|
resetGalleryContext();
|
|
const onOpenDetail = vi.fn();
|
|
listGamesMock.mockResolvedValue([
|
|
createGame({ id: 'game-1', title: '星轨防线' }),
|
|
createGame({ id: 'game-2', title: '第二款' }),
|
|
]);
|
|
const scrollTo = vi.fn();
|
|
const originalScrollTo = Object.getOwnPropertyDescriptor(
|
|
Element.prototype,
|
|
'scrollTo',
|
|
);
|
|
Object.defineProperty(Element.prototype, 'scrollTo', {
|
|
configurable: true,
|
|
writable: true,
|
|
value: scrollTo,
|
|
});
|
|
try {
|
|
const { container } = render(
|
|
<div className="platform-tab-panel">
|
|
<GameGalleryPage onOpenDetail={onOpenDetail} />
|
|
</div>,
|
|
);
|
|
expect(await screen.findByText('星轨防线')).toBeTruthy();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /立即试玩/u }));
|
|
|
|
expect(onOpenDetail).not.toHaveBeenCalled();
|
|
expect(scrollTo).toHaveBeenCalledTimes(1);
|
|
expect(scrollTo.mock.instances[0]).toBe(
|
|
container.querySelector('.platform-tab-panel'),
|
|
);
|
|
expect(scrollTo.mock.calls[0]?.[0]).toMatchObject({
|
|
behavior: 'smooth',
|
|
});
|
|
} finally {
|
|
if (originalScrollTo) {
|
|
Object.defineProperty(Element.prototype, 'scrollTo', originalScrollTo);
|
|
} else {
|
|
delete (Element.prototype as { scrollTo?: unknown }).scrollTo;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('GamePlayPage 启动超时与旋转提示', () => {
|
|
it('启动超时后给出重试与返回，重试可恢复可玩', async () => {
|
|
vi.useFakeTimers();
|
|
try {
|
|
const onBack = vi.fn();
|
|
getGameMock.mockResolvedValue(createGame());
|
|
render(<GamePlayPage gameId="game-1" onBack={onBack} />);
|
|
await act(async () => {
|
|
await Promise.resolve();
|
|
});
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /开始游戏/u }));
|
|
const firstFrame = screen.getByTitle('星轨防线 在线游玩');
|
|
|
|
act(() => {
|
|
vi.advanceTimersByTime(GAME_PLAY_STARTUP_TIMEOUT_MS);
|
|
});
|
|
expect(screen.getByText(/启动超时/u)).toBeTruthy();
|
|
expect(screen.getByRole('button', { name: /^返回$/u })).toBeTruthy();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /^重试$/u }));
|
|
const retriedFrame = screen.getByTitle('星轨防线 在线游玩');
|
|
expect(retriedFrame).not.toBe(firstFrame);
|
|
expect(screen.queryByText(/启动超时/u)).toBeNull();
|
|
|
|
fireEvent.load(retriedFrame);
|
|
expect(retriedFrame.className.includes('game-player-frame--ready')).toBe(
|
|
true,
|
|
);
|
|
|
|
act(() => {
|
|
vi.advanceTimersByTime(GAME_PLAY_STARTUP_TIMEOUT_MS);
|
|
});
|
|
expect(screen.queryByText(/启动超时/u)).toBeNull();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /星轨防线/u }));
|
|
expect(onBack).toHaveBeenCalledTimes(1);
|
|
} finally {
|
|
vi.useRealTimers();
|
|
}
|
|
});
|
|
|
|
it('横屏游戏只在竖屏视口提示旋转', async () => {
|
|
setViewportWidth(390);
|
|
getGameMock.mockResolvedValue(createGame({ orientation: 'landscape' }));
|
|
const { unmount } = render(
|
|
<GamePlayPage gameId="game-1" onBack={vi.fn()} />,
|
|
);
|
|
|
|
expect(await screen.findByText(/旋转设备/u)).toBeTruthy();
|
|
unmount();
|
|
|
|
setViewportWidth(1280);
|
|
getGameMock.mockResolvedValue(createGame({ orientation: 'landscape' }));
|
|
render(<GamePlayPage gameId="game-1" onBack={vi.fn()} />);
|
|
|
|
await screen.findByRole('button', { name: /开始游戏/u });
|
|
expect(screen.queryByText(/旋转设备/u)).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe('游戏封面与截图展示', () => {
|
|
function resetGalleryContext() {
|
|
window.sessionStorage.clear();
|
|
window.history.replaceState({}, '', '/games');
|
|
}
|
|
|
|
it('广场卡片用签名地址展示真实封面', async () => {
|
|
resetGalleryContext();
|
|
listGamesMock.mockResolvedValue([
|
|
createGame({ coverObjectKey: 'game-distribution/cover/alpha.png' }),
|
|
]);
|
|
render(<GameGalleryPage onOpenDetail={vi.fn()} />);
|
|
|
|
const card = (await screen.findByText('星轨防线')).closest('button');
|
|
const cover = card?.querySelector('img.game-cover__image');
|
|
expect(cover?.getAttribute('src')).toBe(
|
|
'https://assets.example.test/game-distribution/cover/alpha.png',
|
|
);
|
|
expect(cover?.getAttribute('loading')).toBe('lazy');
|
|
});
|
|
|
|
it('没有封面或换签失败时保留占位而不渲染图片', async () => {
|
|
resetGalleryContext();
|
|
resolvedAssetUrlMock.mockImplementation((objectKey: string) =>
|
|
objectKey && objectKey !== 'game-distribution/cover/broken.png'
|
|
? `https://assets.example.test/${objectKey}`
|
|
: '',
|
|
);
|
|
listGamesMock.mockResolvedValue([
|
|
createGame({ id: 'game-none', title: '没有封面', coverObjectKey: null }),
|
|
createGame({
|
|
id: 'game-broken',
|
|
title: '换签失败',
|
|
coverObjectKey: 'game-distribution/cover/broken.png',
|
|
}),
|
|
]);
|
|
render(<GameGalleryPage onOpenDetail={vi.fn()} />);
|
|
|
|
expect(await screen.findByText('没有封面')).toBeTruthy();
|
|
expect(screen.getByText('换签失败')).toBeTruthy();
|
|
expect(document.querySelectorAll('img.game-cover__image')).toHaveLength(0);
|
|
expect(document.querySelectorAll('.game-cover__icon')).toHaveLength(2);
|
|
});
|
|
|
|
it('详情页展示封面与截图缩略图，并可切换 hero', async () => {
|
|
getGameMock.mockResolvedValueOnce(
|
|
createGame({
|
|
coverObjectKey: 'game-distribution/cover/alpha.png',
|
|
screenshots: [
|
|
'game-distribution/screenshot/one.png',
|
|
'game-distribution/screenshot/two.png',
|
|
],
|
|
}),
|
|
);
|
|
render(
|
|
<GameDetailPage gameId="game-1" onBack={vi.fn()} onPlay={vi.fn()} />,
|
|
);
|
|
|
|
await screen.findByRole('heading', { name: '星轨防线' });
|
|
const heroImage = () =>
|
|
document.querySelector('.game-detail-cover img')?.getAttribute('src');
|
|
expect(heroImage()).toBe(
|
|
'https://assets.example.test/game-distribution/cover/alpha.png',
|
|
);
|
|
|
|
const thumbs = screen.getAllByRole('button', { name: /（查看大图）/u });
|
|
expect(thumbs).toHaveLength(3);
|
|
expect(thumbs[0]?.getAttribute('aria-pressed')).toBe('true');
|
|
expect(thumbs[2]?.getAttribute('aria-pressed')).toBe('false');
|
|
|
|
fireEvent.click(thumbs[2]!);
|
|
await waitFor(() =>
|
|
expect(heroImage()).toBe(
|
|
'https://assets.example.test/game-distribution/screenshot/two.png',
|
|
),
|
|
);
|
|
expect(thumbs[2]?.getAttribute('aria-pressed')).toBe('true');
|
|
expect(thumbs[0]?.getAttribute('aria-pressed')).toBe('false');
|
|
});
|
|
|
|
it('只有封面时不渲染缩略图条', async () => {
|
|
getGameMock.mockResolvedValueOnce(
|
|
createGame({ coverObjectKey: 'game-distribution/cover/only.png' }),
|
|
);
|
|
render(
|
|
<GameDetailPage gameId="game-1" onBack={vi.fn()} onPlay={vi.fn()} />,
|
|
);
|
|
|
|
await screen.findByRole('heading', { name: '星轨防线' });
|
|
expect(
|
|
screen.queryAllByRole('button', { name: /（查看大图）/u }),
|
|
).toHaveLength(0);
|
|
expect(screen.queryByRole('group', { name: '游戏截图' })).toBeNull();
|
|
});
|
|
|
|
it('既没有封面也没有截图时退回原占位视觉', async () => {
|
|
getGameMock.mockResolvedValueOnce(
|
|
createGame({ coverObjectKey: null, screenshots: [] }),
|
|
);
|
|
render(
|
|
<GameDetailPage gameId="game-1" onBack={vi.fn()} onPlay={vi.fn()} />,
|
|
);
|
|
|
|
await screen.findByRole('heading', { name: '星轨防线' });
|
|
expect(document.querySelectorAll('.game-detail-cover img')).toHaveLength(0);
|
|
expect(document.querySelectorAll('.game-detail-cover__icon')).toHaveLength(
|
|
1,
|
|
);
|
|
});
|
|
});
|