195 lines
10 KiB
TypeScript
195 lines
10 KiB
TypeScript
import { readFile } from 'node:fs/promises';
|
|
import { resolve } from 'node:path';
|
|
import { expect, test, type Page } from '@playwright/test';
|
|
import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
|
|
|
|
// 기존 화면 fixture의 읽기 응답을 고정했다. 실제 계정이나 게임 서버에는 접근하지 않는다.
|
|
const fixtureText = await readFile(new URL('./fixtures/typography.json', import.meta.url), 'utf8');
|
|
const imageRoot = process.env.FRONTEND_PARITY_IMAGE_ROOT ?? resolve(import.meta.dirname, '../../../../image');
|
|
const fontRoot = process.env.TYPOGRAPHY_FONT_ROOT;
|
|
const names = [
|
|
{ label: '전각9자', general: '가나다라마바사아자', nation: '대한민국천하통일국' },
|
|
{ label: '반각18자', general: 'WWWWWWWWWWWWWWWWWW', nation: 'MMMMMMMMMMMMMMMMMM' },
|
|
] as const;
|
|
|
|
const installAssets = async (page: Page): Promise<void> => {
|
|
await page.route(/(?:\/image\/|sam-image\.hided\.net\/)/u, async (route) => {
|
|
const url = new URL(route.request().url());
|
|
const relative = decodeURIComponent(url.pathname.replace(/^\/image\//u, '').replace(/^\//u, ''));
|
|
if (relative.split('/').includes('..')) throw new Error('Invalid typography image path');
|
|
await route.fulfill({
|
|
body: await readFile(resolve(imageRoot, relative)),
|
|
contentType: relative.endsWith('.png')
|
|
? 'image/png'
|
|
: relative.endsWith('.gif')
|
|
? 'image/gif'
|
|
: 'image/jpeg',
|
|
});
|
|
});
|
|
if (fontRoot) {
|
|
await page.route('**/pretendard.css', (route) =>
|
|
route.fulfill({ path: resolve(fontRoot, 'source.css'), contentType: 'text/css' })
|
|
);
|
|
await page.route('**/*.woff2', (route) =>
|
|
route.fulfill({
|
|
path: resolve(fontRoot, new URL(route.request().url()).pathname.split('/').at(-1)!),
|
|
contentType: 'font/woff2',
|
|
})
|
|
);
|
|
}
|
|
};
|
|
|
|
const install = async (page: Page, scene: string, general: string, nation: string): Promise<void> => {
|
|
const fixtures = JSON.parse(
|
|
fixtureText.replaceAll(names[0].general, general).replaceAll(names[0].nation, nation)
|
|
) as Record<string, Record<string, unknown>>;
|
|
await page.addInitScript((profile) => {
|
|
localStorage.setItem('sammo-game-token', 'ga_typography_fixture');
|
|
localStorage.setItem('sammo-game-profile', profile);
|
|
localStorage.removeItem('sam_customCSS');
|
|
}, gameProfile);
|
|
await page.route('**/events**', (route) => route.abort());
|
|
await page.route(gameTrpcRoute, async (route) => {
|
|
const operations = decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1]!).split(',');
|
|
const responses = operations.map((operation) => {
|
|
const response = fixtures[scene]?.[operation];
|
|
if (response !== undefined) return response;
|
|
if (operation === 'public.recordAccess') return { result: { data: { recorded: true } } };
|
|
throw new Error(`Uncovered typography fixture: ${scene}/${operation}`);
|
|
});
|
|
await route.fulfill({ contentType: 'application/json', body: JSON.stringify(responses) });
|
|
});
|
|
await installAssets(page);
|
|
};
|
|
|
|
const waitForFonts = async (page: Page): Promise<void> => {
|
|
await page.evaluate(async () => {
|
|
await document.fonts.ready;
|
|
});
|
|
expect(
|
|
await page.evaluate(() =>
|
|
[...document.fonts].some((font) => font.family.includes('Pretendard') && font.status === 'loaded')
|
|
)
|
|
).toBe(true);
|
|
};
|
|
|
|
for (const width of [500, 1000]) {
|
|
for (const name of names) {
|
|
test(`메인 주요 이름과 제목을 보존한다 ${width}px ${name.label}`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await install(page, 'main', name.general, name.nation);
|
|
await page.goto('./');
|
|
const general = page.locator('.battle-general-name:visible').first();
|
|
await expect(general).toContainText(name.general);
|
|
const nation = page.locator('.city-nation:visible').first();
|
|
await expect(nation).toContainText(name.nation);
|
|
await waitForFonts(page);
|
|
for (const label of [general, nation]) {
|
|
expect(await label.evaluate((element) => element.scrollWidth <= element.clientWidth + 1)).toBe(true);
|
|
}
|
|
await expect(page.locator('.game-shell__title')).toHaveCSS('font-size', '24px');
|
|
await page.screenshot({ path: testInfo.outputPath('main-maximum-name.png'), fullPage: true });
|
|
});
|
|
|
|
test(`네 단계와 밀집 화면 보류 계약 ${width}px ${name.label}`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await install(page, 'personnel', name.general, name.nation);
|
|
await page.goto('nation/personnel');
|
|
await expect(page.locator('.nation-heading')).toContainText(name.nation);
|
|
await expect(page.locator('.chief-entry-copy strong').first()).toHaveText(name.general);
|
|
await waitForFonts(page);
|
|
await expect(page.locator('.nation-heading')).toHaveCSS('font-size', width === 500 ? '16px' : '24px');
|
|
// 500px의 15px 이름/10px 잠금은 확대 시 표시 이름이 줄어들어 보류했다.
|
|
await expect(page.locator('.chief-entry-copy strong').first()).toHaveCSS(
|
|
'font-size',
|
|
width === 500 ? '15px' : '16px'
|
|
);
|
|
const geometry = await page.locator('#personnel-container').evaluate((element) => ({
|
|
width: element.getBoundingClientRect().width,
|
|
scrollWidth: element.scrollWidth,
|
|
controls: [...element.querySelectorAll<HTMLElement>('.personnel-change-button')].map((button) => {
|
|
const rect = button.getBoundingClientRect();
|
|
return { width: rect.width, height: rect.height, text: button.innerText };
|
|
}),
|
|
}));
|
|
expect(geometry.scrollWidth).toBeLessThanOrEqual(width + 1);
|
|
expect(geometry.controls.every((control) => control.width > 0 && control.height >= 24)).toBe(true);
|
|
await testInfo.attach('geometry', {
|
|
body: JSON.stringify(geometry, null, 2),
|
|
contentType: 'application/json',
|
|
});
|
|
await page.screenshot({ path: testInfo.outputPath('personnel-maximum-name.png'), fullPage: true });
|
|
});
|
|
}
|
|
|
|
test(`사령부 12턴 요약의 기존 밀도를 유지한다 ${width}px`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await install(page, 'chief', names[0].general, names[0].nation);
|
|
await page.goto('chief-center');
|
|
const row = page.locator('.chief-overview .chief-card.compact .chief-row').first();
|
|
await expect(row).toBeVisible();
|
|
await waitForFonts(page);
|
|
await expect(row).toHaveCSS('font-size', '8.8px');
|
|
await expect(row).toHaveCSS('line-height', '11.25px');
|
|
await expect(page.locator('.chief-overview .compact-name').first()).toHaveCSS('font-size', '10.4px');
|
|
expect((await row.boundingBox())?.height).toBe(11.25);
|
|
await page.screenshot({ path: testInfo.outputPath('chief-deferred-density.png'), fullPage: true });
|
|
});
|
|
|
|
for (const length of [4, 7, 9, 18]) {
|
|
test(`빙의 이름 길이별 축소를 유지한다 ${width}px ${length}자`, async ({ page }, testInfo) => {
|
|
const general = length === 18 ? names[1].general : names[0].general.slice(0, length);
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await install(page, 'possession', general, names[0].nation);
|
|
await page.goto('join');
|
|
const title = page.locator('.npc-card-name').first();
|
|
await expect(title).toHaveText(general);
|
|
await waitForFonts(page);
|
|
await expect(title).toHaveCSS('font-size', length >= 9 ? '12px' : '16px');
|
|
await expect(title).toHaveCSS('white-space', 'nowrap');
|
|
expect((await title.boundingBox())?.height).toBe(25);
|
|
await page.screenshot({ path: testInfo.outputPath('possession-name-length.png'), fullPage: true });
|
|
});
|
|
}
|
|
|
|
test(`전투 로그의 장수명과 병력 축소를 유지한다 ${width}px`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await installAssets(page);
|
|
const log =
|
|
'◆217년 7월:<div class="small_war_log">마귀 ' +
|
|
'<span class="name_plate">【Hide_D】</span> <span class="crew_plate">0(-3714)</span> ' +
|
|
'<span class="war_type_defense">←</span> <span class="crew_plate">3955(-3545)</span> ' +
|
|
'백이 <span class="name_plate">【경국지색소교】</span> 19:57</div>';
|
|
await page.route(gameTrpcRoute, async (route) => {
|
|
const operations = decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1]!).split(
|
|
','
|
|
);
|
|
const data: Record<string, unknown> = {
|
|
'public.getMapLayout': { mapName: 'che', cityList: [] },
|
|
'public.getCachedMap': {
|
|
year: 217,
|
|
month: 7,
|
|
cityList: [],
|
|
nationList: [],
|
|
history: [{ id: 1, text: log }],
|
|
},
|
|
'public.getWorldTrend': { year: 217, month: 7, turnTerm: 10 },
|
|
'public.getNationList': [],
|
|
'public.getGeneralList': [],
|
|
};
|
|
await route.fulfill({
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(operations.map((operation) => ({ result: { data: data[operation] } }))),
|
|
});
|
|
});
|
|
await page.goto('public');
|
|
const summary = page.locator('.small_war_log').first();
|
|
await expect(summary).toContainText('【경국지색소교】');
|
|
await expect(summary).toHaveCSS('font-size', '14px');
|
|
await expect(summary.locator('.name_plate').first()).toHaveCSS('font-size', '10.5px');
|
|
await expect(summary.locator('.crew_plate').first()).toHaveCSS('font-size', '12.6px');
|
|
await waitForFonts(page);
|
|
await page.screenshot({ path: testInfo.outputPath('battle-log-exception.png'), fullPage: true });
|
|
});
|
|
}
|