feat(menu): PHP 기준 공통 메뉴를 런타임 설정으로 이관
Gateway와 게임 공통 메뉴를 영속 JSON에서 읽고 다음 페이지 로드에 반영한다. 운영 PHP의 항목과 순서, desktop/mobile geometry 및 정보 동작을 보존하고 검증·복구 문서를 추가한다.
This commit is contained in:
@@ -176,7 +176,7 @@ test('desktop administrator sidebar follows the navbar away and then sticks to t
|
||||
backgroundColor: string;
|
||||
}> = [];
|
||||
|
||||
for (const scrollY of [0, 20, 55, 56, 120]) {
|
||||
for (const scrollY of [0, 20, 75, 76, 140]) {
|
||||
await page.evaluate((top) => window.scrollTo(0, top), scrollY);
|
||||
await expect.poll(() => page.evaluate(() => window.scrollY)).toBe(scrollY);
|
||||
|
||||
@@ -192,16 +192,16 @@ test('desktop administrator sidebar follows the navbar away and then sticks to t
|
||||
backgroundColor: style.backgroundColor,
|
||||
};
|
||||
});
|
||||
expect(geometry.top).toBeCloseTo(Math.max(0, 56 - scrollY), 0);
|
||||
expect(geometry.top).toBeCloseTo(Math.max(0, 76 - scrollY), 0);
|
||||
expect(geometry.position).toBe('sticky');
|
||||
expect(geometry.backgroundColor).toBe('rgb(17, 17, 19)');
|
||||
measurements.push({ scrollY, ...geometry });
|
||||
|
||||
if (scrollY >= 56) {
|
||||
if (scrollY >= 76) {
|
||||
expect(geometry.bottom).toBeCloseTo(geometry.viewportHeight, 0);
|
||||
}
|
||||
|
||||
if (scrollY === 20 || scrollY === 56) {
|
||||
if (scrollY === 20 || scrollY === 76) {
|
||||
await page.screenshot({ path: testInfo.outputPath(`admin-sidebar-scroll-${scrollY}.png`) });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
|
||||
const port = Number(process.env.PLAYWRIGHT_GATEWAY_FRONTEND_PORT ?? 15130);
|
||||
|
||||
export default defineConfig({
|
||||
testDir: '.',
|
||||
@@ -19,6 +20,7 @@ export default defineConfig({
|
||||
'kakao-otp.spec.ts',
|
||||
'kakao-account-recovery.spec.ts',
|
||||
'public-map-tabs.spec.ts',
|
||||
'runtime-navigation.spec.ts',
|
||||
],
|
||||
fullyParallel: false,
|
||||
workers: 1,
|
||||
@@ -29,7 +31,7 @@ export default defineConfig({
|
||||
reporter: [['list']],
|
||||
outputDir: resolve(repositoryRoot, 'test-results/server-operations'),
|
||||
use: {
|
||||
baseURL: 'http://127.0.0.1:15130/gateway/',
|
||||
baseURL: `http://127.0.0.1:${port}/gateway/`,
|
||||
...devices['Desktop Chrome'],
|
||||
deviceScaleFactor: 1,
|
||||
colorScheme: 'dark',
|
||||
@@ -38,9 +40,9 @@ export default defineConfig({
|
||||
},
|
||||
webServer: {
|
||||
command:
|
||||
"export VITE_APP_BASE_PATH=/gateway VITE_GATEWAY_API_URL=/gateway/api/trpc VITE_GAME_WEB_URL_TEMPLATE='/{profile}/' VITE_GAME_API_URL_TEMPLATE='/{profile}/api/trpc'; pnpm --filter @sammo-ts/gateway-frontend build && pnpm --filter @sammo-ts/gateway-frontend preview --host 127.0.0.1 --port 15130",
|
||||
`export VITE_APP_BASE_PATH=/gateway VITE_GATEWAY_API_URL=/gateway/api/trpc VITE_GAME_WEB_URL_TEMPLATE='/{profile}/' VITE_GAME_API_URL_TEMPLATE='/{profile}/api/trpc'; pnpm --filter @sammo-ts/gateway-frontend build && pnpm --filter @sammo-ts/gateway-frontend preview --host 127.0.0.1 --port ${port}`,
|
||||
cwd: repositoryRoot,
|
||||
url: 'http://127.0.0.1:15130/gateway/',
|
||||
url: `http://127.0.0.1:${port}/gateway/`,
|
||||
reuseExistingServer: false,
|
||||
timeout: 120_000,
|
||||
},
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
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('운영 공지');
|
||||
});
|
||||
Reference in New Issue
Block a user