전 저장소 리팩터링과 SSOT 정비
This commit is contained in:
Yun Chan
parent
14ecbd4e7d
commit
3dfddcac6f
173 changed files with 19679 additions and 6952 deletions
|
|
@ -260,12 +260,37 @@ async function gateScreen(
|
|||
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,
|
||||
|
|
@ -287,6 +312,14 @@ async function gateScreen(
|
|||
}
|
||||
}
|
||||
|
||||
/** 리뷰는 모든 폭에서 가로 탭으로 영역을 전환한다. */
|
||||
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");
|
||||
|
|
@ -312,10 +345,7 @@ async function expectEmptyReviewNoDeadThirdColumn(page: Page) {
|
|||
});
|
||||
|
||||
expect(report.present, "empty review layout should be mounted").toBe(true);
|
||||
expect(
|
||||
report.columnCount,
|
||||
"empty review should collapse the desktop masonry layout instead of leaving a sparse third column",
|
||||
).toBeLessThanOrEqual(2);
|
||||
expect(report.columnCount, "empty review should keep the single-pane tab layout").toBe(1);
|
||||
}
|
||||
|
||||
async function expectFilledReviewLearnerWorkbench(page: Page) {
|
||||
|
|
@ -323,52 +353,35 @@ async function expectFilledReviewLearnerWorkbench(page: Page) {
|
|||
const cols = document.querySelector<HTMLElement>(".sr-cols--learner");
|
||||
const transcript = document.querySelector<HTMLElement>(".sr-card--transcript");
|
||||
const overview = document.querySelector<HTMLElement>(".sr-overview");
|
||||
const rubric = document.querySelector<HTMLElement>(".sr-card--rubric");
|
||||
const worksheet = document.querySelector<HTMLElement>(".sr-card--worksheet");
|
||||
const prepost = document.querySelector<HTMLElement>(".sr-card--prepost");
|
||||
if (!cols || !transcript || !overview || !rubric || !worksheet || !prepost) {
|
||||
if (!cols || !transcript || !overview) {
|
||||
return {
|
||||
present: false,
|
||||
viewportWidth: window.innerWidth,
|
||||
columnCount: 0,
|
||||
overviewRight: 0,
|
||||
transcriptLeft: 0,
|
||||
transcriptRight: 0,
|
||||
rubricLeft: 0,
|
||||
worksheetLeft: 0,
|
||||
worksheetRight: 0,
|
||||
prepostLeft: 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();
|
||||
const rubricRect = rubric.getBoundingClientRect();
|
||||
const worksheetRect = worksheet.getBoundingClientRect();
|
||||
const prepostRect = prepost.getBoundingClientRect();
|
||||
return {
|
||||
present: true,
|
||||
viewportWidth: window.innerWidth,
|
||||
columnCount,
|
||||
overviewRight: Math.ceil(overviewRect.right),
|
||||
transcriptLeft: Math.floor(transcriptRect.left),
|
||||
transcriptRight: Math.ceil(transcriptRect.right),
|
||||
rubricLeft: Math.floor(rubricRect.left),
|
||||
worksheetLeft: Math.floor(worksheetRect.left),
|
||||
worksheetRight: Math.ceil(worksheetRect.right),
|
||||
prepostLeft: Math.floor(prepostRect.left),
|
||||
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);
|
||||
if (report.viewportWidth > 1180) {
|
||||
expect(report.columnCount, "desktop learner review should use a 3-column workbench").toBe(3);
|
||||
expect(report.overviewRight).toBeLessThanOrEqual(report.transcriptLeft);
|
||||
expect(report.transcriptRight).toBeLessThanOrEqual(report.rubricLeft);
|
||||
expect(report.worksheetLeft).toBeLessThan(report.transcriptLeft);
|
||||
expect(report.worksheetRight).toBeLessThanOrEqual(report.prepostLeft);
|
||||
}
|
||||
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) {
|
||||
|
|
@ -379,7 +392,6 @@ async function expectSupervisorReviewNoDeadGaps(page: Page) {
|
|||
if (!cols || !left || !right) {
|
||||
return {
|
||||
present: false,
|
||||
viewportWidth: window.innerWidth,
|
||||
columnCount: 0,
|
||||
leftDisplay: "",
|
||||
rightDisplay: "",
|
||||
|
|
@ -388,57 +400,23 @@ async function expectSupervisorReviewNoDeadGaps(page: Page) {
|
|||
};
|
||||
}
|
||||
|
||||
function maxVerticalGap(container: HTMLElement) {
|
||||
const intervals = Array.from(container.children)
|
||||
.map((child) => child.getBoundingClientRect())
|
||||
.filter((rect) => rect.width > 0 && rect.height > 0)
|
||||
.map((rect) => ({ top: rect.top, bottom: rect.bottom }))
|
||||
.sort((a, b) => a.top - b.top || a.bottom - b.bottom);
|
||||
if (intervals.length < 2) return 0;
|
||||
|
||||
let maxGap = 0;
|
||||
let currentBottom = intervals[0].bottom;
|
||||
for (let index = 1; index < intervals.length; index += 1) {
|
||||
const next = intervals[index];
|
||||
if (next.top <= currentBottom) {
|
||||
currentBottom = Math.max(currentBottom, next.bottom);
|
||||
continue;
|
||||
}
|
||||
const gap = next.top - currentBottom;
|
||||
if (gap > maxGap) maxGap = gap;
|
||||
currentBottom = next.bottom;
|
||||
}
|
||||
return Math.round(maxGap);
|
||||
}
|
||||
|
||||
const colsStyle = getComputedStyle(cols);
|
||||
const leftStyle = getComputedStyle(left);
|
||||
const rightStyle = getComputedStyle(right);
|
||||
return {
|
||||
present: true,
|
||||
viewportWidth: window.innerWidth,
|
||||
columnCount: colsStyle.gridTemplateColumns.split(" ").filter(Boolean).length,
|
||||
leftDisplay: leftStyle.display,
|
||||
rightDisplay: rightStyle.display,
|
||||
maxMainGap: maxVerticalGap(left),
|
||||
maxSideGap: maxVerticalGap(right),
|
||||
maxMainGap: 0,
|
||||
maxSideGap: 0,
|
||||
};
|
||||
});
|
||||
|
||||
expect(report.present, "supervisor review layout should be mounted").toBe(true);
|
||||
if (report.viewportWidth > 1180) {
|
||||
expect(report.columnCount, "desktop supervisor review should use main + review rail").toBe(2);
|
||||
expect(report.leftDisplay).toBe("grid");
|
||||
expect(report.rightDisplay).toBe("grid");
|
||||
expect(
|
||||
report.maxMainGap,
|
||||
"desktop supervisor review main column should not leave a dead vertical void",
|
||||
).toBeLessThanOrEqual(40);
|
||||
expect(
|
||||
report.maxSideGap,
|
||||
"desktop supervisor review side rail should not leave a dead vertical void",
|
||||
).toBeLessThanOrEqual(40);
|
||||
}
|
||||
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", () => {
|
||||
|
|
@ -484,10 +462,99 @@ test.describe("layout visual gate @single-run", () => {
|
|||
timeout: 15_000,
|
||||
});
|
||||
await expect(page.locator(".lh-work-cluster")).toBeVisible({ timeout: 15_000 });
|
||||
await expect(page.locator(".lh-compact-list li").first()).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 }) => {
|
||||
|
|
@ -498,7 +565,46 @@ test.describe("layout visual gate @single-run", () => {
|
|||
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 }) => {
|
||||
|
|
@ -519,7 +625,9 @@ test.describe("layout visual gate @single-run", () => {
|
|||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -530,7 +638,9 @@ test.describe("layout visual gate @single-run", () => {
|
|||
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);
|
||||
});
|
||||
|
|
@ -544,7 +654,9 @@ test.describe("layout visual gate @single-run", () => {
|
|||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -618,16 +730,23 @@ test.describe("layout visual gate @single-run", () => {
|
|||
});
|
||||
});
|
||||
|
||||
test("persona studio stays contained across all widths", async ({ page }) => {
|
||||
test("persona workspace stays contained across all widths", async ({ page }) => {
|
||||
await signInAsTeacher(page);
|
||||
await page.goto("/teach/personas");
|
||||
await gateScreen(page, "persona-studio", async () => {
|
||||
await expect(page.locator(".ps-layout")).toBeVisible({ timeout: 15_000 });
|
||||
await expect(page.getByText("내담자 설계·검수 작업면")).toBeVisible();
|
||||
await page.getByRole("tab", { name: "프롬프트" }).click();
|
||||
const promptPreview = page.getByLabel("프롬프트 미리보기");
|
||||
await expect(promptPreview).toBeVisible();
|
||||
await expect(promptPreview.getByRole("textbox")).toHaveCount(0);
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -641,6 +760,69 @@ test.describe("layout visual gate @single-run", () => {
|
|||
});
|
||||
});
|
||||
|
||||
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" },
|
||||
|
|
@ -649,5 +831,15 @@ test.describe("layout visual gate @single-run", () => {
|
|||
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");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue