202 lines
8.1 KiB
TypeScript
202 lines
8.1 KiB
TypeScript
import { expect, test, type Page, type Route } from '@playwright/test';
|
|
import { readFile } from 'node:fs/promises';
|
|
import { dirname, resolve } from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
|
|
|
|
const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
|
|
const imageRoots = [
|
|
...(process.env.FRONTEND_PARITY_IMAGE_ROOT ? [resolve(process.env.FRONTEND_PARITY_IMAGE_ROOT, 'game')] : []),
|
|
resolve(repositoryRoot, '../image/game'),
|
|
resolve(repositoryRoot, '../../image/game'),
|
|
];
|
|
const names = [
|
|
'관우',
|
|
'장료',
|
|
'조운',
|
|
'하후돈',
|
|
'손책',
|
|
'태사자',
|
|
'마초',
|
|
'황충',
|
|
'여포',
|
|
'전위',
|
|
'감녕',
|
|
'문추',
|
|
'안량',
|
|
'허저',
|
|
'주태',
|
|
'방덕',
|
|
];
|
|
const participants = names.map((name, index) => ({
|
|
id: index + 1,
|
|
name,
|
|
leadership: 80,
|
|
strength: 80,
|
|
intel: 80,
|
|
level: 10,
|
|
groupId: 10 + (index % 8),
|
|
groupNo: Math.floor(index / 8),
|
|
win: 3 - (index % 2),
|
|
draw: index % 2,
|
|
lose: 0,
|
|
gl: 12 - index,
|
|
finalRank: Math.floor(index / 8) + 1,
|
|
}));
|
|
const matches = [
|
|
...Array.from({ length: 8 }, (_, index) => ({
|
|
id: index + 1,
|
|
stage: 7,
|
|
roundIndex: index,
|
|
attackerId: index * 2 + 1,
|
|
defenderId: index * 2 + 2,
|
|
winnerId: index * 2 + 1,
|
|
})),
|
|
...Array.from({ length: 4 }, (_, index) => ({
|
|
id: index + 9,
|
|
stage: 8,
|
|
roundIndex: index,
|
|
attackerId: index * 4 + 1,
|
|
defenderId: index * 4 + 3,
|
|
winnerId: index * 4 + 1,
|
|
})),
|
|
...Array.from({ length: 2 }, (_, index) => ({
|
|
id: index + 13,
|
|
stage: 9,
|
|
roundIndex: index,
|
|
attackerId: index * 8 + 1,
|
|
defenderId: index * 8 + 5,
|
|
winnerId: index * 8 + 1,
|
|
})),
|
|
{ id: 15, stage: 10, roundIndex: 0, attackerId: 1, defenderId: 9, winnerId: 1 },
|
|
];
|
|
|
|
const response = (data: unknown) => ({ result: { data } });
|
|
const operationNames = (route: Route): string[] => {
|
|
const url = new URL(route.request().url());
|
|
return decodeURIComponent(url.pathname.slice(url.pathname.lastIndexOf('/trpc/') + 6)).split(',');
|
|
};
|
|
|
|
const readReferenceImage = async (filename: string): Promise<Buffer> => {
|
|
for (const imageRoot of imageRoots) {
|
|
try {
|
|
return await readFile(resolve(imageRoot, filename));
|
|
} catch {
|
|
// Worktrees can be nested at different depths.
|
|
}
|
|
}
|
|
throw new Error(`Reference image not found: ${filename}`);
|
|
};
|
|
|
|
const installFixture = async (page: Page) => {
|
|
await page.addInitScript((profile) => {
|
|
window.localStorage.setItem('sammo-game-token', 'ga_tournament_bracket_playwright');
|
|
window.localStorage.setItem('sammo-game-profile', profile);
|
|
}, gameProfile);
|
|
for (const filename of ['back_walnut.jpg', 'back_green.jpg', 'back_blue.jpg']) {
|
|
await page.route(`**/image/game/${filename}`, async (route) => {
|
|
await route.fulfill({ status: 200, contentType: 'image/jpeg', body: await readReferenceImage(filename) });
|
|
});
|
|
}
|
|
await page.route(gameTrpcRoute, async (route) => {
|
|
const results = operationNames(route).map((operation) => {
|
|
if (operation === 'auth.status') return response({ ok: true });
|
|
if (operation === 'lobby.info') return response({ myGeneral: { id: 1, name: names[0] } });
|
|
if (operation === 'join.getConfig') return response({});
|
|
if (operation === 'general.me') return response({ general: { id: 1, name: names[0] } });
|
|
if (operation === 'tournament.getAdminStatus') return response({ ok: false });
|
|
if (operation === 'tournament.getSnapshot') {
|
|
return response({
|
|
state: {
|
|
stage: 0,
|
|
phase: 0,
|
|
type: 0,
|
|
auto: false,
|
|
openYear: 184,
|
|
openMonth: 1,
|
|
termSeconds: 60,
|
|
nextAt: '2026-08-02T00:00:00.000Z',
|
|
winnerId: 1,
|
|
},
|
|
participants,
|
|
matches,
|
|
betCount: 16,
|
|
});
|
|
}
|
|
if (operation === 'tournament.getBettingSummary') {
|
|
return response({
|
|
totals: Object.fromEntries(participants.map((participant, index) => [participant.id, 100 + index * 10])),
|
|
myTotals: {},
|
|
totalAmount: 2800,
|
|
myAmount: 0,
|
|
});
|
|
}
|
|
return response(null);
|
|
});
|
|
await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(results) });
|
|
});
|
|
};
|
|
|
|
const openTournament = async (page: Page) => {
|
|
await installFixture(page);
|
|
await page.goto('tournament');
|
|
await expect(page.getByLabel('토너먼트 대진표')).toBeVisible();
|
|
};
|
|
|
|
test('desktop bracket connects every real general slot to the next round', async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width: 1365, height: 900 });
|
|
await openTournament(page);
|
|
|
|
await expect(page.locator('.bracket-canvas .bracket-name[data-general-id]')).toHaveCount(31);
|
|
await expect(page.locator('.bracket-canvas .connector-segment')).toHaveCount(15);
|
|
await expect(page.locator('.bracket-canvas .bracket-name.advanced', { hasText: '관우' })).toHaveCount(5);
|
|
|
|
const geometry = await page.locator('.bracket-canvas').evaluate((canvas) => {
|
|
const firstConnector = canvas.querySelector<HTMLElement>('.connector-segment')!.getBoundingClientRect();
|
|
const champion = canvas.querySelector<HTMLElement>('.bracket-champion .bracket-name')!.getBoundingClientRect();
|
|
const finalists = [...canvas.querySelectorAll<HTMLElement>('.bracket-round:nth-of-type(3) .bracket-name')].map(
|
|
(element) => element.getBoundingClientRect()
|
|
);
|
|
return {
|
|
canvasWidth: canvas.getBoundingClientRect().width,
|
|
connectorCenter: firstConnector.x + firstConnector.width / 2,
|
|
championCenter: champion.x + champion.width / 2,
|
|
finalistCenters: finalists.map((rect) => rect.x + rect.width / 2),
|
|
connectorQuarters: [firstConnector.x + firstConnector.width / 4, firstConnector.x + (firstConnector.width * 3) / 4],
|
|
};
|
|
});
|
|
expect(geometry.canvasWidth).toBe(2000);
|
|
expect(Math.abs(geometry.connectorCenter - geometry.championCenter)).toBeLessThan(1);
|
|
expect(geometry.finalistCenters).toHaveLength(2);
|
|
expect(Math.abs(geometry.finalistCenters[0]! - geometry.connectorQuarters[0]!)).toBeLessThan(1);
|
|
expect(Math.abs(geometry.finalistCenters[1]! - geometry.connectorQuarters[1]!)).toBeLessThan(1);
|
|
|
|
await page.screenshot({ path: testInfo.outputPath('tournament-bracket-desktop.webp'), fullPage: true });
|
|
});
|
|
|
|
test('mobile bracket shows every round and general within the handheld width', async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await openTournament(page);
|
|
|
|
const bracket = page.locator('.mobile-bracket');
|
|
await expect(bracket).toBeVisible();
|
|
await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(31);
|
|
await expect(bracket.locator('.mobile-bracket-name', { hasText: '방덕' })).toBeVisible();
|
|
await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(5);
|
|
const bounds = await bracket.evaluate((element) => {
|
|
const names = [...element.querySelectorAll<HTMLElement>('.mobile-bracket-name')].map((name) =>
|
|
name.getBoundingClientRect()
|
|
);
|
|
const own = element.getBoundingClientRect();
|
|
return {
|
|
width: own.width,
|
|
minX: Math.min(...names.map((rect) => rect.left - own.left)),
|
|
maxX: Math.max(...names.map((rect) => rect.right - own.left)),
|
|
};
|
|
});
|
|
expect(bounds.width).toBe(390);
|
|
expect(bounds.minX).toBeGreaterThanOrEqual(0);
|
|
expect(bounds.maxX).toBeLessThanOrEqual(390);
|
|
await page.screenshot({ path: testInfo.outputPath('tournament-bracket-mobile.webp'), fullPage: true });
|
|
});
|