Hide_D
a14282b34d
Gateway와 게임 공통 메뉴를 영속 JSON에서 읽고 다음 페이지 로드에 반영한다. 운영 PHP의 항목과 순서, desktop/mobile geometry 및 정보 동작을 보존하고 검증·복구 문서를 추가한다.
73 lines
3.4 KiB
TypeScript
73 lines
3.4 KiB
TypeScript
import { readFile } from 'node:fs/promises';
|
|
|
|
import { expect, test, type Page, type Route } from '@playwright/test';
|
|
|
|
const defaultNavigation = JSON.parse(
|
|
await readFile(new URL('../../../resources/navigation.json', import.meta.url), 'utf8')
|
|
) as {
|
|
gateway: { items: Array<{ id: string; label: string }> };
|
|
};
|
|
const response = (data: unknown) => ({ result: { data } });
|
|
const operationNames = (route: Route) =>
|
|
decodeURIComponent(new URL(route.request().url()).pathname.split('/trpc/')[1] ?? '').split(',');
|
|
|
|
const installGatewayFixture = async (page: Page, navigation: unknown = defaultNavigation) => {
|
|
await page.route('**/gateway/api/navigation', async (route) => {
|
|
await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(navigation) });
|
|
});
|
|
await page.route('**/gateway/api/trpc/**', async (route) => {
|
|
const operations = operationNames(route);
|
|
const results = operations.map((operation) => {
|
|
if (operation === 'navigation.get') return response(navigation);
|
|
if (operation === 'me' || operation === 'lobby.notice') return response(null);
|
|
if (operation === 'lobby.profiles') return response([]);
|
|
return response({ ok: true });
|
|
});
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(operations.length === 1 ? results[0] : results),
|
|
});
|
|
});
|
|
};
|
|
|
|
test('Gateway 상단 메뉴가 PHP 항목과 desktop geometry를 따른다', async ({ page }) => {
|
|
await installGatewayFixture(page);
|
|
await page.setViewportSize({ width: 1365, height: 900 });
|
|
await page.goto('./');
|
|
|
|
const navigation = page.locator('#gateway-navigation');
|
|
await expect(navigation.locator('a')).toHaveText(defaultNavigation.gateway.items.map((item) => item.label));
|
|
await expect(page.locator('.gateway-navbar')).toHaveCSS('height', '76px');
|
|
await expect(page.locator('.gateway-navbar')).toHaveCSS('padding', '16px 0px');
|
|
await expect(navigation.locator('a').first()).toHaveCSS('font-size', '16px');
|
|
await expect(navigation.locator('a').first()).toHaveCSS('padding', '8px');
|
|
|
|
await navigation.locator('a').first().hover();
|
|
await expect(navigation.locator('a').first()).toHaveCSS('color', 'rgb(255, 255, 255)');
|
|
});
|
|
|
|
test('Gateway 모바일 접이식 메뉴가 PHP 40px 행과 전체 너비를 따른다', async ({ page }) => {
|
|
await installGatewayFixture(page);
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.goto('./');
|
|
|
|
await page.getByRole('button', { name: '메뉴 열기' }).click();
|
|
const links = page.locator('#gateway-navigation a');
|
|
await expect(links).toHaveCount(10);
|
|
const first = await links.first().boundingBox();
|
|
expect(first).toMatchObject({ x: 1, y: 56, width: 388, height: 40 });
|
|
await links.first().focus();
|
|
await expect(links.first()).toBeFocused();
|
|
await expect(links.first()).toHaveCSS('color', 'rgb(255, 255, 255)');
|
|
});
|
|
|
|
test('JSON 응답을 바꾸면 frontend 재빌드 없이 다음 로드에 반영된다', async ({ page }) => {
|
|
const changed = structuredClone(defaultNavigation);
|
|
changed.gateway.items[0]!.label = '운영 공지';
|
|
await installGatewayFixture(page, changed);
|
|
await page.goto('./');
|
|
|
|
await expect(page.locator('[data-navigation-id="notice"]')).toHaveText('운영 공지');
|
|
});
|