첫 커밋: 로컬 프로젝트 업로드
This commit is contained in:
39
baron-sso/orgfront/tests/clients.spec.ts
Normal file
39
baron-sso/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
baron-sso/orgfront/tests/devfront-audit.spec.ts
Normal file
120
baron-sso/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
baron-sso/orgfront/tests/devfront-clients-lifecycle.spec.ts
Normal file
374
baron-sso/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
baron-sso/orgfront/tests/devfront-consents.spec.ts
Normal file
45
baron-sso/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
baron-sso/orgfront/tests/devfront-role-switch-report.spec.ts
Normal file
169
baron-sso/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
baron-sso/orgfront/tests/devfront-security.spec.ts
Normal file
122
baron-sso/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
baron-sso/orgfront/tests/devfront-tenant-switch.spec.ts
Normal file
116
baron-sso/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
baron-sso/orgfront/tests/example.spec.ts
Normal file
8
baron-sso/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
baron-sso/orgfront/tests/helpers/devfront-fixtures.ts
Normal file
513
baron-sso/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
baron-sso/orgfront/tests/helpers/evidence.ts
Normal file
24
baron-sso/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
baron-sso/orgfront/tests/light-theme.spec.ts
Normal file
38
baron-sso/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);
|
||||
});
|
||||
765
baron-sso/orgfront/tests/orgchart-pan-zoom.spec.ts
Normal file
765
baron-sso/orgfront/tests/orgchart-pan-zoom.spec.ts
Normal file
@@ -0,0 +1,765 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
type TenantFixture = {
|
||||
id: string;
|
||||
type: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
status: string;
|
||||
parentId?: string;
|
||||
config?: Record<string, unknown>;
|
||||
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,
|
||||
grade: "사원",
|
||||
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);
|
||||
});
|
||||
|
||||
test("org chart dashboard uses the full screen below the orgfront topbar", 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"),
|
||||
],
|
||||
users: [
|
||||
user("u-root", "Root User", "baron"),
|
||||
user("u-eng", "Engineering User", "engineering"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=full-screen");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const metrics = await page.evaluate(() => {
|
||||
const topbar = document
|
||||
.querySelector('[data-testid="orgfront-topbar"]')
|
||||
?.getBoundingClientRect();
|
||||
const main = document
|
||||
.querySelector('[data-testid="orgfront-main"]')
|
||||
?.getBoundingClientRect();
|
||||
const shell = document
|
||||
.querySelector('[data-testid="orgchart-dashboard-shell"]')
|
||||
?.getBoundingClientRect();
|
||||
|
||||
if (!topbar || !main || !shell) {
|
||||
throw new Error("Missing org chart layout elements");
|
||||
}
|
||||
|
||||
return {
|
||||
innerHeight: window.innerHeight,
|
||||
innerWidth: window.innerWidth,
|
||||
mainTop: main.top,
|
||||
shellBottom: shell.bottom,
|
||||
shellLeft: shell.left,
|
||||
shellRight: shell.right,
|
||||
shellTop: shell.top,
|
||||
topbarBottom: topbar.bottom,
|
||||
};
|
||||
});
|
||||
|
||||
expect(Math.abs(metrics.mainTop - metrics.topbarBottom)).toBeLessThanOrEqual(
|
||||
1,
|
||||
);
|
||||
expect(metrics.shellTop).toBe(metrics.topbarBottom);
|
||||
expect(metrics.shellLeft).toBeLessThanOrEqual(1);
|
||||
expect(metrics.shellRight).toBeGreaterThanOrEqual(metrics.innerWidth - 1);
|
||||
expect(metrics.shellBottom).toBeGreaterThanOrEqual(metrics.innerHeight - 1);
|
||||
});
|
||||
|
||||
test("org chart non-shared title does not render the MH Dashboard eyebrow", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.setItem("playwright_auth_bypass", "1");
|
||||
window.localStorage.setItem("dev_tenant_id", "group");
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/admin/orgchart/snapshot**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
tenants: [
|
||||
{
|
||||
...tenant("group", "Baron Group", "baron"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
tenant("engineering", "Engineering", "engineering", "group"),
|
||||
],
|
||||
users: [user("u-eng", "Engineering User", "engineering")],
|
||||
cache: { source: "redis", hit: true },
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart");
|
||||
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
await expect(page.getByText("MH Dashboard", { exact: true })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("org chart toggles internal organizations from the total users tooltip", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.setItem("playwright_auth_bypass", "1");
|
||||
window.localStorage.setItem("dev_tenant_id", "group");
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/admin/orgchart/snapshot**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
tenants: [
|
||||
{
|
||||
...tenant("group", "한맥가족", "hanmac-family"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
tenant("company", "삼안", "saman", "group"),
|
||||
{
|
||||
...tenant("open-team", "공개 팀", "open-team", "company"),
|
||||
config: { visibility: "public" },
|
||||
},
|
||||
{
|
||||
...tenant("internal-team", "내부 팀", "internal-team", "company"),
|
||||
config: { visibility: "internal" },
|
||||
},
|
||||
],
|
||||
users: [
|
||||
user("u-open", "Open User", "open-team"),
|
||||
user("u-internal", "Internal User", "internal-team"),
|
||||
],
|
||||
cache: { source: "redis", hit: true },
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
const totalUsersControl = page.getByTestId("orgchart-total-users-control");
|
||||
await expect(totalUsersControl).toHaveText("총 1명");
|
||||
await expect(svg.getByText("공개 팀", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText(/Open User/)).toBeVisible();
|
||||
await expect(svg.getByText("내부 팀", { exact: true })).toHaveCount(0);
|
||||
await expect(svg.getByText("Internal User", { exact: true })).toHaveCount(0);
|
||||
|
||||
await totalUsersControl.hover();
|
||||
await page.getByRole("switch", { name: "내부조직 보기" }).setChecked(true);
|
||||
|
||||
await expect(totalUsersControl).toHaveText("총 2명");
|
||||
await expect(svg.getByText("내부 팀", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText(/Internal User/)).toBeVisible();
|
||||
});
|
||||
|
||||
test("org chart defaults to hanmac family when public sector group is listed first", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.setItem("playwright_auth_bypass", "1");
|
||||
window.localStorage.setItem("dev_tenant_id", "family");
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/admin/orgchart/snapshot**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
tenants: [
|
||||
{
|
||||
...tenant("public-sector", "공공기관", "public-sector"),
|
||||
type: "COMPANY_GROUP",
|
||||
memberCount: 0,
|
||||
},
|
||||
{
|
||||
...tenant("family", "한맥가족", "hanmac-family"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
{
|
||||
...tenant("saman", "삼안", "saman", "family"),
|
||||
type: "COMPANY",
|
||||
},
|
||||
],
|
||||
users: [user("u-saman", "Saman User", "saman")],
|
||||
cache: { source: "redis", hit: true },
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart");
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(
|
||||
page.getByRole("button", { name: "조직: 한맥가족" }),
|
||||
).toBeVisible();
|
||||
await expect(svg.getByText("한맥가족", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText("삼안", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText("공공기관", { exact: true })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("org chart renders dense member nodes with calculated member columns", async ({
|
||||
page,
|
||||
}) => {
|
||||
const denseUsers = Array.from({ length: 10 }, (_, index) =>
|
||||
user(`u-dense-${index + 1}`, `Dense User ${index + 1}`, "baron"),
|
||||
);
|
||||
|
||||
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")],
|
||||
users: denseUsers,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=dense-members");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const rootNode = page.locator('[data-testid="orgchart-node-root"]');
|
||||
await expect(rootNode).toHaveAttribute("width", /3\d{2}/);
|
||||
await expect(rootNode.locator('[data-member-columns="2"]')).toBeVisible();
|
||||
await expect(rootNode.getByText("Dense User 10")).toBeVisible();
|
||||
});
|
||||
|
||||
test("public org chart hides internal and private tenants and renders org unit type", 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", "한맥가족", "hanmac-family"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
tenant("company", "삼안", "saman", "group"),
|
||||
{
|
||||
...tenant("open-team", "공개 팀", "open-team", "company"),
|
||||
config: { orgUnitType: "팀", visibility: "public" },
|
||||
},
|
||||
{
|
||||
...tenant("internal-team", "내부 팀", "internal-team", "company"),
|
||||
config: { visibility: "internal" },
|
||||
},
|
||||
{
|
||||
...tenant("private-team", "비공개 팀", "private-team", "company"),
|
||||
config: { visibility: "private" },
|
||||
},
|
||||
tenant(
|
||||
"private-child",
|
||||
"비공개 하위",
|
||||
"private-child",
|
||||
"private-team",
|
||||
),
|
||||
],
|
||||
users: [
|
||||
user("u-open", "Open User", "open-team"),
|
||||
user("u-internal", "Internal User", "internal-team"),
|
||||
user("u-private", "Private User", "private-team"),
|
||||
user("u-private-child", "Private Child User", "private-child"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=tenant-visibility");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg.getByText("공개 팀", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText("팀", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText(/Open User/)).toBeVisible();
|
||||
await expect(svg.getByText("내부 팀", { exact: true })).toHaveCount(0);
|
||||
await expect(svg.getByText("Internal User", { exact: true })).toHaveCount(0);
|
||||
await expect(svg.getByText("비공개 팀", { exact: true })).toHaveCount(0);
|
||||
await expect(svg.getByText("Private User", { exact: true })).toHaveCount(0);
|
||||
await expect(svg.getByText("비공개 하위", { exact: true })).toHaveCount(0);
|
||||
await expect(
|
||||
svg.getByText("Private Child User", { exact: true }),
|
||||
).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("org chart colors hanmac family and nested baron company group separately", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants: [
|
||||
{
|
||||
...tenant("family", "한맥가족", "hanmac-family"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
{
|
||||
...tenant("baron-group", "Baron Group", "baron-group", "family"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
{
|
||||
...tenant("baron-company", "Baron Company", "baron", "baron-group"),
|
||||
type: "COMPANY",
|
||||
},
|
||||
],
|
||||
users: [user("u-baron", "Baron User", "baron")],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=baron-group-color");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg.getByText("Baron Group", { exact: true })).toBeVisible();
|
||||
|
||||
const colors = await page.evaluate(() => {
|
||||
function headerColor(nodeId: string) {
|
||||
const node = document.querySelector(
|
||||
`[data-testid="orgchart-node-${nodeId}"]`,
|
||||
);
|
||||
const header = node?.querySelector("div > div");
|
||||
return header ? window.getComputedStyle(header).backgroundColor : "";
|
||||
}
|
||||
|
||||
return {
|
||||
baronCompany: headerColor("baron-company"),
|
||||
baronGroup: headerColor("baron-group"),
|
||||
family: headerColor("family"),
|
||||
};
|
||||
});
|
||||
|
||||
expect(colors.family).toBe("rgb(0, 0, 0)");
|
||||
expect(colors.baronGroup).toBe("rgb(0, 76, 191)");
|
||||
expect(colors.baronCompany).toBe("rgb(0, 76, 191)");
|
||||
});
|
||||
|
||||
test("org chart orders top organization choices by the hanmac family policy", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/v1/public/orgchart**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
sharedWith: "Playwright",
|
||||
tenants: [
|
||||
{
|
||||
...tenant("family", "한맥가족", "hanmac-family"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
{
|
||||
...tenant("saman", "삼안", "saman", "family"),
|
||||
type: "COMPANY",
|
||||
},
|
||||
{
|
||||
...tenant("baron-group", "바론그룹", "baron-group", "family"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
{
|
||||
...tenant("hanmac", "한맥기술", "hanmac", "family"),
|
||||
type: "COMPANY",
|
||||
},
|
||||
{
|
||||
...tenant("gpdtdc", "총괄기획&기술개발센터", "gpdtdc", "family"),
|
||||
type: "ORGANIZATION",
|
||||
},
|
||||
],
|
||||
users: [],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=org-selection-order");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const labels = await page
|
||||
.getByTestId("orgchart-org-selector")
|
||||
.locator("button")
|
||||
.evaluateAll((buttons) =>
|
||||
buttons.map((button) => button.textContent?.trim() ?? ""),
|
||||
);
|
||||
|
||||
expect(labels.slice(0, 5)).toEqual([
|
||||
"한맥가족",
|
||||
"총괄기획&기술개발센터",
|
||||
"삼안",
|
||||
"한맥기술",
|
||||
"바론그룹",
|
||||
]);
|
||||
});
|
||||
|
||||
test("org chart compresses many sibling organizations and allows wide zoom out", async ({
|
||||
page,
|
||||
}) => {
|
||||
const childTenants = Array.from({ length: 13 }, (_, index) =>
|
||||
tenant(
|
||||
`team-${index + 1}`,
|
||||
`Team ${index + 1}`,
|
||||
`team-${index + 1}`,
|
||||
"root",
|
||||
),
|
||||
);
|
||||
|
||||
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"), ...childTenants],
|
||||
users: childTenants.map((child, index) =>
|
||||
user(`u-team-${index + 1}`, `Team ${index + 1} User`, child.slug),
|
||||
),
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=wide-siblings");
|
||||
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.getByText("Team 13", { exact: true })).toBeVisible();
|
||||
await expect(svg.locator('foreignObject[data-node-id^="team-"]')).toHaveCount(
|
||||
13,
|
||||
);
|
||||
await expect(
|
||||
page.getByRole("button", { name: "조직: 한맥가족" }),
|
||||
).toBeVisible();
|
||||
await expect(page.getByText("배치", { exact: true })).toBeHidden();
|
||||
await expect(page.getByRole("button", { name: "배치: 자동" })).toBeVisible();
|
||||
await expect(page.getByText("연결", { exact: true })).toHaveCount(0);
|
||||
await expect(page.getByText("상위연결", { exact: true })).toHaveCount(0);
|
||||
|
||||
const autoChildYPositions = await svg
|
||||
.locator('foreignObject[data-node-id^="team-"]')
|
||||
.evaluateAll((nodes) =>
|
||||
nodes
|
||||
.map((node) => node.getAttribute("y") ?? "")
|
||||
.filter((value) => value.length > 0),
|
||||
);
|
||||
|
||||
expect(new Set(autoChildYPositions).size).toBeGreaterThan(1);
|
||||
await expect(svg.locator("path")).toHaveCount(13);
|
||||
await expect(
|
||||
svg.locator('path:not([data-hidden-default="true"])'),
|
||||
).toHaveCount(4);
|
||||
await expect(svg.locator('path[data-hidden-default="true"]')).toHaveCount(9);
|
||||
|
||||
await svg.locator('foreignObject[data-node-id="team-13"]').hover();
|
||||
await expect(svg.locator('path[data-highlighted="true"]')).toHaveCount(1);
|
||||
await expect(svg.locator('path[data-muted="true"]')).toHaveCount(4);
|
||||
|
||||
await page.getByTestId("orgchart-layout-mode-option").hover();
|
||||
await expect(page.getByText("배치", { exact: true })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("button", { exact: true, name: "자동" }),
|
||||
).toHaveCount(0);
|
||||
await page.getByRole("button", { name: "Top-down" }).click();
|
||||
await expect
|
||||
.poll(async () =>
|
||||
svg
|
||||
.locator('foreignObject[data-node-id^="team-"]')
|
||||
.evaluateAll(
|
||||
(nodes) =>
|
||||
new Set(
|
||||
nodes
|
||||
.map((node) => node.getAttribute("y") ?? "")
|
||||
.filter((value) => value.length > 0),
|
||||
).size,
|
||||
),
|
||||
)
|
||||
.toBe(1);
|
||||
|
||||
await page.getByTestId("orgchart-layout-mode-option").hover();
|
||||
await page.getByRole("button", { name: "3열" }).click();
|
||||
const threeColumnPositions = await svg
|
||||
.locator('foreignObject[data-node-id^="team-"]')
|
||||
.evaluateAll((nodes) =>
|
||||
nodes.map((node) => ({
|
||||
x: node.getAttribute("x") ?? "",
|
||||
y: node.getAttribute("y") ?? "",
|
||||
})),
|
||||
);
|
||||
|
||||
expect(new Set(threeColumnPositions.map((position) => position.x)).size).toBe(
|
||||
3,
|
||||
);
|
||||
expect(new Set(threeColumnPositions.map((position) => position.y)).size).toBe(
|
||||
5,
|
||||
);
|
||||
await expect(svg.locator("path")).toHaveCount(13);
|
||||
await expect(
|
||||
svg.locator('path:not([data-hidden-default="true"])'),
|
||||
).toHaveCount(3);
|
||||
|
||||
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, 2500);
|
||||
|
||||
await expect
|
||||
.poll(async () =>
|
||||
svg.evaluate((element) =>
|
||||
Number.parseFloat(element.getAttribute("data-scale") ?? "1"),
|
||||
),
|
||||
)
|
||||
.toBeLessThan(0.45);
|
||||
});
|
||||
|
||||
test("org chart selects first and second depth organizations from company hover choices", 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", "Baron Group", "baron"),
|
||||
type: "COMPANY_GROUP",
|
||||
},
|
||||
{
|
||||
...tenant("company", "Company A", "company-a", "group"),
|
||||
type: "COMPANY",
|
||||
},
|
||||
tenant("department", "Department A", "department-a", "company"),
|
||||
tenant("squad", "Squad A", "squad-a", "department"),
|
||||
tenant("team", "Team A", "team-a", "squad"),
|
||||
],
|
||||
users: [
|
||||
user("u-company", "Company User", "company-a"),
|
||||
user("u-department", "Department User", "department-a"),
|
||||
user("u-squad", "Squad User", "squad-a"),
|
||||
user("u-team", "Team User", "team-a"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=company-depth-filter");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
await expect(
|
||||
page.getByRole("button", { name: "조직: 한맥가족" }),
|
||||
).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Company A" })).toBeVisible();
|
||||
await expect(page.getByText("하위범위", { exact: true })).toHaveCount(0);
|
||||
await expect(page.getByText("조직", { exact: true })).toHaveCount(0);
|
||||
await page.getByRole("button", { name: "Company A" }).click();
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg.getByText("Team A", { exact: true })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("button", { name: "조직: Company A" }),
|
||||
).toBeVisible();
|
||||
|
||||
await expect(
|
||||
page
|
||||
.getByTestId("orgchart-company-option-company")
|
||||
.getByRole("button", { name: "Company A" }),
|
||||
).toBeVisible();
|
||||
|
||||
const orgButtonColor = await page
|
||||
.getByRole("button", { name: "조직: Company A" })
|
||||
.evaluate((element) => window.getComputedStyle(element).backgroundColor);
|
||||
const layoutButtonColor = await page
|
||||
.getByRole("button", { name: "배치: 자동" })
|
||||
.evaluate((element) => window.getComputedStyle(element).backgroundColor);
|
||||
expect(orgButtonColor).not.toBe(layoutButtonColor);
|
||||
|
||||
await page.getByTestId("orgchart-company-option-company").hover();
|
||||
await expect(svg.getByText("Department A", { exact: true })).toBeVisible();
|
||||
await page.getByRole("button", { name: "1뎁스 Department A" }).click();
|
||||
await expect(
|
||||
page.getByRole("button", { name: "조직: Department A" }),
|
||||
).toBeVisible();
|
||||
await expect(svg.getByText("Squad A", { exact: true })).toBeVisible();
|
||||
|
||||
await page.getByTestId("orgchart-company-option-company").hover();
|
||||
await page.getByRole("button", { name: "2뎁스 Squad A" }).click();
|
||||
await expect(
|
||||
page.getByRole("button", { name: "조직: Squad A" }),
|
||||
).toBeVisible();
|
||||
await expect(svg.getByText("Squad A", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText("Team A", { exact: true })).toBeVisible();
|
||||
});
|
||||
|
||||
test("org chart uses semantic zoom to simplify deep nodes and restore labels on zoom in", 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("department", "Archive Department", "department", "root"),
|
||||
tenant("division", "Archive Division", "division", "department"),
|
||||
tenant("deep", "Archive Deep Team", "deep", "division"),
|
||||
],
|
||||
users: [
|
||||
user("u-root", "Root User", "baron"),
|
||||
user("u-department", "Department User", "department"),
|
||||
user("u-division", "Division User", "division"),
|
||||
user("u-deep", "Deep User", "deep"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=semantic-zoom");
|
||||
await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
|
||||
|
||||
const viewport = page.locator('[data-testid="orgchart-viewport"]');
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
const deepNode = svg.locator('foreignObject[data-node-id="deep"]');
|
||||
|
||||
await expect(svg).toHaveAttribute("data-semantic-zoom", "detail");
|
||||
await expect(deepNode.getByText("Archive Deep Team")).toBeVisible();
|
||||
|
||||
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, 4000);
|
||||
|
||||
await expect
|
||||
.poll(async () => svg.getAttribute("data-semantic-zoom"))
|
||||
.toBe("overview");
|
||||
await expect(deepNode.getByText("Archive Deep Team")).toHaveCount(0);
|
||||
|
||||
await page.mouse.wheel(0, -4000);
|
||||
|
||||
await expect
|
||||
.poll(async () => svg.getAttribute("data-semantic-zoom"))
|
||||
.toBe("detail");
|
||||
await expect(deepNode.getByText("Archive Deep Team")).toBeVisible();
|
||||
});
|
||||
737
baron-sso/orgfront/tests/orgchart-picker.spec.ts
Normal file
737
baron-sso/orgfront/tests/orgchart-picker.spec.ts
Normal file
@@ -0,0 +1,737 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
const shareToken = "playwright";
|
||||
|
||||
function withShareToken(path: string) {
|
||||
return path.includes("?")
|
||||
? `${path}&token=${shareToken}`
|
||||
: `${path}?token=${shareToken}`;
|
||||
}
|
||||
|
||||
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,
|
||||
grade: "사원",
|
||||
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,
|
||||
};
|
||||
const storageKeys = [
|
||||
"user:http://localhost:5000/oidc:orgfront",
|
||||
"user:http://localhost:5000/oidc/:orgfront",
|
||||
"user:http://localhost:5000/oidc:devfront",
|
||||
"user:http://localhost:5000/oidc/:devfront",
|
||||
"user:http://172.16.9.189:5000/oidc:orgfront",
|
||||
"user:http://172.16.9.189:5000/oidc/:orgfront",
|
||||
"oidc.user:http://localhost:5000/oidc:orgfront",
|
||||
"oidc.user:http://localhost:5000/oidc/:orgfront",
|
||||
"oidc.user:http://localhost:5000/oidc:devfront",
|
||||
"oidc.user:http://localhost:5000/oidc/:devfront",
|
||||
"oidc.user:http://172.16.9.189:5000/oidc:orgfront",
|
||||
"oidc.user:http://172.16.9.189:5000/oidc/:orgfront",
|
||||
];
|
||||
for (const key of storageKeys) {
|
||||
window.localStorage.setItem(key, JSON.stringify(mockOidcUser));
|
||||
}
|
||||
window.localStorage.setItem("playwright_auth_bypass", "1");
|
||||
window.localStorage.setItem("dev_tenant_id", "group-hmac");
|
||||
},
|
||||
{ issuedAt: nowInSeconds },
|
||||
);
|
||||
|
||||
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": "*" },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (url.includes("/jwks")) {
|
||||
await route.fulfill({
|
||||
json: { keys: [] },
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
body: "ok",
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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",
|
||||
grade: "책임",
|
||||
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(withShareToken("/chart"));
|
||||
|
||||
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(withShareToken("/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 defaults to the hanmac-family company-group when no tenant id is supplied", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.unroute("**/api/v1/admin/tenants**");
|
||||
await page.unroute("**/api/v1/admin/users**");
|
||||
|
||||
const tenants = [
|
||||
tenant("wrong-group", "COMPANY_GROUP", "Wrong Group", "wrong-group"),
|
||||
tenant(
|
||||
"wrong-company",
|
||||
"COMPANY",
|
||||
"Wrong Company",
|
||||
"wrong-company",
|
||||
"wrong-group",
|
||||
),
|
||||
tenant("hanmac-family-id", "COMPANY_GROUP", "한맥가족", "hanmac-family"),
|
||||
tenant("saman-id", "COMPANY", "삼안", "saman", "hanmac-family-id"),
|
||||
];
|
||||
|
||||
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: [],
|
||||
total: 0,
|
||||
limit: 5000,
|
||||
offset: 0,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto(withShareToken("/picker"));
|
||||
|
||||
const picker = page.frameLocator("iframe");
|
||||
await expect(picker.getByText("한맥가족", { exact: true })).toBeVisible();
|
||||
await expect(picker.getByText("삼안", { exact: true })).toBeVisible();
|
||||
await expect(picker.getByText("Wrong Group", { exact: true })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("embed preview picker orders hanmac-family tenants by the shared policy", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.unroute("**/api/v1/admin/tenants**");
|
||||
await page.unroute("**/api/v1/admin/users**");
|
||||
|
||||
const tenants = [
|
||||
tenant("hanmac-family-id", "COMPANY_GROUP", "한맥가족", "hanmac-family"),
|
||||
tenant(
|
||||
"baron-group-id",
|
||||
"COMPANY_GROUP",
|
||||
"바론그룹",
|
||||
"baron-group",
|
||||
"hanmac-family-id",
|
||||
),
|
||||
tenant("hanmac-id", "COMPANY", "한맥기술", "hanmac", "hanmac-family-id"),
|
||||
tenant("saman-id", "COMPANY", "삼안", "saman", "hanmac-family-id"),
|
||||
tenant(
|
||||
"gpdtdc-id",
|
||||
"ORGANIZATION",
|
||||
"총괄기획&기술개발센터",
|
||||
"gpdtdc",
|
||||
"hanmac-family-id",
|
||||
),
|
||||
];
|
||||
|
||||
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: [],
|
||||
total: 0,
|
||||
limit: 5000,
|
||||
offset: 0,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto(withShareToken("/embed-preview?select=tenant"));
|
||||
|
||||
await expect(
|
||||
page.frameLocator("iframe").getByTestId("org-picker-node-name-tenant"),
|
||||
).toHaveText([
|
||||
"한맥가족",
|
||||
"총괄기획&기술개발센터",
|
||||
"삼안",
|
||||
"한맥기술",
|
||||
"바론그룹",
|
||||
]);
|
||||
});
|
||||
|
||||
test("picker displays user names with grade and optional position", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(withShareToken("/embed/picker?mode=single&select=user"));
|
||||
|
||||
await expect(
|
||||
page.getByRole("button", {
|
||||
name: "Platform User 책임",
|
||||
}),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("embed preview menu updates the iframe picker source", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(withShareToken("/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 slug and custom dimensions through the picker url", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(withShareToken("/embed-preview"));
|
||||
|
||||
await page.getByLabel("tenant slug").fill("baron");
|
||||
await page.getByLabel("임베딩 너비").fill("520");
|
||||
await page.getByLabel("임베딩 높이").fill("480");
|
||||
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"tenantSlug=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 slug, hides users for tenant selection, and keeps direct members before child tenants", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(
|
||||
withShareToken("/embed-preview?tenantSlug=baron&select=tenant"),
|
||||
);
|
||||
|
||||
await expect(page.getByLabel("tenant slug")).toHaveValue("baron");
|
||||
await expect(page.getByTestId("embed-preview-src")).toContainText(
|
||||
"tenantSlug=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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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(withShareToken("/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 책임 선택")).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(
|
||||
withShareToken(
|
||||
"/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 책임 선택")).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"');
|
||||
});
|
||||
783
baron-sso/orgfront/tests/orgchart-vector-render.spec.ts
Normal file
783
baron-sso/orgfront/tests/orgchart-vector-render.spec.ts
Normal file
@@ -0,0 +1,783 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
function tenant(
|
||||
id: string,
|
||||
name: string,
|
||||
slug: string,
|
||||
parentId?: string,
|
||||
type?: string,
|
||||
config?: Record<string, unknown>,
|
||||
) {
|
||||
return {
|
||||
id,
|
||||
type: type ?? (parentId ? "USER_GROUP" : "COMPANY_GROUP"),
|
||||
name,
|
||||
slug,
|
||||
description: "",
|
||||
status: "active",
|
||||
parentId,
|
||||
config,
|
||||
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,
|
||||
grade: "사원",
|
||||
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.getByText("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.getByText(/Hidden Hanmac User/)).toHaveCount(0);
|
||||
await expect(svg.getByText("Engineering User 사원")).toBeVisible();
|
||||
await expect(svg.getByText("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.getByText("Engineering User 사원")).toBeVisible();
|
||||
await expect(svg.getByText(/Sales User/)).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("org chart hides internal and private organizations in the status chart", 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("visible", "Visible Org", "visible", "group", "ORGANIZATION"),
|
||||
tenant(
|
||||
"internal",
|
||||
"Internal Org",
|
||||
"internal",
|
||||
"group",
|
||||
"ORGANIZATION",
|
||||
{
|
||||
visibility: "internal",
|
||||
},
|
||||
),
|
||||
tenant(
|
||||
"internal-child",
|
||||
"Internal Child",
|
||||
"internal-child",
|
||||
"internal",
|
||||
"ORGANIZATION",
|
||||
),
|
||||
tenant("private", "Private Org", "private", "group", "ORGANIZATION", {
|
||||
visibility: "private",
|
||||
}),
|
||||
],
|
||||
users: [
|
||||
user("u-visible", "Visible User", "visible"),
|
||||
user("u-internal", "Internal User", "internal"),
|
||||
user("u-private", "Private User", "private"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=visibility&includeInternal=true");
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg.getByText("Visible Org")).toBeVisible();
|
||||
await expect(svg.getByText("Visible User 사원")).toBeVisible();
|
||||
await expect(
|
||||
svg.getByText(/Internal Org|Internal Child|Private Org/),
|
||||
).toHaveCount(0);
|
||||
await expect(svg.getByText(/Internal User|Private User/)).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("org chart balances large member groups with automatic member columns", async ({
|
||||
page,
|
||||
}) => {
|
||||
const members = Array.from({ length: 10 }, (_, index) =>
|
||||
user(`u-member-${index + 1}`, `Member ${index + 1}`, "engineering"),
|
||||
);
|
||||
|
||||
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("engineering", "Engineering", "engineering", "group"),
|
||||
],
|
||||
users: members,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=member-columns");
|
||||
|
||||
const engineeringNode = page.locator(
|
||||
'[data-testid="orgchart-node-engineering"]',
|
||||
);
|
||||
await expect(engineeringNode).toBeVisible();
|
||||
await expect(
|
||||
engineeringNode.locator('[data-member-columns="2"]'),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("org chart displays user names with short grade aliases and no job details", 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",
|
||||
grade: "책임연구원",
|
||||
position: "팀장",
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=display-name");
|
||||
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg.getByText("Engineering User 책임")).toBeVisible();
|
||||
await expect(svg.getByText(/팀장|Platform Engineer/)).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("org chart orders top executive members by rank priority", async ({
|
||||
page,
|
||||
}) => {
|
||||
const executiveUser = (id: string, name: string, grade: string) => ({
|
||||
...user(id, name, "engineering"),
|
||||
grade,
|
||||
});
|
||||
|
||||
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("engineering", "Engineering", "engineering", "group"),
|
||||
],
|
||||
users: [
|
||||
executiveUser("u-vice-president", "Vice President", "부사장"),
|
||||
executiveUser("u-adviser", "Adviser", "고문"),
|
||||
executiveUser("u-vice-chair", "Vice Chair", "부회장"),
|
||||
executiveUser("u-president", "President", "사장"),
|
||||
executiveUser("u-chair", "Chair", "회장"),
|
||||
executiveUser("u-director", "Director", "전무"),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=rank-priority");
|
||||
|
||||
const engineeringNode = page.locator(
|
||||
'[data-testid="orgchart-node-engineering"]',
|
||||
);
|
||||
await expect(engineeringNode).toBeVisible();
|
||||
|
||||
const orderedMemberIds = await engineeringNode
|
||||
.locator('[data-testid^="orgchart-member-"]')
|
||||
.evaluateAll((elements) =>
|
||||
elements.map((element) => element.getAttribute("data-testid")),
|
||||
);
|
||||
|
||||
expect(orderedMemberIds).toEqual([
|
||||
"orgchart-member-u-chair",
|
||||
"orgchart-member-u-president",
|
||||
"orgchart-member-u-vice-chair",
|
||||
"orgchart-member-u-adviser",
|
||||
"orgchart-member-u-vice-president",
|
||||
"orgchart-member-u-director",
|
||||
]);
|
||||
});
|
||||
|
||||
test("org chart only highlights flagged member cards", 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("engineering", "Engineering", "engineering", "group"),
|
||||
],
|
||||
users: [
|
||||
user("u-normal", "Normal User", "engineering"),
|
||||
{
|
||||
...user("u-owner", "Owner User", "engineering"),
|
||||
metadata: {
|
||||
additionalAppointments: [
|
||||
{
|
||||
tenantSlug: "engineering",
|
||||
isOwner: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
...user("u-admin", "Admin User", "engineering"),
|
||||
metadata: {
|
||||
additionalAppointments: [
|
||||
{
|
||||
tenantSlug: "engineering",
|
||||
isAdmin: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
...user("u-manager", "Manager User", "engineering"),
|
||||
metadata: {
|
||||
additionalAppointments: [
|
||||
{
|
||||
tenantSlug: "engineering",
|
||||
isManager: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=highlighted-members");
|
||||
|
||||
const engineeringNode = page.locator(
|
||||
'[data-testid="orgchart-node-engineering"]',
|
||||
);
|
||||
await expect(
|
||||
engineeringNode.locator('[data-testid="orgchart-member-u-normal"]'),
|
||||
).toHaveAttribute("data-highlighted", "false");
|
||||
await expect(
|
||||
engineeringNode.locator('[data-testid="orgchart-member-u-owner"]'),
|
||||
).toHaveAttribute("data-highlighted", "true");
|
||||
await expect(
|
||||
engineeringNode.locator('[data-testid="orgchart-member-u-admin"]'),
|
||||
).toHaveAttribute("data-highlighted", "true");
|
||||
await expect(
|
||||
engineeringNode.locator('[data-testid="orgchart-member-u-manager"]'),
|
||||
).toHaveAttribute("data-highlighted", "true");
|
||||
});
|
||||
|
||||
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,
|
||||
};
|
||||
const storageKeys = [
|
||||
"user:http://localhost:5000/oidc:orgfront",
|
||||
"user:http://localhost:5000/oidc/:orgfront",
|
||||
"user:http://localhost:5000/oidc:devfront",
|
||||
"user:http://localhost:5000/oidc/:devfront",
|
||||
"user:http://172.16.9.189:5000/oidc:orgfront",
|
||||
"user:http://172.16.9.189:5000/oidc/:orgfront",
|
||||
"oidc.user:http://localhost:5000/oidc:orgfront",
|
||||
"oidc.user:http://localhost:5000/oidc/:orgfront",
|
||||
"oidc.user:http://localhost:5000/oidc:devfront",
|
||||
"oidc.user:http://localhost:5000/oidc/:devfront",
|
||||
"oidc.user:http://172.16.9.189:5000/oidc:orgfront",
|
||||
"oidc.user:http://172.16.9.189:5000/oidc/:orgfront",
|
||||
];
|
||||
for (const key of storageKeys) {
|
||||
window.localStorage.setItem(key, JSON.stringify(mockOidcUser));
|
||||
}
|
||||
window.localStorage.setItem("playwright_auth_bypass", "1");
|
||||
window.localStorage.setItem("dev_tenant_id", "group");
|
||||
},
|
||||
{ issuedAt },
|
||||
);
|
||||
|
||||
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": "*" },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (url.includes("/jwks")) {
|
||||
await route.fulfill({
|
||||
json: { keys: [] },
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
body: "ok",
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
});
|
||||
|
||||
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/orgchart/snapshot**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
tenants,
|
||||
users: [
|
||||
multiTenantUser("u-shared", "Shared User", "baron", [
|
||||
groupTenant,
|
||||
baronTenant,
|
||||
engineeringTenant,
|
||||
platformTenant,
|
||||
]),
|
||||
],
|
||||
cache: { source: "redis", hit: true },
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
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.getByText(/Shared User/)).toHaveCount(1);
|
||||
await expect(svg.getByText(/^1$/)).toHaveCount(4);
|
||||
});
|
||||
|
||||
test("org chart allows a user in a hanmac-family descendant tenant", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.setItem("playwright_auth_bypass", "1");
|
||||
window.localStorage.setItem("dev_tenant_id", "saman-id");
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/admin/orgchart/snapshot**", async (route) => {
|
||||
expect(route.request().headers()["x-tenant-id"]).toBe("saman-id");
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
tenants: [
|
||||
tenant(
|
||||
"hanmac-family-id",
|
||||
"한맥가족",
|
||||
"hanmac-family",
|
||||
"hanmac-family-id",
|
||||
"COMPANY_GROUP",
|
||||
),
|
||||
tenant("saman-id", "삼안", "saman", "hanmac-family-id", "COMPANY"),
|
||||
tenant("saman-platform-id", "플랫폼팀", "saman-platform", "saman-id"),
|
||||
],
|
||||
users: [
|
||||
{
|
||||
...user("u-saman", "Saman Descendant User", "saman-platform"),
|
||||
tenantSlug: "saman",
|
||||
tenant: tenant(
|
||||
"saman-id",
|
||||
"삼안",
|
||||
"saman",
|
||||
"hanmac-family-id",
|
||||
"COMPANY",
|
||||
),
|
||||
joinedTenants: [
|
||||
tenant(
|
||||
"saman-platform-id",
|
||||
"플랫폼팀",
|
||||
"saman-platform",
|
||||
"saman-id",
|
||||
),
|
||||
],
|
||||
},
|
||||
],
|
||||
cache: { source: "redis", hit: true },
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart");
|
||||
|
||||
await expect(
|
||||
page.getByText("조직도를 불러올 수 없거나 만료된 링크입니다."),
|
||||
).toHaveCount(0);
|
||||
await expect(
|
||||
page.getByRole("button", { name: "조직: 한맥가족" }),
|
||||
).toBeVisible();
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg.getByText("한맥가족", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText("삼안", { exact: true })).toBeVisible();
|
||||
await expect(svg.getByText(/Saman Descendant User/)).toBeVisible();
|
||||
});
|
||||
|
||||
test("org chart logs authenticated snapshot failures with actionable diagnostics", async ({
|
||||
page,
|
||||
}) => {
|
||||
const consoleMessages: string[] = [];
|
||||
page.on("console", async (message) => {
|
||||
if (message.type() !== "error") return;
|
||||
const values = await Promise.all(
|
||||
message.args().map((arg) => arg.jsonValue().catch(() => "")),
|
||||
);
|
||||
consoleMessages.push(JSON.stringify(values));
|
||||
});
|
||||
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.setItem("playwright_auth_bypass", "1");
|
||||
window.localStorage.setItem("dev_tenant_id", "saman-id");
|
||||
});
|
||||
|
||||
await page.route("**/api/v1/admin/orgchart/snapshot**", async (route) => {
|
||||
await route.fulfill({
|
||||
contentType: "application/json",
|
||||
status: 503,
|
||||
body: JSON.stringify({
|
||||
code: "service_unavailable",
|
||||
error: "tenant root traversal failed",
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart");
|
||||
|
||||
await expect(
|
||||
page.getByText(
|
||||
"조직도를 불러올 수 없습니다. 로그인 상태와 조직 권한을 확인해 주세요.",
|
||||
),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByText("조직도를 불러올 수 없거나 만료된 링크입니다."),
|
||||
).toHaveCount(0);
|
||||
await expect
|
||||
.poll(() =>
|
||||
consoleMessages.some(
|
||||
(message) =>
|
||||
message.includes("[orgfront] Org chart load failed") &&
|
||||
message.includes("service_unavailable") &&
|
||||
message.includes("saman-id") &&
|
||||
message.includes("/v1/admin/orgchart/snapshot"),
|
||||
),
|
||||
)
|
||||
.toBe(true);
|
||||
});
|
||||
|
||||
test("org chart places GPDTDC representative users on visible leaf appointments", 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("gpdtdc", "GPDTDC", "gpdtdc", "group", "COMPANY"),
|
||||
tenant("tdc", "기술개발센터", "tdc", "gpdtdc", "ORGANIZATION"),
|
||||
tenant("tdc-leaf", "기술개발센터 1팀", "tdc-leaf", "tdc"),
|
||||
tenant(
|
||||
"internal-planning",
|
||||
"내부 구성 조직",
|
||||
"internal-planning",
|
||||
"group",
|
||||
"ORGANIZATION",
|
||||
{ visibility: "internal" },
|
||||
),
|
||||
tenant(
|
||||
"internal-leaf",
|
||||
"내부 구성 하위 조직",
|
||||
"internal-leaf",
|
||||
"gpdtdc",
|
||||
"USER_GROUP",
|
||||
{ visibility: "internal" },
|
||||
),
|
||||
],
|
||||
users: [
|
||||
{
|
||||
...user("u-gpdtdc-leaf", "GPDTDC Leaf User", "gpdtdc"),
|
||||
tenantSlug: "gpdtdc",
|
||||
companyCode: undefined,
|
||||
metadata: {
|
||||
additionalAppointments: [
|
||||
{
|
||||
tenantSlug: "internal-planning",
|
||||
isPrimary: true,
|
||||
},
|
||||
{
|
||||
tenantSlug: "tdc-leaf",
|
||||
isPrimary: false,
|
||||
grade: "책임",
|
||||
position: "팀장",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
...user("u-hidden-only", "Hidden Only User", "gpdtdc"),
|
||||
tenantSlug: "gpdtdc",
|
||||
companyCode: undefined,
|
||||
metadata: {
|
||||
additionalAppointments: [
|
||||
{
|
||||
tenantSlug: "internal-leaf",
|
||||
isPrimary: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto("/chart?token=gpdtdc-leaf");
|
||||
|
||||
await expect(page.getByText("총 1명")).toBeVisible();
|
||||
const svg = page.locator('[data-testid="orgchart-vector-svg"]');
|
||||
await expect(svg).toBeVisible();
|
||||
await expect(svg.getByText("내부 구성 조직")).toHaveCount(0);
|
||||
await expect(svg.getByText("내부 구성 하위 조직")).toHaveCount(0);
|
||||
await expect(svg.getByText(/Hidden Only User/)).toHaveCount(0);
|
||||
await expect(
|
||||
page
|
||||
.locator('[data-testid="orgchart-node-gpdtdc"]')
|
||||
.getByText(/GPDTDC Leaf User/),
|
||||
).toHaveCount(0);
|
||||
await expect(
|
||||
page
|
||||
.locator('[data-testid="orgchart-node-tdc-leaf"]')
|
||||
.getByText("GPDTDC Leaf User 책임"),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
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.getByText(/Shared User/)).toHaveCount(2);
|
||||
await expect(svg.getByText(/^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.getByText(/시스템 전역/)).toHaveCount(0);
|
||||
await expect(svg.getByText(/Global Admin/)).toHaveCount(0);
|
||||
await expect(svg.getByText(/System Admin/)).toHaveCount(0);
|
||||
await expect(svg.getByText("Baron User 사원")).toBeVisible();
|
||||
});
|
||||
74
baron-sso/orgfront/tests/orgfront-auto-login.spec.ts
Normal file
74
baron-sso/orgfront/tests/orgfront-auto-login.spec.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { expect, type Page, test } from "@playwright/test";
|
||||
|
||||
async function stubOidcAuthorization(page: Page) {
|
||||
let authorizationURL = "";
|
||||
|
||||
await page.route(
|
||||
"http://localhost:5000/oidc/.well-known/openid-configuration",
|
||||
async (route) => {
|
||||
await route.fulfill({
|
||||
json: {
|
||||
issuer: "http://localhost:5000/oidc",
|
||||
authorization_endpoint: "http://localhost:5000/oidc/oauth2/auth",
|
||||
token_endpoint: "http://localhost:5000/oidc/oauth2/token",
|
||||
jwks_uri: "http://localhost:5000/oidc/.well-known/jwks.json",
|
||||
userinfo_endpoint: "http://localhost:5000/oidc/userinfo",
|
||||
},
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
await page.route(
|
||||
"http://localhost:5000/oidc/oauth2/auth**",
|
||||
async (route) => {
|
||||
authorizationURL = route.request().url();
|
||||
await route.fulfill({
|
||||
contentType: "text/html",
|
||||
body: "<!doctype html><title>Authorization captured</title>",
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
authorizationURL: () => authorizationURL,
|
||||
};
|
||||
}
|
||||
|
||||
test("orgfront login waits for explicit auto parameter", async ({ page }) => {
|
||||
const oidc = await stubOidcAuthorization(page);
|
||||
|
||||
await page.goto("/login");
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
expect(oidc.authorizationURL()).toBe("");
|
||||
});
|
||||
|
||||
test("orgfront login auto parameter starts OIDC authorization", async ({
|
||||
page,
|
||||
}) => {
|
||||
const oidc = await stubOidcAuthorization(page);
|
||||
|
||||
await page.goto("/login?auto=1&returnTo=%2Fpicker");
|
||||
|
||||
await expect.poll(oidc.authorizationURL).toContain("/oauth2/auth");
|
||||
|
||||
const parsed = new URL(oidc.authorizationURL());
|
||||
expect(parsed.searchParams.get("client_id")).toBe("orgfront");
|
||||
expect(parsed.searchParams.get("redirect_uri")).toBe(
|
||||
"http://127.0.0.1:4175/auth/callback",
|
||||
);
|
||||
expect(parsed.searchParams.get("response_type")).toBe("code");
|
||||
expect(parsed.searchParams.get("scope") ?? "").toContain("openid");
|
||||
});
|
||||
|
||||
test("orgfront login can opt out of default OIDC authorization", async ({
|
||||
page,
|
||||
}) => {
|
||||
const oidc = await stubOidcAuthorization(page);
|
||||
|
||||
await page.goto("/login?auto=0");
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
expect(oidc.authorizationURL()).toBe("");
|
||||
});
|
||||
Reference in New Issue
Block a user