845 lines
35 KiB
TypeScript
845 lines
35 KiB
TypeScript
import { promises as fs } from "node:fs";
|
|
import path from "node:path";
|
|
import { expect, test, type Page } from "@playwright/test";
|
|
import {
|
|
EMPTY_REVIEW_SESSION_ID,
|
|
FILLED_REVIEW_SESSION_ID,
|
|
routeEmptySessionReview,
|
|
routeFilledSessionReview,
|
|
routePrepostMeasures,
|
|
} from "./session-review-fixture";
|
|
import {
|
|
completeOnboarding,
|
|
expectNoHorizontalOverflow,
|
|
fetchAvailablePersona,
|
|
signInAsLearner,
|
|
signInAsTeacher,
|
|
} from "./support";
|
|
|
|
/**
|
|
* Strict visual layout gate.
|
|
*
|
|
* The layout-redesign handoff (docs/archive/ops/layout-redesign-handoff-2026-06-26.md)
|
|
* required a human-style visual acceptance pass across the redesigned screens at
|
|
* the suggested breakpoints. This spec hardens that pass into an automated gate:
|
|
* every redesigned screen is rendered at every required width, asserted free of
|
|
* horizontal overflow and clipped primary controls, and captured as a full-page
|
|
* screenshot artifact for review. Any single failure fails the whole gate.
|
|
*/
|
|
|
|
const GATE_WIDTHS = [
|
|
{ width: 390, height: 844, label: "390-mobile" },
|
|
{ width: 720, height: 900, label: "720-phablet" },
|
|
{ width: 861, height: 900, label: "861-tablet-min" },
|
|
{ width: 900, height: 900, label: "900-tablet" },
|
|
{ width: 1024, height: 768, label: "1024-tablet-land" },
|
|
{ width: 1280, height: 800, label: "1280-laptop" },
|
|
{ width: 1440, height: 900, label: "1440-desktop" },
|
|
] as const;
|
|
|
|
const SHOT_DIR = path.join(process.cwd(), "node_modules", ".tmp", "layout-gate");
|
|
const TEACHER_REVIEW_SESSION_ID = "teacher-review-visual";
|
|
|
|
function teacherAnalysisFixture() {
|
|
const learnerId = "visual-analysis-learner";
|
|
const sessions = Array.from({ length: 5 }, (_unused, index) => {
|
|
const sessionNo = index + 1;
|
|
return {
|
|
session_id: `${learnerId}-session-${sessionNo}`,
|
|
learner_id: learnerId,
|
|
learner_label: "분석 검증 학습자",
|
|
persona_code: sessionNo % 2 === 0 ? "P2" : "P1",
|
|
persona_name: sessionNo % 2 === 0 ? "민재" : "서연",
|
|
session_no: sessionNo,
|
|
status: "ended",
|
|
stage: sessionNo >= 4 ? "개입" : "탐색",
|
|
turn_count: 8 + sessionNo,
|
|
learner_turn_count: 4 + sessionNo,
|
|
client_turn_count: 4,
|
|
started_at: `2026-06-${String(10 + sessionNo).padStart(2, "0")}T09:00:00Z`,
|
|
ended_at: `2026-06-${String(10 + sessionNo).padStart(2, "0")}T09:30:00Z`,
|
|
review_status: sessionNo === 3 ? "closed" : "pending",
|
|
review_note: null,
|
|
reviewed_at: sessionNo === 3 ? "2026-06-13T10:00:00Z" : null,
|
|
};
|
|
});
|
|
const points = sessions.map((session) => ({
|
|
session_id: session.session_id,
|
|
session_no: session.session_no,
|
|
persona_code: session.persona_code,
|
|
stage: session.stage,
|
|
started_at: session.started_at,
|
|
ended_at: session.ended_at,
|
|
score: session.session_no >= 4 ? 0.88 : 0.52,
|
|
rapport: Math.min(0.8, session.session_no * 0.12),
|
|
technique_count: session.session_no + 1,
|
|
watch_count: session.session_no < 4 ? 1 : 0,
|
|
}));
|
|
const summary = {
|
|
learner_id: learnerId,
|
|
learner_label: "분석 검증 학습자",
|
|
sessions: sessions.length,
|
|
ended_sessions: sessions.length,
|
|
latest_at: sessions[sessions.length - 1].ended_at ?? "",
|
|
first_score: points[0].score,
|
|
latest_score: points[points.length - 1].score,
|
|
score_delta: (points[points.length - 1].score ?? 0) - (points[0].score ?? 0),
|
|
avg_score: 0.72,
|
|
avg_rapport: 0.44,
|
|
trend: "up",
|
|
top_techniques: ["reflection", "summary"],
|
|
points,
|
|
};
|
|
|
|
return {
|
|
dashboard: {
|
|
source: "database",
|
|
cohort_label: "Visual cohort",
|
|
total_learners: 1,
|
|
active_sessions: 0,
|
|
ended_sessions: sessions.length,
|
|
learner_growth: [{ ...summary, points: points.slice(-4) }],
|
|
safety_alerts: [],
|
|
pending_reviews: [],
|
|
recent_sessions: sessions.slice(-2),
|
|
message: "학생 분석 시각 검증 fixture.",
|
|
},
|
|
analysis: {
|
|
source: "database",
|
|
learner_id: learnerId,
|
|
learner_label: "분석 검증 학습자",
|
|
total_sessions: sessions.length,
|
|
ended_sessions: sessions.length,
|
|
active_sessions: 0,
|
|
pending_reviews: 2,
|
|
summary,
|
|
points,
|
|
stage_breakdown: [
|
|
{ stage: "라포", sessions: 0, turns: 0 },
|
|
{ stage: "탐색", sessions: 3, turns: 31 },
|
|
{ stage: "개입", sessions: 2, turns: 22 },
|
|
{ stage: "정리", sessions: 0, turns: 0 },
|
|
],
|
|
sessions,
|
|
message: "분석 검증 학습자 전체 회기 5건",
|
|
},
|
|
};
|
|
}
|
|
|
|
async function ensureShotDir() {
|
|
await fs.mkdir(SHOT_DIR, { recursive: true });
|
|
}
|
|
|
|
interface ClipReport {
|
|
viewport: { width: number; height: number };
|
|
horizontalOverflow: number;
|
|
offenders: Array<{
|
|
tag: string;
|
|
role: string;
|
|
className: string;
|
|
text: string;
|
|
reason: string;
|
|
left: number;
|
|
right: number;
|
|
}>;
|
|
}
|
|
|
|
/**
|
|
* Scans every visible interactive control and prominent text container for
|
|
* either (a) extending beyond the viewport horizontally, or (b) clipping its own
|
|
* content (scrollWidth/scrollHeight exceeding the client box) — the two failure
|
|
* modes the redesign was meant to eliminate.
|
|
*/
|
|
async function auditClipping(page: Page): Promise<ClipReport> {
|
|
return page.evaluate(() => {
|
|
const doc = document.documentElement;
|
|
const viewport = { width: doc.clientWidth, height: window.innerHeight };
|
|
const selector = [
|
|
"button",
|
|
"a[href]",
|
|
"input",
|
|
"select",
|
|
"textarea",
|
|
"[role='tab']",
|
|
"[role='button']",
|
|
"[role='option']",
|
|
"h1",
|
|
"h2",
|
|
"h3",
|
|
".vg-btn",
|
|
].join(",");
|
|
|
|
// Walks ancestors to find the nearest box that clips overflow. Returns the
|
|
// clipping rect when that ancestor is NOT scrollable (i.e. content cut off,
|
|
// not reachable by scrolling). A scrollable carousel (overflow auto/scroll)
|
|
// legitimately holds off-screen children, so it is treated as non-clipping.
|
|
// X-axis only: offender detection compares horizontal edges, so only the
|
|
// horizontal overflow behaviour of ancestors matters. A horizontal carousel
|
|
// (overflow-x auto/scroll) holds reachable off-screen children and is fine;
|
|
// overflow-x hidden genuinely cuts content off.
|
|
function nearestHardClip(el: HTMLElement): DOMRect | null {
|
|
let node: HTMLElement | null = el.parentElement;
|
|
while (node && node !== document.body && node !== document.documentElement) {
|
|
const ox = window.getComputedStyle(node).overflowX;
|
|
if (ox === "auto" || ox === "scroll") return null; // reachable by scroll
|
|
if (ox === "hidden" || ox === "clip") return node.getBoundingClientRect();
|
|
node = node.parentElement;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
const offenders: ClipReport["offenders"] = [];
|
|
const nodes = Array.from(document.querySelectorAll<HTMLElement>(selector));
|
|
for (const el of nodes) {
|
|
const rect = el.getBoundingClientRect();
|
|
const style = window.getComputedStyle(el);
|
|
const visible =
|
|
style.display !== "none" &&
|
|
style.visibility !== "hidden" &&
|
|
Number(style.opacity) !== 0 &&
|
|
rect.width > 0 &&
|
|
rect.height > 0;
|
|
if (!visible) continue;
|
|
|
|
// Clipped by a hard (non-scrollable) overflow ancestor: content is cut off.
|
|
const clipRect = nearestHardClip(el);
|
|
const clippedByAncestor =
|
|
!!clipRect && (rect.right > clipRect.right + 1 || rect.left < clipRect.left - 1);
|
|
// Content clipping: the element cannot show its own text/children — but
|
|
// intentional truncation affordances (ellipsis, -webkit-line-clamp) are
|
|
// design choices the redesign uses for dense data, not defects.
|
|
const clipsX = style.overflowX === "hidden" || style.overflowX === "clip";
|
|
const clipsY = style.overflowY === "hidden" || style.overflowY === "clip";
|
|
const lineClamp =
|
|
style.getPropertyValue("-webkit-line-clamp") || (style as unknown as { webkitLineClamp?: string }).webkitLineClamp || "none";
|
|
const hasLineClamp = lineClamp !== "none" && lineClamp !== "" && lineClamp !== "0";
|
|
const hasEllipsis = style.textOverflow === "ellipsis";
|
|
// 폼 컨트롤(input/textarea/select)은 자기 값을 *설계상* 스크롤한다(커서/키보드로 전부
|
|
// 도달 가능). 박스보다 긴 값은 잘린 결함이 아니라 정상 스크롤 UX → ellipsis/line-clamp
|
|
// 와 같은 의도된 어포던스로 보고 text-clip 판정에서 제외(clipped-by-ancestor·가로 overflow는 유지).
|
|
const tagName = el.tagName.toLowerCase();
|
|
const isFormControl =
|
|
tagName === "input" || tagName === "textarea" || tagName === "select";
|
|
const textClippedX =
|
|
clipsX && !hasEllipsis && !isFormControl && Math.ceil(el.scrollWidth - el.clientWidth) > 1;
|
|
const textClippedY =
|
|
clipsY && !hasLineClamp && !isFormControl && Math.ceil(el.scrollHeight - el.clientHeight) > 1;
|
|
|
|
if (clippedByAncestor || textClippedX || textClippedY) {
|
|
const reasons: string[] = [];
|
|
if (clippedByAncestor) reasons.push("clipped-by-ancestor");
|
|
if (textClippedX) reasons.push("text-clipped-x");
|
|
if (textClippedY) reasons.push("text-clipped-y");
|
|
offenders.push({
|
|
tag: el.tagName.toLowerCase(),
|
|
role: el.getAttribute("role") ?? "",
|
|
className: String(el.className || "").slice(0, 80),
|
|
text: (el.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 60),
|
|
reason: reasons.join(","),
|
|
left: Math.floor(rect.left),
|
|
right: Math.ceil(rect.right),
|
|
});
|
|
}
|
|
if (offenders.length >= 16) break;
|
|
}
|
|
|
|
return {
|
|
viewport,
|
|
horizontalOverflow: Math.ceil(doc.scrollWidth - doc.clientWidth),
|
|
offenders,
|
|
};
|
|
});
|
|
}
|
|
|
|
async function gateScreen(
|
|
page: Page,
|
|
screen: string,
|
|
prepareReady: () => Promise<void>,
|
|
) {
|
|
for (const vp of GATE_WIDTHS) {
|
|
await page.setViewportSize({ width: vp.width, height: vp.height });
|
|
await page.evaluate(() => new Promise((r) => requestAnimationFrame(() => r(null))));
|
|
await prepareReady();
|
|
await page.evaluate(() => {
|
|
window.scrollTo(0, 0);
|
|
return new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
|
|
});
|
|
|
|
await expect(
|
|
page.locator("html"),
|
|
`[${screen} @ ${vp.label}] layout gate must capture the dark UI surface`,
|
|
).toHaveAttribute("data-theme", "dark");
|
|
await expectNoHorizontalOverflow(page);
|
|
const navGeometry = await page.evaluate(() => {
|
|
const nav = document.querySelector<HTMLElement>(".vg-nav");
|
|
const label = document.querySelector<HTMLElement>(".vg-nav__label");
|
|
const topbar = document.querySelector<HTMLElement>(".vg-topbar");
|
|
if (!nav || !label || !topbar || getComputedStyle(label).display === "none") return null;
|
|
const navRect = nav.getBoundingClientRect();
|
|
return {
|
|
innerGap: Math.round(label.getBoundingClientRect().top - navRect.top),
|
|
shellGap: Math.round(navRect.top - topbar.getBoundingClientRect().bottom),
|
|
};
|
|
});
|
|
if (navGeometry !== null) {
|
|
expect(
|
|
navGeometry.innerGap,
|
|
`[${screen} @ ${vp.label}] GNB should start near the topbar without a dead top zone`,
|
|
).toBeLessThanOrEqual(40);
|
|
expect(
|
|
Math.abs(navGeometry.shellGap),
|
|
`[${screen} @ ${vp.label}] GNB should begin directly below the topbar`,
|
|
).toBeLessThanOrEqual(1);
|
|
}
|
|
const report = await auditClipping(page);
|
|
expect(
|
|
report.horizontalOverflow,
|
|
`[${screen} @ ${vp.label}] horizontal overflow ${report.horizontalOverflow}px`,
|
|
).toBeLessThanOrEqual(1);
|
|
expect(
|
|
report.offenders,
|
|
`[${screen} @ ${vp.label}] clipped/overflowing controls: ${JSON.stringify(
|
|
report.offenders,
|
|
null,
|
|
2,
|
|
)}`,
|
|
).toEqual([]);
|
|
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, `${screen}__${vp.label}.png`),
|
|
fullPage: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
/** 리뷰는 모든 폭에서 가로 탭으로 영역을 전환한다. */
|
|
async function openReviewTabIfPresent(page: Page, label: string) {
|
|
const tab = page.locator(".sr-tabs button", { hasText: label });
|
|
if (await tab.isVisible().catch(() => false)) {
|
|
await tab.click();
|
|
}
|
|
}
|
|
|
|
async function expectEmptyReviewNoDeadThirdColumn(page: Page) {
|
|
const report = await page.evaluate(() => {
|
|
const root = document.querySelector<HTMLElement>(".sr-root--empty");
|
|
const cols = document.querySelector<HTMLElement>(".sr-root--empty .sr-cols");
|
|
const transcript = document.querySelector<HTMLElement>(".sr-card--transcript");
|
|
if (!root || !cols || !transcript) {
|
|
return {
|
|
present: false,
|
|
columnCount: 0,
|
|
};
|
|
}
|
|
|
|
const gridTemplate = getComputedStyle(cols).gridTemplateColumns;
|
|
const columnCount = gridTemplate.split(" ").filter(Boolean).length;
|
|
const transcriptRect = transcript.getBoundingClientRect();
|
|
|
|
return {
|
|
present: true,
|
|
columnCount,
|
|
transcriptWidth: Math.round(transcriptRect.width),
|
|
mainColumnWidth: Math.round(cols.getBoundingClientRect().width),
|
|
};
|
|
});
|
|
|
|
expect(report.present, "empty review layout should be mounted").toBe(true);
|
|
expect(report.columnCount, "empty review should keep the single-pane tab layout").toBe(1);
|
|
}
|
|
|
|
async function expectFilledReviewLearnerWorkbench(page: Page) {
|
|
const report = await page.evaluate(() => {
|
|
const cols = document.querySelector<HTMLElement>(".sr-cols--learner");
|
|
const transcript = document.querySelector<HTMLElement>(".sr-card--transcript");
|
|
const overview = document.querySelector<HTMLElement>(".sr-overview");
|
|
if (!cols || !transcript || !overview) {
|
|
return {
|
|
present: false,
|
|
columnCount: 0,
|
|
overviewBottom: 0,
|
|
colsTop: 0,
|
|
transcriptWidth: 0,
|
|
colsWidth: 0,
|
|
};
|
|
}
|
|
|
|
const columnCount = getComputedStyle(cols).gridTemplateColumns.split(" ").filter(Boolean).length;
|
|
const colsRect = cols.getBoundingClientRect();
|
|
const transcriptRect = transcript.getBoundingClientRect();
|
|
const overviewRect = overview.getBoundingClientRect();
|
|
return {
|
|
present: true,
|
|
columnCount,
|
|
overviewBottom: Math.ceil(overviewRect.bottom),
|
|
colsTop: Math.floor(colsRect.top),
|
|
transcriptWidth: Math.round(transcriptRect.width),
|
|
colsWidth: Math.round(colsRect.width),
|
|
};
|
|
});
|
|
|
|
expect(report.present, "filled learner review layout should be mounted").toBe(true);
|
|
expect(report.columnCount, "learner review should use one active tab pane").toBe(1);
|
|
expect(report.overviewBottom).toBeLessThanOrEqual(report.colsTop + 1);
|
|
expect(Math.abs(report.transcriptWidth - report.colsWidth)).toBeLessThanOrEqual(2);
|
|
}
|
|
|
|
async function expectSupervisorReviewNoDeadGaps(page: Page) {
|
|
const report = await page.evaluate(() => {
|
|
const cols = document.querySelector<HTMLElement>(".sr-cols--supervisor");
|
|
const left = document.querySelector<HTMLElement>(".sr-cols--supervisor .sr-left");
|
|
const right = document.querySelector<HTMLElement>(".sr-cols--supervisor .sr-right");
|
|
if (!cols || !left || !right) {
|
|
return {
|
|
present: false,
|
|
columnCount: 0,
|
|
leftDisplay: "",
|
|
rightDisplay: "",
|
|
maxMainGap: 0,
|
|
maxSideGap: 0,
|
|
};
|
|
}
|
|
|
|
const colsStyle = getComputedStyle(cols);
|
|
const leftStyle = getComputedStyle(left);
|
|
const rightStyle = getComputedStyle(right);
|
|
return {
|
|
present: true,
|
|
columnCount: colsStyle.gridTemplateColumns.split(" ").filter(Boolean).length,
|
|
leftDisplay: leftStyle.display,
|
|
rightDisplay: rightStyle.display,
|
|
maxMainGap: 0,
|
|
maxSideGap: 0,
|
|
};
|
|
});
|
|
|
|
expect(report.present, "supervisor review layout should be mounted").toBe(true);
|
|
expect(report.columnCount, "supervisor review should use one active tab pane").toBe(1);
|
|
expect(report.leftDisplay).toBe("none");
|
|
expect(report.rightDisplay).toBe("none");
|
|
}
|
|
|
|
test.describe("layout visual gate @single-run", () => {
|
|
test.describe.configure({ mode: "serial" });
|
|
|
|
test.beforeAll(async () => {
|
|
await ensureShotDir();
|
|
});
|
|
|
|
test("learner home stays contained and legible across all widths", async ({ page }) => {
|
|
await page.request.post("/api/auth/dev-login", {
|
|
data: {
|
|
email: `gate.learner.${Date.now()}@hs.ac.kr`,
|
|
role: "learner",
|
|
display_name: "이름이 아주 길게 표시되는 학습자 케이스 검증용 계정",
|
|
},
|
|
});
|
|
await completeOnboarding(page, {
|
|
legal_name: "이름이 아주 길게 표시되는 학습자 케이스 검증용 계정",
|
|
affiliation: "한신대학교",
|
|
department: "상담심리학과",
|
|
grade_level: "4학년",
|
|
phone: "010-3333-3333",
|
|
contact_address: "경기도 오산시 한신대학교",
|
|
});
|
|
// Seed dense history: one active + two ended sessions.
|
|
const persona = await fetchAvailablePersona(page);
|
|
const made: string[] = [];
|
|
for (let i = 0; i < 3; i += 1) {
|
|
const res = await page.request.post("/api/sessions", {
|
|
data: { persona_code: persona.code, theory_mode: "humanistic" },
|
|
});
|
|
const body = (await res.json()) as { session_id: string };
|
|
made.push(body.session_id);
|
|
}
|
|
await page.request.post(`/api/sessions/${made[1]}/end`);
|
|
await page.request.post(`/api/sessions/${made[2]}/end`);
|
|
|
|
await page.goto("/learn");
|
|
await gateScreen(page, "learner-home", async () => {
|
|
await expect(page.locator(".lh-root")).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.locator(".lh-dashboard-status .lh-metric-card").first()).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
await expect(page.locator(".lh-work-cluster")).toBeVisible({ timeout: 15_000 });
|
|
// 대시보드 탭은 모든 폭에서 상시 노출된다 — 탭별 콘텐츠를 확인 후 기본 탭으로 복귀.
|
|
const dashTabs = page.locator(".lh-tabs");
|
|
if (await dashTabs.isVisible().catch(() => false)) {
|
|
await dashTabs.locator("button", { hasText: "기록 · 리뷰" }).click();
|
|
await expect(page.locator(".lh-compact-list li").first()).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
await dashTabs.locator("button", { hasText: "오늘의 회기" }).click();
|
|
await expect(page.locator(".lh-work-cluster")).toBeVisible({ timeout: 15_000 });
|
|
} else {
|
|
await expect(page.locator(".lh-compact-list li").first()).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
}
|
|
|
|
const shellScroll = await page.evaluate(async () => {
|
|
const nav = document.querySelector<HTMLElement>(".vg-nav");
|
|
const main = document.querySelector<HTMLElement>(".vg-main");
|
|
if (!nav || !main) return null;
|
|
|
|
const navTopBefore = nav.getBoundingClientRect().top;
|
|
const windowScrollBefore = window.scrollY;
|
|
const maxScroll = Math.max(0, main.scrollHeight - main.clientHeight);
|
|
main.scrollTop = Math.min(240, maxScroll);
|
|
await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
|
|
const report = {
|
|
maxScroll,
|
|
mainScrollTop: main.scrollTop,
|
|
navTopDelta: Math.abs(nav.getBoundingClientRect().top - navTopBefore),
|
|
windowScrollDelta: Math.abs(window.scrollY - windowScrollBefore),
|
|
};
|
|
main.scrollTop = 0;
|
|
return report;
|
|
});
|
|
expect(shellScroll, "learner shell should include nav and main scroll frame").not.toBeNull();
|
|
expect(shellScroll!.maxScroll, "main content should own the vertical overflow").toBeGreaterThan(0);
|
|
expect(shellScroll!.mainScrollTop, "main content should scroll independently").toBeGreaterThan(0);
|
|
expect(shellScroll!.navTopDelta, "GNB should remain fixed while main content scrolls").toBeLessThanOrEqual(1);
|
|
expect(shellScroll!.windowScrollDelta, "document should not be the app scroll owner").toBeLessThanOrEqual(1);
|
|
});
|
|
|
|
await page.setViewportSize({ width: 1200, height: 1320 });
|
|
await expect(page.locator(".lh-tabs")).toBeVisible();
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, "learner-home__1200-reference-dark.png"),
|
|
fullPage: true,
|
|
});
|
|
await page.getByRole("button", { name: "라이트 모드로" }).click();
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
|
|
const lightAssets = await page.evaluate(() => {
|
|
const card = document.querySelector<HTMLElement>(".lh-metric-card");
|
|
const shellBody = document.querySelector<HTMLElement>(".vg-shell--learner-dashboard .vg-shell__body");
|
|
const nav = document.querySelector<HTMLElement>(".vg-shell--learner-dashboard .vg-nav");
|
|
return {
|
|
card: card ? getComputedStyle(card, "::after").backgroundImage : "",
|
|
cardSurface: card
|
|
? {
|
|
backgroundImage: getComputedStyle(card).backgroundImage,
|
|
backdropFilter: getComputedStyle(card).backdropFilter,
|
|
boxShadow: getComputedStyle(card).boxShadow,
|
|
}
|
|
: null,
|
|
shellBody: shellBody ? getComputedStyle(shellBody).backgroundImage : "",
|
|
nav: nav ? getComputedStyle(nav).backgroundImage : "",
|
|
};
|
|
});
|
|
expect(lightAssets.card).toContain("card-leaf-sprig-light.png");
|
|
expect(lightAssets.cardSurface).not.toBeNull();
|
|
expect(lightAssets.cardSurface!.backgroundImage.match(/linear-gradient/g)?.length ?? 0).toBeGreaterThanOrEqual(2);
|
|
expect(lightAssets.cardSurface!.backdropFilter).toContain("blur(");
|
|
expect(lightAssets.cardSurface!.boxShadow).not.toBe("none");
|
|
expect(lightAssets.shellBody).toContain("background-light-corner.png");
|
|
expect(lightAssets.nav).toContain("background-light-sidebar.png");
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, "learner-home__1200-reference-light.png"),
|
|
fullPage: true,
|
|
});
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
const lightMobileReport = await auditClipping(page);
|
|
expect(lightMobileReport.horizontalOverflow, "[learner-home light @ 390] horizontal overflow").toBeLessThanOrEqual(1);
|
|
expect(lightMobileReport.offenders, "[learner-home light @ 390] clipped controls").toEqual([]);
|
|
await expect
|
|
.poll(() =>
|
|
page.locator(".vg-shell--learner-dashboard .vg-shell__body").evaluate((element) => getComputedStyle(element).backgroundImage),
|
|
)
|
|
.toContain("background-light-corner.png");
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, "learner-home__390-reference-light.png"),
|
|
fullPage: true,
|
|
});
|
|
await page.getByRole("button", { name: "다크 모드로" }).click();
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
|
|
});
|
|
|
|
test("session prestart stays contained across all widths", async ({ page }) => {
|
|
await signInAsLearner(page);
|
|
const persona = await fetchAvailablePersona(page, 1);
|
|
await page.goto(`/learn/session/${persona.code}`);
|
|
await gateScreen(page, "session-prestart", async () => {
|
|
await expect(page.getByRole("button", { name: "회기 시작" })).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
const plan = page.locator(".sx-prestart__plan");
|
|
await expect(plan).toContainText("시작 과업");
|
|
await expect(plan).toContainText("선택 접근");
|
|
await expect(plan).toContainText("이번 목표");
|
|
await expect(plan).toContainText("운영 기준");
|
|
|
|
const widths = await page.evaluate(() => {
|
|
const head = document.querySelector<HTMLElement>(".sx-page--prestart .sx-head");
|
|
const prestart = document.querySelector<HTMLElement>(".sx-page--prestart .sx-prestart");
|
|
return {
|
|
head: head?.getBoundingClientRect().width ?? 0,
|
|
prestart: prestart?.getBoundingClientRect().width ?? 0,
|
|
};
|
|
});
|
|
expect(widths.head).toBeGreaterThan(0);
|
|
expect(
|
|
Math.abs(widths.head - widths.prestart),
|
|
`prestart width ${widths.prestart}px should align with head width ${widths.head}px`,
|
|
).toBeLessThanOrEqual(1);
|
|
});
|
|
|
|
await page.setViewportSize({ width: 1280, height: 800 });
|
|
await page.getByRole("button", { name: "라이트 모드로" }).click();
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
|
|
await expect(page.locator(".sx-prestart")).toHaveClass(/vg-surface--panel/);
|
|
await expect(page.locator(".sx-prestart__plan")).toHaveClass(/vg-surface--inset/);
|
|
const insetSurface = await page.locator(".sx-prestart__plan").evaluate((element) => {
|
|
const style = getComputedStyle(element);
|
|
return {
|
|
borderTopWidth: style.borderTopWidth,
|
|
borderRadius: style.borderRadius,
|
|
};
|
|
});
|
|
expect(insetSurface).toEqual({ borderTopWidth: "0px", borderRadius: "0px" });
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, "session-prestart__1280-reference-light.png"),
|
|
fullPage: true,
|
|
});
|
|
await page.getByRole("button", { name: "다크 모드로" }).click();
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
|
|
});
|
|
|
|
test("active session keeps controls contained across all widths", async ({ page }) => {
|
|
await signInAsLearner(page);
|
|
const persona = await fetchAvailablePersona(page, 1);
|
|
await page.goto(`/learn/session/${persona.code}`);
|
|
await page.getByRole("button", { name: "회기 시작" }).click();
|
|
await expect(page.locator(".sx-page--active")).toBeVisible({ timeout: 15_000 });
|
|
await gateScreen(page, "session-active", async () => {
|
|
await expect(page.locator(".sx-page--active")).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test("session review stays contained across all widths", async ({ page }) => {
|
|
await signInAsLearner(page);
|
|
await routeFilledSessionReview(page);
|
|
await routePrepostMeasures(page);
|
|
await page.goto(`/learn/session/${FILLED_REVIEW_SESSION_ID}/review`);
|
|
await gateScreen(page, "session-review", async () => {
|
|
await expect(page.locator(".sr-overview")).toBeVisible({ timeout: 15_000 });
|
|
await openReviewTabIfPresent(page, "워크시트");
|
|
await expect(page.getByText("사례개념화 워크시트")).toBeVisible();
|
|
await openReviewTabIfPresent(page, "축어록");
|
|
await expectFilledReviewLearnerWorkbench(page);
|
|
});
|
|
});
|
|
|
|
test("professor session review avoids dead vertical gaps across all widths", async ({ page }) => {
|
|
await signInAsTeacher(page);
|
|
await routeFilledSessionReview(page, TEACHER_REVIEW_SESSION_ID);
|
|
await page.goto(`/teach/session/${TEACHER_REVIEW_SESSION_ID}/review`);
|
|
await gateScreen(page, "session-review-professor", async () => {
|
|
await expect(page.locator(".sr-cols--supervisor")).toBeVisible({ timeout: 15_000 });
|
|
await openReviewTabIfPresent(page, "피드백");
|
|
await expect(page.getByText("교수자 검토", { exact: true })).toBeVisible();
|
|
await openReviewTabIfPresent(page, "축어록");
|
|
await expect(page.getByText("세션 트랜스크립트")).toBeVisible();
|
|
await expectSupervisorReviewNoDeadGaps(page);
|
|
});
|
|
});
|
|
|
|
test("empty session review avoids sparse column gaps across all widths", async ({ page }) => {
|
|
await signInAsLearner(page);
|
|
await routeEmptySessionReview(page);
|
|
await routePrepostMeasures(page);
|
|
await page.goto(`/learn/session/${EMPTY_REVIEW_SESSION_ID}/review`);
|
|
await gateScreen(page, "session-review-empty", async () => {
|
|
await expect(page.locator(".sr-root--empty")).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByText("축어록 저장 후 생성")).toBeVisible();
|
|
await openReviewTabIfPresent(page, "피드백");
|
|
await expect(page.getByText("감정 타임라인 대기")).toBeVisible();
|
|
await openReviewTabIfPresent(page, "축어록");
|
|
await expectEmptyReviewNoDeadThirdColumn(page);
|
|
});
|
|
});
|
|
|
|
test("professor console stays contained across all widths", async ({ page }) => {
|
|
await signInAsTeacher(page);
|
|
await page.goto("/teach");
|
|
await gateScreen(page, "professor", async () => {
|
|
await expect(page.locator(".pf-panel, .pf-shell, main").first()).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
});
|
|
});
|
|
|
|
test("professor student analysis overview stays contained across all widths", async ({ page }) => {
|
|
const fixture = teacherAnalysisFixture();
|
|
await page.route("**/api/teacher/dashboard", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify(fixture.dashboard),
|
|
}),
|
|
);
|
|
await signInAsTeacher(page);
|
|
await page.goto("/teach/analysis");
|
|
await gateScreen(page, "professor-analysis", async () => {
|
|
await expect(page.locator('[data-learner-overview-table="true"]')).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
await expect(page.locator('[data-learner-overview-row="true"]')).toHaveCount(1);
|
|
await expect(page.locator('[data-learner-analysis-panel="true"]')).toHaveCount(0);
|
|
await expect(page.getByLabel("학습자 검색")).toBeVisible();
|
|
const expandButton = page.getByRole("button", { name: /분석 검증 학습자 요약/ });
|
|
if ((await expandButton.getAttribute("aria-expanded")) !== "true") {
|
|
await expandButton.click();
|
|
}
|
|
await expect(page.locator('[data-learner-expanded-row="true"]')).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test("professor learner detail analysis stays contained across all widths", async ({ page }) => {
|
|
const fixture = teacherAnalysisFixture();
|
|
await page.route("**/api/teacher/dashboard", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify(fixture.dashboard),
|
|
}),
|
|
);
|
|
await page.route("**/api/teacher/learners/*/analysis", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify(fixture.analysis),
|
|
}),
|
|
);
|
|
await signInAsTeacher(page);
|
|
await page.goto(`/teach/analysis?learner=${fixture.analysis.learner_id}`);
|
|
await gateScreen(page, "professor-analysis-detail", async () => {
|
|
await expect(page.locator('[data-learner-analysis-panel="true"]')).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
await expect(page.locator('[data-learner-persona-group="true"]')).toHaveCount(2);
|
|
const firstPersona = page.locator('[data-learner-persona-group="true"]').first();
|
|
const expandButton = firstPersona.getByRole("button", { name: /회기 (펼치기|접기)/ });
|
|
if ((await expandButton.getAttribute("aria-expanded")) !== "true") {
|
|
await expandButton.click();
|
|
}
|
|
await expect(page.locator('[data-learner-persona-sessions="true"]')).toBeVisible();
|
|
await expect(page.locator('[data-learner-session-row="true"]').first()).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test("persona workspace stays contained across all widths", async ({ page }) => {
|
|
await signInAsTeacher(page);
|
|
await page.goto("/teach/personas");
|
|
await gateScreen(page, "persona-workspace", async () => {
|
|
await expect(page.locator(".ps-overview")).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByRole("heading", { name: "페르소나 운영" })).toBeVisible();
|
|
await expect(page.getByRole("navigation", { name: "페르소나 관리 영역" })).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test("persona authoring steps stay contained across all widths", async ({ page }) => {
|
|
await signInAsTeacher(page);
|
|
await page.goto("/teach/personas?view=personas&mode=create&step=edit");
|
|
await gateScreen(page, "persona-authoring", async () => {
|
|
await expect(page.locator(".ps-authoring-layout")).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByRole("navigation", { name: "페르소나 작성 단계" })).toBeVisible();
|
|
await expect(page.getByRole("tab", { name: "개요" })).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test("admin console stays contained across all widths", async ({ page }) => {
|
|
await page.request.post("/api/auth/dev-login", {
|
|
data: { email: "admin@twentyoz.kr", role: "admin", display_name: "E2E Admin" },
|
|
});
|
|
await page.goto("/admin");
|
|
await gateScreen(page, "admin", async () => {
|
|
await expect(page.locator("main").first()).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
});
|
|
|
|
test("admin AI operations stays contained across all widths", async ({ page }) => {
|
|
await page.request.post("/api/auth/dev-login", {
|
|
data: { email: "admin@twentyoz.kr", role: "admin", display_name: "E2E Admin" },
|
|
});
|
|
await page.goto("/admin/ai");
|
|
await gateScreen(page, "admin-ai", async () => {
|
|
await expect(page.getByRole("heading", { name: "AI 운영과 DB 계량" })).toBeVisible({
|
|
timeout: 15_000,
|
|
});
|
|
await expect(page.locator(".aic-grid")).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test("admin user table keeps its own horizontal scroll", async ({ page }) => {
|
|
test.setTimeout(60_000);
|
|
await page.request.post("/api/auth/dev-login", {
|
|
data: { email: "admin@twentyoz.kr", role: "admin", display_name: "E2E Admin" },
|
|
});
|
|
await page.goto("/admin/users");
|
|
await page.getByRole("tab", { name: "사용자 목록" }).evaluate((element) => element.click());
|
|
await expect(page.getByRole("table")).toBeVisible({ timeout: 15_000 });
|
|
|
|
for (const viewport of [
|
|
{ width: 1280, height: 800, label: "desktop" },
|
|
{ width: 390, height: 844, label: "mobile" },
|
|
]) {
|
|
await page.setViewportSize(viewport);
|
|
await expectNoHorizontalOverflow(page);
|
|
const scrollReport = await page.locator(".ad-user-table-scroll").evaluate((element) => {
|
|
element.scrollLeft = 0;
|
|
const report = {
|
|
clientWidth: element.clientWidth,
|
|
scrollWidth: element.scrollWidth,
|
|
initialScroll: element.scrollLeft,
|
|
};
|
|
element.scrollLeft = element.scrollWidth;
|
|
return { ...report, finalScroll: element.scrollLeft };
|
|
});
|
|
expect(scrollReport.scrollWidth, `[admin users @ ${viewport.label}] table min width`).toBeGreaterThan(
|
|
scrollReport.clientWidth,
|
|
);
|
|
expect(scrollReport.finalScroll, `[admin users @ ${viewport.label}] horizontal scroll`).toBeGreaterThan(
|
|
scrollReport.initialScroll,
|
|
);
|
|
await expect(page.getByRole("columnheader", { name: /작업/ })).toBeVisible();
|
|
await page.locator(".ad-user-table-scroll").evaluate((element) => {
|
|
element.scrollLeft = 0;
|
|
});
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, `admin-users__${viewport.width}-reference-dark.png`),
|
|
fullPage: true,
|
|
});
|
|
}
|
|
|
|
await page.setViewportSize({ width: 1280, height: 800 });
|
|
await page.getByRole("button", { name: "라이트 모드로" }).click();
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, "admin-users__1280-reference-light.png"),
|
|
fullPage: true,
|
|
});
|
|
});
|
|
|
|
test("settings stays contained across all widths", async ({ page }) => {
|
|
await page.request.post("/api/auth/dev-login", {
|
|
data: { email: "admin@twentyoz.kr", role: "admin", display_name: "E2E Admin" },
|
|
});
|
|
await page.goto("/settings");
|
|
await gateScreen(page, "settings", async () => {
|
|
await expect(page.locator("main").first()).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
await page.setViewportSize({ width: 1280, height: 800 });
|
|
await page.getByRole("button", { name: "라이트 모드로" }).click();
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
|
|
await expect(page.locator(".vg-set__group").first()).toHaveAttribute("data-surface", "panel");
|
|
await page.screenshot({
|
|
path: path.join(SHOT_DIR, "settings__1280-reference-light.png"),
|
|
fullPage: true,
|
|
});
|
|
await page.getByRole("button", { name: "다크 모드로" }).click();
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
|
|
});
|
|
});
|