Hide_D
d6a25c63b0
지난 플레이를 현재 장수 카드와 전투·숙련도·기록 컴포넌트로 표시하고, 중앙 archive의 소유자 기반 조회를 연결한다. 명예의 전당과 왕조에 현재/이전 서버 source 분리를 추가한다.
264 lines
13 KiB
TypeScript
264 lines
13 KiB
TypeScript
import { mkdir, writeFile } from 'node:fs/promises';
|
|
import { resolve } from 'node:path';
|
|
|
|
import { expect, test, type Page, type Route } from '@playwright/test';
|
|
import { gamePath, gameProfile, gameTrpcRoute } from './gameTestPaths.js';
|
|
|
|
const response = (data: unknown) => ({ result: { data } });
|
|
const operationNames = (route: Route) =>
|
|
decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1] ?? '').split(',');
|
|
|
|
const installArchive = async (page: Page, options: { battleAvailable?: boolean } = {}) => {
|
|
await page.addInitScript((profile) => {
|
|
localStorage.setItem('sammo-game-token', 'ga_archive');
|
|
localStorage.setItem('sammo-game-profile', profile);
|
|
}, gameProfile);
|
|
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: null });
|
|
if (operation === 'archive.myPastPlays') {
|
|
return response({
|
|
seasons: [
|
|
{
|
|
sourceProfile: 'che',
|
|
source: 'legacy',
|
|
serverId: 'che_2024_01',
|
|
openedAt: '2024-01-31T00:00:00.000Z',
|
|
date: '2024-01-31T00:00:00.000Z',
|
|
season: 51,
|
|
scenario: 2,
|
|
scenarioName: '천하쟁패',
|
|
dynastyId: 7,
|
|
generals: [
|
|
{
|
|
generalNo: 17,
|
|
name: '관우',
|
|
lastYearMonth: 21403,
|
|
nationId: 2,
|
|
nationName: '촉',
|
|
nationColor: '#800000',
|
|
leadership: 91,
|
|
strength: 98,
|
|
intel: 77,
|
|
experience: 23000,
|
|
dedication: 1200,
|
|
officerLevel: 12,
|
|
officerLevelText: '황제',
|
|
personal: '대담',
|
|
special: '상재',
|
|
special2: '신산',
|
|
historyCount: 2,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
}
|
|
if (operation === 'archive.myPastPlayDetail') {
|
|
return response({
|
|
sourceProfile: 'che',
|
|
source: 'legacy',
|
|
serverId: 'che_2024_01',
|
|
generalNo: 17,
|
|
dynastyPath: '/dynasty/7?source=legacy',
|
|
nation: { name: '촉', color: '#800000' },
|
|
general: {
|
|
id: 17,
|
|
name: '관우',
|
|
picture: null,
|
|
imageServer: 0,
|
|
npcState: 0,
|
|
officerLevel: 12,
|
|
officerLevelText: '황제',
|
|
generalType: '용장',
|
|
stats: { leadership: 91, strength: 98, intelligence: 77 },
|
|
gold: 12_000,
|
|
rice: 8_000,
|
|
crew: 7_000,
|
|
train: 100,
|
|
atmos: 100,
|
|
injury: 0,
|
|
experience: 23_000,
|
|
dedication: 1_200,
|
|
crewTypeId: 1,
|
|
crewTypeName: '보병',
|
|
traits: { personal: '대담', specialDomestic: '상재', specialWar: '신산' },
|
|
progression: {
|
|
experienceLevel: 12,
|
|
dedicationLevel: 8,
|
|
dedicationText: '황제',
|
|
statExperience: { leadership: 12, strength: 14, intelligence: 8 },
|
|
statUpgradeLimit: 30,
|
|
dex: [125_000, 250_000, 375_000, 500_000, 625_000],
|
|
},
|
|
},
|
|
masteryAvailable: true,
|
|
battle: {
|
|
available: options.battleAvailable ?? true,
|
|
warnum: 16,
|
|
wins: 10,
|
|
losses: 6,
|
|
strategies: 4,
|
|
killCrew: 12_000,
|
|
deathCrew: 8_000,
|
|
winRate: 62.5,
|
|
killRate: 75,
|
|
recentWar: '2024-01-30T03:00:00.000Z',
|
|
},
|
|
logs: {
|
|
generalHistory: {
|
|
available: true,
|
|
entries: [
|
|
{ id: 2, text: '<C>●</>214년 3월: 촉에 임관' },
|
|
{ id: 1, text: '<Y>●</>214년 1월: 성도에서 거병' },
|
|
],
|
|
},
|
|
battleDetail: { available: false, entries: [] },
|
|
battleResult: { available: false, entries: [] },
|
|
generalAction: { available: false, entries: [] },
|
|
},
|
|
});
|
|
}
|
|
return { error: { message: `unhandled ${operation}`, data: { code: 'BAD_REQUEST' } } };
|
|
});
|
|
await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(results) });
|
|
});
|
|
};
|
|
|
|
test('지난 플레이 관직은 숫자 대신 저장된 Ref 표시명으로 나타난다', async ({ page }) => {
|
|
await installArchive(page);
|
|
await page.goto('past-plays');
|
|
|
|
const generalRow = page.locator('tbody tr').filter({ hasText: '관우' });
|
|
await expect(generalRow).toContainText('황제');
|
|
await expect(generalRow).not.toContainText('che_');
|
|
});
|
|
|
|
test('보존되지 않은 과거 전투 집계는 0으로 꾸미지 않고 가용성 경계를 표시한다', async ({ page }) => {
|
|
await installArchive(page, { battleAvailable: false });
|
|
await page.goto('past-plays');
|
|
await page.locator('.detail-toggle').click();
|
|
|
|
await expect(page.locator('[data-general-battle-summary]')).toHaveText('전투 집계가 보존되지 않았습니다.');
|
|
await expect(page.locator('[data-general-battle-summary]')).not.toContainText('승률');
|
|
});
|
|
|
|
test('past plays is available without a current general and preserves desktop interaction geometry', async ({
|
|
page,
|
|
}) => {
|
|
await installArchive(page);
|
|
await page.setViewportSize({ width: 1200, height: 900 });
|
|
await page.goto('past-plays');
|
|
|
|
const root = page.locator('.past-plays-page');
|
|
await expect(root).toBeVisible();
|
|
await expect(page.getByRole('heading', { name: '내 지난 플레이 보기' })).toBeVisible();
|
|
await expect(page.getByText('천하쟁패 · 51기')).toBeVisible();
|
|
await expect(page.getByText('이전 서버 기록')).toBeVisible();
|
|
await expect(page.getByText('che', { exact: true })).toBeVisible();
|
|
await expect(page.getByText(/2024.*개장/)).toBeVisible();
|
|
await expect(page.locator('.general-name')).toHaveText('관우');
|
|
await expect(page.locator('tbody tr').filter({ hasText: '관우' })).toContainText('황제');
|
|
const detailToggle = page.locator('.detail-toggle');
|
|
await expect(detailToggle).toHaveText('상세 보기');
|
|
await detailToggle.hover();
|
|
const beforePress = await detailToggle.boundingBox();
|
|
await page.mouse.down();
|
|
expect(await detailToggle.evaluate((element) => getComputedStyle(element).transform)).not.toBe('none');
|
|
await page.mouse.up();
|
|
expect((await detailToggle.boundingBox())?.y).toBeCloseTo(beforePress?.y ?? 0, 0);
|
|
await expect(page.getByText('214년 3월: 촉에 임관')).toBeVisible();
|
|
await expect(detailToggle).toHaveAttribute('aria-expanded', 'true');
|
|
await expect(page.locator('.archive-general-card')).toHaveAttribute('data-general-basic-card', '');
|
|
await expect(page.locator('.archive-general-card [role="progressbar"]')).toHaveCount(14);
|
|
await expect(page.locator('[data-general-battle-summary]')).toContainText('승률62.5%');
|
|
await expect(page.locator('[data-general-battle-summary]')).toContainText('살상률75.0%');
|
|
await expect(page.locator('[data-log-type="battleDetail"]')).toContainText(
|
|
'이 기수에는 전투 기록이 보존되지 않았습니다.'
|
|
);
|
|
await expect(page.locator('[data-log-type="battleResult"]')).toContainText(
|
|
'이 기수에는 전투 결과가 보존되지 않았습니다.'
|
|
);
|
|
await expect(page.locator('[data-log-type="generalAction"]')).toContainText(
|
|
'이 기수에는 개인 기록이 보존되지 않았습니다.'
|
|
);
|
|
await expect(page.locator('[data-log-type="generalHistory"] C')).toHaveCount(0);
|
|
await expect(page.getByRole('link', { name: '이 기수 국가 정보' })).toHaveAttribute(
|
|
'href',
|
|
`${gamePath('/dynasty/7')}?source=legacy`
|
|
);
|
|
|
|
const geometry = await root.evaluate((element) => {
|
|
const rect = element.getBoundingClientRect();
|
|
const titleRect = element.querySelector('.title-row')!.getBoundingClientRect();
|
|
const tableRect = element.querySelector('table')!.getBoundingClientRect();
|
|
const detailGrid = element.querySelector('.detail-grid')!;
|
|
const card = element.querySelector('[data-general-basic-card]')!.getBoundingClientRect();
|
|
const style = getComputedStyle(element);
|
|
return {
|
|
x: rect.x,
|
|
width: rect.width,
|
|
minHeight: rect.height,
|
|
title: { x: titleRect.x, y: titleRect.y, width: titleRect.width },
|
|
tableWidth: tableRect.width,
|
|
detailColumns: getComputedStyle(detailGrid).gridTemplateColumns,
|
|
cardWidth: card.width,
|
|
color: style.color,
|
|
backgroundColor: style.backgroundColor,
|
|
};
|
|
});
|
|
expect(geometry).toMatchObject({
|
|
x: 100,
|
|
width: 1000,
|
|
title: { x: 100, y: 0, width: 1000 },
|
|
tableWidth: 1000,
|
|
cardWidth: 497,
|
|
color: 'rgb(238, 238, 238)',
|
|
backgroundColor: 'rgb(48, 32, 22)',
|
|
});
|
|
|
|
const refresh = page.getByRole('button', { name: '새로고침' });
|
|
await refresh.hover();
|
|
await expect(refresh).toHaveCSS('color', 'rgb(135, 206, 235)');
|
|
await refresh.focus();
|
|
expect(await refresh.evaluate((element) => document.activeElement === element)).toBe(true);
|
|
|
|
const artifactRoot = process.env.PAST_PLAYS_ARTIFACT_DIR;
|
|
if (artifactRoot) {
|
|
const output = resolve(artifactRoot);
|
|
await mkdir(output, { recursive: true });
|
|
await writeFile(resolve(output, 'desktop-computed-dom.json'), `${JSON.stringify(geometry, null, 2)}\n`);
|
|
await page.screenshot({ path: resolve(output, 'desktop.png'), fullPage: true });
|
|
}
|
|
});
|
|
|
|
test('past plays keeps the legacy-width table scrollable on a mobile viewport', async ({ page }) => {
|
|
await installArchive(page);
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.goto('past-plays');
|
|
|
|
await page.locator('.detail-toggle').click();
|
|
await expect(page.locator('.archive-general-card')).toBeVisible();
|
|
|
|
const scroll = page.locator('.table-scroll');
|
|
const metrics = await scroll.evaluate((element) => ({
|
|
clientWidth: element.clientWidth,
|
|
scrollWidth: element.scrollWidth,
|
|
overflowX: getComputedStyle(element).overflowX,
|
|
}));
|
|
// The shared legacy shell keeps its historical 500 px minimum canvas.
|
|
expect(metrics).toEqual({ clientWidth: 500, scrollWidth: 940, overflowX: 'auto' });
|
|
await expect(page.locator('.title-row')).toHaveCSS('flex-direction', 'column');
|
|
await expect(page.locator('.detail-grid')).toHaveCSS('grid-template-columns', '498px');
|
|
const detailMetrics = await page.locator('.detail-shell').evaluate((element) => ({
|
|
width: element.getBoundingClientRect().width,
|
|
scrollWidth: element.scrollWidth,
|
|
recordBottom: element.querySelector('[data-general-record-panels]')!.getBoundingClientRect().bottom,
|
|
shellBottom: element.getBoundingClientRect().bottom,
|
|
}));
|
|
expect(detailMetrics.width).toBe(498);
|
|
expect(detailMetrics.scrollWidth).toBe(498);
|
|
expect(detailMetrics.recordBottom).toBeLessThanOrEqual(detailMetrics.shellBottom);
|
|
});
|