16e791e044
8월 7일까지 워킹트리에만 남아 있던 미커밋 작업을 커밋한다. 여러 사본 폴더(worktree·clone)에 흩어져 있던 중간 스냅샷을 정리하기 전에 원본을 git 이력으로 고정하는 것이 목적이다. - contracts/routes/services: measurement, outcome_trajectory, rupture_repair, deliberate_practice, calibration_transfer, supervision_research, multimodal_alliance, continuous_improvement 계열 신규 모듈과 테스트 - infra/db/init: 07~16 마이그레이션(측정 기반~calibration transfer 실행) - apps/web: 세션 리뷰 카드·관리 화면·E2E 스펙 추가 - docs/ops: G0~G8 라이브 통합·배포·롤백 증거 문서와 evidence JSON/PNG - scripts: smoke·ledger·릴리스 에이전트·NAS 프리뷰 운영 스크립트 engine.public 로그 .bak과 apps/web/test-results 산출물은 커밋에서 제외했다.
374 lines
16 KiB
TypeScript
374 lines
16 KiB
TypeScript
import { promises as fs } from "node:fs";
|
|
import path from "node:path";
|
|
import { expect, test } from "@playwright/test";
|
|
|
|
const publicApiBase = process.env.E2E_PUBLIC_API_BASE ?? "https://api-vignette.chanpaca.net";
|
|
const SHOT_DIR = path.join(process.cwd(), "node_modules", ".tmp", "public-admin-visual");
|
|
|
|
interface AuthMeResponse {
|
|
email?: string;
|
|
role?: string;
|
|
admin_access?: boolean;
|
|
super_admin?: boolean;
|
|
}
|
|
|
|
async function browserFetchJson<T>(
|
|
page: import("@playwright/test").Page,
|
|
pathName: string,
|
|
) {
|
|
return page.evaluate(
|
|
async ({ apiBase, apiPath }) => {
|
|
const response = await fetch(`${apiBase}${apiPath}`, {
|
|
credentials: "include",
|
|
headers: { accept: "application/json" },
|
|
});
|
|
const text = await response.text();
|
|
let json: unknown = null;
|
|
try {
|
|
json = text ? JSON.parse(text) : null;
|
|
} catch {
|
|
json = null;
|
|
}
|
|
return { status: response.status, ok: response.ok, text, json };
|
|
},
|
|
{ apiBase: publicApiBase, apiPath: pathName },
|
|
) as Promise<{ status: number; ok: boolean; text: string; json: T | null }>;
|
|
}
|
|
|
|
test.describe("public admin visual @public-auth", () => {
|
|
test("renders the public admin home with visible operational content", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
if (!process.env.E2E_PUBLIC_STORAGE_STATE) {
|
|
throw new Error(
|
|
"Set E2E_PUBLIC_STORAGE_STATE to a storageState file captured after Google admin login.",
|
|
);
|
|
}
|
|
|
|
await fs.mkdir(SHOT_DIR, { recursive: true });
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
|
|
await page.goto("/admin", { waitUntil: "domcontentloaded" });
|
|
await page.waitForLoadState("networkidle", { timeout: 15_000 }).catch(() => undefined);
|
|
|
|
const me = await browserFetchJson<AuthMeResponse>(page, "/auth/me");
|
|
expect(me.status, me.text).toBe(200);
|
|
expect(
|
|
me.json?.role === "admin" || me.json?.admin_access === true || me.json?.super_admin === true,
|
|
JSON.stringify(me.json),
|
|
).toBeTruthy();
|
|
|
|
await expect(page).toHaveURL(/\/admin(?:$|[?#])/);
|
|
await expect(page.locator("[data-vignette-admin-root]")).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.locator(".vg-shell")).toBeVisible();
|
|
await expect(page.locator(".vg-nav").getByRole("link", { name: "운영 홈" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "현재 서비스 상태" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "AI 비용" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "가용성" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "운영 티켓" })).toBeVisible();
|
|
await expect(page.locator(".vgops-kpi b")).toHaveCount(4);
|
|
await expect(page.locator("#vignette-boot-diagnostic")).toHaveCount(0);
|
|
|
|
const visualReport = await page.evaluate(() => {
|
|
const adminRoot = document.querySelector<HTMLElement>("[data-vignette-admin-root]");
|
|
const main = document.querySelector<HTMLElement>("main");
|
|
const heading = Array.from(document.querySelectorAll<HTMLElement>("h1,h2,h3")).find(
|
|
(node) => node.textContent?.includes("현재 서비스 상태"),
|
|
);
|
|
const visibleNodes = Array.from(
|
|
document.querySelectorAll<HTMLElement>(
|
|
".vgops-root,.vgops-head,.vgops-kpi,.vgops-panel,.vgops-service,.vg-shell,.vg-nav,h1,h2,h3,p,a,button",
|
|
),
|
|
).filter((node) => {
|
|
const rect = node.getBoundingClientRect();
|
|
const style = getComputedStyle(node);
|
|
return (
|
|
rect.width > 4 &&
|
|
rect.height > 4 &&
|
|
style.display !== "none" &&
|
|
style.visibility !== "hidden" &&
|
|
style.opacity !== "0"
|
|
);
|
|
});
|
|
const rootRect = adminRoot?.getBoundingClientRect();
|
|
const mainRect = main?.getBoundingClientRect();
|
|
const headingRect = heading?.getBoundingClientRect();
|
|
return {
|
|
url: location.href,
|
|
bodyTextLength: document.body.innerText.trim().length,
|
|
visibleNodeCount: visibleNodes.length,
|
|
adminRootRect: rootRect
|
|
? { x: rootRect.x, y: rootRect.y, width: rootRect.width, height: rootRect.height }
|
|
: null,
|
|
mainRect: mainRect
|
|
? { x: mainRect.x, y: mainRect.y, width: mainRect.width, height: mainRect.height }
|
|
: null,
|
|
headingRect: headingRect
|
|
? { x: headingRect.x, y: headingRect.y, width: headingRect.width, height: headingRect.height }
|
|
: null,
|
|
horizontalOverflow:
|
|
document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
|
};
|
|
});
|
|
|
|
expect(visualReport.bodyTextLength, JSON.stringify(visualReport)).toBeGreaterThan(400);
|
|
expect(visualReport.visibleNodeCount, JSON.stringify(visualReport)).toBeGreaterThan(20);
|
|
expect(visualReport.adminRootRect?.width, JSON.stringify(visualReport)).toBeGreaterThan(900);
|
|
expect(visualReport.adminRootRect?.height, JSON.stringify(visualReport)).toBeGreaterThan(500);
|
|
expect(visualReport.mainRect?.width, JSON.stringify(visualReport)).toBeGreaterThan(800);
|
|
expect(visualReport.headingRect?.y, JSON.stringify(visualReport)).toBeGreaterThanOrEqual(0);
|
|
expect(visualReport.headingRect?.y, JSON.stringify(visualReport)).toBeLessThan(900);
|
|
expect(visualReport.horizontalOverflow, JSON.stringify(visualReport)).toBeLessThanOrEqual(1);
|
|
|
|
const shotPath = path.join(SHOT_DIR, `admin-home-${testInfo.project.name}.png`);
|
|
await page.screenshot({ path: shotPath, fullPage: true });
|
|
const shot = await fs.stat(shotPath);
|
|
expect(shot.size, `admin visual screenshot was too small: ${shotPath}`).toBeGreaterThan(
|
|
80_000,
|
|
);
|
|
});
|
|
|
|
test("shows the live Codex and Agy model catalogs with safe defaults", async ({ page }) => {
|
|
if (!process.env.E2E_PUBLIC_STORAGE_STATE) {
|
|
throw new Error(
|
|
"Set E2E_PUBLIC_STORAGE_STATE to a storageState file captured after Google admin login.",
|
|
);
|
|
}
|
|
|
|
const pageErrors: string[] = [];
|
|
const consoleErrors: string[] = [];
|
|
page.on("pageerror", (error) => pageErrors.push(error.message));
|
|
page.on("console", (message) => {
|
|
if (message.type() === "error") consoleErrors.push(message.text());
|
|
});
|
|
|
|
await page.goto("/admin/ai", { waitUntil: "domcontentloaded" });
|
|
await expect(page.locator('[data-testid="admin-ai-page"]')).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByText("토큰 계량 커버리지")).toBeVisible();
|
|
await expect(page.locator(".aic-table")).toContainText("claude-opus-4-8");
|
|
await expect(page.locator(".aic-table")).toContainText("SDK 추정");
|
|
const claudeRow = page.locator(".aic-table tbody tr").filter({ hasText: "claude-opus-4-8" });
|
|
await expect(claudeRow.locator(".aic-token-cell").first()).not.toHaveText("미계량");
|
|
await expect(claudeRow.locator(".aic-token-cell small").first()).toContainText(/\d+\/\d+회/);
|
|
await expect(page.getByText(/원장 호출은 과거 토큰 미수집 건/)).toBeVisible();
|
|
|
|
const provider = page.getByLabel("AI 엔진 공급자");
|
|
const model = page.getByLabel("AI 기본 모델");
|
|
const effort = page.getByLabel("AI 추론 강도");
|
|
await expect(provider.locator("option")).toHaveCount(6);
|
|
|
|
await provider.selectOption("codex_cli");
|
|
await expect(model).toBeEnabled({ timeout: 30_000 });
|
|
await expect(model).toHaveValue("gpt-5.6-terra");
|
|
await expect(effort).toHaveValue("medium");
|
|
await expect(page.getByText("7개 모델 확인됨")).toBeVisible();
|
|
|
|
await provider.selectOption("agy_cli");
|
|
await expect(model).toBeEnabled({ timeout: 30_000 });
|
|
await expect(model).toHaveValue("gemini-3.6-flash-high");
|
|
await expect(effort).toHaveValue("high");
|
|
await expect(page.getByText("11개 모델 확인됨")).toBeVisible();
|
|
|
|
expect(pageErrors, JSON.stringify(pageErrors)).toEqual([]);
|
|
expect(consoleErrors, JSON.stringify(consoleErrors)).toEqual([]);
|
|
});
|
|
|
|
test("keeps the public admin visible with EasyList cosmetic filters active", async ({
|
|
page,
|
|
}) => {
|
|
if (!process.env.E2E_PUBLIC_STORAGE_STATE) {
|
|
throw new Error(
|
|
"Set E2E_PUBLIC_STORAGE_STATE to a storageState file captured after Google admin login.",
|
|
);
|
|
}
|
|
|
|
const pageErrors: string[] = [];
|
|
const consoleErrors: string[] = [];
|
|
page.on("pageerror", (error) => pageErrors.push(error.message));
|
|
page.on("console", (message) => {
|
|
if (message.type() === "error") consoleErrors.push(message.text());
|
|
});
|
|
|
|
await page.addInitScript(() => {
|
|
// 모든 공개 관리자 navigation의 첫 paint부터 실제 EasyList 충돌 규칙을 적용한다.
|
|
const style = document.createElement("style");
|
|
style.dataset.testEasylist = "true";
|
|
style.textContent = ".ad-root,.ad-section{display:none!important}";
|
|
const install = () => {
|
|
const target = document.head ?? document.documentElement;
|
|
if (!target) return false;
|
|
target.append(style);
|
|
return true;
|
|
};
|
|
if (!install()) {
|
|
const observer = new MutationObserver(() => {
|
|
if (install()) observer.disconnect();
|
|
});
|
|
observer.observe(document, { childList: true, subtree: true });
|
|
}
|
|
});
|
|
|
|
const sections = [
|
|
{ path: "/admin", heading: "현재 서비스 상태", root: "[data-vignette-admin-root]" },
|
|
{ path: "/admin/ai", heading: "AI 운영과 DB 계량", root: "[data-testid='admin-ai-page']" },
|
|
{ path: "/admin/users", heading: "가입 승인과 권한 관리", root: "[data-vignette-admin-root]" },
|
|
{ path: "/admin/access", heading: "역할, 그룹, 접근 범위", root: "[data-vignette-admin-root]" },
|
|
{ path: "/admin/tickets", heading: "사용자 문제 큐", root: "[data-vignette-admin-root]" },
|
|
] as const;
|
|
|
|
for (const section of sections) {
|
|
await page.goto(section.path, { waitUntil: "domcontentloaded" });
|
|
await expect(page.locator(section.root)).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByRole("heading", { name: section.heading })).toBeVisible();
|
|
await expect(page.locator('[class^="ad-"],[class*=" ad-"]')).toHaveCount(0);
|
|
}
|
|
|
|
await page.waitForTimeout(4_000);
|
|
await expect(page.locator("#vignette-boot-diagnostic")).toHaveCount(0);
|
|
const adminRoot = page.locator("[data-vignette-admin-root]");
|
|
await expect(adminRoot).toBeVisible();
|
|
|
|
const visibility = await adminRoot.evaluate((root) => {
|
|
const rect = root.getBoundingClientRect();
|
|
const style = getComputedStyle(root);
|
|
return {
|
|
width: rect.width,
|
|
height: rect.height,
|
|
display: style.display,
|
|
visibility: style.visibility,
|
|
opacity: style.opacity,
|
|
};
|
|
});
|
|
expect(visibility.width, JSON.stringify(visibility)).toBeGreaterThan(900);
|
|
expect(visibility.height, JSON.stringify(visibility)).toBeGreaterThan(500);
|
|
expect(visibility.display, JSON.stringify(visibility)).not.toBe("none");
|
|
expect(visibility.visibility, JSON.stringify(visibility)).not.toBe("hidden");
|
|
expect(visibility.opacity, JSON.stringify(visibility)).not.toBe("0");
|
|
expect(pageErrors, JSON.stringify(pageErrors)).toEqual([]);
|
|
expect(consoleErrors, JSON.stringify(consoleErrors)).toEqual([]);
|
|
});
|
|
|
|
test("renders every public admin section without a silent blank pane", async ({ page }) => {
|
|
if (!process.env.E2E_PUBLIC_STORAGE_STATE) {
|
|
throw new Error(
|
|
"Set E2E_PUBLIC_STORAGE_STATE to a storageState file captured after Google admin login.",
|
|
);
|
|
}
|
|
|
|
const pageErrors: string[] = [];
|
|
const consoleErrors: string[] = [];
|
|
page.on("pageerror", (error) => pageErrors.push(error.message));
|
|
page.on("console", (message) => {
|
|
if (message.type() === "error") consoleErrors.push(message.text());
|
|
});
|
|
|
|
const sections = [
|
|
{ path: "/admin", heading: "현재 서비스 상태", root: "[data-vignette-admin-root]" },
|
|
{ path: "/admin/ai", heading: "AI 운영과 DB 계량", root: "[data-testid='admin-ai-page']" },
|
|
{ path: "/admin/users", heading: "가입 승인과 권한 관리", root: "[data-vignette-admin-root]" },
|
|
{ path: "/admin/access", heading: "역할, 그룹, 접근 범위", root: "[data-vignette-admin-root]" },
|
|
{ path: "/admin/tickets", heading: "사용자 문제 큐", root: "[data-vignette-admin-root]" },
|
|
] as const;
|
|
|
|
for (const section of sections) {
|
|
await page.goto(section.path, { waitUntil: "domcontentloaded" });
|
|
await expect(page.locator(section.root)).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByRole("heading", { name: section.heading })).toBeVisible();
|
|
await expect(page.locator(".vgops-diagnostic")).toHaveCount(0);
|
|
|
|
const report = await page.evaluate((rootSelector) => {
|
|
const root = document.querySelector<HTMLElement>(rootSelector);
|
|
const main = document.querySelector<HTMLElement>(".vg-main");
|
|
const rect = root?.getBoundingClientRect();
|
|
const mainRect = main?.getBoundingClientRect();
|
|
const visibleNodes = root
|
|
? Array.from(root.querySelectorAll<HTMLElement>("h1,h2,p,button,input,select,article,section"))
|
|
.filter((node) => {
|
|
const nodeRect = node.getBoundingClientRect();
|
|
const style = getComputedStyle(node);
|
|
return (
|
|
nodeRect.width > 1 &&
|
|
nodeRect.height > 1 &&
|
|
nodeRect.bottom > (mainRect?.top ?? 0) &&
|
|
nodeRect.top < (mainRect?.bottom ?? window.innerHeight) &&
|
|
style.display !== "none" &&
|
|
style.visibility !== "hidden" &&
|
|
style.opacity !== "0"
|
|
);
|
|
}).length
|
|
: 0;
|
|
return {
|
|
textLength: root?.innerText.trim().length ?? 0,
|
|
visibleNodes,
|
|
width: rect?.width ?? 0,
|
|
height: rect?.height ?? 0,
|
|
scrollY: window.scrollY,
|
|
mainScrollTop: main?.scrollTop ?? -1,
|
|
};
|
|
}, section.root);
|
|
|
|
expect(report.textLength, JSON.stringify({ section, report })).toBeGreaterThan(120);
|
|
expect(report.visibleNodes, JSON.stringify({ section, report })).toBeGreaterThan(5);
|
|
expect(report.width, JSON.stringify({ section, report })).toBeGreaterThan(300);
|
|
expect(report.height, JSON.stringify({ section, report })).toBeGreaterThan(120);
|
|
expect(report.scrollY, JSON.stringify({ section, report })).toBe(0);
|
|
expect(report.mainScrollTop, JSON.stringify({ section, report })).toBe(0);
|
|
}
|
|
|
|
expect(pageErrors, JSON.stringify(pageErrors)).toEqual([]);
|
|
expect(consoleErrors, JSON.stringify(consoleErrors)).toEqual([]);
|
|
});
|
|
|
|
test("keeps the operating console visible from the primary learner workspace", async ({ page }) => {
|
|
if (!process.env.E2E_PUBLIC_STORAGE_STATE) {
|
|
throw new Error(
|
|
"Set E2E_PUBLIC_STORAGE_STATE to a storageState file captured after Google admin login.",
|
|
);
|
|
}
|
|
|
|
await page.goto("/learn", { waitUntil: "domcontentloaded" });
|
|
const adminEntry = page.locator(".vg-nav").getByRole("link", { name: "운영 콘솔" });
|
|
await expect(adminEntry).toBeVisible({ timeout: 15_000 });
|
|
|
|
await adminEntry.click();
|
|
await expect(page).toHaveURL(/\/admin(?:$|[?#])/);
|
|
await expect(page.getByRole("heading", { name: "현재 서비스 상태" })).toBeVisible();
|
|
});
|
|
|
|
test("returns a restored admin tab to visible content after pageshow", async ({ page }) => {
|
|
if (!process.env.E2E_PUBLIC_STORAGE_STATE) {
|
|
throw new Error(
|
|
"Set E2E_PUBLIC_STORAGE_STATE to a storageState file captured after Google admin login.",
|
|
);
|
|
}
|
|
|
|
await page.goto("/admin", { waitUntil: "domcontentloaded" });
|
|
await expect(page.getByRole("heading", { name: "현재 서비스 상태" })).toBeVisible();
|
|
await expect(page.locator("[data-vignette-admin-root]")).toBeVisible();
|
|
|
|
const beforeRestore = await page.evaluate(() => {
|
|
const main = document.querySelector<HTMLElement>(".vg-main");
|
|
const root = document.querySelector<HTMLElement>("[data-vignette-admin-root]");
|
|
if (!main || !root) throw new Error("admin scroll container missing");
|
|
root.style.minHeight = "2200px";
|
|
main.scrollTop = 900;
|
|
return main.scrollTop;
|
|
});
|
|
expect(beforeRestore).toBeGreaterThan(0);
|
|
|
|
await page.evaluate(() => {
|
|
window.dispatchEvent(new PageTransitionEvent("pageshow", { persisted: true }));
|
|
});
|
|
|
|
await expect
|
|
.poll(
|
|
() =>
|
|
page.evaluate(
|
|
() => document.querySelector<HTMLElement>(".vg-main")?.scrollTop ?? -1,
|
|
),
|
|
{ timeout: 5_000 },
|
|
)
|
|
.toBe(0);
|
|
await expect(page.getByRole("heading", { name: "현재 서비스 상태" })).toBeInViewport();
|
|
});
|
|
});
|