348 lines
14 KiB
TypeScript
348 lines
14 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';
|
|
|
|
const imageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../../../../image/game');
|
|
|
|
type Member = { id: number; name: string; cityId: number; cityName: string };
|
|
type TroopFixture = {
|
|
id: number;
|
|
name: string;
|
|
nationId: number;
|
|
turnTime: string;
|
|
reservedCommands: string[];
|
|
leader: {
|
|
id: number;
|
|
name: string;
|
|
cityId: number;
|
|
cityName: string;
|
|
picture: string | null;
|
|
imageServer: number;
|
|
};
|
|
members: Member[];
|
|
};
|
|
type FixtureState = {
|
|
me: { id: number; troopId: number };
|
|
permission: number;
|
|
troops: TroopFixture[];
|
|
failCreate?: boolean;
|
|
};
|
|
|
|
const baseTroops = (): TroopFixture[] => [
|
|
{
|
|
id: 1,
|
|
name: '백마대',
|
|
nationId: 1,
|
|
turnTime: '2026-07-25T08:20:30.000Z',
|
|
reservedCommands: ['che_집합', 'che_이동'],
|
|
leader: {
|
|
id: 1,
|
|
name: '공손찬',
|
|
cityId: 1,
|
|
cityName: '북평',
|
|
picture: 'default.jpg',
|
|
imageServer: 0,
|
|
},
|
|
members: [
|
|
{ id: 1, name: '공손찬', cityId: 1, cityName: '북평' },
|
|
{ id: 3, name: '조운', cityId: 1, cityName: '북평' },
|
|
{ id: 4, name: '전예', cityId: 2, cityName: '계' },
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '청룡대',
|
|
nationId: 1,
|
|
turnTime: '2026-07-25T08:30:30.000Z',
|
|
reservedCommands: ['che_징병'],
|
|
leader: {
|
|
id: 2,
|
|
name: '관우',
|
|
cityId: 2,
|
|
cityName: '계',
|
|
picture: 'default.jpg',
|
|
imageServer: 0,
|
|
},
|
|
members: [{ id: 2, name: '관우', cityId: 2, cityName: '계' }],
|
|
},
|
|
];
|
|
|
|
const response = (data: unknown) => ({ result: { data } });
|
|
const errorResponse = (path: string, message: string) => ({
|
|
error: {
|
|
message,
|
|
code: -32000,
|
|
data: { code: 'BAD_REQUEST', httpStatus: 400, path },
|
|
},
|
|
});
|
|
const operationName = (route: Route): string => {
|
|
const url = new URL(route.request().url());
|
|
return decodeURIComponent(url.pathname.slice(url.pathname.lastIndexOf('/trpc/') + 6));
|
|
};
|
|
|
|
const fulfillJson = async (route: Route, body: unknown) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(body),
|
|
});
|
|
};
|
|
|
|
const gotoTroop = async (page: Page) => {
|
|
const lobbyResponse = page.waitForResponse((response) => response.url().includes('/trpc/lobby.info'));
|
|
await page.goto('troop');
|
|
await lobbyResponse;
|
|
};
|
|
|
|
const installApiFixture = async (page: Page, state: FixtureState) => {
|
|
await page.addInitScript(() => {
|
|
window.localStorage.setItem('sammo-game-token', 'ga_playwright');
|
|
window.localStorage.setItem('sammo-game-profile', 'che:default');
|
|
});
|
|
for (const filename of ['back_walnut.jpg', 'back_green.jpg']) {
|
|
await page.route(`**/image/game/${filename}`, async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'image/jpeg',
|
|
body: await readFile(resolve(imageRoot, filename)),
|
|
});
|
|
});
|
|
}
|
|
await page.route('**/image/icons/**', async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'image/png',
|
|
body: Buffer.from(
|
|
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
|
|
'base64'
|
|
),
|
|
});
|
|
});
|
|
await page.route('**/che/api/trpc/**', async (route) => {
|
|
const operations = operationName(route).split(',');
|
|
const results = operations.map((operation) => {
|
|
if (operation === 'lobby.info') {
|
|
return response({ myGeneral: { id: state.me.id, name: '테스트 장수' } });
|
|
}
|
|
if (operation === 'join.getConfig') {
|
|
return response({});
|
|
}
|
|
if (operation === 'troop.getList') {
|
|
return response({
|
|
nation: { id: 1, name: '테스트국' },
|
|
me: state.me,
|
|
permission: state.permission,
|
|
troops: state.troops,
|
|
});
|
|
}
|
|
if (operation === 'troop.create') {
|
|
if (state.failCreate) {
|
|
state.failCreate = false;
|
|
return errorResponse(operation, '부대 이름이 없습니다.');
|
|
}
|
|
const createdId = state.me.id;
|
|
state.me.troopId = createdId;
|
|
state.troops.push({
|
|
id: createdId,
|
|
name: '신규대',
|
|
nationId: 1,
|
|
turnTime: '2026-07-25T08:40:30.000Z',
|
|
reservedCommands: [],
|
|
leader: {
|
|
id: createdId,
|
|
name: '유비',
|
|
cityId: 1,
|
|
cityName: '북평',
|
|
picture: 'default.jpg',
|
|
imageServer: 0,
|
|
},
|
|
members: [{ id: createdId, name: '유비', cityId: 1, cityName: '북평' }],
|
|
});
|
|
return response({ ok: true, troopId: createdId, troopName: '신규대' });
|
|
}
|
|
if (operation === 'troop.rename') {
|
|
state.troops[0]!.name = '백마의종';
|
|
return response({ ok: true, troopName: '백마의종' });
|
|
}
|
|
if (operation === 'troop.kick') {
|
|
state.troops[0]!.members = state.troops[0]!.members.filter((member) => member.id !== 3);
|
|
return response({ ok: true });
|
|
}
|
|
return errorResponse(operation, `Unhandled fixture operation: ${operation}`);
|
|
});
|
|
await fulfillJson(route, results);
|
|
});
|
|
};
|
|
|
|
test('renders the legacy desktop grid with matching computed geometry and states', async ({ page }) => {
|
|
await installApiFixture(page, {
|
|
me: { id: 1, troopId: 1 },
|
|
permission: 4,
|
|
troops: baseTroops(),
|
|
});
|
|
await page.setViewportSize({ width: 1000, height: 800 });
|
|
await gotoTroop(page);
|
|
await expect(page.locator('.troopInfo').filter({ hasText: '백마대' })).toBeVisible();
|
|
|
|
const geometry = await page
|
|
.locator('.troopItem')
|
|
.first()
|
|
.evaluate((item) => {
|
|
const origin = item.getBoundingClientRect();
|
|
const box = (selector: string) => {
|
|
const rect = item.querySelector<HTMLElement>(selector)!.getBoundingClientRect();
|
|
return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
|
|
};
|
|
const members = item.querySelector<HTMLElement>('.troopMembers')!;
|
|
const style = getComputedStyle(members);
|
|
return {
|
|
item: { x: origin.x, y: origin.y, width: origin.width, height: origin.height },
|
|
info: box('.troopInfo'),
|
|
icon: box('.troopLeaderIcon'),
|
|
reserved: box('.troopReservedCommand'),
|
|
members: box('.troopMembers'),
|
|
action: box('.troopAction'),
|
|
membersStyle: {
|
|
paddingTop: style.paddingTop,
|
|
paddingLeft: style.paddingLeft,
|
|
textAlign: style.textAlign,
|
|
fontFamily: style.fontFamily,
|
|
fontSize: style.fontSize,
|
|
lineHeight: style.lineHeight,
|
|
},
|
|
};
|
|
});
|
|
expect(geometry.item).toEqual({ x: 0, y: 32, width: 1000, height: 127.5 });
|
|
expect(geometry.info.width).toBeCloseTo(130, 0);
|
|
expect(geometry.info.height).toBeCloseTo(65, 0);
|
|
expect(geometry.icon.x - geometry.info.x).toBeCloseTo(130, 0);
|
|
expect(geometry.reserved.x - geometry.info.x).toBeCloseTo(260, 0);
|
|
expect(geometry.members.x - geometry.info.x).toBeCloseTo(360, 0);
|
|
expect(geometry.members.width).toBeCloseTo(639, 0);
|
|
expect(geometry.members.height).toBeCloseTo(93, 0);
|
|
expect(geometry.action.x - geometry.info.x).toBeCloseTo(65, 0);
|
|
expect(geometry.action.y - geometry.info.y).toBeCloseTo(93, 0);
|
|
expect(geometry.action.width).toBeCloseTo(934, 0);
|
|
expect(geometry.membersStyle).toEqual({
|
|
paddingTop: '7px',
|
|
paddingLeft: '9.8px',
|
|
textAlign: 'left',
|
|
fontFamily: 'Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic"',
|
|
fontSize: '14px',
|
|
lineHeight: '21px',
|
|
});
|
|
|
|
const kickButton = page.getByRole('button', { name: '부대원 추방...' }).first();
|
|
await kickButton.hover();
|
|
const hoverStyle = await kickButton.evaluate((button) => ({
|
|
cursor: getComputedStyle(button).cursor,
|
|
filter: getComputedStyle(button).filter,
|
|
}));
|
|
expect(hoverStyle.cursor).toBe('pointer');
|
|
expect(hoverStyle.filter).not.toBe('none');
|
|
|
|
await page.locator('.troopMember').nth(1).hover();
|
|
await expect(page.getByRole('tooltip')).toContainText('조운');
|
|
expect(await page.getByRole('tooltip').evaluate((tooltip) => tooltip.getBoundingClientRect().width)).toBeCloseTo(
|
|
500,
|
|
0
|
|
);
|
|
await page.screenshot({ path: 'test-results/troop/desktop-leader.png', fullPage: true });
|
|
});
|
|
|
|
test('matches the legacy 500px responsive placement', async ({ page }) => {
|
|
await installApiFixture(page, {
|
|
me: { id: 1, troopId: 1 },
|
|
permission: 4,
|
|
troops: baseTroops(),
|
|
});
|
|
await page.setViewportSize({ width: 500, height: 800 });
|
|
await gotoTroop(page);
|
|
await expect(page.locator('.troopInfo').filter({ hasText: '백마대' })).toBeVisible();
|
|
|
|
const geometry = await page
|
|
.locator('.troopItem')
|
|
.first()
|
|
.evaluate((item) => {
|
|
const origin = item.getBoundingClientRect();
|
|
const relative = (selector: string) => {
|
|
const rect = item.querySelector<HTMLElement>(selector)!.getBoundingClientRect();
|
|
return { x: rect.x - origin.x, y: rect.y - origin.y, width: rect.width };
|
|
};
|
|
return {
|
|
item: { width: origin.width, height: origin.height },
|
|
info: relative('.troopInfo'),
|
|
icon: relative('.troopLeaderIcon'),
|
|
reserved: relative('.troopReservedCommand'),
|
|
action: relative('.troopAction'),
|
|
members: relative('.troopMembers'),
|
|
};
|
|
});
|
|
expect(geometry.item).toEqual({ width: 500, height: 129 });
|
|
expect(geometry.info).toMatchObject({ x: 0, y: 0, width: 130 });
|
|
expect(geometry.icon).toMatchObject({ x: 130, y: 0, width: 130 });
|
|
expect(geometry.reserved).toMatchObject({ x: 260, y: 0, width: 100 });
|
|
expect(geometry.action).toMatchObject({ x: 360, y: 0, width: 140 });
|
|
expect(geometry.members).toMatchObject({ x: 130, y: 93, width: 370 });
|
|
await page.screenshot({ path: 'test-results/troop/mobile-leader.png', fullPage: true });
|
|
});
|
|
|
|
test('shows API failure then creates a troop successfully', async ({ page }) => {
|
|
const state: FixtureState = {
|
|
me: { id: 7, troopId: 0 },
|
|
permission: 0,
|
|
troops: baseTroops(),
|
|
failCreate: true,
|
|
};
|
|
await installApiFixture(page, state);
|
|
await gotoTroop(page);
|
|
|
|
const input = page.getByRole('textbox', { name: '부대명' });
|
|
await input.fill('실패대');
|
|
await page.getByRole('button', { name: '부대 창설', exact: true }).click();
|
|
await expect(page.getByRole('alert')).toContainText('부대 이름이 없습니다.');
|
|
expect(state.me.troopId).toBe(0);
|
|
|
|
await input.fill('신규대');
|
|
await page.getByRole('button', { name: '부대 창설', exact: true }).click();
|
|
await expect(page.getByRole('status')).toContainText('신규대 부대가 생성되었습니다.');
|
|
await expect(page.locator('.troopInfo').filter({ hasText: '신규대' })).toBeVisible();
|
|
await expect(input).toBeHidden();
|
|
});
|
|
|
|
test('renames and kicks through confirm dialogs, then refreshes state', async ({ page }) => {
|
|
const state: FixtureState = {
|
|
me: { id: 1, troopId: 1 },
|
|
permission: 4,
|
|
troops: baseTroops(),
|
|
};
|
|
await installApiFixture(page, state);
|
|
page.on('dialog', (dialog) => dialog.accept());
|
|
await gotoTroop(page);
|
|
|
|
await page.getByRole('button', { name: '부대명 변경...' }).first().click();
|
|
await page.getByRole('textbox', { name: '새 부대명' }).fill('백마의종');
|
|
await page.getByRole('button', { name: '변경', exact: true }).click();
|
|
await expect(page.getByRole('status')).toContainText('부대명을 변경했습니다.');
|
|
await expect(page.locator('.troopInfo').filter({ hasText: '백마의종' })).toBeVisible();
|
|
|
|
await page.getByRole('button', { name: '부대원 추방...' }).click();
|
|
await page.getByRole('combobox', { name: '추방할 부대원' }).selectOption('3');
|
|
await page.getByRole('button', { name: '추방', exact: true }).click();
|
|
await expect(page.getByRole('status')).toContainText('조운을 추방했습니다.');
|
|
await expect(page.locator('.troopMembers').first()).not.toContainText('조운');
|
|
});
|
|
|
|
test('does not render management controls for an unauthorized member', async ({ page }) => {
|
|
await installApiFixture(page, {
|
|
me: { id: 3, troopId: 1 },
|
|
permission: 1,
|
|
troops: baseTroops(),
|
|
});
|
|
await gotoTroop(page);
|
|
await expect(page.getByRole('button', { name: '부대 탈퇴' })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: '부대원 추방...' })).toHaveCount(0);
|
|
await expect(page.getByRole('button', { name: '부대명 변경...' })).toHaveCount(0);
|
|
});
|