test: raise frontend coverage baselines

orgfront/src/components/layout/AppLayout.test.tsx

@@ -0,0 +1,166 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import AppLayout from "./AppLayout";
+
+const authState = {
+  isAuthenticated: true,
+  isLoading: false,
+  activeNavigator: undefined as string | undefined,
+  error: null as Error | null,
+  user: {
+    access_token: "access-token",
+    expires_at: Math.floor(Date.now() / 1000) + 120,
+    profile: {
+      sub: "user-1",
+      name: "Org Admin",
+      email: "org@example.com",
+      role: "super_admin",
+    },
+  },
+  signinSilent: vi.fn(),
+  removeUser: vi.fn(),
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+vi.mock("../../features/auth/authApi", () => ({
+  fetchMe: vi.fn(async () => ({
+    id: "user-1",
+    name: "Fetched Org Admin",
+    email: "fetched@example.com",
+    role: "super_admin",
+  })),
+}));
+
+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[] = [];
+
+beforeEach(() => {
+  authState.isAuthenticated = true;
+  authState.isLoading = false;
+  authState.activeNavigator = undefined;
+  authState.error = null;
+  authState.user.expires_at = Math.floor(Date.now() / 1000) + 120;
+  authState.signinSilent.mockReset();
+  authState.signinSilent.mockResolvedValue(undefined);
+  authState.removeUser.mockReset();
+  window.localStorage.clear();
+  vi.spyOn(window, "confirm").mockReturnValue(true);
+});
+
+afterEach(() => {
+  for (const root of roots.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+  }
+  vi.restoreAllMocks();
+});
+
+async function renderLayout(initialEntry = "/clients") {
+  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 initialEntries={[initialEntry]}>
+          <Routes>
+            <Route path="/" element={<AppLayout />}>
+              <Route path="clients" element={<div>Client outlet</div>} />
+              <Route path="profile" element={<div>Profile outlet</div>} />
+            </Route>
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  });
+
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+  return container;
+}
+
+describe("orgfront AppLayout", () => {
+  it("renders shell navigation, profile summary, and outlet content", async () => {
+    const container = await renderLayout();
+
+    expect(container.textContent).toContain("Developer Console");
+    expect(container.textContent).toContain("Clients");
+    expect(container.textContent).toContain("Client outlet");
+    expect(container.textContent).toContain("Fetched Org Admin");
+    expect(document.documentElement.classList.contains("light")).toBe(true);
+  });
+
+  it("toggles profile menu, navigates to profile, toggles theme, and logs out", async () => {
+    const container = await renderLayout();
+
+    const themeButton = container.querySelector(
+      'button[aria-label="테마 전환"]',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      themeButton.click();
+    });
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    const profileButton = container.querySelector(
+      'button[aria-label="계정 메뉴 열기"]',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      profileButton.click();
+    });
+    expect(container.textContent).toContain("Account");
+
+    const profileMenuItem = Array.from(
+      container.querySelectorAll('button[role="menuitem"]'),
+    ).find((button) => button.textContent?.includes("내 정보"));
+    await act(async () => {
+      (profileMenuItem as HTMLButtonElement).click();
+    });
+    expect(container.textContent).toContain("Profile outlet");
+
+    const logoutButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Logout"),
+    );
+    await act(async () => {
+      (logoutButton as HTMLButtonElement).click();
+    });
+    expect(window.confirm).toHaveBeenCalled();
+    expect(authState.removeUser).toHaveBeenCalled();
+  });
+
+  it("attempts silent renewal after user action when the session is expiring", async () => {
+    authState.user.expires_at = Math.floor(Date.now() / 1000) + 60;
+    await renderLayout();
+
+    await act(async () => {
+      window.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
+    });
+
+    expect(authState.signinSilent).toHaveBeenCalled();
+  });
+});

orgfront/src/components/ui/basic.test.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Badge } from "./badge";
+import { Input } from "./input";
+import { Label } from "./label";
+import { Separator } from "./separator";
+import { Switch } from "./switch";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+import { Textarea } from "./textarea";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement | null = null;
+
+const render = async (element: React.ReactElement) => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(element);
+  });
+  return root;
+};
+
+afterEach(() => {
+  if (container) {
+    container.remove();
+    container = null;
+  }
+});
+
+describe("orgfront UI wrappers", () => {
+  it("renders form, badge, avatar, switch, separator, and table wrappers", async () => {
+    const root = await render(
+      <div>
+        <Badge className="custom-badge" variant="secondary">
+          Active
+        </Badge>
+        <Avatar className="custom-avatar">
+          <AvatarImage alt="Org user" src="/avatar.png" />
+          <AvatarFallback>OU</AvatarFallback>
+        </Avatar>
+        <Label className="custom-label" htmlFor="name">
+          Name
+        </Label>
+        <Input id="name" className="custom-input" defaultValue="Org User" />
+        <Textarea className="custom-textarea" defaultValue="Memo" />
+        <Switch className="custom-switch" defaultChecked />
+        <Separator className="custom-separator" />
+        <Table className="custom-table">
+          <TableCaption>Members</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>Org User</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell>Total</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>,
+    );
+
+    expect(container?.textContent).toContain("Active");
+    expect(container?.textContent).toContain("OU");
+    expect(container?.querySelector(".custom-input")).not.toBeNull();
+    expect(container?.querySelector(".custom-switch")).not.toBeNull();
+    expect(container?.querySelector(".custom-separator")).not.toBeNull();
+    expect(container?.textContent).toContain("Members");
+    expect(container?.textContent).toContain("Total");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});