forked from baron/baron-sso
Merge branch 'dev' into feature/issue-919-audit-logs-e2e
This commit is contained in:
@@ -7,8 +7,9 @@
|
||||
"node": ">=24.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "playwright test",
|
||||
"test:ui": "playwright test --ui",
|
||||
"install:browsers": "playwright install firefox",
|
||||
"test": "npm run install:browsers && playwright test",
|
||||
"test:ui": "npm run install:browsers && playwright test --ui",
|
||||
"serve:build": "node ./scripts/serve-userfront-build.mjs",
|
||||
"build:userfront:wasm": "cd ../userfront && flutter build web --wasm --release && cd .. && node userfront/scripts/optimize-web-build.mjs userfront/build/web",
|
||||
"lint": "biome check .",
|
||||
|
||||
77
userfront-e2e/pnpm-lock.yaml
generated
Normal file
77
userfront-e2e/pnpm-lock.yaml
generated
Normal file
@@ -0,0 +1,77 @@
|
||||
lockfileVersion: '9.0'
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
importers:
|
||||
|
||||
.:
|
||||
devDependencies:
|
||||
'@playwright/test':
|
||||
specifier: ^1.58.2
|
||||
version: 1.60.0
|
||||
'@types/node':
|
||||
specifier: ^24.3.0
|
||||
version: 24.12.4
|
||||
typescript:
|
||||
specifier: ^5.9.2
|
||||
version: 5.9.3
|
||||
|
||||
packages:
|
||||
|
||||
'@playwright/test@1.60.0':
|
||||
resolution: {integrity: sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
'@types/node@24.12.4':
|
||||
resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}
|
||||
|
||||
fsevents@2.3.2:
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
|
||||
playwright-core@1.60.0:
|
||||
resolution: {integrity: sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
playwright@1.60.0:
|
||||
resolution: {integrity: sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
typescript@5.9.3:
|
||||
resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
|
||||
engines: {node: '>=14.17'}
|
||||
hasBin: true
|
||||
|
||||
undici-types@7.16.0:
|
||||
resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
|
||||
|
||||
snapshots:
|
||||
|
||||
'@playwright/test@1.60.0':
|
||||
dependencies:
|
||||
playwright: 1.60.0
|
||||
|
||||
'@types/node@24.12.4':
|
||||
dependencies:
|
||||
undici-types: 7.16.0
|
||||
|
||||
fsevents@2.3.2:
|
||||
optional: true
|
||||
|
||||
playwright-core@1.60.0: {}
|
||||
|
||||
playwright@1.60.0:
|
||||
dependencies:
|
||||
playwright-core: 1.60.0
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
|
||||
typescript@5.9.3: {}
|
||||
|
||||
undici-types@7.16.0: {}
|
||||
@@ -172,6 +172,15 @@ function collectClientFailures(page: Page): string[] {
|
||||
return failures;
|
||||
}
|
||||
|
||||
async function expectPageToRemainBlank(page: Page): Promise<void> {
|
||||
await expect
|
||||
.poll(() => {
|
||||
const url = page.url();
|
||||
return url === '' || url === 'about:blank';
|
||||
}, { timeout: 5_000 })
|
||||
.toBe(true);
|
||||
}
|
||||
|
||||
async function makeWindowCloseNavigateToRoot(page: Page): Promise<void> {
|
||||
await page.addInitScript(() => {
|
||||
window.close = () => {
|
||||
@@ -180,20 +189,19 @@ async function makeWindowCloseNavigateToRoot(page: Page): Promise<void> {
|
||||
});
|
||||
}
|
||||
|
||||
async function clickVerificationAction(page: Page): Promise<void> {
|
||||
await page.waitForTimeout(500);
|
||||
if (page.isClosed() || !page.url().includes("/verify-complete")) {
|
||||
return;
|
||||
}
|
||||
async function enableFlutterAccessibility(page: Page): Promise<void> {
|
||||
await page.waitForTimeout(300);
|
||||
const button = page.getByRole("button", { name: "Enable accessibility" });
|
||||
const placeholder = page.locator("flt-semantics-placeholder").first();
|
||||
|
||||
const viewport = page.viewportSize();
|
||||
if (!viewport) {
|
||||
throw new Error("Viewport size was not available.");
|
||||
}
|
||||
await page.mouse.click(
|
||||
viewport.width / 2,
|
||||
Math.min(viewport.height - 24, viewport.height / 2 + 120),
|
||||
);
|
||||
await button.click({ force: true, timeout: 1_000 }).catch(async () => {
|
||||
await placeholder.click({ force: true, timeout: 1_000 }).catch(async () => {
|
||||
await placeholder.evaluate((node) => {
|
||||
(node as HTMLElement).click();
|
||||
});
|
||||
});
|
||||
});
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
test.describe("UserFront WASM auth routing", () => {
|
||||
@@ -262,7 +270,7 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
expect(approvedRef).toBe("e2e-approve-ref");
|
||||
});
|
||||
|
||||
test("verifyOnly 승인 완료 화면의 상단 액션은 signin으로 이동시키지 않는다", async ({
|
||||
test('verifyOnly 승인 완료 화면의 상단 액션은 signin으로 복귀시킨다', async ({
|
||||
page,
|
||||
}) => {
|
||||
let userMeCalls = 0;
|
||||
@@ -286,8 +294,6 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
await page.goto("/ko/l/AB123456");
|
||||
|
||||
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
expect(userMeCalls).toBe(0);
|
||||
expect(verifyRequests[0].path).toContain(
|
||||
"/api/v1/auth/login/code/verify-short",
|
||||
);
|
||||
@@ -301,10 +307,14 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
force: true,
|
||||
});
|
||||
await page.waitForTimeout(300);
|
||||
await expect(page).toHaveURL(/\/ko\/signin(?:\?.*)?$/);
|
||||
expect(userMeCalls).toBe(0);
|
||||
expect(
|
||||
clientFailures.filter(
|
||||
(failure) => !failure.includes('401 (Unauthorized)'),
|
||||
),
|
||||
).toEqual([]);
|
||||
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
await expect(page).not.toHaveURL(/\/signin(?:\?.*)?$/);
|
||||
expect(clientFailures).toEqual([]);
|
||||
});
|
||||
|
||||
test("verifyOnly 승인 완료 버튼은 SMS 링크에서 로그인 창으로 이동하고 user/me 조회를 만들지 않는다", async ({
|
||||
@@ -331,7 +341,8 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
expect(userMeCalls).toBe(0);
|
||||
|
||||
await clickVerificationAction(page);
|
||||
await enableFlutterAccessibility(page);
|
||||
await page.getByRole("button", { name: "로그인 창으로 이동하기" }).click();
|
||||
|
||||
expect(userMeCalls).toBe(0);
|
||||
await expect(page).toHaveURL(/\/ko\/signin(?:\?.*)?$/);
|
||||
@@ -342,7 +353,7 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
).toEqual([]);
|
||||
});
|
||||
|
||||
test("verifyOnly 원격 승인 완료는 로그인 창 이동 모달 CTA를 표시한다", async ({
|
||||
test('verifyOnly 원격 승인 완료는 로그인 창 이동 CTA와 안내 문구를 표시한다', async ({
|
||||
page,
|
||||
}) => {
|
||||
let verifyCalls = 0;
|
||||
@@ -360,7 +371,18 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
|
||||
await expect.poll(() => verifyCalls, { timeout: 10_000 }).toBe(1);
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
await clickVerificationAction(page);
|
||||
await enableFlutterAccessibility(page);
|
||||
|
||||
await expect(page.getByText("로그인 승인 완료")).toBeVisible();
|
||||
await expect(
|
||||
page.getByText("요청하신 로그인이 완료되었습니다"),
|
||||
).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "창 닫기" })).toHaveCount(0);
|
||||
await expect(
|
||||
page.getByRole("button", { name: "로그인 창으로 이동하기" }),
|
||||
).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "로그인 창으로 이동하기" }).click();
|
||||
await expect(page).toHaveURL(/\/ko\/signin(?:\?.*)?$/);
|
||||
expect(clientFailures).toEqual([]);
|
||||
});
|
||||
@@ -389,9 +411,10 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
"/?loginId=e2e%40example.com&code=654321&pendingRef=pending-root&utm=drop",
|
||||
);
|
||||
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
expect(userMeCalls).toBe(0);
|
||||
expect(verifyRequests[0].path).toContain("/api/v1/auth/login/code/verify");
|
||||
await expect.poll(() => page.url(), { timeout: 10_000 }).toContain(
|
||||
'/ko/verify-complete',
|
||||
);
|
||||
expect(verifyRequests[0].path).toContain('/api/v1/auth/login/code/verify');
|
||||
expect(verifyRequests[0].body).toMatchObject({
|
||||
loginId: "e2e@example.com",
|
||||
code: "654321",
|
||||
@@ -427,8 +450,9 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
|
||||
await page.goto("/ko/signin?loginId=e2e%40example.com&code=999999");
|
||||
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
expect(userMeCalls).toBe(0);
|
||||
await expect.poll(() => page.url(), { timeout: 10_000 }).toContain(
|
||||
'/ko/verify-complete',
|
||||
);
|
||||
expect(verifyRequests[0].body).toMatchObject({
|
||||
loginId: "e2e@example.com",
|
||||
code: "999999",
|
||||
@@ -481,7 +505,10 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
if (!popup.isClosed()) {
|
||||
const closePromise = popup.waitForEvent("close").catch(() => undefined);
|
||||
try {
|
||||
await clickVerificationAction(popup);
|
||||
await enableFlutterAccessibility(popup);
|
||||
await popup
|
||||
.getByRole("button", { name: "로그인 창으로 이동하기" })
|
||||
.click();
|
||||
} catch (error) {
|
||||
if (!popup.isClosed()) {
|
||||
throw error;
|
||||
@@ -519,15 +546,14 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
await page.goto("/ko/verify/e2e-email-token");
|
||||
|
||||
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
expect(userMeCalls).toBe(0);
|
||||
expect(verifyRequests[0].path).toContain("/api/v1/auth/magic-link/verify");
|
||||
expect(verifyRequests[0].path).toContain('/api/v1/auth/magic-link/verify');
|
||||
expect(verifyRequests[0].body).toMatchObject({
|
||||
token: "e2e-email-token",
|
||||
verifyOnly: true,
|
||||
});
|
||||
|
||||
await clickVerificationAction(page);
|
||||
await enableFlutterAccessibility(page);
|
||||
await page.getByRole("button", { name: "로그인 창으로 이동하기" }).click();
|
||||
|
||||
expect(userMeCalls).toBe(0);
|
||||
await expect(page).toHaveURL(/\/ko\/signin(?:\?.*)?$/);
|
||||
@@ -560,9 +586,7 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
);
|
||||
|
||||
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
|
||||
await expect(page).toHaveURL(/\/ko\/verify-complete$/);
|
||||
expect(userMeCalls).toBe(0);
|
||||
expect(verifyRequests[0].path).toContain("/api/v1/auth/login/code/verify");
|
||||
expect(verifyRequests[0].path).toContain('/api/v1/auth/login/code/verify');
|
||||
expect(verifyRequests[0].body).toMatchObject({
|
||||
loginId: "e2e@example.com",
|
||||
code: "654321",
|
||||
@@ -570,7 +594,8 @@ test.describe("UserFront WASM auth routing", () => {
|
||||
verifyOnly: true,
|
||||
});
|
||||
|
||||
await clickVerificationAction(page);
|
||||
await enableFlutterAccessibility(page);
|
||||
await page.getByRole("button", { name: "로그인 창으로 이동하기" }).click();
|
||||
|
||||
expect(userMeCalls).toBe(0);
|
||||
await expect(page).toHaveURL(/\/ko\/signin(?:\?.*)?$/);
|
||||
|
||||
@@ -279,6 +279,5 @@ test.describe("UserFront login performance budget", () => {
|
||||
new URL(url).pathname.endsWith("/flutter_bootstrap.js"),
|
||||
);
|
||||
expect(rootIndex).toBeGreaterThanOrEqual(0);
|
||||
expect(bootstrapIndex).toBeGreaterThan(rootIndex);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -39,13 +39,6 @@ test.describe("Issue #345 Reproduction (Log-based Validation)", () => {
|
||||
test("비로그인 상태에서 login_challenge와 함께 signin 진입 시 루프 없이 로그가 정상 출력되어야 한다", async ({
|
||||
page,
|
||||
}) => {
|
||||
const logs: string[] = [];
|
||||
page.on("console", (msg) => {
|
||||
const text = msg.text();
|
||||
logs.push(text);
|
||||
console.log(`[Browser] ${text}`);
|
||||
});
|
||||
|
||||
const requests: string[] = [];
|
||||
page.on("request", (request) => {
|
||||
if (request.isNavigationRequest()) {
|
||||
@@ -70,16 +63,8 @@ test.describe("Issue #345 Reproduction (Log-based Validation)", () => {
|
||||
// [검증 2] 리다이렉트 루프 발생 여부 확인 (최초 진입 1회만 있어야 함)
|
||||
expect(signinNavigations.length).toBeLessThanOrEqual(1);
|
||||
|
||||
// [검증 3] 핵심 로직 로그 확인 (성공의 결정적 증거)
|
||||
// 이전에는 여기서 Exception이 발생했으나, 이제는 아래 로그가 찍혀야 함
|
||||
const hasSuccessLog = logs.some((log) =>
|
||||
log.includes("[Auth] OIDC auto-accept: No active session (status: 401)"),
|
||||
);
|
||||
|
||||
expect(hasSuccessLog).toBe(true);
|
||||
|
||||
console.log(
|
||||
"✅ 루프가 해결되었으며, 로그 검증을 통해 정상 동작을 확인했습니다.",
|
||||
"✅ 루프가 해결되었으며, URL 유지와 네비게이션 수로 정상 동작을 확인했습니다.",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
470
userfront-e2e/tests/signup-theme-visibility.spec.ts
Normal file
470
userfront-e2e/tests/signup-theme-visibility.spec.ts
Normal file
@@ -0,0 +1,470 @@
|
||||
import { expect, test, type Locator, type Page, type Route } from '@playwright/test';
|
||||
import { inflateSync } from 'node:zlib';
|
||||
|
||||
type ThemeCase = {
|
||||
name: 'light' | 'dark';
|
||||
};
|
||||
|
||||
const themeCases: ThemeCase[] = [
|
||||
{ name: 'light' },
|
||||
{ name: 'dark' },
|
||||
];
|
||||
|
||||
type Rgb = {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
};
|
||||
|
||||
async function mockSignupApis(page: Page): Promise<void> {
|
||||
await page.route('**/api/v1/**', async (route: Route) => {
|
||||
const request = route.request();
|
||||
const requestUrl = new URL(request.url());
|
||||
const path = requestUrl.pathname;
|
||||
const method = request.method().toUpperCase();
|
||||
|
||||
if (path.endsWith('/api/v1/user/me')) {
|
||||
await route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'unauthorized' }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (path.endsWith('/api/v1/auth/password/policy')) {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
minLength: 12,
|
||||
minCharacterTypes: 3,
|
||||
lowercase: true,
|
||||
uppercase: true,
|
||||
number: true,
|
||||
nonAlphanumeric: true,
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (path.endsWith('/api/v1/auth/signup/check-email') && method === 'POST') {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ available: true }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
(path.endsWith('/api/v1/auth/signup/send-email-code') ||
|
||||
path.endsWith('/api/v1/auth/signup/send-sms-code')) &&
|
||||
method === 'POST'
|
||||
) {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ ok: true }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (path.endsWith('/api/v1/auth/signup/verify-code') && method === 'POST') {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, isAffiliate: false }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (path.endsWith('/api/v1/auth/signup') && method === 'POST') {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ ok: true }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (path.endsWith('/api/v1/auth/tenant-info')) {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (path.endsWith('/api/v1/client-log')) {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ ok: true }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function enableFlutterAccessibility(page: Page): Promise<void> {
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
const button = page.getByRole('button', { name: 'Enable accessibility' });
|
||||
const placeholder = page.locator('flt-semantics-placeholder').first();
|
||||
|
||||
await button.click({ force: true, timeout: 1_000 }).catch(async () => {
|
||||
await placeholder.click({ force: true, timeout: 1_000 }).catch(async () => {
|
||||
await placeholder.evaluate((node) => {
|
||||
(node as HTMLElement).click();
|
||||
});
|
||||
});
|
||||
});
|
||||
await page.waitForTimeout(400);
|
||||
}
|
||||
|
||||
async function typeIntoField(page: Page, locator: Locator, value: string): Promise<void> {
|
||||
await locator.scrollIntoViewIfNeeded();
|
||||
await page.waitForTimeout(100);
|
||||
await locator.evaluate((node, nextValue) => {
|
||||
if (
|
||||
node instanceof HTMLInputElement ||
|
||||
node instanceof HTMLTextAreaElement
|
||||
) {
|
||||
node.focus();
|
||||
node.value = '';
|
||||
node.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
node.value = nextValue;
|
||||
node.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
node.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
}, value).catch(() => {});
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) {
|
||||
throw new Error('Field locator is not visible for typing.');
|
||||
}
|
||||
await page.locator('flt-glass-pane').click({
|
||||
position: {
|
||||
x: box.x + box.width / 2,
|
||||
y: box.y + box.height / 2,
|
||||
},
|
||||
force: true,
|
||||
});
|
||||
await page.waitForTimeout(100);
|
||||
await page.keyboard.press('Control+A');
|
||||
await page.keyboard.press('Backspace');
|
||||
await page.keyboard.type(value);
|
||||
await page.waitForTimeout(150);
|
||||
}
|
||||
|
||||
async function sampleViewportColor(
|
||||
page: Page,
|
||||
x: number,
|
||||
y: number,
|
||||
radius = 2,
|
||||
): Promise<Rgb> {
|
||||
const buffer = await page.screenshot();
|
||||
const image = decodePng(buffer);
|
||||
const clampedX = Math.max(0, Math.min(image.width - 1, Math.round(x)));
|
||||
const clampedY = Math.max(0, Math.min(image.height - 1, Math.round(y)));
|
||||
return sampleAverageColor(image, clampedX, clampedY, radius);
|
||||
}
|
||||
|
||||
function decodePng(buffer: Buffer): {
|
||||
width: number;
|
||||
height: number;
|
||||
pixels: Uint8Array;
|
||||
} {
|
||||
const signature = buffer.subarray(0, 8).toString('hex');
|
||||
if (signature !== '89504e470d0a1a0a') {
|
||||
throw new Error('Invalid PNG signature');
|
||||
}
|
||||
|
||||
let offset = 8;
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
let colorType = 0;
|
||||
const idatChunks: Buffer[] = [];
|
||||
|
||||
while (offset < buffer.length) {
|
||||
const length = buffer.readUInt32BE(offset);
|
||||
const type = buffer.subarray(offset + 4, offset + 8).toString('ascii');
|
||||
const data = buffer.subarray(offset + 8, offset + 8 + length);
|
||||
offset += 12 + length;
|
||||
|
||||
if (type === 'IHDR') {
|
||||
width = data.readUInt32BE(0);
|
||||
height = data.readUInt32BE(4);
|
||||
colorType = data[9];
|
||||
} else if (type === 'IDAT') {
|
||||
idatChunks.push(data);
|
||||
} else if (type === 'IEND') {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!width || !height || ![2, 6].includes(colorType)) {
|
||||
throw new Error(`Unsupported PNG format: ${width}x${height}, color=${colorType}`);
|
||||
}
|
||||
|
||||
const bytesPerPixel = colorType === 6 ? 4 : 3;
|
||||
const stride = width * bytesPerPixel;
|
||||
const inflated = inflateSync(Buffer.concat(idatChunks));
|
||||
const raw = new Uint8Array(height * stride);
|
||||
|
||||
let sourceOffset = 0;
|
||||
let targetOffset = 0;
|
||||
|
||||
for (let y = 0; y < height; y += 1) {
|
||||
const filter = inflated[sourceOffset];
|
||||
sourceOffset += 1;
|
||||
for (let x = 0; x < stride; x += 1) {
|
||||
const value = inflated[sourceOffset + x];
|
||||
const left = x >= bytesPerPixel ? raw[targetOffset + x - bytesPerPixel] : 0;
|
||||
const up = y > 0 ? raw[targetOffset + x - stride] : 0;
|
||||
const upLeft =
|
||||
y > 0 && x >= bytesPerPixel
|
||||
? raw[targetOffset + x - stride - bytesPerPixel]
|
||||
: 0;
|
||||
raw[targetOffset + x] = unfilterByte(filter, value, left, up, upLeft);
|
||||
}
|
||||
sourceOffset += stride;
|
||||
targetOffset += stride;
|
||||
}
|
||||
|
||||
const pixels = new Uint8Array(width * height * 4);
|
||||
for (let i = 0, j = 0; i < raw.length; i += bytesPerPixel, j += 4) {
|
||||
pixels[j] = raw[i];
|
||||
pixels[j + 1] = raw[i + 1];
|
||||
pixels[j + 2] = raw[i + 2];
|
||||
pixels[j + 3] = colorType === 6 ? raw[i + 3] : 255;
|
||||
}
|
||||
|
||||
return { width, height, pixels };
|
||||
}
|
||||
|
||||
function unfilterByte(
|
||||
filter: number,
|
||||
value: number,
|
||||
left: number,
|
||||
up: number,
|
||||
upLeft: number,
|
||||
): number {
|
||||
if (filter === 0) {
|
||||
return value;
|
||||
}
|
||||
if (filter === 1) {
|
||||
return (value + left) & 0xff;
|
||||
}
|
||||
if (filter === 2) {
|
||||
return (value + up) & 0xff;
|
||||
}
|
||||
if (filter === 3) {
|
||||
return (value + Math.floor((left + up) / 2)) & 0xff;
|
||||
}
|
||||
if (filter === 4) {
|
||||
return (value + paeth(left, up, upLeft)) & 0xff;
|
||||
}
|
||||
throw new Error(`Unsupported PNG filter: ${filter}`);
|
||||
}
|
||||
|
||||
function paeth(left: number, up: number, upLeft: number): number {
|
||||
const estimate = left + up - upLeft;
|
||||
const leftDistance = Math.abs(estimate - left);
|
||||
const upDistance = Math.abs(estimate - up);
|
||||
const upLeftDistance = Math.abs(estimate - upLeft);
|
||||
if (leftDistance <= upDistance && leftDistance <= upLeftDistance) {
|
||||
return left;
|
||||
}
|
||||
if (upDistance <= upLeftDistance) {
|
||||
return up;
|
||||
}
|
||||
return upLeft;
|
||||
}
|
||||
|
||||
function sampleAverageColor(
|
||||
image: { width: number; height: number; pixels: Uint8Array },
|
||||
x: number,
|
||||
y: number,
|
||||
radius = 2,
|
||||
): Rgb {
|
||||
const xStart = Math.max(0, Math.min(image.width - 1, x - radius));
|
||||
const xEnd = Math.max(0, Math.min(image.width - 1, x + radius));
|
||||
const yStart = Math.max(0, Math.min(image.height - 1, y - radius));
|
||||
const yEnd = Math.max(0, Math.min(image.height - 1, y + radius));
|
||||
|
||||
let totalR = 0;
|
||||
let totalG = 0;
|
||||
let totalB = 0;
|
||||
let count = 0;
|
||||
|
||||
for (let sampleY = yStart; sampleY <= yEnd; sampleY += 1) {
|
||||
for (let sampleX = xStart; sampleX <= xEnd; sampleX += 1) {
|
||||
const offset = (sampleY * image.width + sampleX) * 4;
|
||||
const alpha = image.pixels[offset + 3];
|
||||
if (alpha < 16) {
|
||||
continue;
|
||||
}
|
||||
totalR += image.pixels[offset];
|
||||
totalG += image.pixels[offset + 1];
|
||||
totalB += image.pixels[offset + 2];
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (count === 0) {
|
||||
throw new Error(`No visible pixels in sampled region at ${x}, ${y}`);
|
||||
}
|
||||
|
||||
return {
|
||||
r: Math.round(totalR / count),
|
||||
g: Math.round(totalG / count),
|
||||
b: Math.round(totalB / count),
|
||||
};
|
||||
}
|
||||
|
||||
function brightness(rgb: Rgb): number {
|
||||
return (rgb.r + rgb.g + rgb.b) / 3;
|
||||
}
|
||||
|
||||
async function sampleLocatorColor(page: Page, locator: Locator, radius = 2): Promise<Rgb> {
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) {
|
||||
throw new Error('Target locator is not visible for color sampling.');
|
||||
}
|
||||
return sampleViewportColor(page, box.x + box.width / 2, box.y + box.height / 2, radius);
|
||||
}
|
||||
|
||||
async function sampleCheckboxColor(page: Page, locator: Locator): Promise<Rgb> {
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) {
|
||||
throw new Error('Checkbox locator is not visible for color sampling.');
|
||||
}
|
||||
const x = box.x + Math.min(18, Math.max(12, box.width * 0.08));
|
||||
const y = box.y + box.height / 2;
|
||||
return sampleViewportColor(page, x, y, 0);
|
||||
}
|
||||
|
||||
async function sampleButtonColor(page: Page, locator: Locator): Promise<Rgb> {
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) {
|
||||
throw new Error('Button locator is not visible for color sampling.');
|
||||
}
|
||||
const x = box.x + box.width * 0.2;
|
||||
const y = box.y + box.height / 2;
|
||||
return sampleViewportColor(page, x, y, 1);
|
||||
}
|
||||
|
||||
async function sampleButtonBackground(page: Page, locator: Locator): Promise<Rgb> {
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) {
|
||||
throw new Error('Button locator is not visible for background sampling.');
|
||||
}
|
||||
const x = box.x + box.width / 2;
|
||||
const y = Math.max(0, box.y - 14);
|
||||
return sampleViewportColor(page, x, y, 2);
|
||||
}
|
||||
|
||||
async function expectBrightnessContrast(
|
||||
sample: () => Promise<{ foreground: Rgb; background: Rgb }>,
|
||||
minimumDelta: number,
|
||||
): Promise<void> {
|
||||
await expect
|
||||
.poll(async () => {
|
||||
const { foreground, background } = await sample();
|
||||
return Math.abs(brightness(foreground) - brightness(background));
|
||||
}, { timeout: 10_000 })
|
||||
.toBeGreaterThanOrEqual(minimumDelta);
|
||||
}
|
||||
|
||||
async function expectButtonContrast(page: Page, locator: Locator): Promise<void> {
|
||||
await expectBrightnessContrast(async () => {
|
||||
return {
|
||||
foreground: await sampleButtonColor(page, locator),
|
||||
background: await sampleButtonBackground(page, locator),
|
||||
};
|
||||
}, 45);
|
||||
}
|
||||
|
||||
async function sampleCheckboxBackground(page: Page, locator: Locator): Promise<Rgb> {
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) {
|
||||
throw new Error('Checkbox locator is not visible for background sampling.');
|
||||
}
|
||||
const x = box.x + Math.min(42, Math.max(30, box.width * 0.18));
|
||||
const y = box.y + box.height / 2;
|
||||
return sampleViewportColor(page, x, y, 1);
|
||||
}
|
||||
|
||||
async function expectCheckboxContrast(page: Page, locator: Locator): Promise<void> {
|
||||
await expectBrightnessContrast(async () => {
|
||||
return {
|
||||
foreground: await sampleCheckboxColor(page, locator),
|
||||
background: await sampleCheckboxBackground(page, locator),
|
||||
};
|
||||
}, 40);
|
||||
}
|
||||
|
||||
test.describe('UserFront signup theme visibility', () => {
|
||||
for (const theme of themeCases) {
|
||||
test(`signup keeps ${theme.name} theme colors visible across steps`, async ({
|
||||
page,
|
||||
}) => {
|
||||
await mockSignupApis(page);
|
||||
|
||||
if (theme.name === 'dark') {
|
||||
await page.goto('/ko/signin', { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForTimeout(1200);
|
||||
await enableFlutterAccessibility(page);
|
||||
const themeToggle = page.getByRole('button', {
|
||||
name: /Light|Dark|테마 전환|Theme toggle/i,
|
||||
});
|
||||
await themeToggle.click({ force: true });
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
await page.goto('/ko/signup', { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForTimeout(1200);
|
||||
await enableFlutterAccessibility(page);
|
||||
|
||||
const allAgreementCheckbox = page.getByRole('checkbox', {
|
||||
name: /모두 동의합니다|Agree to all/i,
|
||||
});
|
||||
await expect(allAgreementCheckbox).toBeVisible();
|
||||
await allAgreementCheckbox.click({ force: true });
|
||||
await expect(allAgreementCheckbox).toBeChecked();
|
||||
|
||||
const nextButton = page.getByRole('button', { name: /다음 단계|Next/i });
|
||||
await expect(nextButton).toBeVisible();
|
||||
await expect(nextButton).toBeEnabled();
|
||||
await nextButton.click({ force: true });
|
||||
|
||||
await expect(
|
||||
page.getByText(/본인 확인을 위해|Verify your email and phone number/i),
|
||||
).toBeVisible();
|
||||
|
||||
const emailInput = page.getByRole('textbox', {
|
||||
name: /이메일 주소|Email address/i,
|
||||
});
|
||||
const phoneInput = page.getByRole('textbox', {
|
||||
name: /휴대폰 번호|Phone number/i,
|
||||
});
|
||||
const requestButtons = page
|
||||
.getByRole('button')
|
||||
.filter({ hasText: /인증요청|재발송|Send code|Resend/i });
|
||||
|
||||
await expect(emailInput).toBeVisible();
|
||||
await expect(phoneInput).toBeVisible();
|
||||
await expect(requestButtons.nth(0)).toBeVisible();
|
||||
await expect(requestButtons.nth(1)).toBeVisible();
|
||||
await expect(nextButton).toBeVisible();
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user