feat: integrate orgfront and expose internal ids

2026-04-30 09:33:39 +09:00
parent 02375af08d
commit 9ce7a67f58
116 changed files with 22992 additions and 33 deletions
--- a/orgfront/tests/orgchart-pan-zoom.spec.ts
+++ b/orgfront/tests/orgchart-pan-zoom.spec.ts
@@ -0,0 +1,127 @@
+import { expect, test } from "@playwright/test";
+
+type TenantFixture = {
+  id: string;
+  type: string;
+  name: string;
+  slug: string;
+  description: string;
+  status: string;
+  parentId?: string;
+  memberCount: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+function tenant(
+  id: string,
+  name: string,
+  slug: string,
+  parentId?: string,
+): TenantFixture {
+  return {
+    id,
+    type: parentId ? "USER_GROUP" : "COMPANY",
+    name,
+    slug,
+    description: "",
+    status: "active",
+    parentId,
+    memberCount: 1,
+    createdAt: "2026-04-01T00:00:00.000Z",
+    updatedAt: "2026-04-01T00:00:00.000Z",
+  };
+}
+
+function user(id: string, name: string, companyCode: string) {
+  return {
+    id,
+    email: `${id}@example.com`,
+    name,
+    role: "user",
+    status: "active",
+    companyCode,
+    position: "사원",
+    createdAt: "2026-04-01T00:00:00.000Z",
+    updatedAt: "2026-04-01T00:00:00.000Z",
+  };
+}
+
+test("org chart viewport pans with drag and zooms with the mouse wheel", async ({
+  page,
+}) => {
+  await page.route("**/api/v1/public/orgchart**", async (route) => {
+    await route.fulfill({
+      contentType: "application/json",
+      body: JSON.stringify({
+        sharedWith: "Playwright",
+        tenants: [
+          tenant("root", "Baron Group", "baron"),
+          tenant("engineering", "Engineering", "engineering", "root"),
+          tenant("platform", "Platform", "platform", "engineering"),
+          tenant("security", "Security", "security", "engineering"),
+          tenant("product", "Product", "product", "root"),
+          tenant("design", "Design", "design", "product"),
+          tenant("operations", "Operations", "operations", "root"),
+        ],
+        users: [
+          user("u-root", "Root User", "baron"),
+          user("u-eng", "Engineering User", "engineering"),
+          user("u-platform", "Platform User", "platform"),
+          user("u-security", "Security User", "security"),
+          user("u-product", "Product User", "product"),
+          user("u-design", "Design User", "design"),
+          user("u-ops", "Operations User", "operations"),
+        ],
+      }),
+    });
+  });
+
+  await page.goto("/chart?token=pan-zoom");
+  await expect(page.getByRole("heading", { name: "조직 현황" })).toBeVisible();
+
+  const viewport = page.locator('[data-testid="orgchart-viewport"]');
+  const canvas = page.locator('[data-testid="orgchart-canvas"]');
+  const svg = page.locator('[data-testid="orgchart-vector-svg"]');
+  await expect(viewport).toBeVisible();
+  await expect(canvas).toBeVisible();
+  await expect(svg).toBeVisible();
+
+  await expect
+    .poll(async () =>
+      viewport.evaluate((element) => {
+        const style = window.getComputedStyle(element);
+        return `${style.overflowX}/${style.overflowY}`;
+      }),
+    )
+    .toBe("hidden/hidden");
+
+  const initialViewBox = await svg.getAttribute("viewBox");
+  const box = await viewport.boundingBox();
+  expect(box).not.toBeNull();
+
+  if (!box) return;
+
+  await page.mouse.move(box.x + 24, box.y + box.height - 24);
+  await page.mouse.down();
+  await page.mouse.move(box.x + 164, box.y + box.height - 104);
+  await page.mouse.up();
+
+  await expect
+    .poll(async () => svg.getAttribute("viewBox"))
+    .not.toBe(initialViewBox);
+
+  const afterDragViewBox = await svg.getAttribute("viewBox");
+
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.wheel(0, -500);
+
+  await expect
+    .poll(async () => svg.getAttribute("viewBox"))
+    .not.toBe(afterDragViewBox);
+
+  const scale = await svg.evaluate((element) =>
+    Number.parseFloat(element.getAttribute("data-scale") ?? "1"),
+  );
+  expect(scale).toBeGreaterThan(1);
+});