Hide_D
71ce057318
세력도시·세력정보·현재도시·내 정보·인사부·외교부의 raised control을 공통 semantic button family에 연결한다. 화면별 크기와 색상은 유지하고 실제 Chromium 상태 geometry 회귀를 추가한다.
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { expect, type Locator, type Page } from '@playwright/test';
|
|
|
|
type ButtonGeometry = {
|
|
top: number;
|
|
bottom: number;
|
|
height: number;
|
|
marginTop: string;
|
|
borderBottomWidth: string;
|
|
borderRadius: string;
|
|
backgroundColor: string;
|
|
};
|
|
|
|
const measure = (control: Locator): Promise<ButtonGeometry> =>
|
|
control.evaluate((element) => {
|
|
const rect = element.getBoundingClientRect();
|
|
const style = getComputedStyle(element);
|
|
return {
|
|
top: rect.top,
|
|
bottom: rect.bottom,
|
|
height: rect.height,
|
|
marginTop: style.marginTop,
|
|
borderBottomWidth: style.borderBottomWidth,
|
|
borderRadius: style.borderRadius,
|
|
backgroundColor: style.backgroundColor,
|
|
};
|
|
});
|
|
|
|
export const expectLumenButtonStates = async (
|
|
page: Page,
|
|
control: Locator,
|
|
expectedBackground: string
|
|
): Promise<{ base: ButtonGeometry; hover: ButtonGeometry; active: ButtonGeometry }> => {
|
|
await expect(control).toBeVisible();
|
|
await page.mouse.move(0, 0);
|
|
const base = await measure(control);
|
|
expect(base).toMatchObject({
|
|
marginTop: '0px',
|
|
borderBottomWidth: '4px',
|
|
borderRadius: '5.25px',
|
|
backgroundColor: expectedBackground,
|
|
});
|
|
|
|
await control.hover();
|
|
const hover = await measure(control);
|
|
expect(hover).toMatchObject({ marginTop: '1px', borderBottomWidth: '3px' });
|
|
expect(hover.top).toBeCloseTo(base.top + 1, 1);
|
|
expect(hover.bottom).toBeCloseTo(base.bottom, 1);
|
|
|
|
const box = await control.boundingBox();
|
|
if (!box) throw new Error('Lumen button is not measurable');
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await page.mouse.down();
|
|
const active = await measure(control);
|
|
expect(active).toMatchObject({ marginTop: '2px', borderBottomWidth: '2px' });
|
|
expect(active.top).toBeCloseTo(base.top + 2, 1);
|
|
expect(active.bottom).toBeCloseTo(base.bottom, 1);
|
|
await page.mouse.move(0, 0);
|
|
await page.mouse.up();
|
|
|
|
await page.keyboard.press('Tab');
|
|
await control.focus();
|
|
await expect(control).toBeFocused();
|
|
await expect.poll(() => control.evaluate((element) => getComputedStyle(element).boxShadow)).not.toBe('none');
|
|
|
|
return { base, hover, active };
|
|
};
|