refresh_token 통합 테스트 실행 경로 정리

devfront/package.json

@@ -12,6 +12,8 @@
     "lint": "biome check .",
     "preview": "vite preview",
     "test": "playwright test",
+    "test:ci": "pnpm test && pnpm run test:refresh-token",
+    "test:refresh-token": "playwright test --config playwright.refresh-token.config.ts",
     "test:coverage": "vitest run --coverage --bail 1",
     "test:unit": "vitest run --bail 1",
     "test:roles": "playwright test tests/devfront-role-switch-report.spec.ts",

devfront/playwright.config.ts

@@ -28,6 +28,7 @@ const baseURL = process.env.PLAYWRIGHT_BASE_URL || "http://127.0.0.1:4174";
  */
 export default defineConfig({
   testDir: "./tests",
+  testIgnore: ["**/devfront-refresh-token.spec.ts"],
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

devfront/playwright.refresh-token.config.ts

@@ -0,0 +1,52 @@
+import { createRequire } from "node:module";
+import { defineConfig, devices } from "@playwright/test";
+
+const require = createRequire(import.meta.url);
+const { shouldIncludeWebKit } =
+  require("../scripts/playwrightHostDeps.cjs") as {
+    shouldIncludeWebKit: () => boolean;
+  };
+
+const configuredWorkers = process.env.PLAYWRIGHT_WORKERS
+  ? Number.parseInt(process.env.PLAYWRIGHT_WORKERS, 10)
+  : 1;
+const baseURL = process.env.PLAYWRIGHT_BASE_URL || "http://127.0.0.1:4175";
+const skipWebServer =
+  process.env.PLAYWRIGHT_SKIP_WEBSERVER === "1" ||
+  process.env.PLAYWRIGHT_SKIP_WEBSERVER === "true";
+
+export default defineConfig({
+  testDir: "./tests",
+  testMatch: ["**/devfront-refresh-token.spec.ts"],
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: configuredWorkers,
+  reporter: [["html", { open: "never" }], ["list"]],
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    ...(shouldIncludeWebKit()
+      ? [
+          {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+          },
+        ]
+      : []),
+  ],
+  webServer: skipWebServer
+    ? undefined
+    : {
+        command:
+          "VITE_OIDC_AUTHORITY=http://localhost:5000/oidc ./node_modules/.bin/vite build && ./node_modules/.bin/vite preview --host 127.0.0.1 --strictPort --port 4175",
+        url: baseURL,
+        reuseExistingServer: false,
+      },
+});

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

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { act } from "react";
+import { act, useEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { MemoryRouter, Route, Routes, useNavigate } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import AppLayout from "./AppLayout";
 
@@ -49,6 +49,24 @@ vi.mock("../../lib/i18n", () => ({
 
 const roots: Root[] = [];
 
+type TestWindow = Window & {
+  __baronNavigate?: (to: string) => void;
+};
+
+function RouteProbe() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (window as TestWindow).__baronNavigate = navigate;
+
+    return () => {
+      delete (window as TestWindow).__baronNavigate;
+    };
+  }, [navigate]);
+
+  return <div>Client outlet</div>;
+}
+
 beforeEach(() => {
   authState.isAuthenticated = true;
   authState.isLoading = false;
@@ -89,7 +107,7 @@ async function renderLayout(initialEntry = "/clients") {
         <MemoryRouter initialEntries={[initialEntry]}>
           <Routes>
             <Route path="/" element={<AppLayout />}>
-              <Route path="clients" element={<div>Client outlet</div>} />
+              <Route path="clients" element={<RouteProbe />} />
               <Route path="profile" element={<div>Profile outlet</div>} />
             </Route>
           </Routes>
@@ -181,4 +199,15 @@ describe("devfront AppLayout", () => {
 
     expect(authState.signinSilent).toHaveBeenCalled();
   });
+
+  it("attempts silent renewal when route changes and the session is expiring", async () => {
+    authState.user.expires_at = Math.floor(Date.now() / 1000) + 60;
+    await renderLayout();
+
+    await act(async () => {
+      (window as TestWindow).__baronNavigate?.("/profile");
+    });
+
+    expect(authState.signinSilent).toHaveBeenCalled();
+  });
 });

devfront/tests/devfront-refresh-token.spec.ts

@@ -0,0 +1,99 @@
+import { expect, test } from "@playwright/test";
+import {
+  getPersistedOidcUser,
+  installDevApiMock,
+  seedAuth,
+} from "./helpers/devfront-fixtures";
+import { captureEvidence } from "./helpers/evidence";
+
+test.describe("DevFront refresh token renewal", () => {
+  test.afterEach(async ({ page }, testInfo) => {
+    if (testInfo.status === "passed") {
+      await captureEvidence(page, testInfo, testInfo.title);
+    }
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await seedAuth(page, {
+      expiresInSeconds: 60,
+      refreshToken: "playwright-refresh-token",
+      state: { returnTo: "/clients" },
+    });
+
+    await installDevApiMock(page, {
+      clients: [],
+      consents: [],
+      auditLogs: [],
+      users: [],
+      tenants: [],
+    });
+  });
+
+  test("exchanges the refresh token for a new access token on silent renewal", async ({
+    page,
+  }) => {
+    let tokenRequestBody = "";
+    let authorizeRequested = false;
+
+    await page.route("**/oidc/token", async (route) => {
+      const request = route.request();
+      tokenRequestBody = request.postData() ?? "";
+
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        headers: { "Access-Control-Allow-Origin": "*" },
+        body: JSON.stringify({
+          access_token: "rotated-access-token",
+          expires_in: 3600,
+          refresh_token: "rotated-refresh-token",
+          scope: "openid offline_access profile email",
+          session_state: "rotated-session-state",
+          token_type: "Bearer",
+        }),
+      });
+    });
+
+    await page.route("**/oidc/auth**", async (route) => {
+      authorizeRequested = true;
+      await route.fulfill({
+        status: 500,
+        body: "unexpected authorize request",
+      });
+    });
+
+    await page.goto("/clients");
+
+    await expect(page.getByRole("link", { name: "Clients" })).toBeVisible();
+
+    const tokenRequestPromise = page.waitForRequest(
+      (request) =>
+        request.url().endsWith("/oidc/token") && request.method() === "POST",
+    );
+
+    await page.getByRole("button", { name: "Open account menu" }).click();
+    await page.getByRole("menuitem", { name: "My Profile" }).click();
+
+    const tokenRequest = await tokenRequestPromise;
+    const tokenParams = new URLSearchParams(tokenRequestBody);
+
+    expect(tokenParams.get("grant_type")).toBe("refresh_token");
+    expect(tokenParams.get("refresh_token")).toBe("playwright-refresh-token");
+
+    await expect(page.getByRole("heading", { name: "내 정보" })).toBeVisible();
+    await expect
+      .poll(async () => {
+        const storedUser = await getPersistedOidcUser(page);
+        return storedUser?.access_token;
+      })
+      .toBe("rotated-access-token");
+    await expect
+      .poll(async () => {
+        const storedUser = await getPersistedOidcUser(page);
+        return storedUser?.refresh_token;
+      })
+      .toBe("rotated-refresh-token");
+    expect(tokenRequest.url()).toContain("/oidc/token");
+    expect(authorizeRequested).toBe(false);
+  });
+});