985 lines
29 KiB
TypeScript
985 lines
29 KiB
TypeScript
/* @vitest-environment jsdom */
|
||
|
||
import { act, render, screen, within } from '@testing-library/react';
|
||
import userEvent from '@testing-library/user-event';
|
||
import { useState } from 'react';
|
||
import { afterEach, expect, test, vi } from 'vitest';
|
||
|
||
import type { AuthUser } from '../../services/authService';
|
||
import { AuthUiContext } from '../auth/AuthUiContext';
|
||
import {
|
||
RpgEntryHomeView,
|
||
type RpgEntryHomeViewProps,
|
||
} from './RpgEntryHomeView';
|
||
import type { PlatformPublicGalleryCard } from './rpgEntryWorldPresentation';
|
||
|
||
const { mockGetRpgProfileWalletLedger } = vi.hoisted(() => ({
|
||
mockGetRpgProfileWalletLedger: vi.fn(async () => ({
|
||
entries: [
|
||
{
|
||
id: 'ledger-1',
|
||
amountDelta: -1,
|
||
balanceAfter: 29,
|
||
sourceType: 'asset_operation_consume',
|
||
createdAt: '2026-04-28T10:00:00Z',
|
||
},
|
||
{
|
||
id: 'ledger-2',
|
||
amountDelta: 30,
|
||
balanceAfter: 30,
|
||
sourceType: 'invite_invitee_reward',
|
||
createdAt: '2026-04-28T09:00:00Z',
|
||
},
|
||
],
|
||
})),
|
||
}));
|
||
|
||
vi.mock('../../services/rpg-entry/rpgProfileClient', () => ({
|
||
getRpgProfileWalletLedger: mockGetRpgProfileWalletLedger,
|
||
getRpgProfileRechargeCenter: vi.fn(async () => ({
|
||
walletBalance: 0,
|
||
membership: {
|
||
status: 'normal',
|
||
tier: 'normal',
|
||
startedAt: null,
|
||
expiresAt: null,
|
||
updatedAt: null,
|
||
},
|
||
pointProducts: [
|
||
{
|
||
productId: 'points_60',
|
||
title: '60陶泥币',
|
||
priceCents: 600,
|
||
kind: 'points',
|
||
pointsAmount: 60,
|
||
bonusPoints: 60,
|
||
durationDays: 0,
|
||
badgeLabel: '首充双倍',
|
||
description: '首充送60陶泥币',
|
||
tier: 'normal',
|
||
},
|
||
],
|
||
membershipProducts: [
|
||
{
|
||
productId: 'member_month',
|
||
title: '月卡',
|
||
priceCents: 2800,
|
||
kind: 'membership',
|
||
pointsAmount: 0,
|
||
bonusPoints: 0,
|
||
durationDays: 30,
|
||
badgeLabel: '',
|
||
description: '30天会员',
|
||
tier: 'month',
|
||
},
|
||
],
|
||
benefits: [
|
||
{
|
||
benefitName: '免陶泥币回合数',
|
||
normalValue: '30',
|
||
monthValue: '100',
|
||
seasonValue: '100',
|
||
yearValue: '100',
|
||
},
|
||
],
|
||
latestOrder: null,
|
||
hasPointsRecharged: false,
|
||
})),
|
||
createRpgProfileRechargeOrder: vi.fn(async () => ({
|
||
order: {
|
||
orderId: 'order-1',
|
||
productId: 'points_60',
|
||
productTitle: '60陶泥币',
|
||
kind: 'points',
|
||
amountCents: 600,
|
||
status: 'paid',
|
||
paymentChannel: 'mock',
|
||
paidAt: '2026-04-25T10:00:00Z',
|
||
createdAt: '2026-04-25T10:00:00Z',
|
||
pointsDelta: 120,
|
||
membershipExpiresAt: null,
|
||
},
|
||
center: {
|
||
walletBalance: 120,
|
||
membership: {
|
||
status: 'normal',
|
||
tier: 'normal',
|
||
startedAt: null,
|
||
expiresAt: null,
|
||
updatedAt: null,
|
||
},
|
||
pointProducts: [],
|
||
membershipProducts: [],
|
||
benefits: [],
|
||
latestOrder: null,
|
||
hasPointsRecharged: true,
|
||
},
|
||
})),
|
||
}));
|
||
|
||
vi.mock('../ResolvedAssetImage', () => ({
|
||
ResolvedAssetImage: ({
|
||
src,
|
||
alt,
|
||
className,
|
||
...rest
|
||
}: {
|
||
src?: string | null;
|
||
alt?: string;
|
||
className?: string;
|
||
}) =>
|
||
src ? (
|
||
<img src={src} alt={alt ?? ''} className={className} {...rest} />
|
||
) : null,
|
||
}));
|
||
|
||
const originalMatchMedia = window.matchMedia;
|
||
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
||
const originalCancelAnimationFrame = window.cancelAnimationFrame;
|
||
const puzzlePublicEntry = {
|
||
sourceType: 'puzzle',
|
||
workId: 'puzzle-work-public-1',
|
||
profileId: 'puzzle-profile-public-1',
|
||
publicWorkCode: 'PZ-EPUBLIC1',
|
||
ownerUserId: 'user-2',
|
||
authorDisplayName: '拼图玩家',
|
||
worldName: '奇幻拼图',
|
||
subtitle: '拼图关卡',
|
||
summaryText: '一张用于公开分享的拼图作品。',
|
||
coverImageSrc: null,
|
||
themeTags: ['奇幻'],
|
||
playCount: 20,
|
||
remixCount: 5,
|
||
likeCount: 12,
|
||
visibility: 'published',
|
||
publishedAt: '1777110165.990127Z',
|
||
updatedAt: '2026-04-25T10:00:00.000Z',
|
||
} satisfies PlatformPublicGalleryCard;
|
||
|
||
const remixRankEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-remix-rank',
|
||
profileId: 'puzzle-profile-remix-rank',
|
||
publicWorkCode: 'PZ-REMIX1',
|
||
worldName: '改造高分拼图',
|
||
playCount: 2,
|
||
remixCount: 18,
|
||
likeCount: 1,
|
||
recentPlayCount7d: 0,
|
||
publishedAt: '2026-04-25T11:00:00.000Z',
|
||
updatedAt: '2026-04-25T11:00:00.000Z',
|
||
} satisfies PlatformPublicGalleryCard;
|
||
|
||
function buildCarouselPuzzleEntry(
|
||
id: string,
|
||
worldName: string,
|
||
coverPrefix: string,
|
||
) {
|
||
return {
|
||
...puzzlePublicEntry,
|
||
workId: `puzzle-work-${id}`,
|
||
profileId: `puzzle-profile-${id}`,
|
||
publicWorkCode: `PZ-${id.toUpperCase()}`,
|
||
worldName,
|
||
coverImageSrc: `${coverPrefix}-fallback.png`,
|
||
coverSlides: [
|
||
{
|
||
id: `${id}-cover-1`,
|
||
imageSrc: `${coverPrefix}-1.png`,
|
||
label: `${worldName} 1`,
|
||
},
|
||
{
|
||
id: `${id}-cover-2`,
|
||
imageSrc: `${coverPrefix}-2.png`,
|
||
label: `${worldName} 2`,
|
||
},
|
||
],
|
||
} satisfies PlatformPublicGalleryCard;
|
||
}
|
||
|
||
const hotRankEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-hot-rank',
|
||
profileId: 'puzzle-profile-hot-rank',
|
||
publicWorkCode: 'PZ-HOT001',
|
||
worldName: '热门高分拼图',
|
||
themeTags: ['奇幻', '机关'],
|
||
playCount: 40,
|
||
remixCount: 1,
|
||
likeCount: 4,
|
||
recentPlayCount7d: 0,
|
||
publishedAt: '2026-04-24T10:00:00.000Z',
|
||
updatedAt: '2026-04-24T10:00:00.000Z',
|
||
} satisfies PlatformPublicGalleryCard;
|
||
|
||
const newRankEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-new-rank',
|
||
profileId: 'puzzle-profile-new-rank',
|
||
publicWorkCode: 'PZ-NEW001',
|
||
worldName: '新品增长拼图',
|
||
playCount: 1,
|
||
remixCount: 0,
|
||
likeCount: 0,
|
||
recentPlayCount7d: 9,
|
||
publishedAt: '2026-04-20T10:00:00.000Z',
|
||
updatedAt: '2026-04-20T10:00:00.000Z',
|
||
} satisfies PlatformPublicGalleryCard;
|
||
|
||
const longTextRankEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-long-text-rank',
|
||
profileId: 'puzzle-profile-long-text-rank',
|
||
publicWorkCode: 'PZ-LONG01',
|
||
worldName: '关键词逍遥游拼图关卡',
|
||
themeTags: ['逍遥游拼图', '古风机关'],
|
||
playCount: 88,
|
||
remixCount: 0,
|
||
likeCount: 0,
|
||
recentPlayCount7d: 0,
|
||
publishedAt: '2026-04-29T10:00:00.000Z',
|
||
updatedAt: '2026-04-29T10:00:00.000Z',
|
||
} satisfies PlatformPublicGalleryCard;
|
||
|
||
function mockDesktopLayout() {
|
||
Object.defineProperty(window, 'matchMedia', {
|
||
configurable: true,
|
||
writable: true,
|
||
value: vi.fn().mockImplementation(() => ({
|
||
matches: true,
|
||
media: '(min-width: 1024px)',
|
||
onchange: null,
|
||
addEventListener: vi.fn(),
|
||
removeEventListener: vi.fn(),
|
||
addListener: vi.fn(),
|
||
removeListener: vi.fn(),
|
||
dispatchEvent: vi.fn(),
|
||
})),
|
||
});
|
||
}
|
||
|
||
function renderProfileView(
|
||
onRechargeSuccess = vi.fn(),
|
||
profileDashboardOverrides: Partial<
|
||
NonNullable<RpgEntryHomeViewProps['profileDashboard']>
|
||
> = {},
|
||
userOverrides: Partial<AuthUser> = {},
|
||
) {
|
||
return render(
|
||
<AuthUiContext.Provider
|
||
value={{
|
||
user: {
|
||
id: 'user-1',
|
||
publicUserCode: '100001',
|
||
username: 'tester',
|
||
displayName: '测试玩家',
|
||
avatarUrl: null,
|
||
phoneNumberMasked: null,
|
||
loginMethod: 'password',
|
||
bindingStatus: 'active',
|
||
wechatBound: false,
|
||
...userOverrides,
|
||
},
|
||
canAccessProtectedData: true,
|
||
openLoginModal: vi.fn(),
|
||
requireAuth: (action) => action(),
|
||
openSettingsModal: vi.fn(),
|
||
openAccountModal: vi.fn(),
|
||
setCurrentUser: vi.fn(),
|
||
logout: vi.fn(async () => undefined),
|
||
musicVolume: 0.42,
|
||
setMusicVolume: vi.fn(),
|
||
platformTheme: 'light',
|
||
setPlatformTheme: vi.fn(),
|
||
isHydratingSettings: false,
|
||
isPersistingSettings: false,
|
||
settingsError: null,
|
||
}}
|
||
>
|
||
<RpgEntryHomeView
|
||
activeTab="profile"
|
||
onTabChange={vi.fn()}
|
||
hasSavedGame={false}
|
||
savedSnapshot={null}
|
||
saveEntries={[]}
|
||
saveError={null}
|
||
featuredEntries={[]}
|
||
latestEntries={[]}
|
||
myEntries={[]}
|
||
historyEntries={[]}
|
||
profileDashboard={{
|
||
walletBalance: 0,
|
||
totalPlayTimeMs: 0,
|
||
playedWorldCount: 0,
|
||
updatedAt: null,
|
||
...profileDashboardOverrides,
|
||
}}
|
||
isLoadingPlatform={false}
|
||
isLoadingDashboard={false}
|
||
isResumingSaveWorldKey={null}
|
||
platformError={null}
|
||
dashboardError={null}
|
||
onContinueGame={vi.fn()}
|
||
onResumeSave={vi.fn()}
|
||
onOpenCreateWorld={vi.fn()}
|
||
onOpenCreateTypePicker={vi.fn()}
|
||
onOpenGalleryDetail={vi.fn()}
|
||
onOpenLibraryDetail={vi.fn()}
|
||
onSearchPublicCode={vi.fn()}
|
||
onRechargeSuccess={onRechargeSuccess}
|
||
/>
|
||
</AuthUiContext.Provider>,
|
||
);
|
||
}
|
||
|
||
function renderLoggedOutHomeView(
|
||
openLoginModal = vi.fn(),
|
||
overrides: Partial<
|
||
Pick<
|
||
RpgEntryHomeViewProps,
|
||
| 'featuredEntries'
|
||
| 'latestEntries'
|
||
| 'onOpenGalleryDetail'
|
||
| 'onSearchPublicCode'
|
||
>
|
||
> = {},
|
||
) {
|
||
return render(
|
||
<AuthUiContext.Provider
|
||
value={{
|
||
user: null,
|
||
canAccessProtectedData: false,
|
||
openLoginModal,
|
||
requireAuth: vi.fn(),
|
||
openSettingsModal: vi.fn(),
|
||
openAccountModal: vi.fn(),
|
||
setCurrentUser: vi.fn(),
|
||
logout: vi.fn(async () => undefined),
|
||
musicVolume: 0.42,
|
||
setMusicVolume: vi.fn(),
|
||
platformTheme: 'light',
|
||
setPlatformTheme: vi.fn(),
|
||
isHydratingSettings: false,
|
||
isPersistingSettings: false,
|
||
settingsError: null,
|
||
}}
|
||
>
|
||
<RpgEntryHomeView
|
||
activeTab="home"
|
||
onTabChange={vi.fn()}
|
||
hasSavedGame={false}
|
||
savedSnapshot={null}
|
||
saveEntries={[]}
|
||
saveError={null}
|
||
featuredEntries={overrides.featuredEntries ?? []}
|
||
latestEntries={overrides.latestEntries ?? []}
|
||
myEntries={[]}
|
||
historyEntries={[]}
|
||
profileDashboard={null}
|
||
isLoadingPlatform={false}
|
||
isLoadingDashboard={false}
|
||
isResumingSaveWorldKey={null}
|
||
platformError={null}
|
||
dashboardError={null}
|
||
onContinueGame={vi.fn()}
|
||
onResumeSave={vi.fn()}
|
||
onOpenCreateWorld={vi.fn()}
|
||
onOpenCreateTypePicker={vi.fn()}
|
||
onOpenGalleryDetail={overrides.onOpenGalleryDetail ?? vi.fn()}
|
||
onOpenLibraryDetail={vi.fn()}
|
||
onSearchPublicCode={overrides.onSearchPublicCode ?? vi.fn()}
|
||
/>
|
||
</AuthUiContext.Provider>,
|
||
);
|
||
}
|
||
|
||
function renderStatefulLoggedOutHomeView(
|
||
overrides: Partial<
|
||
Pick<RpgEntryHomeViewProps, 'featuredEntries' | 'latestEntries'>
|
||
> = {},
|
||
) {
|
||
function StatefulLoggedOutHomeView() {
|
||
const [activeTab, setActiveTab] =
|
||
useState<RpgEntryHomeViewProps['activeTab']>('home');
|
||
|
||
return (
|
||
<AuthUiContext.Provider
|
||
value={{
|
||
user: null,
|
||
canAccessProtectedData: false,
|
||
openLoginModal: vi.fn(),
|
||
requireAuth: vi.fn(),
|
||
openSettingsModal: vi.fn(),
|
||
openAccountModal: vi.fn(),
|
||
setCurrentUser: vi.fn(),
|
||
logout: vi.fn(async () => undefined),
|
||
musicVolume: 0.42,
|
||
setMusicVolume: vi.fn(),
|
||
platformTheme: 'light',
|
||
setPlatformTheme: vi.fn(),
|
||
isHydratingSettings: false,
|
||
isPersistingSettings: false,
|
||
settingsError: null,
|
||
}}
|
||
>
|
||
<RpgEntryHomeView
|
||
activeTab={activeTab}
|
||
onTabChange={setActiveTab}
|
||
hasSavedGame={false}
|
||
savedSnapshot={null}
|
||
saveEntries={[]}
|
||
saveError={null}
|
||
featuredEntries={overrides.featuredEntries ?? []}
|
||
latestEntries={overrides.latestEntries ?? []}
|
||
myEntries={[]}
|
||
historyEntries={[]}
|
||
profileDashboard={null}
|
||
isLoadingPlatform={false}
|
||
isLoadingDashboard={false}
|
||
isResumingSaveWorldKey={null}
|
||
platformError={null}
|
||
dashboardError={null}
|
||
onContinueGame={vi.fn()}
|
||
onResumeSave={vi.fn()}
|
||
onOpenCreateWorld={vi.fn()}
|
||
onOpenCreateTypePicker={vi.fn()}
|
||
onOpenGalleryDetail={vi.fn()}
|
||
onOpenLibraryDetail={vi.fn()}
|
||
onSearchPublicCode={vi.fn()}
|
||
/>
|
||
</AuthUiContext.Provider>
|
||
);
|
||
}
|
||
|
||
return render(<StatefulLoggedOutHomeView />);
|
||
}
|
||
|
||
afterEach(() => {
|
||
vi.useRealTimers();
|
||
vi.clearAllMocks();
|
||
Object.defineProperty(window, 'matchMedia', {
|
||
configurable: true,
|
||
writable: true,
|
||
value: originalMatchMedia,
|
||
});
|
||
Object.defineProperty(window, 'requestAnimationFrame', {
|
||
configurable: true,
|
||
writable: true,
|
||
value: originalRequestAnimationFrame,
|
||
});
|
||
Object.defineProperty(window, 'cancelAnimationFrame', {
|
||
configurable: true,
|
||
writable: true,
|
||
value: originalCancelAnimationFrame,
|
||
});
|
||
Object.defineProperty(navigator, 'clipboard', {
|
||
configurable: true,
|
||
value: undefined,
|
||
});
|
||
});
|
||
|
||
test('opens wallet ledger modal from narrative coin card', async () => {
|
||
const user = userEvent.setup();
|
||
|
||
renderProfileView();
|
||
await user.click(screen.getByRole('button', { name: /陶泥币\s*0/u }));
|
||
|
||
expect(await screen.findByText('陶泥币账单')).toBeTruthy();
|
||
expect(mockGetRpgProfileWalletLedger).toHaveBeenCalledTimes(1);
|
||
expect(screen.getByText('资产操作消耗')).toBeTruthy();
|
||
expect(screen.getByText('-1')).toBeTruthy();
|
||
expect(screen.getByText('填写邀请码奖励')).toBeTruthy();
|
||
expect(screen.getByText('+30')).toBeTruthy();
|
||
});
|
||
|
||
test('profile total play time card always uses hours', () => {
|
||
renderProfileView(vi.fn(), {
|
||
totalPlayTimeMs: 90 * 60 * 1000,
|
||
});
|
||
|
||
const playTimeCard = screen.getByRole('button', {
|
||
name: /游戏时长/u,
|
||
});
|
||
|
||
expect(within(playTimeCard).getByText('1.5小时')).toBeTruthy();
|
||
expect(within(playTimeCard).queryByText('90分')).toBeNull();
|
||
});
|
||
|
||
test('profile played works card shows count unit', () => {
|
||
renderProfileView(vi.fn(), {
|
||
playedWorldCount: 1,
|
||
});
|
||
|
||
const playedCard = screen.getByRole('button', {
|
||
name: /玩过\s*1个/u,
|
||
});
|
||
|
||
expect(within(playedCard).getByText('1个')).toBeTruthy();
|
||
});
|
||
|
||
test('desktop account entry uses saved avatar image when available', () => {
|
||
mockDesktopLayout();
|
||
const avatarUrl = 'data:image/png;base64,AAAA';
|
||
|
||
renderProfileView(vi.fn(), {}, { avatarUrl });
|
||
|
||
const accountEntry = screen.getByRole('button', { name: /测试玩家/u });
|
||
const avatarImage = accountEntry.querySelector('img');
|
||
expect(avatarImage?.getAttribute('src')).toBe(avatarUrl);
|
||
expect(within(accountEntry).queryByText('测')).toBeNull();
|
||
});
|
||
|
||
test('wallet ledger modal shows empty and error states', async () => {
|
||
const user = userEvent.setup();
|
||
mockGetRpgProfileWalletLedger.mockResolvedValueOnce({ entries: [] });
|
||
|
||
renderProfileView();
|
||
await user.click(screen.getByRole('button', { name: /陶泥币\s*0/u }));
|
||
expect(await screen.findByText('暂无账单记录')).toBeTruthy();
|
||
|
||
await user.click(screen.getByLabelText('关闭陶泥币账单'));
|
||
mockGetRpgProfileWalletLedger.mockRejectedValueOnce(new Error('加载失败'));
|
||
await user.click(screen.getByRole('button', { name: /陶泥币\s*0/u }));
|
||
|
||
expect(await screen.findByText('加载失败')).toBeTruthy();
|
||
expect(screen.getByText('重新加载')).toBeTruthy();
|
||
});
|
||
|
||
test('opens reward code modal from profile action on mobile', async () => {
|
||
const user = userEvent.setup();
|
||
|
||
renderProfileView();
|
||
await user.click(screen.getByRole('button', { name: /兑换码/u }));
|
||
|
||
const modal = await screen.findByPlaceholderText('输入兑换码');
|
||
expect(modal).toBeTruthy();
|
||
expect(screen.getByRole('button', { name: '兑换' })).toBeTruthy();
|
||
expect(screen.getByLabelText('关闭兑换码')).toBeTruthy();
|
||
});
|
||
|
||
test('shows a reachable login entry in logged out mobile shell', async () => {
|
||
const user = userEvent.setup();
|
||
const openLoginModal = vi.fn();
|
||
|
||
renderLoggedOutHomeView(openLoginModal);
|
||
await user.click(screen.getByRole('button', { name: '登录' }));
|
||
|
||
expect(openLoginModal).toHaveBeenCalledTimes(1);
|
||
});
|
||
|
||
test('mobile home search submits public work code', async () => {
|
||
const user = userEvent.setup();
|
||
const onSearchPublicCode = vi.fn();
|
||
|
||
render(
|
||
<AuthUiContext.Provider
|
||
value={{
|
||
user: null,
|
||
canAccessProtectedData: false,
|
||
openLoginModal: vi.fn(),
|
||
requireAuth: vi.fn(),
|
||
openSettingsModal: vi.fn(),
|
||
openAccountModal: vi.fn(),
|
||
setCurrentUser: vi.fn(),
|
||
logout: vi.fn(async () => undefined),
|
||
musicVolume: 0.42,
|
||
setMusicVolume: vi.fn(),
|
||
platformTheme: 'light',
|
||
setPlatformTheme: vi.fn(),
|
||
isHydratingSettings: false,
|
||
isPersistingSettings: false,
|
||
settingsError: null,
|
||
}}
|
||
>
|
||
<RpgEntryHomeView
|
||
activeTab="home"
|
||
onTabChange={vi.fn()}
|
||
hasSavedGame={false}
|
||
savedSnapshot={null}
|
||
saveEntries={[]}
|
||
saveError={null}
|
||
featuredEntries={[]}
|
||
latestEntries={[]}
|
||
myEntries={[]}
|
||
historyEntries={[]}
|
||
profileDashboard={null}
|
||
isLoadingPlatform={false}
|
||
isLoadingDashboard={false}
|
||
isResumingSaveWorldKey={null}
|
||
platformError={null}
|
||
dashboardError={null}
|
||
onContinueGame={vi.fn()}
|
||
onResumeSave={vi.fn()}
|
||
onOpenCreateWorld={vi.fn()}
|
||
onOpenCreateTypePicker={vi.fn()}
|
||
onOpenGalleryDetail={vi.fn()}
|
||
onOpenLibraryDetail={vi.fn()}
|
||
onSearchPublicCode={onSearchPublicCode}
|
||
/>
|
||
</AuthUiContext.Provider>,
|
||
);
|
||
|
||
const searchInput = screen.getByPlaceholderText(
|
||
'输入 SY / CW / BF / M3 / PZ 编号',
|
||
);
|
||
await user.type(searchInput, 'PZ-PROFILE1{enter}');
|
||
|
||
expect(onSearchPublicCode).toHaveBeenCalledWith('PZ-PROFILE1');
|
||
});
|
||
|
||
test('public gallery cards hide work code until detail is opened', async () => {
|
||
const user = userEvent.setup();
|
||
const onOpenGalleryDetail = vi.fn();
|
||
|
||
renderLoggedOutHomeView(vi.fn(), {
|
||
latestEntries: [puzzlePublicEntry],
|
||
onOpenGalleryDetail,
|
||
});
|
||
|
||
expect(screen.queryByText('PZ-EPUBLIC1')).toBeNull();
|
||
expect(
|
||
screen.queryByRole('button', { name: '复制作品号 PZ-EPUBLIC1' }),
|
||
).toBeNull();
|
||
|
||
await user.click(screen.getByRole('button', { name: /奇幻拼图/u }));
|
||
|
||
expect(onOpenGalleryDetail).toHaveBeenCalledWith(puzzlePublicEntry);
|
||
});
|
||
|
||
test('mobile public work cards render cover, author, kind and cover stats', () => {
|
||
const { container } = renderLoggedOutHomeView(vi.fn(), {
|
||
latestEntries: [puzzlePublicEntry],
|
||
});
|
||
|
||
const card = screen.getByRole('button', {
|
||
name: /奇幻拼图，拼图，20游玩，5改造，12点赞/u,
|
||
});
|
||
expect(
|
||
card.querySelector('.platform-public-work-card__cover.aspect-video'),
|
||
).toBeTruthy();
|
||
expect(
|
||
card.querySelector('.platform-public-work-card__cover-stats'),
|
||
).toBeTruthy();
|
||
expect(
|
||
card.querySelectorAll('.platform-public-work-card__cover-stat'),
|
||
).toHaveLength(3);
|
||
expect(
|
||
card.querySelector('.platform-public-work-card__kind')?.textContent,
|
||
).toBe('拼图');
|
||
expect(
|
||
card.querySelector('.platform-public-work-card__author-avatar')
|
||
?.textContent,
|
||
).toBe('拼');
|
||
expect(screen.getByText('奇幻拼图')).toBeTruthy();
|
||
expect(screen.getByText('拼图玩家')).toBeTruthy();
|
||
expect(screen.getByText('一张用于公开分享的拼图作品。')).toBeTruthy();
|
||
expect(screen.getByText('奇幻')).toBeTruthy();
|
||
expect(screen.getByText('20')).toBeTruthy();
|
||
expect(screen.getByText('5')).toBeTruthy();
|
||
expect(screen.getByText('12')).toBeTruthy();
|
||
expect(card.querySelector('.platform-pill--warm')?.textContent).not.toBe(
|
||
'推荐',
|
||
);
|
||
expect(
|
||
container.querySelector('.platform-mobile-home-channel--active')
|
||
?.textContent,
|
||
).toBe('推荐');
|
||
});
|
||
|
||
test('mobile home feed only rotates the card closest to screen center', () => {
|
||
vi.useFakeTimers();
|
||
Object.defineProperty(window, 'requestAnimationFrame', {
|
||
configurable: true,
|
||
writable: true,
|
||
value: (callback: FrameRequestCallback) =>
|
||
window.setTimeout(() => callback(0), 0),
|
||
});
|
||
Object.defineProperty(window, 'cancelAnimationFrame', {
|
||
configurable: true,
|
||
writable: true,
|
||
value: (handle: number) => window.clearTimeout(handle),
|
||
});
|
||
|
||
const firstEntry = buildCarouselPuzzleEntry('center1', '中心拼图一', 'center-one');
|
||
const secondEntry = buildCarouselPuzzleEntry(
|
||
'center2',
|
||
'中心拼图二',
|
||
'center-two',
|
||
);
|
||
const cardRects = new Map<string, DOMRect>();
|
||
|
||
renderLoggedOutHomeView(vi.fn(), {
|
||
latestEntries: [firstEntry, secondEntry],
|
||
});
|
||
|
||
const tabPanel = document.querySelector('.platform-tab-panel--active');
|
||
const firstCard = screen.getByRole('button', { name: /中心拼图一/u });
|
||
const secondCard = screen.getByRole('button', { name: /中心拼图二/u });
|
||
if (!tabPanel) {
|
||
throw new Error('缺少移动端首页滚动面板');
|
||
}
|
||
|
||
tabPanel.getBoundingClientRect = vi.fn(
|
||
() =>
|
||
({
|
||
top: 0,
|
||
bottom: 600,
|
||
height: 600,
|
||
left: 0,
|
||
right: 360,
|
||
width: 360,
|
||
}) as DOMRect,
|
||
);
|
||
firstCard.getBoundingClientRect = vi.fn(() => cardRects.get('first')!);
|
||
secondCard.getBoundingClientRect = vi.fn(() => cardRects.get('second')!);
|
||
cardRects.set('first', {
|
||
top: 170,
|
||
bottom: 370,
|
||
height: 200,
|
||
left: 0,
|
||
right: 320,
|
||
width: 320,
|
||
} as DOMRect);
|
||
cardRects.set('second', {
|
||
top: 420,
|
||
bottom: 620,
|
||
height: 200,
|
||
left: 0,
|
||
right: 320,
|
||
width: 320,
|
||
} as DOMRect);
|
||
|
||
act(() => {
|
||
vi.runOnlyPendingTimers();
|
||
});
|
||
|
||
expect(within(firstCard).getByRole('img').getAttribute('src')).toBe(
|
||
'center-one-1.png',
|
||
);
|
||
expect(within(secondCard).getByRole('img').getAttribute('src')).toBe(
|
||
'center-two-1.png',
|
||
);
|
||
|
||
act(() => {
|
||
vi.advanceTimersByTime(4200);
|
||
});
|
||
|
||
expect(within(firstCard).getByRole('img').getAttribute('src')).toBe(
|
||
'center-one-2.png',
|
||
);
|
||
expect(within(secondCard).getByRole('img').getAttribute('src')).toBe(
|
||
'center-two-1.png',
|
||
);
|
||
|
||
cardRects.set('first', {
|
||
top: -120,
|
||
bottom: 80,
|
||
height: 200,
|
||
left: 0,
|
||
right: 320,
|
||
width: 320,
|
||
} as DOMRect);
|
||
cardRects.set('second', {
|
||
top: 200,
|
||
bottom: 400,
|
||
height: 200,
|
||
left: 0,
|
||
right: 320,
|
||
width: 320,
|
||
} as DOMRect);
|
||
|
||
act(() => {
|
||
tabPanel.dispatchEvent(new Event('scroll'));
|
||
vi.runOnlyPendingTimers();
|
||
});
|
||
|
||
expect(within(firstCard).getByRole('img').getAttribute('src')).toBe(
|
||
'center-one-1.png',
|
||
);
|
||
|
||
act(() => {
|
||
vi.advanceTimersByTime(4200);
|
||
});
|
||
|
||
expect(within(secondCard).getByRole('img').getAttribute('src')).toBe(
|
||
'center-two-2.png',
|
||
);
|
||
});
|
||
|
||
test('mobile today channel only shows newly published works from today', async () => {
|
||
const user = userEvent.setup();
|
||
const now = new Date();
|
||
const todayPublishedAt = new Date(
|
||
now.getFullYear(),
|
||
now.getMonth(),
|
||
now.getDate(),
|
||
10,
|
||
).toISOString();
|
||
const yesterdayPublishedAt = new Date(
|
||
now.getFullYear(),
|
||
now.getMonth(),
|
||
now.getDate() - 1,
|
||
10,
|
||
).toISOString();
|
||
const todayEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-today',
|
||
profileId: 'puzzle-profile-today',
|
||
publicWorkCode: 'PZ-TODAY1',
|
||
worldName: '今日新游',
|
||
publishedAt: todayPublishedAt,
|
||
updatedAt: todayPublishedAt,
|
||
} satisfies PlatformPublicGalleryCard;
|
||
const yesterdayEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-yesterday',
|
||
profileId: 'puzzle-profile-yesterday',
|
||
publicWorkCode: 'PZ-YDAY01',
|
||
worldName: '昨日旧作',
|
||
publishedAt: yesterdayPublishedAt,
|
||
updatedAt: yesterdayPublishedAt,
|
||
} satisfies PlatformPublicGalleryCard;
|
||
const updatedTodayEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-updated-today',
|
||
profileId: 'puzzle-profile-updated-today',
|
||
publicWorkCode: 'PZ-UPDAY1',
|
||
worldName: '今日更新旧作',
|
||
publishedAt: yesterdayPublishedAt,
|
||
updatedAt: todayPublishedAt,
|
||
} satisfies PlatformPublicGalleryCard;
|
||
|
||
renderLoggedOutHomeView(vi.fn(), {
|
||
latestEntries: [yesterdayEntry, updatedTodayEntry, todayEntry],
|
||
});
|
||
|
||
await user.click(screen.getByRole('button', { name: '今日游戏' }));
|
||
|
||
expect(screen.getByRole('button', { name: /今日新游/u })).toBeTruthy();
|
||
expect(screen.queryByText('昨日旧作')).toBeNull();
|
||
expect(screen.queryByText('今日更新旧作')).toBeNull();
|
||
});
|
||
|
||
test('desktop home syncs mobile home modules without square or latest labels', () => {
|
||
mockDesktopLayout();
|
||
const todayPublishedAt = new Date().toISOString();
|
||
const todayEntry = {
|
||
...puzzlePublicEntry,
|
||
workId: 'puzzle-work-desktop-today',
|
||
profileId: 'puzzle-profile-desktop-today',
|
||
publicWorkCode: 'PZ-DTODAY',
|
||
worldName: '桌面今日新游',
|
||
publishedAt: todayPublishedAt,
|
||
updatedAt: todayPublishedAt,
|
||
} satisfies PlatformPublicGalleryCard;
|
||
|
||
renderLoggedOutHomeView(vi.fn(), {
|
||
latestEntries: [puzzlePublicEntry, todayEntry],
|
||
});
|
||
|
||
expect(screen.getByText('今日游戏')).toBeTruthy();
|
||
expect(screen.getByText('推荐')).toBeTruthy();
|
||
expect(screen.getByText('作品分类')).toBeTruthy();
|
||
expect(screen.getAllByText('桌面今日新游').length).toBeGreaterThan(0);
|
||
expect(screen.queryByText('趋势关注')).toBeNull();
|
||
expect(screen.queryByText('最新发布')).toBeNull();
|
||
expect(screen.queryByText('作品广场')).toBeNull();
|
||
expect(screen.queryByText('公开作品')).toBeNull();
|
||
expect(screen.queryByText('PZ-EPUBLIC1')).toBeNull();
|
||
expect(screen.getAllByText('拼图').length).toBeGreaterThan(0);
|
||
expect(screen.queryByText('1777110165.990127Z')).toBeNull();
|
||
});
|
||
|
||
test('mobile home moves category shelf into game category channel', async () => {
|
||
const user = userEvent.setup();
|
||
const { container } = renderLoggedOutHomeView(vi.fn(), {
|
||
latestEntries: [puzzlePublicEntry],
|
||
});
|
||
|
||
expect(screen.queryByRole('button', { name: 'PC游戏' })).toBeNull();
|
||
expect(screen.queryByRole('button', { name: '即点即玩' })).toBeNull();
|
||
|
||
await user.click(screen.getByRole('button', { name: '游戏分类' }));
|
||
|
||
expect(screen.getAllByText('游戏分类').length).toBeGreaterThan(0);
|
||
expect(screen.getByRole('button', { name: /筛选/u })).toBeTruthy();
|
||
expect(screen.getByRole('button', { name: '奇幻' })).toBeTruthy();
|
||
expect(screen.getByRole('button', { name: /奇幻拼图，试玩/u })).toBeTruthy();
|
||
expect(container.querySelector('.platform-category-game-list')).toBeTruthy();
|
||
expect(container.querySelector('.platform-category-game-item')).toBeTruthy();
|
||
expect(
|
||
container.querySelector('.platform-category-game-item__action')
|
||
?.textContent,
|
||
).toBe('试玩');
|
||
});
|
||
|
||
test('mobile game category list orders works by composite public metric', async () => {
|
||
const user = userEvent.setup();
|
||
|
||
renderLoggedOutHomeView(vi.fn(), {
|
||
latestEntries: [puzzlePublicEntry, hotRankEntry],
|
||
});
|
||
|
||
await user.click(screen.getByRole('button', { name: '游戏分类' }));
|
||
await user.click(screen.getByRole('button', { name: '奇幻' }));
|
||
|
||
const gameItems = Array.from(
|
||
document.querySelectorAll('.platform-category-game-item__title'),
|
||
).map((element) => element.textContent);
|
||
expect(gameItems).toEqual(['热门高分拼图', '奇幻拼图']);
|
||
});
|
||
|
||
test('bottom category tab becomes ranking and switches ranking metrics', async () => {
|
||
const user = userEvent.setup();
|
||
|
||
renderStatefulLoggedOutHomeView({
|
||
latestEntries: [remixRankEntry, hotRankEntry, newRankEntry],
|
||
});
|
||
|
||
expect(screen.queryByRole('button', { name: '分类' })).toBeNull();
|
||
|
||
await user.click(screen.getByRole('button', { name: '排行' }));
|
||
|
||
expect(await screen.findByRole('tab', { name: '热门榜' })).toBeTruthy();
|
||
expect(screen.getByRole('tab', { name: '改造榜' })).toBeTruthy();
|
||
expect(screen.getByRole('tab', { name: '新品榜' })).toBeTruthy();
|
||
expect(screen.getByRole('tab', { name: '点赞榜' })).toBeTruthy();
|
||
|
||
const rankingPanel = document.getElementById('platform-tab-panel-category');
|
||
expect(rankingPanel?.getAttribute('aria-hidden')).toBe('false');
|
||
expect(within(rankingPanel!).getByText('热门高分拼图')).toBeTruthy();
|
||
expect(within(rankingPanel!).getByText('40')).toBeTruthy();
|
||
expect(within(rankingPanel!).getAllByText('游玩').length).toBeGreaterThan(0);
|
||
|
||
await user.click(screen.getByRole('tab', { name: '改造榜' }));
|
||
|
||
expect(within(rankingPanel!).getByText('改造高分拼图')).toBeTruthy();
|
||
expect(within(rankingPanel!).getByText('18')).toBeTruthy();
|
||
expect(within(rankingPanel!).getAllByText('改造').length).toBeGreaterThan(0);
|
||
|
||
await user.click(screen.getByRole('tab', { name: '新品榜' }));
|
||
|
||
expect(within(rankingPanel!).getByText('新品增长拼图')).toBeTruthy();
|
||
expect(within(rankingPanel!).getByText('9')).toBeTruthy();
|
||
expect(within(rankingPanel!).getAllByText('近7日').length).toBeGreaterThan(0);
|
||
});
|
||
|
||
test('ranking rows limit displayed work name and show two short tags on the third line', async () => {
|
||
const user = userEvent.setup();
|
||
|
||
renderStatefulLoggedOutHomeView({
|
||
latestEntries: [longTextRankEntry],
|
||
});
|
||
|
||
await user.click(screen.getByRole('button', { name: '排行' }));
|
||
|
||
const rankingPanel = document.getElementById('platform-tab-panel-category');
|
||
expect(rankingPanel).toBeTruthy();
|
||
expect(within(rankingPanel!).getByText('关键词逍遥游拼图')).toBeTruthy();
|
||
expect(within(rankingPanel!).queryByText('关键词逍遥游拼图关卡')).toBeNull();
|
||
expect(within(rankingPanel!).getByText('逍遥游拼')).toBeTruthy();
|
||
expect(within(rankingPanel!).getByText('古风机关')).toBeTruthy();
|
||
expect(within(rankingPanel!).queryByText(/2026-04-29/u)).toBeNull();
|
||
expect(within(rankingPanel!).queryByText('拼图玩家')).toBeNull();
|
||
});
|