forked from baron/baron-sso
feat: integrate orgfront and expose internal ids
This commit is contained in:
39
orgfront/tests/clients.spec.ts
Normal file
39
orgfront/tests/clients.spec.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import {
|
||||
type Consent,
|
||||
installDevApiMock,
|
||||
makeClient,
|
||||
seedAuth,
|
||||
} from "./helpers/devfront-fixtures";
|
||||
|
||||
test("clients page loads correctly", async ({ page }) => {
|
||||
await seedAuth(page);
|
||||
await installDevApiMock(page, {
|
||||
clients: [
|
||||
makeClient("client-playwright", {
|
||||
name: "Playwright Client",
|
||||
createdAt: new Date().toISOString(),
|
||||
redirectUris: ["http://localhost:5174/callback"],
|
||||
}),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
});
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(page).toHaveURL(/\/clients$/);
|
||||
|
||||
// 타이틀 확인
|
||||
await expect(page).toHaveTitle(/바론 개발자 서비스/);
|
||||
|
||||
// 페이지 내 주요 텍스트 확인
|
||||
await expect(page.getByText("연동 앱 목록")).toBeVisible();
|
||||
|
||||
// 테이블 헤더 확인
|
||||
await expect(
|
||||
page.locator("th").filter({ hasText: "애플리케이션" }),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.locator("th").filter({ hasText: /클라이언트 ID|Client ID/i }),
|
||||
).toBeVisible();
|
||||
});
|
||||
120
orgfront/tests/devfront-audit.spec.ts
Normal file
120
orgfront/tests/devfront-audit.spec.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import {
|
||||
type AuditLog,
|
||||
type Consent,
|
||||
installDevApiMock,
|
||||
makeClient,
|
||||
seedAuth,
|
||||
} from "./helpers/devfront-fixtures";
|
||||
|
||||
const appNamePlaceholder = /My Awesome Application|예: 멋진 애플리케이션/i;
|
||||
|
||||
test.describe("DevFront audit logs", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on("dialog", async (dialog) => {
|
||||
await dialog.accept().catch(() => {});
|
||||
});
|
||||
await seedAuth(page);
|
||||
});
|
||||
|
||||
test("filtering and cursor pagination", async ({ page }) => {
|
||||
const state = {
|
||||
clients: [makeClient("client-audit", { name: "Audit app" })],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: {
|
||||
"": {
|
||||
items: [
|
||||
{
|
||||
event_id: "evt-1",
|
||||
timestamp: "2026-03-03T09:00:00.000Z",
|
||||
user_id: "actor-a",
|
||||
event_type: "CLIENT_UPDATE",
|
||||
status: "success",
|
||||
ip_address: "127.0.0.1",
|
||||
user_agent: "playwright",
|
||||
details: JSON.stringify({
|
||||
action: "UPDATE_CLIENT",
|
||||
target_id: "client-audit",
|
||||
tenant_id: "tenant-a",
|
||||
}),
|
||||
},
|
||||
],
|
||||
next_cursor: "cursor-2",
|
||||
},
|
||||
"cursor-2": {
|
||||
items: [
|
||||
{
|
||||
event_id: "evt-2",
|
||||
timestamp: "2026-03-03T09:01:00.000Z",
|
||||
user_id: "actor-b",
|
||||
event_type: "CLIENT_ROTATE_SECRET",
|
||||
status: "success",
|
||||
ip_address: "127.0.0.1",
|
||||
user_agent: "playwright",
|
||||
details: JSON.stringify({
|
||||
action: "ROTATE_SECRET",
|
||||
target_id: "client-audit",
|
||||
tenant_id: "tenant-a",
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/audit-logs");
|
||||
await expect(page.getByText("UPDATE_CLIENT")).toBeVisible();
|
||||
|
||||
await page
|
||||
.getByPlaceholder(/Client ID로 필터|Filter by Client ID/i)
|
||||
.fill("client-audit");
|
||||
await page
|
||||
.getByPlaceholder(/액션으로 필터|Filter by Action/i)
|
||||
.fill("ROTATE_SECRET");
|
||||
|
||||
await page.getByRole("button", { name: /더 보기|Load more/i }).click();
|
||||
await expect(page.getByText("ROTATE_SECRET")).toBeVisible();
|
||||
});
|
||||
|
||||
test("realtime create/update actions should be recorded", async ({
|
||||
page,
|
||||
}) => {
|
||||
const state = {
|
||||
clients: [makeClient("client-realtime", { name: "Realtime app" })],
|
||||
consents: [] as Consent[],
|
||||
auditLogs: [] as AuditLog[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/new");
|
||||
await page.getByPlaceholder(appNamePlaceholder).fill("Realtime New App");
|
||||
await page
|
||||
.getByPlaceholder(/https:\/\/app\.example\.com\/callback/i)
|
||||
.fill("https://realtime.example.com/callback");
|
||||
await page.getByRole("button", { name: /앱 생성|Create/i }).click();
|
||||
await expect.poll(() => state.auditLogs.length).toBeGreaterThanOrEqual(1);
|
||||
await expect.poll(() => state.clients.at(-1)?.id).toMatch(/^client-/);
|
||||
const createdClientId = state.clients.at(-1)?.id;
|
||||
expect(createdClientId).toBeTruthy();
|
||||
|
||||
await page.goto(`/clients/${createdClientId}/settings`);
|
||||
await page.getByPlaceholder(appNamePlaceholder).fill("Realtime Updated");
|
||||
await page.getByRole("button", { name: /^저장$|^Save$/i }).click();
|
||||
await expect.poll(() => state.auditLogs.length).toBeGreaterThanOrEqual(2);
|
||||
|
||||
const actions = state.auditLogs
|
||||
.map((item) => {
|
||||
try {
|
||||
return JSON.parse(item.details)?.action as string | undefined;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
})
|
||||
.filter((value): value is string => Boolean(value));
|
||||
|
||||
expect(actions).toContain("CREATE_CLIENT");
|
||||
expect(actions).toContain("UPDATE_CLIENT");
|
||||
});
|
||||
});
|
||||
374
orgfront/tests/devfront-clients-lifecycle.spec.ts
Normal file
374
orgfront/tests/devfront-clients-lifecycle.spec.ts
Normal file
@@ -0,0 +1,374 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import {
|
||||
type ClientStatus,
|
||||
type Consent,
|
||||
installDevApiMock,
|
||||
makeClient,
|
||||
seedAuth,
|
||||
} from "./helpers/devfront-fixtures";
|
||||
|
||||
const appNamePlaceholder = /My Awesome Application|예: 멋진 애플리케이션/i;
|
||||
const jwksUri = "https://rp.example.com/.well-known/jwks.json";
|
||||
|
||||
test.describe("DevFront clients lifecycle", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on("dialog", async (dialog) => {
|
||||
await dialog.accept();
|
||||
});
|
||||
await seedAuth(page);
|
||||
});
|
||||
|
||||
test("create, update status, and delete", async ({ page }) => {
|
||||
const state = {
|
||||
clients: [makeClient("existing-client", { name: "Existing app" })],
|
||||
consents: [] as Consent[],
|
||||
updatedStatus: "active" as ClientStatus,
|
||||
auditLogsByCursor: undefined,
|
||||
onUpdateStatus(status: ClientStatus) {
|
||||
this.updatedStatus = status;
|
||||
},
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(page.getByText("Existing app")).toBeVisible();
|
||||
|
||||
await page
|
||||
.getByRole("button", { name: /연동 앱 추가|새 클라이언트|Create/i })
|
||||
.click();
|
||||
await expect(page).toHaveURL(/\/clients\/new$/);
|
||||
|
||||
await page
|
||||
.getByPlaceholder(appNamePlaceholder)
|
||||
.fill("Playwright Created App");
|
||||
await page
|
||||
.getByPlaceholder(/https:\/\/app\.example\.com\/callback/i)
|
||||
.fill("https://playwright.example.com/callback");
|
||||
await page
|
||||
.getByRole("button", { name: /앱 생성|클라이언트 생성|Create/i })
|
||||
.click();
|
||||
|
||||
await expect(page).toHaveURL(/\/clients\/client-\d+\/settings$/);
|
||||
await expect(
|
||||
page.getByRole("heading", {
|
||||
name: /연동 앱 설정|클라이언트 설정|Client Settings/i,
|
||||
}),
|
||||
).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: /비활성|Inactive/i }).click();
|
||||
await page.getByRole("button", { name: /^저장$|^Save$/i }).click();
|
||||
await expect.poll(() => state.updatedStatus).toBe("inactive");
|
||||
|
||||
await page.getByRole("button", { name: /삭제|Delete/i }).click();
|
||||
await expect(page).toHaveURL(/\/clients$/);
|
||||
await expect(page.getByText("Playwright Created App")).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("rotate secret shows new value", async ({ page }) => {
|
||||
let rotatedSecret = "";
|
||||
const state = {
|
||||
clients: [makeClient("client-rotate", { name: "Rotate app" })],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
onRotateSecret(newSecret: string) {
|
||||
rotatedSecret = newSecret;
|
||||
},
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/client-rotate");
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Rotate app", exact: true }),
|
||||
).toBeVisible();
|
||||
|
||||
await page.getByTitle(/비밀키 재발급|Rotate/i).click();
|
||||
await expect.poll(() => rotatedSecret).toBe("client-rotate-rotated-secret");
|
||||
await expect(page.getByText("client-rotate-rotated-secret")).toBeVisible();
|
||||
});
|
||||
|
||||
test("update name and redirect URI should be persisted", async ({ page }) => {
|
||||
const state = {
|
||||
clients: [
|
||||
makeClient("client-edit", {
|
||||
name: "Before Name",
|
||||
redirectUris: ["https://before.example.com/callback"],
|
||||
}),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/client-edit/settings");
|
||||
await page.getByPlaceholder(appNamePlaceholder).fill("After Name");
|
||||
await page.getByRole("button", { name: /^저장$|^Save$/i }).click();
|
||||
await expect.poll(() => state.clients[0]?.name).toBe("After Name");
|
||||
|
||||
await page.goto("/clients/client-edit");
|
||||
await page
|
||||
.getByRole("textbox", { name: /인증 콜백 URL|Callback/i })
|
||||
.fill("https://after.example.com/callback");
|
||||
await page
|
||||
.getByRole("button", { name: /Redirect URIs 저장|Save/i })
|
||||
.click();
|
||||
|
||||
await expect
|
||||
.poll(() => state.clients[0]?.redirectUris[0])
|
||||
.toBe("https://after.example.com/callback");
|
||||
|
||||
await page.reload();
|
||||
await expect(
|
||||
page.getByRole("textbox", { name: /인증 콜백 URL|Callback/i }),
|
||||
).toHaveValue(/https:\/\/after\.example\.com\/callback/);
|
||||
});
|
||||
|
||||
test("pkce headless login uses jwks uri only and shows cache actions", async ({
|
||||
page,
|
||||
}) => {
|
||||
const state = {
|
||||
clients: [
|
||||
makeClient("client-headless-login", {
|
||||
name: "Headless Login App",
|
||||
type: "pkce",
|
||||
metadata: {
|
||||
request_object_signing_alg: "RS256",
|
||||
},
|
||||
headlessJwksCache: {
|
||||
clientId: "client-headless-login",
|
||||
jwksUri,
|
||||
cachedAt: "2026-03-31T00:00:00.000Z",
|
||||
expiresAt: "2026-04-01T00:00:00.000Z",
|
||||
lastCheckedAt: "2026-03-31T12:00:00.000Z",
|
||||
lastSuccessfulVerificationAt: "2026-03-31T12:00:00.000Z",
|
||||
lastRefreshStatus: "success",
|
||||
lastError: "",
|
||||
consecutiveFailures: 0,
|
||||
cachedKids: ["kid-1"],
|
||||
etag: 'W/"cache-etag"',
|
||||
lastModified: "Tue, 31 Mar 2026 00:00:00 GMT",
|
||||
parsedKeys: [
|
||||
{
|
||||
kid: "kid-1",
|
||||
kty: "RSA",
|
||||
use: "sig",
|
||||
alg: "RS256",
|
||||
n: "voVbHlo_UHkjtT7Q_8owyjZ2omE8n8mbGlpraZziStHPfe08q_RGiEXO6Pyiz42NVi-Yo0c7qiaqRwB4h9s5phpT2wwcUxnkrQeRhe7BpigInZPzpwq1hsaB2zyhE7zTRCC3hinGtFdVpNzTVKYKGPbXfeEXaRL3P838vi-_iB4IN3WQk_pAakUQvajL2H-vcWSMSNslMGPDZxobqE9MHSWocNXemrcmtCeE7ruUND0qHZOb8k-hHUBqsNoJ63WKdapzGYF6e2qgDRveYrjgOCBigZPi8npN0xStQ0YcrH_RxeTogsdRZ8SuXmLqavryVDnrT8czPkkJ-EHb8PiTCQ",
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
onRefreshHeadlessJwks(clientId: string) {
|
||||
if (this.clients[0].headlessJwksCache) {
|
||||
this.clients[0].headlessJwksCache = {
|
||||
...this.clients[0].headlessJwksCache,
|
||||
lastRefreshStatus: "success",
|
||||
lastCheckedAt: "2026-04-01T00:00:00.000Z",
|
||||
};
|
||||
}
|
||||
expect(clientId).toBe("client-headless-login");
|
||||
},
|
||||
onRevokeHeadlessJwksCache(clientId: string) {
|
||||
expect(clientId).toBe("client-headless-login");
|
||||
},
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/client-headless-login/settings");
|
||||
|
||||
await page
|
||||
.getByRole("switch", {
|
||||
name: /Headless Login \(자체 로그인 UI 사용\)|Headless Login \(Custom Login UI\)/i,
|
||||
})
|
||||
.click();
|
||||
|
||||
await expect(
|
||||
page.getByRole("heading", {
|
||||
name: /공개키 등록|Public Key Registration/i,
|
||||
}),
|
||||
).toBeVisible();
|
||||
|
||||
await expect(
|
||||
page.getByText(/Request Object Signing Algorithm/i),
|
||||
).toHaveCount(0);
|
||||
await expect(
|
||||
page.getByText(/Allowed algorithms|허용 알고리즘/i),
|
||||
).toHaveCount(0);
|
||||
await page
|
||||
.getByPlaceholder(/https:\/\/rp\.example\.com\/\.well-known\/jwks\.json/i)
|
||||
.fill(jwksUri);
|
||||
await page.getByRole("button", { name: /^저장$|^Save$/i }).click();
|
||||
|
||||
await expect
|
||||
.poll(() => state.clients[0]?.tokenEndpointAuthMethod)
|
||||
.toBe("none");
|
||||
await expect
|
||||
.poll(() => state.clients[0]?.metadata?.headless_login_enabled)
|
||||
.toBe(true);
|
||||
await expect
|
||||
.poll(
|
||||
() => state.clients[0]?.metadata?.headless_token_endpoint_auth_method,
|
||||
)
|
||||
.toBe("private_key_jwt");
|
||||
await expect
|
||||
.poll(() => state.clients[0]?.metadata?.headless_jwks_uri)
|
||||
.toBe(jwksUri);
|
||||
await expect
|
||||
.poll(() => state.clients[0]?.metadata?.request_object_signing_alg)
|
||||
.toBeUndefined();
|
||||
|
||||
await expect(
|
||||
page.getByText(/cached at|캐시됨|last refresh|마지막 갱신/i),
|
||||
).toBeVisible();
|
||||
await expect(page.getByText(/Parsed Keys|파싱된 키/i)).toBeVisible();
|
||||
await expect(page.getByText(/^KID$/i)).toBeVisible();
|
||||
await expect(page.getByText("kid-1", { exact: true }).last()).toBeVisible();
|
||||
await expect(
|
||||
page.getByText(
|
||||
"voVbHlo_UHkjtT7Q_8owyjZ2omE8n8mbGlpraZziStHPfe08q_RGiEXO6Pyiz42NVi-Yo0c7qiaqRwB4h9s5phpT2wwcUxnkrQeRhe7BpigInZPzpwq1hsaB2zyhE7zTRCC3hinGtFdVpNzTVKYKGPbXfeEXaRL3P838vi-_iB4IN3WQk_pAakUQvajL2H-vcWSMSNslMGPDZxobqE9MHSWocNXemrcmtCeE7ruUND0qHZOb8k-hHUBqsNoJ63WKdapzGYF6e2qgDRveYrjgOCBigZPi8npN0xStQ0YcrH_RxeTogsdRZ8SuXmLqavryVDnrT8czPkkJ-EHb8PiTCQ",
|
||||
{ exact: true },
|
||||
),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("button", { name: /refresh|새로고침/i }),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("button", { name: /^(캐시 삭제|Revoke Cache)$/i }),
|
||||
).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: /refresh|새로고침/i }).click();
|
||||
await expect
|
||||
.poll(() => state.clients[0]?.headlessJwksCache?.lastCheckedAt)
|
||||
.toBe("2026-04-01T00:00:00.000Z");
|
||||
|
||||
page.removeAllListeners("dialog");
|
||||
page.once("dialog", async (dialog) => {
|
||||
expect(dialog.message()).toMatch(/revoke|삭제|cache/i);
|
||||
await dialog.accept();
|
||||
});
|
||||
await page
|
||||
.getByRole("button", { name: /^(캐시 삭제|Revoke Cache)$/i })
|
||||
.click();
|
||||
await expect
|
||||
.poll(() => state.clients[0]?.headlessJwksCache)
|
||||
.toBeUndefined();
|
||||
|
||||
await page.reload();
|
||||
await expect(
|
||||
page.getByRole("heading", {
|
||||
name: /공개키 등록|Public Key Registration/i,
|
||||
}),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("textbox", { name: /JWKS URI|JWKS URI/i }),
|
||||
).toHaveValue(jwksUri);
|
||||
});
|
||||
|
||||
test("pkce headless login blocks save when parsed jwks algorithm is unsupported", async ({
|
||||
page,
|
||||
}) => {
|
||||
const state = {
|
||||
clients: [
|
||||
makeClient("client-headless-unsupported", {
|
||||
name: "Unsupported Headless Login App",
|
||||
type: "pkce",
|
||||
metadata: {
|
||||
headless_login_enabled: true,
|
||||
request_object_signing_alg: "RS256",
|
||||
},
|
||||
headlessJwksCache: {
|
||||
clientId: "client-headless-unsupported",
|
||||
jwksUri,
|
||||
cachedAt: "2026-03-31T00:00:00.000Z",
|
||||
expiresAt: "2026-04-01T00:00:00.000Z",
|
||||
lastCheckedAt: "2026-03-31T12:00:00.000Z",
|
||||
lastSuccessfulVerificationAt: "2026-03-31T12:00:00.000Z",
|
||||
lastRefreshStatus: "success",
|
||||
lastError: "",
|
||||
consecutiveFailures: 0,
|
||||
cachedKids: ["kid-unsupported"],
|
||||
parsedKeys: [
|
||||
{
|
||||
kid: "kid-unsupported",
|
||||
kty: "RSA",
|
||||
use: "sig",
|
||||
alg: "HS256",
|
||||
n: "unsupported-n-value",
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/client-headless-unsupported/settings");
|
||||
|
||||
await page
|
||||
.getByPlaceholder(/https:\/\/rp\.example\.com\/\.well-known\/jwks\.json/i)
|
||||
.fill(jwksUri);
|
||||
|
||||
await expect(
|
||||
page.getByText("지원하지 않는 알고리즘이 감지되었습니다.", {
|
||||
exact: true,
|
||||
}),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("button", { name: /^저장$|^Save$/i }),
|
||||
).toBeDisabled();
|
||||
});
|
||||
|
||||
test("pkce headless login blocks save when parsed jwks algorithm is missing", async ({
|
||||
page,
|
||||
}) => {
|
||||
const state = {
|
||||
clients: [
|
||||
makeClient("client-headless-missing-alg", {
|
||||
name: "Missing Alg Headless Login App",
|
||||
type: "pkce",
|
||||
metadata: {
|
||||
headless_login_enabled: true,
|
||||
headless_jwks_uri: jwksUri,
|
||||
},
|
||||
headlessJwksCache: {
|
||||
clientId: "client-headless-missing-alg",
|
||||
jwksUri,
|
||||
cachedAt: "2026-03-31T00:00:00.000Z",
|
||||
expiresAt: "2026-04-01T00:00:00.000Z",
|
||||
lastCheckedAt: "2026-03-31T12:00:00.000Z",
|
||||
lastSuccessfulVerificationAt: "2026-03-31T12:00:00.000Z",
|
||||
lastRefreshStatus: "success",
|
||||
lastError: "",
|
||||
consecutiveFailures: 0,
|
||||
cachedKids: ["kid-missing-alg"],
|
||||
parsedKeys: [
|
||||
{
|
||||
kid: "kid-missing-alg",
|
||||
kty: "RSA",
|
||||
use: "sig",
|
||||
alg: "",
|
||||
n: "missing-alg-n-value",
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/client-headless-missing-alg/settings");
|
||||
|
||||
await expect(
|
||||
page.getByText(/알고리즘이 선언되지 않았습니다|algorithm is missing/i),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("button", { name: /^저장$|^Save$/i }),
|
||||
).toBeDisabled();
|
||||
});
|
||||
});
|
||||
45
orgfront/tests/devfront-consents.spec.ts
Normal file
45
orgfront/tests/devfront-consents.spec.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import {
|
||||
type Consent,
|
||||
installDevApiMock,
|
||||
makeClient,
|
||||
seedAuth,
|
||||
} from "./helpers/devfront-fixtures";
|
||||
|
||||
test.describe("DevFront consents", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on("dialog", async (dialog) => {
|
||||
await dialog.accept();
|
||||
});
|
||||
await seedAuth(page);
|
||||
});
|
||||
|
||||
test("consent list and revoke flow", async ({ page }) => {
|
||||
const state = {
|
||||
clients: [makeClient("client-consent", { name: "Consent app" })],
|
||||
consents: [
|
||||
{
|
||||
subject: "user-1",
|
||||
userName: "Alice",
|
||||
clientId: "client-consent",
|
||||
clientName: "Consent app",
|
||||
grantedScopes: ["openid", "profile"],
|
||||
authenticatedAt: "2026-03-03T08:00:00.000Z",
|
||||
createdAt: "2026-03-02T08:00:00.000Z",
|
||||
status: "active",
|
||||
tenantId: "tenant-a",
|
||||
tenantName: "Tenant A",
|
||||
},
|
||||
] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/client-consent/consents");
|
||||
await expect(page.getByText("Alice")).toBeVisible();
|
||||
await expect(page.getByText("Tenant A")).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: /권한 철회|철회|Revoke/i }).click();
|
||||
await expect(page.getByText(/Revoked|철회/i).first()).toBeVisible();
|
||||
});
|
||||
});
|
||||
169
orgfront/tests/devfront-role-switch-report.spec.ts
Normal file
169
orgfront/tests/devfront-role-switch-report.spec.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import {
|
||||
type AuditLog,
|
||||
type Consent,
|
||||
installDevApiMock,
|
||||
makeClient,
|
||||
seedAuth,
|
||||
} from "./helpers/devfront-fixtures";
|
||||
import { captureEvidence } from "./helpers/evidence";
|
||||
|
||||
const appNamePlaceholder = /My Awesome Application|예: 멋진 애플리케이션/i;
|
||||
|
||||
test.describe("DevFront role report", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on("dialog", async (dialog) => {
|
||||
await dialog.accept();
|
||||
});
|
||||
});
|
||||
|
||||
test("user(tenant_member) is blocked with 안내 문구", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
await seedAuth(page, "user");
|
||||
await installDevApiMock(page, {
|
||||
clients: [],
|
||||
consents: [] as Consent[],
|
||||
auditLogs: [] as AuditLog[],
|
||||
});
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(
|
||||
page.getByText(/관리자 전용 화면|administrator only/i),
|
||||
).toBeVisible();
|
||||
await captureEvidence(page, testInfo, "role-user-blocked");
|
||||
});
|
||||
|
||||
test("rp_admin sees only assigned Gitea app and its logs", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
await seedAuth(page, "rp_admin");
|
||||
const state = {
|
||||
clients: [makeClient("gitea-client", { name: "Gitea" })],
|
||||
consents: [] as Consent[],
|
||||
auditLogs: [
|
||||
{
|
||||
event_id: "evt-rp-1",
|
||||
timestamp: "2026-03-04T01:00:00.000Z",
|
||||
user_id: "rp-admin-user",
|
||||
event_type: "CLIENT_UPDATE",
|
||||
status: "success" as const,
|
||||
ip_address: "127.0.0.1",
|
||||
user_agent: "playwright",
|
||||
details: JSON.stringify({
|
||||
action: "UPDATE_CLIENT",
|
||||
target_id: "gitea-client",
|
||||
tenant_id: "tenant-a",
|
||||
}),
|
||||
},
|
||||
] as AuditLog[],
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(page.getByRole("link", { name: /Gitea/ })).toBeVisible();
|
||||
await expect(page.getByText("gitea-client")).toBeVisible();
|
||||
await captureEvidence(page, testInfo, "role-rp-admin-clients");
|
||||
|
||||
await page.goto("/audit-logs");
|
||||
await expect(page.getByText("UPDATE_CLIENT")).toBeVisible();
|
||||
await expect(page.getByText("gitea-client")).toBeVisible();
|
||||
await captureEvidence(page, testInfo, "role-rp-admin-audit");
|
||||
});
|
||||
|
||||
test("tenant_admin can manage tenant apps and see tenant logs", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
await seedAuth(page, "tenant_admin");
|
||||
const state = {
|
||||
clients: [
|
||||
makeClient("tenant-a-app-1", { name: "Tenant A CRM" }),
|
||||
makeClient("tenant-a-app-2", { name: "Tenant A ERP" }),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogs: [] as AuditLog[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(page.getByText("Tenant A CRM")).toBeVisible();
|
||||
await expect(page.getByText("Tenant A ERP")).toBeVisible();
|
||||
await captureEvidence(page, testInfo, "role-tenant-admin-clients");
|
||||
|
||||
await page.goto("/clients/tenant-a-app-1/settings");
|
||||
await page
|
||||
.getByPlaceholder(appNamePlaceholder)
|
||||
.fill("Tenant A CRM Updated");
|
||||
|
||||
const updatePromise = page.waitForResponse(
|
||||
(r) =>
|
||||
r.url().includes("/api/v1/dev/clients") &&
|
||||
r.request().method() === "PUT",
|
||||
);
|
||||
await page.getByRole("button", { name: /^저장$|^Save$/i }).click();
|
||||
await updatePromise;
|
||||
|
||||
await page.goto("/audit-logs");
|
||||
await expect(page.getByText("UPDATE_CLIENT")).toBeVisible({
|
||||
timeout: 30000,
|
||||
});
|
||||
await expect(page.getByText("tenant-a-app-1")).toBeVisible();
|
||||
await captureEvidence(page, testInfo, "role-tenant-admin-audit");
|
||||
});
|
||||
|
||||
test("super_admin sees all and can generate log entries", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
await seedAuth(page, "super_admin");
|
||||
const state = {
|
||||
clients: [
|
||||
makeClient("tenant-a-app", { name: "Tenant A App" }),
|
||||
makeClient("tenant-b-app", { name: "Tenant B App" }),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogs: [] as AuditLog[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(page.getByText("Tenant A App")).toBeVisible();
|
||||
await expect(page.getByText("Tenant B App")).toBeVisible();
|
||||
await captureEvidence(page, testInfo, "role-super-admin-clients");
|
||||
|
||||
await page.goto("/clients/new");
|
||||
await page
|
||||
.getByPlaceholder(appNamePlaceholder)
|
||||
.fill("Super Admin Created App");
|
||||
await page
|
||||
.getByPlaceholder(/https:\/\/app\.example\.com\/callback/i)
|
||||
.fill("https://super-admin.example.com/callback");
|
||||
|
||||
const createPromise = page.waitForResponse(
|
||||
(r) =>
|
||||
r.url().includes("/api/v1/dev/clients") &&
|
||||
r.request().method() === "POST",
|
||||
);
|
||||
await page.getByRole("button", { name: /앱 생성|Create/i }).click();
|
||||
await createPromise;
|
||||
await expect(page).toHaveURL(/\/clients\/client-\d+\/settings$/);
|
||||
await expect
|
||||
.poll(() =>
|
||||
state.auditLogs.some((item) => {
|
||||
try {
|
||||
return JSON.parse(item.details)?.action === "CREATE_CLIENT";
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}),
|
||||
)
|
||||
.toBe(true);
|
||||
|
||||
await page.goto("/audit-logs");
|
||||
await expect(page.getByText("CREATE_CLIENT")).toBeVisible({
|
||||
timeout: 30000,
|
||||
});
|
||||
await captureEvidence(page, testInfo, "role-super-admin-audit");
|
||||
});
|
||||
});
|
||||
122
orgfront/tests/devfront-security.spec.ts
Normal file
122
orgfront/tests/devfront-security.spec.ts
Normal file
@@ -0,0 +1,122 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import {
|
||||
type Consent,
|
||||
installDevApiMock,
|
||||
makeClient,
|
||||
seedAuth,
|
||||
} from "./helpers/devfront-fixtures";
|
||||
|
||||
test.describe("DevFront security and isolation", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on("dialog", async (dialog) => {
|
||||
await dialog.accept();
|
||||
});
|
||||
await seedAuth(page);
|
||||
});
|
||||
|
||||
test("tenant isolation: forbidden client shows blocked error", async ({
|
||||
page,
|
||||
}) => {
|
||||
const state = {
|
||||
clients: [makeClient("tenant-a-client", { name: "Tenant A app" })],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients/tenant-b-client");
|
||||
await expect(
|
||||
page.getByText(
|
||||
/Error loading (app|client)|앱 정보를 불러오지 못했습니다|클라이언트 정보를 불러오지 못했습니다/i,
|
||||
),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("RBAC: user without manage_all permission should not see private apps", async ({
|
||||
page,
|
||||
}) => {
|
||||
const state = {
|
||||
clients: [
|
||||
makeClient("pkce-client", {
|
||||
name: "PKCE only app",
|
||||
type: "pkce",
|
||||
}),
|
||||
],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(page.getByText("PKCE only app")).toBeVisible();
|
||||
await expect(page.getByText("Server side App")).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("tenant_member user is blocked at AuthGuard", async ({ page }) => {
|
||||
await seedAuth(page, "tenant_member");
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(
|
||||
page.getByText(/DevFront는 관리자 전용 화면입니다|administrator access/i),
|
||||
).toBeVisible();
|
||||
await expect(page).toHaveURL(/\/clients$/);
|
||||
});
|
||||
|
||||
test("rp_admin receives 403 on clients list and sees ForbiddenMessage", async ({
|
||||
page,
|
||||
}) => {
|
||||
await seedAuth(page, "rp_admin");
|
||||
|
||||
const state = {
|
||||
clients: [] as ReturnType<typeof makeClient>[],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.route("**/api/v1/dev/clients", async (route) => {
|
||||
if (route.request().method() === "GET") {
|
||||
return route.fulfill({
|
||||
status: 403,
|
||||
contentType: "application/json",
|
||||
body: '{"error": "forbidden"}',
|
||||
});
|
||||
}
|
||||
return route.fallback();
|
||||
});
|
||||
|
||||
await page.goto("/clients");
|
||||
await expect(
|
||||
page.getByText(/RP 관리자는|RP administrators can only access/i),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("tenant_admin receives 403 on audit logs and sees ForbiddenMessage", async ({
|
||||
page,
|
||||
}) => {
|
||||
await seedAuth(page, "tenant_admin");
|
||||
|
||||
const state = {
|
||||
clients: [] as ReturnType<typeof makeClient>[],
|
||||
consents: [] as Consent[],
|
||||
auditLogsByCursor: undefined,
|
||||
};
|
||||
await installDevApiMock(page, state);
|
||||
|
||||
await page.route("**/api/v1/dev/audit-logs*", async (route) => {
|
||||
if (route.request().method() === "GET") {
|
||||
return route.fulfill({
|
||||
status: 403,
|
||||
contentType: "application/json",
|
||||
body: '{"error": "forbidden"}',
|
||||
});
|
||||
}
|
||||
return route.fallback();
|
||||
});
|
||||
|
||||
await page.goto("/audit-logs");
|
||||
await expect(
|
||||
page.getByText(/테넌트 관리자 권한|Tenant administrator permissions/i),
|
||||
).toBeVisible();
|
||||
});
|
||||
});
|
||||
116
orgfront/tests/devfront-tenant-switch.spec.ts
Normal file
116
orgfront/tests/devfront-tenant-switch.spec.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import {
|
||||
installDevApiMock,
|
||||
makeClient,
|
||||
seedAuth,
|
||||
} from "./helpers/devfront-fixtures";
|
||||
|
||||
test.describe("DevFront tenant switch", () => {
|
||||
const MOCK_STATE = {
|
||||
clients: [makeClient("client-a", { name: "Tenant A App" })],
|
||||
consents: [],
|
||||
auditLogs: [],
|
||||
};
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route("**/api/v1/user/me", async (route) => {
|
||||
if (route.request().method() === "GET") {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
id: "playwright-user",
|
||||
email: "playwright@example.com",
|
||||
name: "Playwright User",
|
||||
role: "tenant_admin",
|
||||
tenantId: "tenant-a",
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
await route.continue();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test("multiple tenants: user can switch tenant context", async ({ page }) => {
|
||||
// Seed an admin user
|
||||
await seedAuth(page, "tenant_admin");
|
||||
|
||||
await installDevApiMock(page, MOCK_STATE);
|
||||
|
||||
// Mock API to return multiple tenants
|
||||
await page.route("**/api/v1/dev/my-tenants", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify([
|
||||
{ id: "tenant-a", name: "Tenant A", slug: "tenant-a" },
|
||||
{ id: "tenant-b", name: "Tenant B", slug: "tenant-b" },
|
||||
]),
|
||||
});
|
||||
});
|
||||
|
||||
// Navigate to profile page
|
||||
await page.goto("/profile");
|
||||
|
||||
// Wait for the switcher to load
|
||||
const switcherHeading = page.getByText("작업 테넌트 (컨텍스트)");
|
||||
await expect(switcherHeading).toBeVisible();
|
||||
|
||||
// Verify initial state is selected (tenant-a comes from seedAuth)
|
||||
const select = page.getByRole("combobox", { name: /테넌트/i });
|
||||
await expect(select).toHaveValue("tenant-a");
|
||||
|
||||
// Change to Tenant B
|
||||
await select.selectOption("tenant-b");
|
||||
|
||||
// Click Save
|
||||
await page.getByRole("button", { name: /저장|Save/i }).click();
|
||||
|
||||
// Verify success toast
|
||||
await expect(page.getByText("테넌트 전환 완료").first()).toBeVisible();
|
||||
|
||||
// Verify localStorage was updated
|
||||
const savedTenantId = await page.evaluate(() =>
|
||||
window.localStorage.getItem("dev_tenant_id"),
|
||||
);
|
||||
expect(savedTenantId).toBe("tenant-b");
|
||||
});
|
||||
|
||||
test("single tenant: switcher is disabled with a notice", async ({
|
||||
page,
|
||||
}) => {
|
||||
await seedAuth(page, "tenant_admin");
|
||||
|
||||
// Mock API to return only ONE tenant
|
||||
await page.route("**/api/v1/dev/my-tenants", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify([
|
||||
{ id: "tenant-a", name: "Tenant A", slug: "tenant-a" },
|
||||
]),
|
||||
});
|
||||
});
|
||||
|
||||
await installDevApiMock(page, MOCK_STATE);
|
||||
|
||||
await page.goto("/profile");
|
||||
|
||||
// Wait for the switcher to load
|
||||
await expect(page.getByText("작업 테넌트 (컨텍스트)")).toBeVisible();
|
||||
|
||||
// Verify the select is disabled
|
||||
const select = page.getByRole("combobox", { name: /테넌트/i });
|
||||
await expect(select).toBeDisabled();
|
||||
|
||||
// Verify the save button is disabled
|
||||
const saveButton = page.getByRole("button", { name: /저장|Save/i });
|
||||
await expect(saveButton).toBeDisabled();
|
||||
|
||||
// Verify the notice message
|
||||
await expect(
|
||||
page.getByText("단일 테넌트에 소속되어 전환할 필요가 없습니다."),
|
||||
).toBeVisible();
|
||||
});
|
||||
});
|
||||
8
orgfront/tests/example.spec.ts
Normal file
8
orgfront/tests/example.spec.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
test("has title", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
// Expect a title "to contain" a substring.
|
||||
await expect(page).toHaveTitle(/바론 개발자 서비스/);
|
||||
});
|
||||
513
orgfront/tests/helpers/devfront-fixtures.ts
Normal file
513
orgfront/tests/helpers/devfront-fixtures.ts
Normal file
@@ -0,0 +1,513 @@
|
||||
import type { Page, Route } from "@playwright/test";
|
||||
|
||||
export type ClientStatus = "active" | "inactive";
|
||||
export type ClientType = "private" | "pkce";
|
||||
|
||||
export type Client = {
|
||||
id: string;
|
||||
name: string;
|
||||
type: ClientType;
|
||||
status: ClientStatus;
|
||||
redirectUris: string[];
|
||||
scopes: string[];
|
||||
createdAt: string;
|
||||
clientSecret?: string;
|
||||
tokenEndpointAuthMethod?: string;
|
||||
jwksUri?: string;
|
||||
jwks?: Record<string, unknown> | string;
|
||||
headlessJwksCache?: {
|
||||
clientId: string;
|
||||
jwksUri: string;
|
||||
cachedAt: string;
|
||||
expiresAt: string;
|
||||
lastCheckedAt?: string;
|
||||
lastSuccessfulVerificationAt?: string;
|
||||
lastRefreshStatus?: "success" | "failure" | "pending";
|
||||
lastError?: string;
|
||||
consecutiveFailures?: number;
|
||||
cachedKids?: string[];
|
||||
etag?: string;
|
||||
lastModified?: string;
|
||||
parsedKeys?: Array<{
|
||||
kid?: string;
|
||||
kty?: string;
|
||||
use?: string;
|
||||
alg?: string;
|
||||
n?: string;
|
||||
}>;
|
||||
};
|
||||
metadata?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export type Consent = {
|
||||
subject: string;
|
||||
userName: string;
|
||||
clientId: string;
|
||||
clientName: string;
|
||||
grantedScopes: string[];
|
||||
authenticatedAt?: string;
|
||||
createdAt: string;
|
||||
deletedAt?: string;
|
||||
status: "active" | "revoked";
|
||||
tenantId: string;
|
||||
tenantName: string;
|
||||
};
|
||||
|
||||
export type AuditLog = {
|
||||
event_id: string;
|
||||
timestamp: string;
|
||||
user_id: string;
|
||||
event_type: string;
|
||||
status: "success" | "failure";
|
||||
ip_address: string;
|
||||
user_agent: string;
|
||||
details: string;
|
||||
};
|
||||
|
||||
export type DevApiMockState = {
|
||||
clients: Client[];
|
||||
consents: Consent[];
|
||||
auditLogsByCursor?: Record<
|
||||
string,
|
||||
{ items: AuditLog[]; next_cursor?: string }
|
||||
>;
|
||||
auditLogs?: AuditLog[];
|
||||
onUpdateStatus?: (status: ClientStatus) => void;
|
||||
onRotateSecret?: (newSecret: string) => void;
|
||||
onRefreshHeadlessJwks?: (clientId: string) => void;
|
||||
onRevokeHeadlessJwksCache?: (clientId: string) => void;
|
||||
};
|
||||
|
||||
export function makeClient(
|
||||
id: string,
|
||||
overrides: Partial<Client> = {},
|
||||
): Client {
|
||||
return {
|
||||
id,
|
||||
name: `${id} app`,
|
||||
type: "private",
|
||||
status: "active",
|
||||
redirectUris: [`https://${id}.example.com/callback`],
|
||||
scopes: ["openid", "profile", "email"],
|
||||
createdAt: "2026-03-03T00:00:00.000Z",
|
||||
clientSecret: `${id}-secret`,
|
||||
metadata: {},
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
export async function seedAuth(page: Page, role?: string) {
|
||||
const nowInSeconds = Math.floor(Date.now() / 1000);
|
||||
|
||||
await page.addInitScript(
|
||||
({ issuedAt, injectedRole }) => {
|
||||
const mockOidcUser = {
|
||||
id_token: "playwright-id-token",
|
||||
session_state: "playwright-session",
|
||||
access_token: "playwright-access-token",
|
||||
refresh_token: "playwright-refresh-token",
|
||||
token_type: "Bearer",
|
||||
scope: "openid profile email",
|
||||
profile: {
|
||||
sub: "playwright-user",
|
||||
email: "playwright@example.com",
|
||||
name: "Playwright User",
|
||||
...(injectedRole ? { role: injectedRole } : {}),
|
||||
},
|
||||
expires_at: issuedAt + 3600,
|
||||
};
|
||||
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc:devfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc/:devfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem("dev_role", injectedRole || "rp_admin");
|
||||
window.localStorage.setItem("dev_tenant_id", "tenant-a");
|
||||
},
|
||||
{ issuedAt: nowInSeconds, injectedRole: role ?? "" },
|
||||
);
|
||||
|
||||
await page.route("**/oidc/**", async (route) => {
|
||||
const url = route.request().url();
|
||||
if (url.includes(".well-known/openid-configuration")) {
|
||||
await route.fulfill({
|
||||
json: {
|
||||
issuer: "http://localhost:5000/oidc",
|
||||
authorization_endpoint: "http://localhost:5000/oidc/auth",
|
||||
token_endpoint: "http://localhost:5000/oidc/token",
|
||||
jwks_uri: "http://localhost:5000/oidc/jwks",
|
||||
userinfo_endpoint: "http://localhost:5000/oidc/userinfo",
|
||||
end_session_endpoint: "http://localhost:5000/oidc/session/end",
|
||||
},
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
} else if (url.includes("/jwks")) {
|
||||
await route.fulfill({
|
||||
json: { keys: [] },
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
} else {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
body: "ok",
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function json(route: Route, payload: unknown, status = 200) {
|
||||
return route.fulfill({
|
||||
status,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
}
|
||||
|
||||
function parseClientId(pathname: string): string {
|
||||
const parts = pathname.split("/").filter(Boolean);
|
||||
return parts[parts.length - 1] ?? "";
|
||||
}
|
||||
|
||||
export async function installDevApiMock(page: Page, state: DevApiMockState) {
|
||||
const appendAuditLog = (
|
||||
eventType: string,
|
||||
action: string,
|
||||
targetId: string,
|
||||
status: "success" | "failure" = "success",
|
||||
) => {
|
||||
if (!state.auditLogs) return;
|
||||
state.auditLogs.unshift({
|
||||
event_id: `evt-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
|
||||
timestamp: new Date().toISOString(),
|
||||
user_id: "playwright-user",
|
||||
event_type: eventType,
|
||||
status,
|
||||
ip_address: "127.0.0.1",
|
||||
user_agent: "playwright",
|
||||
details: JSON.stringify({
|
||||
action,
|
||||
target_id: targetId,
|
||||
tenant_id: "tenant-a",
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
await page.route("**/api/v1/user/me", async (route) => {
|
||||
const storedRole =
|
||||
(await page.evaluate(() => window.localStorage.getItem("dev_role"))) ??
|
||||
"rp_admin";
|
||||
return json(route, {
|
||||
id: "playwright-user",
|
||||
loginId: "playwright@example.com",
|
||||
email: "playwright@example.com",
|
||||
name: "Playwright User",
|
||||
phoneNumber: "",
|
||||
department: "QA",
|
||||
tenantId: "tenant-a",
|
||||
tenantName: "Tenant A",
|
||||
role: storedRole,
|
||||
createdAt: "2026-03-03T00:00:00.000Z",
|
||||
updatedAt: "2026-03-03T00:00:00.000Z",
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/dev/**", async (route) => {
|
||||
const request = route.request();
|
||||
const url = new URL(request.url());
|
||||
const { pathname, searchParams } = url;
|
||||
const method = request.method();
|
||||
|
||||
if (pathname === "/api/v1/dev/my-tenants" && method === "GET") {
|
||||
return json(route, [
|
||||
{ id: "tenant-a", name: "Tenant A", slug: "tenant-a" },
|
||||
]);
|
||||
}
|
||||
|
||||
if (pathname === "/api/v1/dev/stats" && method === "GET") {
|
||||
const total = state.clients.length;
|
||||
return json(route, {
|
||||
total_clients: total,
|
||||
active_sessions: Math.max(1, total),
|
||||
auth_failures_24h: 0,
|
||||
});
|
||||
}
|
||||
|
||||
if (pathname === "/api/v1/dev/clients" && method === "GET") {
|
||||
return json(route, {
|
||||
items: state.clients.map((client) => ({
|
||||
id: client.id,
|
||||
name: client.name,
|
||||
type: client.type,
|
||||
status: client.status,
|
||||
createdAt: client.createdAt,
|
||||
redirectUris: client.redirectUris,
|
||||
scopes: client.scopes,
|
||||
})),
|
||||
limit: 50,
|
||||
offset: 0,
|
||||
});
|
||||
}
|
||||
|
||||
if (pathname === "/api/v1/dev/clients" && method === "POST") {
|
||||
const payload = (request.postDataJSON() as {
|
||||
name?: string;
|
||||
type?: ClientType;
|
||||
status?: ClientStatus;
|
||||
redirectUris?: string[];
|
||||
scopes?: string[];
|
||||
tokenEndpointAuthMethod?: string;
|
||||
jwksUri?: string;
|
||||
jwks?: Record<string, unknown> | string;
|
||||
metadata?: Record<string, unknown>;
|
||||
}) || { name: "created app" };
|
||||
|
||||
const created = makeClient(`client-${state.clients.length + 1}`, {
|
||||
name: payload.name ?? "created app",
|
||||
type: payload.type ?? "private",
|
||||
status: payload.status ?? "active",
|
||||
redirectUris: payload.redirectUris ?? [],
|
||||
scopes: payload.scopes ?? ["openid"],
|
||||
tokenEndpointAuthMethod: payload.tokenEndpointAuthMethod,
|
||||
jwksUri: payload.jwksUri,
|
||||
jwks: payload.jwks,
|
||||
metadata: payload.metadata ?? {},
|
||||
});
|
||||
|
||||
state.clients.push(created);
|
||||
appendAuditLog("CLIENT_CREATE", "CREATE_CLIENT", created.id);
|
||||
return json(route, {
|
||||
client: created,
|
||||
endpoints: {
|
||||
discovery: "https://issuer/.well-known/openid-configuration",
|
||||
issuer: "https://issuer",
|
||||
authorization: "https://issuer/oauth2/auth",
|
||||
token: "https://issuer/oauth2/token",
|
||||
userinfo: "https://issuer/userinfo",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
pathname.startsWith("/api/v1/dev/clients/") &&
|
||||
pathname.endsWith("/status") &&
|
||||
method === "PATCH"
|
||||
) {
|
||||
const clientId = pathname.split("/")[5] ?? "";
|
||||
const payload = request.postDataJSON() as { status: ClientStatus };
|
||||
const found = state.clients.find((client) => client.id === clientId);
|
||||
if (!found) return json(route, { error: "not found" }, 404);
|
||||
found.status = payload.status;
|
||||
appendAuditLog("CLIENT_UPDATE_STATUS", "UPDATE_CLIENT_STATUS", clientId);
|
||||
state.onUpdateStatus?.(payload.status);
|
||||
return json(route, {
|
||||
client: found,
|
||||
endpoints: {
|
||||
discovery: "https://issuer/.well-known/openid-configuration",
|
||||
issuer: "https://issuer",
|
||||
authorization: "https://issuer/oauth2/auth",
|
||||
token: "https://issuer/oauth2/token",
|
||||
userinfo: "https://issuer/userinfo",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
pathname.startsWith("/api/v1/dev/clients/") &&
|
||||
pathname.endsWith("/secret/rotate") &&
|
||||
method === "POST"
|
||||
) {
|
||||
const clientId = pathname.split("/")[5] ?? "";
|
||||
const found = state.clients.find((client) => client.id === clientId);
|
||||
if (!found) return json(route, { error: "not found" }, 404);
|
||||
found.clientSecret = `${clientId}-rotated-secret`;
|
||||
appendAuditLog("CLIENT_ROTATE_SECRET", "ROTATE_SECRET", clientId);
|
||||
state.onRotateSecret?.(found.clientSecret);
|
||||
return json(route, {
|
||||
client: found,
|
||||
endpoints: {
|
||||
discovery: "https://issuer/.well-known/openid-configuration",
|
||||
issuer: "https://issuer",
|
||||
authorization: "https://issuer/oauth2/auth",
|
||||
token: "https://issuer/oauth2/token",
|
||||
userinfo: "https://issuer/userinfo",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/api/v1/dev/clients/") && method === "PUT") {
|
||||
const clientId = parseClientId(pathname);
|
||||
const payload = (request.postDataJSON() as {
|
||||
name?: string;
|
||||
type?: ClientType;
|
||||
scopes?: string[];
|
||||
redirectUris?: string[];
|
||||
tokenEndpointAuthMethod?: string;
|
||||
jwksUri?: string;
|
||||
jwks?: Record<string, unknown> | string;
|
||||
metadata?: Record<string, unknown>;
|
||||
}) || { name: "updated app" };
|
||||
const found = state.clients.find((client) => client.id === clientId);
|
||||
if (!found) return json(route, { error: "not found" }, 404);
|
||||
if (payload.name) found.name = payload.name;
|
||||
if (payload.type) found.type = payload.type;
|
||||
if (payload.scopes) found.scopes = payload.scopes;
|
||||
if (payload.redirectUris) found.redirectUris = payload.redirectUris;
|
||||
if (payload.tokenEndpointAuthMethod !== undefined) {
|
||||
found.tokenEndpointAuthMethod = payload.tokenEndpointAuthMethod;
|
||||
}
|
||||
if (payload.jwksUri !== undefined) {
|
||||
found.jwksUri = payload.jwksUri;
|
||||
}
|
||||
if (payload.jwks !== undefined) {
|
||||
found.jwks = payload.jwks;
|
||||
}
|
||||
if (payload.metadata) found.metadata = payload.metadata;
|
||||
appendAuditLog("CLIENT_UPDATE", "UPDATE_CLIENT", clientId);
|
||||
return json(route, {
|
||||
client: found,
|
||||
endpoints: {
|
||||
discovery: "https://issuer/.well-known/openid-configuration",
|
||||
issuer: "https://issuer",
|
||||
authorization: "https://issuer/oauth2/auth",
|
||||
token: "https://issuer/oauth2/token",
|
||||
userinfo: "https://issuer/userinfo",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/api/v1/dev/clients/") && method === "GET") {
|
||||
const clientId = parseClientId(pathname);
|
||||
const found = state.clients.find((client) => client.id === clientId);
|
||||
if (!found) return json(route, { error: "forbidden" }, 403);
|
||||
return json(route, {
|
||||
client: found,
|
||||
endpoints: {
|
||||
discovery: "https://issuer/.well-known/openid-configuration",
|
||||
issuer: "https://issuer",
|
||||
authorization: "https://issuer/oauth2/auth",
|
||||
token: "https://issuer/oauth2/token",
|
||||
userinfo: "https://issuer/userinfo",
|
||||
},
|
||||
headlessJwksCache: found.headlessJwksCache,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
pathname.startsWith("/api/v1/dev/clients/") &&
|
||||
pathname.endsWith("/headless-jwks/cache") &&
|
||||
method === "DELETE"
|
||||
) {
|
||||
const clientId = pathname.split("/")[5] ?? "";
|
||||
const found = state.clients.find((client) => client.id === clientId);
|
||||
if (!found) return json(route, { error: "not found" }, 404);
|
||||
found.headlessJwksCache = undefined;
|
||||
state.onRevokeHeadlessJwksCache?.(clientId);
|
||||
return route.fulfill({ status: 204 });
|
||||
}
|
||||
|
||||
if (
|
||||
pathname.startsWith("/api/v1/dev/clients/") &&
|
||||
pathname.endsWith("/headless-jwks/refresh") &&
|
||||
method === "POST"
|
||||
) {
|
||||
const clientId = pathname.split("/")[5] ?? "";
|
||||
const found = state.clients.find((client) => client.id === clientId);
|
||||
if (!found) return json(route, { error: "not found" }, 404);
|
||||
state.onRefreshHeadlessJwks?.(clientId);
|
||||
return json(route, {
|
||||
client: found,
|
||||
endpoints: {
|
||||
discovery: "https://issuer/.well-known/openid-configuration",
|
||||
issuer: "https://issuer",
|
||||
authorization: "https://issuer/oauth2/auth",
|
||||
token: "https://issuer/oauth2/token",
|
||||
userinfo: "https://issuer/userinfo",
|
||||
},
|
||||
headlessJwksCache: found.headlessJwksCache,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
pathname.startsWith("/api/v1/dev/clients/") &&
|
||||
!pathname.endsWith("/headless-jwks/cache") &&
|
||||
method === "DELETE"
|
||||
) {
|
||||
const clientId = parseClientId(pathname);
|
||||
state.clients = state.clients.filter((client) => client.id !== clientId);
|
||||
appendAuditLog("CLIENT_DELETE", "DELETE_CLIENT", clientId);
|
||||
return route.fulfill({ status: 204 });
|
||||
}
|
||||
|
||||
if (pathname === "/api/v1/dev/consents" && method === "GET") {
|
||||
const subject = searchParams.get("subject") || "";
|
||||
const clientId = searchParams.get("client_id") || "";
|
||||
const status = searchParams.get("status") || "";
|
||||
const items = state.consents.filter((row) => {
|
||||
const matchesSubject =
|
||||
!subject ||
|
||||
row.subject.includes(subject) ||
|
||||
row.userName.includes(subject);
|
||||
const matchesClientId = !clientId || row.clientId === clientId;
|
||||
const matchesStatus = !status || row.status === status;
|
||||
return matchesSubject && matchesClientId && matchesStatus;
|
||||
});
|
||||
return json(route, { items });
|
||||
}
|
||||
|
||||
if (pathname === "/api/v1/dev/consents" && method === "DELETE") {
|
||||
const subject = searchParams.get("subject") || "";
|
||||
const clientId = searchParams.get("client_id") || "";
|
||||
const target = state.consents.find(
|
||||
(row) => row.subject === subject && row.clientId === clientId,
|
||||
);
|
||||
if (target) {
|
||||
target.status = "revoked";
|
||||
target.deletedAt = "2026-03-03T10:00:00.000Z";
|
||||
}
|
||||
return route.fulfill({ status: 204 });
|
||||
}
|
||||
|
||||
if (pathname === "/api/v1/dev/audit-logs" && method === "GET") {
|
||||
if (state.auditLogsByCursor) {
|
||||
const cursor = searchParams.get("cursor") || "";
|
||||
const pageSet = state.auditLogsByCursor[cursor] ?? { items: [] };
|
||||
return json(route, {
|
||||
items: pageSet.items,
|
||||
limit: 50,
|
||||
cursor: cursor || undefined,
|
||||
next_cursor: pageSet.next_cursor,
|
||||
});
|
||||
}
|
||||
|
||||
if (state.auditLogs) {
|
||||
const action = searchParams.get("action") || "";
|
||||
const clientId = searchParams.get("client_id") || "";
|
||||
const status = searchParams.get("status") || "";
|
||||
const filtered = state.auditLogs.filter((item) => {
|
||||
let parsedDetails: { action?: string; target_id?: string } = {};
|
||||
try {
|
||||
parsedDetails = JSON.parse(item.details) as {
|
||||
action?: string;
|
||||
target_id?: string;
|
||||
};
|
||||
} catch {}
|
||||
const matchesAction = !action || parsedDetails.action === action;
|
||||
const matchesClient =
|
||||
!clientId || parsedDetails.target_id === clientId;
|
||||
const matchesStatus = !status || item.status === status;
|
||||
return matchesAction && matchesClient && matchesStatus;
|
||||
});
|
||||
return json(route, { items: filtered, limit: 50 });
|
||||
}
|
||||
|
||||
return json(route, { items: [], limit: 50 });
|
||||
}
|
||||
|
||||
return json(route, { error: `Unhandled ${method} ${pathname}` }, 404);
|
||||
});
|
||||
}
|
||||
24
orgfront/tests/helpers/evidence.ts
Normal file
24
orgfront/tests/helpers/evidence.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import type { Page, TestInfo } from "@playwright/test";
|
||||
|
||||
function safeName(name: string): string {
|
||||
return name
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-_]+/g, "-")
|
||||
.replace(/-+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
}
|
||||
|
||||
export async function captureEvidence(
|
||||
page: Page,
|
||||
testInfo: TestInfo,
|
||||
name: string,
|
||||
) {
|
||||
const filename = `${safeName(name)}.png`;
|
||||
const fullPath = testInfo.outputPath(filename);
|
||||
await page.screenshot({ path: fullPath, fullPage: true });
|
||||
await testInfo.attach(name, {
|
||||
path: fullPath,
|
||||
contentType: "image/png",
|
||||
});
|
||||
}
|
||||
38
orgfront/tests/light-theme.spec.ts
Normal file
38
orgfront/tests/light-theme.spec.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
function parseRgb(value: string) {
|
||||
const match = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
||||
expect(match).not.toBeNull();
|
||||
|
||||
return {
|
||||
red: Number(match?.[1] ?? 0),
|
||||
green: Number(match?.[2] ?? 0),
|
||||
blue: Number(match?.[3] ?? 0),
|
||||
};
|
||||
}
|
||||
|
||||
function relativeLuminance({ red, green, blue }: ReturnType<typeof parseRgb>) {
|
||||
const [r, g, b] = [red, green, blue].map((channel) => {
|
||||
const value = channel / 255;
|
||||
return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
|
||||
});
|
||||
|
||||
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
}
|
||||
|
||||
test("uses the light theme as the default UI foundation", async ({ page }) => {
|
||||
await page.goto("/login");
|
||||
|
||||
const colors = await page.evaluate(() => {
|
||||
const styles = window.getComputedStyle(document.body);
|
||||
return {
|
||||
backgroundColor: styles.backgroundColor,
|
||||
color: styles.color,
|
||||
};
|
||||
});
|
||||
|
||||
expect(relativeLuminance(parseRgb(colors.backgroundColor))).toBeGreaterThan(
|
||||
0.9,
|
||||
);
|
||||
expect(relativeLuminance(parseRgb(colors.color))).toBeLessThan(0.1);
|
||||
});
|
||||
127
orgfront/tests/orgchart-pan-zoom.spec.ts
Normal file
127
orgfront/tests/orgchart-pan-zoom.spec.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
type TenantFixture = {
|
||||
id: string;
|
||||
type: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
status: string;
|
||||
parentId?: string;
|
||||
memberCount: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
function tenant(
|
||||
id: string,
|
||||
name: string,
|
||||
slug: string,
|
||||
parentId?: string,
|
||||
): TenantFixture {
|
||||
return {
|
||||
id,
|
||||
type: parentId ? "USER_GROUP" : "COMPANY",
|
||||
name,
|
||||
slug,
|
||||
description: "",
|
||||
status: "active",
|
||||
parentId,
|
||||
memberCount: 1,
|
||||
createdAt: "2026-04-01T00:00:00.000Z",
|
||||
updatedAt: "2026-04-01T00:00:00.000Z",
|
||||
};
|
||||
}
|
||||
|
||||
function user(id: string, name: string, companyCode: string) {
|
||||
return {
|
||||
id,
|
||||
email: `${id}@example.com`,
|
||||
name,
|
||||
role: "user",
|
||||
status: "active",
|
||||
companyCode,
|
||||
position: "사원",
|
||||
createdAt: "2026-04-01T00:00:00.000Z",
|
||||
updatedAt: "2026-04-01T00:00:00.000Z",
|
||||
};
|
||||
}
|
||||
|
||||
test("org chart viewport pans with drag and zooms with the mouse wheel", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants: [
|
||||
tenant("root", "Baron Group", "baron"),
|
||||
tenant("engineering", "Engineering", "engineering", "root"),
|
||||
tenant("platform", "Platform", "platform", "engineering"),
|
||||
tenant("security", "Security", "security", "engineering"),
|
||||
tenant("product", "Product", "product", "root"),
|
||||
tenant("design", "Design", "design", "product"),
|
||||
tenant("operations", "Operations", "operations", "root"),
|
||||
],
|
||||
users: [
|
||||
user("u-root", "Root User", "baron"),
|
||||
user("u-eng", "Engineering User", "engineering"),
|
||||
user("u-platform", "Platform User", "platform"),
|
||||
user("u-security", "Security User", "security"),
|
||||
user("u-product", "Product User", "product"),
|
||||
user("u-design", "Design User", "design"),
|
||||
user("u-ops", "Operations User", "operations"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=pan-zoom");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const viewport = page.locator('[data-testid="orgchart-viewport"]');
|
||||
const canvas = page.locator('[data-testid="orgchart-canvas"]');
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(viewport).toBeVisible();
|
||||
await expect(canvas).toBeVisible();
|
||||
await expect(svg).toBeVisible();
|
||||
|
||||
await expect
|
||||
.poll(async () =>
|
||||
viewport.evaluate((element) => {
|
||||
const style = window.getComputedStyle(element);
|
||||
return `${style.overflowX}/${style.overflowY}`;
|
||||
}),
|
||||
)
|
||||
.toBe("hidden/hidden");
|
||||
|
||||
const initialViewBox = await svg.getAttribute("viewBox");
|
||||
const box = await viewport.boundingBox();
|
||||
expect(box).not.toBeNull();
|
||||
|
||||
if (!box) return;
|
||||
|
||||
await page.mouse.move(box.x + 24, box.y + box.height - 24);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(box.x + 164, box.y + box.height - 104);
|
||||
await page.mouse.up();
|
||||
|
||||
await expect
|
||||
.poll(async () => svg.getAttribute("viewBox"))
|
||||
.not.toBe(initialViewBox);
|
||||
|
||||
const afterDragViewBox = await svg.getAttribute("viewBox");
|
||||
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.wheel(0, -500);
|
||||
|
||||
await expect
|
||||
.poll(async () => svg.getAttribute("viewBox"))
|
||||
.not.toBe(afterDragViewBox);
|
||||
|
||||
const scale = await svg.evaluate((element) =>
|
||||
Number.parseFloat(element.getAttribute("data-scale") ?? "1"),
|
||||
);
|
||||
expect(scale).toBeGreaterThan(1);
|
||||
});
|
||||
599
orgfront/tests/orgchart-picker.spec.ts
Normal file
599
orgfront/tests/orgchart-picker.spec.ts
Normal file
@@ -0,0 +1,599 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
type TenantFixture = {
|
||||
id: string;
|
||||
type: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
status: string;
|
||||
parentId?: string;
|
||||
memberCount: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
function tenant(
|
||||
id: string,
|
||||
type: string,
|
||||
name: string,
|
||||
slug: string,
|
||||
parentId?: string,
|
||||
): TenantFixture {
|
||||
return {
|
||||
id,
|
||||
type,
|
||||
name,
|
||||
slug,
|
||||
description: "",
|
||||
status: "active",
|
||||
parentId,
|
||||
memberCount: 1,
|
||||
createdAt: "2026-04-01T00:00:00.000Z",
|
||||
updatedAt: "2026-04-01T00:00:00.000Z",
|
||||
};
|
||||
}
|
||||
|
||||
function user(
|
||||
id: string,
|
||||
name: string,
|
||||
tenantSlug: string,
|
||||
overrides: Record<string, unknown> = {},
|
||||
) {
|
||||
return {
|
||||
id,
|
||||
email: `${id}@example.com`,
|
||||
name,
|
||||
role: "user",
|
||||
status: "active",
|
||||
tenantSlug,
|
||||
companyCode: tenantSlug,
|
||||
position: "사원",
|
||||
createdAt: "2026-04-01T00:00:00.000Z",
|
||||
updatedAt: "2026-04-01T00:00:00.000Z",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
async function seedOrgfrontAuth(page: Parameters<typeof test>[0]["page"]) {
|
||||
const nowInSeconds = Math.floor(Date.now() / 1000);
|
||||
|
||||
await page.addInitScript(
|
||||
({ issuedAt }) => {
|
||||
const mockOidcUser = {
|
||||
id_token: "playwright-id-token",
|
||||
session_state: "playwright-session",
|
||||
access_token: "playwright-access-token",
|
||||
refresh_token: "playwright-refresh-token",
|
||||
token_type: "Bearer",
|
||||
scope: "openid profile email",
|
||||
profile: {
|
||||
sub: "playwright-user",
|
||||
email: "playwright@example.com",
|
||||
name: "Playwright User",
|
||||
role: "tenant_admin",
|
||||
},
|
||||
expires_at: issuedAt + 3600,
|
||||
};
|
||||
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc/:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc:devfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc/:devfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://172.16.9.189:5000/oidc:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://172.16.9.189:5000/oidc/:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem("dev_tenant_id", "group-hmac");
|
||||
},
|
||||
{ issuedAt: nowInSeconds },
|
||||
);
|
||||
|
||||
await page.route("**/oidc/**", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ keys: [] }),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function installOrgPickerApiMock(
|
||||
page: Parameters<typeof test>[0]["page"],
|
||||
) {
|
||||
const tenants = [
|
||||
tenant("group-hmac", "COMPANY_GROUP", "HMAC Group", "hmac"),
|
||||
tenant("company-baron", "COMPANY", "Baron", "baron", "group-hmac"),
|
||||
tenant("company-hanmac", "COMPANY", "Hanmac", "hanmac", "group-hmac"),
|
||||
tenant("dept-center", "USER_GROUP", "센터", "center", "company-baron"),
|
||||
tenant(
|
||||
"team-tech-plan",
|
||||
"USER_GROUP",
|
||||
"기술기획",
|
||||
"tech-plan",
|
||||
"dept-center",
|
||||
),
|
||||
tenant("team-bcmf", "USER_GROUP", "bCMf", "bcmf", "dept-center"),
|
||||
tenant("team-pm", "USER_GROUP", "PM", "pm", "dept-center"),
|
||||
tenant(
|
||||
"dept-eng",
|
||||
"USER_GROUP",
|
||||
"Engineering",
|
||||
"engineering",
|
||||
"company-baron",
|
||||
),
|
||||
tenant("team-platform", "USER_GROUP", "Platform", "platform", "dept-eng"),
|
||||
tenant("dept-sales", "USER_GROUP", "Sales", "sales", "company-hanmac"),
|
||||
];
|
||||
const users = [
|
||||
user("user-root", "Group User", "hmac"),
|
||||
user("user-baron", "Baron User", "baron"),
|
||||
user("user-eng", "Engineering User", "engineering"),
|
||||
user("user-platform", "Platform User", "platform", {
|
||||
metadata: { employeeNumber: "EMP-9001", skill: "Kubernetes" },
|
||||
jobTitle: "Platform Engineer",
|
||||
position: "책임",
|
||||
}),
|
||||
user("user-sales", "Sales User", "sales"),
|
||||
];
|
||||
|
||||
await page.route("**/api/v1/admin/tenants**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
items: tenants,
|
||||
total: tenants.length,
|
||||
limit: 10000,
|
||||
offset: 0,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/admin/users**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
items: users,
|
||||
total: users.length,
|
||||
limit: 5000,
|
||||
offset: 0,
|
||||
}),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await seedOrgfrontAuth(page);
|
||||
await installOrgPickerApiMock(page);
|
||||
});
|
||||
|
||||
test("developer navigation exposes chart, picker, and embed preview", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
|
||||
await expect(page.getByRole("link", { name: "조직도" })).toBeVisible();
|
||||
await expect(page.getByRole("link", { name: "조직 선택기" })).toBeVisible();
|
||||
await expect(page.getByRole("link", { name: "임베딩 검증" })).toBeVisible();
|
||||
|
||||
await page.getByRole("link", { name: "임베딩 검증" }).click();
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "임베딩 검증" }),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page
|
||||
.frameLocator("iframe")
|
||||
.getByTestId("org-picker-search-section")
|
||||
.getByText("하위 선택"),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("picker menu lets developers switch selection mode and selectable type", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/picker");
|
||||
|
||||
await expect(page.getByLabel("선택 모드")).toHaveValue("multiple");
|
||||
await expect(page.getByLabel("선택 대상")).toHaveValue("both");
|
||||
|
||||
await page.getByLabel("선택 모드").selectOption("single");
|
||||
await expect(page.frameLocator("iframe").getByText("하위 선택")).toHaveCount(
|
||||
0,
|
||||
);
|
||||
|
||||
await page.getByLabel("선택 대상").selectOption("tenant");
|
||||
const picker = page.frameLocator("iframe");
|
||||
await expect(
|
||||
picker.getByRole("button", { name: "Engineering User" }),
|
||||
).toHaveCount(0);
|
||||
await expect(
|
||||
picker.getByRole("button", { name: "Engineering", exact: true }),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("picker displays user names with job title and position", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed/picker?mode=single&select=user");
|
||||
|
||||
await expect(
|
||||
page.getByRole("button", {
|
||||
name: "Platform User(Platform Engineer) 책임",
|
||||
}),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("embed preview menu updates the iframe picker source", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview");
|
||||
|
||||
await expect(page.getByLabel("선택 모드")).toHaveValue("multiple");
|
||||
await expect(page.getByLabel("선택 대상")).toHaveValue("both");
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"mode=multiple",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"select=both",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"includeDescendants=true",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"showDescendantToggle=true",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"width=400",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"height=600",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-frame-shell")).toHaveCSS(
|
||||
"width",
|
||||
"400px",
|
||||
);
|
||||
|
||||
await page.getByLabel("선택 모드").selectOption("single");
|
||||
await page.getByLabel("선택 대상").selectOption("user");
|
||||
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"mode=single",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"select=user",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).not.toContainText(
|
||||
"includeDescendants",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).not.toContainText(
|
||||
"showDescendantToggle",
|
||||
);
|
||||
await expect(page.frameLocator("iframe").getByText("하위 선택")).toHaveCount(
|
||||
0,
|
||||
);
|
||||
await expect(
|
||||
page.frameLocator("iframe").getByRole("button", {
|
||||
name: "Engineering User 사원 user-eng@example.com",
|
||||
}),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("embed preview passes tenant id and custom dimensions through the picker url", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview");
|
||||
|
||||
await page.getByLabel("tenant ID").fill("company-baron");
|
||||
await page.getByLabel("임베딩 너비").fill("520");
|
||||
await page.getByLabel("임베딩 높이").fill("480");
|
||||
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"tenantId=company-baron",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"width=520",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"height=480",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-frame-shell")).toHaveCSS(
|
||||
"width",
|
||||
"520px",
|
||||
);
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await expect(picker.getByText("Engineering User")).toBeVisible();
|
||||
await expect(picker.getByText("Sales User")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("embed picker scopes the tree by tenant id, hides users for tenant selection, and keeps direct members before child tenants", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?tenantId=company-baron&select=tenant");
|
||||
|
||||
await expect(page.getByLabel("tenant ID")).toHaveValue("company-baron");
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"tenantId=company-baron",
|
||||
);
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await expect(picker.getByText("Baron", { exact: true })).toBeVisible();
|
||||
await expect(picker.getByText("Hanmac", { exact: true })).toHaveCount(0);
|
||||
await expect(picker.getByText("Sales User")).toHaveCount(0);
|
||||
await expect(picker.getByText("Baron User")).toHaveCount(0);
|
||||
|
||||
await page.getByLabel("선택 대상").selectOption("both");
|
||||
await expect(picker.getByText("Baron User")).toBeVisible();
|
||||
const memberBox = await picker.getByText("Baron User").boundingBox();
|
||||
const childTenantBox = await picker
|
||||
.getByText("센터", { exact: true })
|
||||
.boundingBox();
|
||||
expect(memberBox).not.toBeNull();
|
||||
expect(childTenantBox).not.toBeNull();
|
||||
expect(memberBox?.y ?? 0).toBeLessThan(childTenantBox?.y ?? 0);
|
||||
});
|
||||
|
||||
test("embed picker keeps the lightweight search controls inside the picker section at the default embed width", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
const searchSection = picker.getByTestId("org-picker-search-section");
|
||||
await expect(searchSection).toBeVisible();
|
||||
await expect(searchSection.getByLabel("company 필터")).toHaveCount(0);
|
||||
await expect(searchSection.getByText("선택 결과")).toHaveCount(0);
|
||||
|
||||
const searchBox = await searchSection
|
||||
.getByLabel("조직/구성원 검색")
|
||||
.boundingBox();
|
||||
const descendantToggle = await searchSection
|
||||
.getByTestId("org-picker-descendant-toggle")
|
||||
.boundingBox();
|
||||
const sectionBox = await searchSection.boundingBox();
|
||||
expect(searchBox).not.toBeNull();
|
||||
expect(descendantToggle).not.toBeNull();
|
||||
expect(sectionBox).not.toBeNull();
|
||||
expect(
|
||||
Math.abs((searchBox?.y ?? 0) - (descendantToggle?.y ?? 0)),
|
||||
).toBeLessThanOrEqual(8);
|
||||
expect(sectionBox?.height ?? 0).toBeLessThanOrEqual(72);
|
||||
});
|
||||
|
||||
test("embed picker keeps only the lightweight picker surface scrollable", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await expect(
|
||||
picker.getByRole("heading", { name: "조직 선택기" }),
|
||||
).toHaveCount(0);
|
||||
await expect(picker.getByTestId("org-picker-search-section")).toBeVisible();
|
||||
await expect(picker.getByTestId("org-picker-tree-scroll")).toBeVisible();
|
||||
|
||||
await expect
|
||||
.poll(async () =>
|
||||
picker.locator("body").evaluate((element) => {
|
||||
const style = window.getComputedStyle(element);
|
||||
return `${style.overflowX}/${style.overflowY}`;
|
||||
}),
|
||||
)
|
||||
.toBe("hidden/hidden");
|
||||
|
||||
await expect
|
||||
.poll(async () =>
|
||||
picker
|
||||
.getByTestId("org-picker-tree-scroll")
|
||||
.evaluate((element) => window.getComputedStyle(element).overflowY),
|
||||
)
|
||||
.toBe("auto");
|
||||
|
||||
const rootRowHeight = await picker
|
||||
.getByRole("button", { name: "HMAC Group 접기" })
|
||||
.locator("xpath=..")
|
||||
.evaluate((element) => element.getBoundingClientRect().height);
|
||||
expect(rootRowHeight).toBeLessThanOrEqual(30);
|
||||
});
|
||||
|
||||
test("embed preview can hide the descendant selection switch", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=multiple&select=both");
|
||||
|
||||
await expect(page.getByLabel("하위 선택 스위치 표시")).toBeChecked();
|
||||
await page.getByLabel("하위 선택 스위치 표시").uncheck();
|
||||
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"includeDescendants=true",
|
||||
);
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"showDescendantToggle=false",
|
||||
);
|
||||
await expect(page.frameLocator("iframe").getByText("하위 선택")).toHaveCount(
|
||||
0,
|
||||
);
|
||||
});
|
||||
|
||||
test("embed picker renders compact tree rows with member emails", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=single&select=user");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await expect(picker.getByText("user-eng@example.com")).toBeVisible();
|
||||
await expect(
|
||||
picker.getByRole("button", { name: "Engineering User 구성원" }),
|
||||
).toHaveCount(0);
|
||||
await expect(
|
||||
picker.getByRole("button", {
|
||||
name: "Engineering User 사원 user-eng@example.com",
|
||||
}),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("embed picker filters organizations and users by id, name, and metadata", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=multiple&select=both");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
const search = picker.getByLabel("조직/구성원 검색");
|
||||
await expect(picker.getByTestId("org-picker-search-section")).toBeVisible();
|
||||
await expect(search).toBeVisible();
|
||||
|
||||
await search.fill("user-platform");
|
||||
await expect(picker.getByText("Platform User")).toBeVisible();
|
||||
await expect(picker.getByText("Sales User")).toHaveCount(0);
|
||||
|
||||
await search.fill("EMP-9001");
|
||||
await expect(picker.getByText("Platform User")).toBeVisible();
|
||||
await expect(picker.getByText("Engineering User")).toHaveCount(0);
|
||||
|
||||
await search.fill("Sales");
|
||||
await expect(picker.getByText("Sales", { exact: true })).toBeVisible();
|
||||
await expect(picker.getByText("Sales User")).toBeVisible();
|
||||
await expect(picker.getByText("Platform User")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("embed picker search does not keep unmatched descendants under a matching organization", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=multiple&select=both");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await picker.getByLabel("조직/구성원 검색").fill("센");
|
||||
|
||||
await expect(picker.getByText("센터", { exact: true })).toBeVisible();
|
||||
await expect(picker.getByText("기술기획", { exact: true })).toHaveCount(0);
|
||||
await expect(picker.getByText("bCMf", { exact: true })).toHaveCount(0);
|
||||
await expect(picker.getByText("PM", { exact: true })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("embed picker posts a single user selection with type, id, and name", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=single&select=user");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await picker
|
||||
.getByRole("button", { name: "Engineering User 사원 user-eng@example.com" })
|
||||
.click();
|
||||
await picker.getByRole("button", { name: "선택 완료" }).click();
|
||||
|
||||
const output = page.getByTestId("embed-preview-output");
|
||||
await expect(output).toContainText('"type": "user"');
|
||||
await expect(output).toContainText('"id": "user-eng"');
|
||||
await expect(output).toContainText('"name": "Engineering User 사원"');
|
||||
await expect(output).not.toContainText("tenantId");
|
||||
});
|
||||
|
||||
test("embed picker single selection counts only the selected node without descendants", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=single&select=both");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await picker
|
||||
.getByRole("button", { name: "Engineering", exact: true })
|
||||
.click();
|
||||
await expect(picker.getByText("1개 항목 선택됨")).toBeVisible();
|
||||
await expect(picker.getByText("3개 항목 선택됨")).toHaveCount(0);
|
||||
await expect(picker.getByText("4개 항목 선택됨")).toHaveCount(0);
|
||||
|
||||
await picker.getByRole("button", { name: "선택 완료" }).click();
|
||||
const output = page.getByTestId("embed-preview-output");
|
||||
await expect(output).toContainText('"id": "dept-eng"');
|
||||
await expect(output).not.toContainText('"id": "user-eng"');
|
||||
await expect(output).not.toContainText('"id": "team-platform"');
|
||||
await expect(output).not.toContainText('"id": "user-platform"');
|
||||
});
|
||||
|
||||
test("embed picker highlights a single selected item without tree connectors", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=single&select=both");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await expect(
|
||||
picker.getByRole("button", { name: "Engineering", exact: true }),
|
||||
).toBeVisible();
|
||||
await expect(picker.getByTestId("org-picker-tree-connector")).toHaveCount(0);
|
||||
|
||||
const selected = picker.getByRole("button", {
|
||||
name: "Engineering",
|
||||
exact: true,
|
||||
});
|
||||
await selected.click();
|
||||
await expect(selected).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(selected).toHaveAttribute("data-selected", "true");
|
||||
});
|
||||
|
||||
test("embed picker renders tenant names with the dedicated tenant text color", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=single&select=both");
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
const tenantName = picker.getByTestId("org-picker-node-name-tenant").first();
|
||||
await expect(tenantName).toBeVisible();
|
||||
await expect
|
||||
.poll(() =>
|
||||
tenantName.evaluate((element) => window.getComputedStyle(element).color),
|
||||
)
|
||||
.toBe("rgb(10, 33, 20)");
|
||||
});
|
||||
|
||||
test("embed picker includes descendants by default and can disable descendant inclusion", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/embed-preview?mode=multiple&select=both");
|
||||
|
||||
let picker = page.frameLocator("iframe");
|
||||
await expect(
|
||||
picker.getByTestId("org-picker-search-section").getByText("하위 선택"),
|
||||
).toBeVisible();
|
||||
await picker.getByLabel("Engineering 선택").check();
|
||||
await expect(picker.getByLabel("Platform 선택")).toBeChecked();
|
||||
await expect(
|
||||
picker.getByLabel("Platform User(Platform Engineer) 책임 선택"),
|
||||
).toBeChecked();
|
||||
await picker.getByRole("button", { name: "선택 완료" }).click();
|
||||
|
||||
let output = page.getByTestId("embed-preview-output");
|
||||
await expect(output).toContainText('"id": "dept-eng"');
|
||||
await expect(output).toContainText('"id": "team-platform"');
|
||||
await expect(output).toContainText('"id": "user-platform"');
|
||||
|
||||
await page.goto(
|
||||
"/embed-preview?mode=multiple&select=both&includeDescendants=false",
|
||||
);
|
||||
picker = page.frameLocator("iframe");
|
||||
await picker.getByLabel("Engineering 선택").check();
|
||||
await expect(picker.getByLabel("Platform 선택")).not.toBeChecked();
|
||||
await expect(
|
||||
picker.getByLabel("Platform User(Platform Engineer) 책임 선택"),
|
||||
).not.toBeChecked();
|
||||
await picker.getByRole("button", { name: "선택 완료" }).click();
|
||||
|
||||
output = page.getByTestId("embed-preview-output");
|
||||
await expect(output).toContainText('"id": "dept-eng"');
|
||||
await expect(output).not.toContainText('"id": "team-platform"');
|
||||
await expect(output).not.toContainText('"id": "user-platform"');
|
||||
});
|
||||
379
orgfront/tests/orgchart-vector-render.spec.ts
Normal file
379
orgfront/tests/orgchart-vector-render.spec.ts
Normal file
@@ -0,0 +1,379 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
function tenant(
|
||||
id: string,
|
||||
name: string,
|
||||
slug: string,
|
||||
parentId?: string,
|
||||
type?: string,
|
||||
) {
|
||||
return {
|
||||
id,
|
||||
type: type ?? (parentId ? "USER_GROUP" : "COMPANY_GROUP"),
|
||||
name,
|
||||
slug,
|
||||
description: "",
|
||||
status: "active",
|
||||
parentId,
|
||||
memberCount: 1,
|
||||
createdAt: "2026-04-01T00:00:00.000Z",
|
||||
updatedAt: "2026-04-01T00:00:00.000Z",
|
||||
};
|
||||
}
|
||||
|
||||
function user(id: string, name: string, companyCode: string) {
|
||||
return {
|
||||
id,
|
||||
email: `${id}@example.com`,
|
||||
name,
|
||||
role: "user",
|
||||
status: "active",
|
||||
companyCode,
|
||||
position: "사원",
|
||||
createdAt: "2026-04-01T00:00:00.000Z",
|
||||
updatedAt: "2026-04-01T00:00:00.000Z",
|
||||
};
|
||||
}
|
||||
|
||||
function multiTenantUser(
|
||||
id: string,
|
||||
name: string,
|
||||
companyCode: string,
|
||||
joinedTenants: Array<ReturnType<typeof tenant>>,
|
||||
) {
|
||||
return {
|
||||
...user(id, name, companyCode),
|
||||
joinedTenants,
|
||||
};
|
||||
}
|
||||
|
||||
function hanmacUser(id: string, name: string, companyCode: string) {
|
||||
return {
|
||||
...user(id, name, companyCode),
|
||||
email: `${id}@hanmac.kr`,
|
||||
};
|
||||
}
|
||||
|
||||
test("org chart uses svg viewBox zoom for sharp vector rendering", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants: [
|
||||
tenant("group", "HMAC Group", "hmac"),
|
||||
tenant("baron", "Baron", "baron", "group"),
|
||||
tenant("engineering", "Engineering", "engineering", "baron"),
|
||||
tenant("platform", "Platform", "platform", "engineering"),
|
||||
],
|
||||
users: [
|
||||
user("u-group", "Group User", "hmac"),
|
||||
user("u-baron", "Baron User", "baron"),
|
||||
user("u-eng", "Engineering User", "engineering"),
|
||||
user("u-platform", "Platform User", "platform"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=vector");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const viewport = page.locator('[data-testid="orgchart-viewport"]');
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg).toBeVisible();
|
||||
await expect(
|
||||
svg.locator("text", { hasText: "Engineering User" }),
|
||||
).toBeVisible();
|
||||
|
||||
const initialViewBox = await svg.getAttribute("viewBox");
|
||||
const transform = await page
|
||||
.locator('[data-testid="orgchart-canvas"]')
|
||||
.evaluate((element) => window.getComputedStyle(element).transform)
|
||||
.catch(() => "none");
|
||||
expect(transform).toBe("none");
|
||||
|
||||
const box = await viewport.boundingBox();
|
||||
expect(box).not.toBeNull();
|
||||
if (!box) return;
|
||||
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.wheel(0, -500);
|
||||
|
||||
await expect
|
||||
.poll(async () => svg.getAttribute("viewBox"))
|
||||
.not.toBe(initialViewBox);
|
||||
});
|
||||
|
||||
test("org chart filters by Hanmac family and company while excluding hanmac.kr accounts", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants: [
|
||||
tenant("group", "HMAC Group", "hmac"),
|
||||
tenant("baron", "Baron", "baron", "group", "COMPANY"),
|
||||
tenant("hanmac", "Hanmac", "hanmac", "group", "COMPANY"),
|
||||
tenant("engineering", "Engineering", "engineering", "baron"),
|
||||
tenant("sales", "Sales", "sales", "hanmac"),
|
||||
],
|
||||
users: [
|
||||
user("u-group", "Group User", "hmac"),
|
||||
user("u-baron", "Baron User", "baron"),
|
||||
user("u-eng", "Engineering User", "engineering"),
|
||||
user("u-sales", "Sales User", "sales"),
|
||||
hanmacUser("hidden", "Hidden Hanmac User", "engineering"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=family");
|
||||
|
||||
await expect(page.getByRole("button", { name: "한맥가족" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Baron" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Hanmac" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "전체" })).toHaveCount(0);
|
||||
await expect(page.getByText("총 4명")).toBeVisible();
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(
|
||||
svg.locator("text", { hasText: "Hidden Hanmac User" }),
|
||||
).toHaveCount(0);
|
||||
await expect(
|
||||
svg.locator("text", { hasText: "Engineering User" }),
|
||||
).toBeVisible();
|
||||
await expect(svg.locator("text", { hasText: "Sales User" })).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "Baron" }).click();
|
||||
await expect(page.getByText("총 2명")).toBeVisible();
|
||||
await expect(page.getByText("총 4명")).toHaveCount(0);
|
||||
await expect(
|
||||
svg.locator("text", { hasText: "Engineering User" }),
|
||||
).toBeVisible();
|
||||
await expect(svg.locator("text", { hasText: "Sales User" })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("org chart displays user names with job title and position", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants: [
|
||||
tenant("group", "HMAC Group", "hmac"),
|
||||
tenant("baron", "Baron", "baron", "group", "COMPANY"),
|
||||
tenant("engineering", "Engineering", "engineering", "baron"),
|
||||
],
|
||||
users: [
|
||||
{
|
||||
...user("u-eng", "Engineering User", "engineering"),
|
||||
jobTitle: "Platform Engineer",
|
||||
position: "책임",
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=display-name");
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(
|
||||
svg.locator("text", {
|
||||
hasText: "Engineering User(Platform Engineer) 책임",
|
||||
}),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("org chart places multi-tenant users only on leaf memberships without duplicate rendering", async ({
|
||||
page,
|
||||
}) => {
|
||||
const issuedAt = Math.floor(Date.now() / 1000);
|
||||
await page.addInitScript(
|
||||
({ issuedAt: seededIssuedAt }) => {
|
||||
const mockOidcUser = {
|
||||
id_token: "playwright-id-token",
|
||||
session_state: "playwright-session",
|
||||
access_token: "playwright-access-token",
|
||||
refresh_token: "playwright-refresh-token",
|
||||
token_type: "Bearer",
|
||||
scope: "openid profile email",
|
||||
profile: {
|
||||
sub: "playwright-user",
|
||||
email: "playwright@example.com",
|
||||
name: "Playwright User",
|
||||
role: "tenant_admin",
|
||||
},
|
||||
expires_at: seededIssuedAt + 3600,
|
||||
};
|
||||
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc/:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc:devfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://localhost:5000/oidc/:devfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://172.16.9.189:5000/oidc:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
"oidc.user:http://172.16.9.189:5000/oidc/:orgfront",
|
||||
JSON.stringify(mockOidcUser),
|
||||
);
|
||||
window.localStorage.setItem("dev_tenant_id", "group");
|
||||
},
|
||||
{ issuedAt },
|
||||
);
|
||||
|
||||
await page.route("**/oidc/**", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ keys: [] }),
|
||||
});
|
||||
});
|
||||
|
||||
const tenants = [
|
||||
tenant("group", "HMAC Group", "hmac"),
|
||||
tenant("baron", "Baron", "baron", "group", "COMPANY"),
|
||||
tenant("engineering", "Engineering", "engineering", "baron"),
|
||||
tenant("platform", "Platform", "platform", "engineering"),
|
||||
];
|
||||
const [groupTenant, baronTenant, engineeringTenant, platformTenant] = tenants;
|
||||
|
||||
await page.route("**/api/v1/admin/tenants**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
items: tenants,
|
||||
total: tenants.length,
|
||||
limit: 10000,
|
||||
offset: 0,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/admin/users**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
items: [
|
||||
multiTenantUser("u-shared", "Shared User", "baron", [
|
||||
groupTenant,
|
||||
baronTenant,
|
||||
engineeringTenant,
|
||||
platformTenant,
|
||||
]),
|
||||
],
|
||||
total: 1,
|
||||
limit: 5000,
|
||||
offset: 0,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart");
|
||||
|
||||
await expect(page.getByText("총 1명")).toBeVisible();
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg).toBeVisible();
|
||||
await expect(svg.locator("text", { hasText: "Shared User" })).toHaveCount(1);
|
||||
await expect(svg.locator("text").filter({ hasText: /^1$/ })).toHaveCount(4);
|
||||
});
|
||||
|
||||
test("org chart counts multi-leaf tenant users once in ancestor totals", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
const tenants = [
|
||||
tenant("group", "HMAC Group", "hmac"),
|
||||
tenant("baron", "Baron", "baron", "group", "COMPANY"),
|
||||
tenant("engineering", "Engineering", "engineering", "baron"),
|
||||
tenant("platform", "Platform", "platform", "engineering"),
|
||||
tenant("security", "Security", "security", "engineering"),
|
||||
];
|
||||
const [groupTenant, baronTenant, engineeringTenant, platformTenant] =
|
||||
tenants;
|
||||
const securityTenant = tenants[4];
|
||||
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants,
|
||||
users: [
|
||||
multiTenantUser("u-shared", "Shared User", "baron", [
|
||||
groupTenant,
|
||||
baronTenant,
|
||||
engineeringTenant,
|
||||
platformTenant,
|
||||
securityTenant,
|
||||
]),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=multi-leaf-count");
|
||||
|
||||
await expect(page.getByText("총 1명")).toBeVisible();
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg).toBeVisible();
|
||||
await expect(svg.locator("text", { hasText: "Shared User" })).toHaveCount(2);
|
||||
await expect(svg.locator("text").filter({ hasText: /^1$/ })).toHaveCount(5);
|
||||
});
|
||||
|
||||
test("org chart hides system global tenant members", async ({ page }) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants: [
|
||||
tenant("system", "시스템 전역", "system", undefined, "SYSTEM"),
|
||||
tenant("group", "HMAC Group", "hmac"),
|
||||
tenant("baron", "Baron", "baron", "group", "COMPANY"),
|
||||
],
|
||||
users: [
|
||||
user("u-global", "Global Admin", "system"),
|
||||
{
|
||||
...multiTenantUser("u-system-admin", "System Admin", "system", [
|
||||
tenant("baron", "Baron", "baron", "group", "COMPANY"),
|
||||
]),
|
||||
role: "super_admin",
|
||||
},
|
||||
user("u-baron", "Baron User", "baron"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=hide-system-global");
|
||||
|
||||
await expect(page.getByText("총 1명")).toBeVisible();
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg).toBeVisible();
|
||||
await expect(svg.locator("text", { hasText: "시스템 전역" })).toHaveCount(0);
|
||||
await expect(svg.locator("text", { hasText: "Global Admin" })).toHaveCount(0);
|
||||
await expect(svg.locator("text", { hasText: "System Admin" })).toHaveCount(0);
|
||||
await expect(svg.locator("text", { hasText: "Baron User" })).toBeVisible();
|
||||
});
|
||||
Reference in New Issue
Block a user