devfront 테스트 커버리지 추가 보강

devfront/src/features/clients/ClientsPage.test.tsx

@@ -0,0 +1,276 @@
+import { act } from "react-dom/test-utils";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import ClientsPage from "./ClientsPage";
+
+const navigateMock = vi.fn();
+const fetchClientsMock = vi.fn();
+const fetchMeMock = vi.fn();
+const fetchDeveloperRequestStatusMock = vi.fn();
+const fetchMyTenantsMock = vi.fn();
+const requestDeveloperAccessMock = vi.fn();
+
+let authState = {
+  user: {
+    access_token: "access-token",
+    profile: {
+      role: "super_admin",
+      tenant_id: "tenant-1",
+      companyCode: "HANMAC",
+      name: "Dev Admin",
+      email: "dev@example.com",
+      phone: "010-0000-0000",
+    },
+  },
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual<typeof import("react-router-dom")>(
+    "react-router-dom",
+  );
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  };
+});
+
+vi.mock("../../lib/devApi", () => ({
+  fetchClients: () => fetchClientsMock(),
+  fetchMe: () => fetchMeMock(),
+  fetchDeveloperRequestStatus: () => fetchDeveloperRequestStatusMock(),
+  fetchMyTenants: () => fetchMyTenantsMock(),
+  requestDeveloperAccess: (...args: unknown[]) =>
+    requestDeveloperAccessMock(...args),
+}));
+
+vi.mock("../../lib/i18n", () => ({
+  t: (key: string, fallback?: string, vars?: Record<string, unknown>) => {
+    let text = fallback ?? key;
+    for (const [name, value] of Object.entries(vars ?? {})) {
+      text = text.replaceAll(`{{${name}}}`, String(value));
+    }
+    return text;
+  },
+}));
+
+const roots: Root[] = [];
+
+afterEach(() => {
+  for (const root of roots.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+  }
+  vi.clearAllMocks();
+  document.body.innerHTML = "";
+});
+
+beforeEach(() => {
+  authState = {
+    user: {
+      access_token: "access-token",
+      profile: {
+        role: "super_admin",
+        tenant_id: "tenant-1",
+        companyCode: "HANMAC",
+        name: "Dev Admin",
+        email: "dev@example.com",
+        phone: "010-0000-0000",
+      },
+    },
+  };
+
+  fetchClientsMock.mockResolvedValue({
+    items: [],
+    limit: 100,
+    offset: 0,
+  });
+  fetchMeMock.mockResolvedValue({
+    role: "super_admin",
+    name: "Dev Admin",
+    email: "dev@example.com",
+    phone: "010-0000-0000",
+  });
+  fetchDeveloperRequestStatusMock.mockResolvedValue({ status: "none" });
+  fetchMyTenantsMock.mockResolvedValue([
+    {
+      id: "tenant-1",
+      name: "Hanmac",
+      slug: "hanmac",
+      type: "COMPANY",
+      parentId: null,
+      description: "",
+      status: "active",
+      memberCount: 10,
+      createdAt: "2026-05-01T00:00:00Z",
+      updatedAt: "2026-05-01T00:00:00Z",
+    },
+  ]);
+});
+
+function makeClients(count: number) {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `client-${index + 1}`,
+    name: `App ${index + 1}`,
+    type: index % 2 === 0 ? "private" : "pkce",
+    status: index % 2 === 0 ? "active" : "inactive",
+    createdAt: `2026-05-${String(index + 1).padStart(2, "0")}T00:00:00Z`,
+    redirectUris: [],
+    scopes: [],
+    metadata: {},
+  }));
+}
+
+async function setInputValue(input: HTMLInputElement, value: string) {
+  const descriptor = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    "value",
+  );
+  descriptor?.set?.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function renderPage() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  roots.push(root);
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  await act(async () => {
+    root.render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+          <ClientsPage />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  });
+
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+  return container;
+}
+
+describe("ClientsPage", () => {
+  it("expands the list and applies search filters", async () => {
+    fetchClientsMock.mockResolvedValue({
+      items: makeClients(6),
+      limit: 100,
+      offset: 0,
+    });
+
+    const container = await renderPage();
+    expect(container.textContent).toContain("총 6개의 애플리케이션이 등록되어 있습니다.");
+    expect(container.textContent).toContain("App 6");
+    expect(container.textContent).toContain("App 2");
+    expect(container.textContent).not.toContain("App 1");
+
+    const moreButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "더보기",
+    );
+    expect(moreButton).toBeTruthy();
+
+    await act(async () => {
+      moreButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(container.textContent).toContain("App 6");
+    expect(container.textContent).toContain("접기");
+
+    const advancedButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "Advanced Filters",
+    );
+    expect(advancedButton).toBeTruthy();
+
+    await act(async () => {
+      advancedButton?.dispatchEvent(
+        new MouseEvent("click", { bubbles: true }),
+      );
+    });
+
+    const searchInput = Array.from(
+      container.querySelectorAll("input"),
+    ).find((input) =>
+      input.getAttribute("placeholder")?.includes("클라이언트 이름/ID로 검색"),
+    ) as HTMLInputElement | undefined;
+    expect(searchInput).toBeTruthy();
+
+    await act(async () => {
+      await setInputValue(searchInput!, "missing-client");
+    });
+
+    expect(container.textContent).toContain("조건에 맞는 연동 앱이 없습니다.");
+
+    const resetButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "초기화",
+    );
+    expect(resetButton).toBeTruthy();
+
+    await act(async () => {
+      resetButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    await act(async () => {
+      await setInputValue(searchInput!, "");
+    });
+
+    expect(container.textContent).toContain("App 1");
+  });
+
+  it("navigates to the developer request page from empty states", async () => {
+    authState = {
+      user: {
+        access_token: "access-token",
+        profile: {
+          role: "user",
+          tenant_id: "tenant-1",
+          companyCode: "HANMAC",
+          name: "Requester",
+          email: "requester@example.com",
+          phone: "010-1234-5678",
+        },
+      },
+    };
+    fetchClientsMock.mockResolvedValue({
+      items: [],
+      limit: 100,
+      offset: 0,
+    });
+    fetchDeveloperRequestStatusMock.mockResolvedValue({ status: "none" });
+    fetchMeMock.mockResolvedValue({
+      role: "user",
+      name: "Requester",
+      email: "requester@example.com",
+      phone: "010-1234-5678",
+    });
+
+    const container = await renderPage();
+    expect(container.textContent).toContain("개발자 등록 신청하기");
+
+    const requestButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "개발자 등록 신청하기",
+    );
+    expect(requestButton).toBeTruthy();
+
+    await act(async () => {
+      requestButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(navigateMock).toHaveBeenCalledWith("/developer-requests");
+  });
+});