Stabilize runtime auth and E2E coverage
This commit is contained in:
Yun Chan
parent
6a3e3b541c
commit
188e899394
133 changed files with 55987 additions and 6775 deletions
313
apps/web/e2e/session-layout.spec.ts
Normal file
313
apps/web/e2e/session-layout.spec.ts
Normal file
|
|
@ -0,0 +1,313 @@
|
|||
import { expect, test, type Page } from "@playwright/test";
|
||||
import {
|
||||
expectNoDocumentOverflow,
|
||||
expectNoHorizontalOverflow,
|
||||
fetchAvailablePersona,
|
||||
signInAsLearner,
|
||||
} from "./support";
|
||||
|
||||
async function expectSessionPageHeightToMatchViewport(page: Page) {
|
||||
const metrics = await page.evaluate(() => {
|
||||
const sessionPage = document.querySelector<HTMLElement>(".sx-page--active");
|
||||
const topbar = document.querySelector<HTMLElement>(".vg-topbar");
|
||||
|
||||
if (!sessionPage) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const pageHeight = sessionPage.getBoundingClientRect().height;
|
||||
const expectedHeight = window.innerHeight;
|
||||
|
||||
return {
|
||||
pageHeight: Math.round(pageHeight),
|
||||
expectedHeight: Math.round(expectedHeight),
|
||||
delta: Math.abs(pageHeight - expectedHeight),
|
||||
hasTopbar: Boolean(topbar),
|
||||
};
|
||||
});
|
||||
|
||||
expect(metrics, "Expected active session page to be present").not.toBeNull();
|
||||
expect(metrics!.hasTopbar, "Active session should hide the global topbar").toBe(false);
|
||||
expect(
|
||||
metrics!.delta,
|
||||
`Expected .sx-page height ${metrics!.pageHeight}px to match viewport ${metrics!.expectedHeight}px`,
|
||||
).toBeLessThanOrEqual(1);
|
||||
}
|
||||
|
||||
async function expectNoSessionInternalCopy(page: Page) {
|
||||
await expect(page.getByText(/API|GET \/|OPENAI_API_KEY|API와 엔진/)).toHaveCount(0);
|
||||
}
|
||||
|
||||
async function expectNoLocalStageDemoControl(page: Page) {
|
||||
await expect(page.getByRole("button", { name: /다음 단계로/ })).toHaveCount(0);
|
||||
await expect(page.locator(".sx-track__advance")).toHaveCount(0);
|
||||
}
|
||||
|
||||
async function expectMobileContextIfNarrow(page: Page) {
|
||||
const isNarrow = await page.evaluate(() =>
|
||||
window.matchMedia("(max-width: 1180px)").matches,
|
||||
);
|
||||
|
||||
if (!isNarrow) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isPhoneLayout = await page.evaluate(() =>
|
||||
window.matchMedia("(max-width: 880px)").matches,
|
||||
);
|
||||
if (isPhoneLayout) {
|
||||
await expect(page.locator(".sx-page--active .sx-col-left")).toBeHidden();
|
||||
await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
|
||||
} else {
|
||||
const feedbackSurface = page.locator(".sx-page--active .sx-col-right");
|
||||
await expect(feedbackSurface).toBeVisible();
|
||||
await expect(feedbackSurface).toBeInViewport();
|
||||
}
|
||||
const mobileContext = page.getByLabel("현재 회기 요약");
|
||||
await expect(mobileContext).toBeVisible();
|
||||
await expect(mobileContext).toContainText("조용히 표시");
|
||||
await expect(mobileContext).toContainText("내담자");
|
||||
await expect(mobileContext).toContainText("마이크");
|
||||
}
|
||||
|
||||
async function expectSessionControlsInsideViewport(page: Page) {
|
||||
const selectors = [
|
||||
".sx-grid",
|
||||
".sx-stage",
|
||||
".sx-transcript",
|
||||
".sx-transcript__scroll",
|
||||
".sx-compose",
|
||||
".sx-controlbar",
|
||||
];
|
||||
const result = await page.evaluate((items) => {
|
||||
const viewport = { width: window.innerWidth, height: window.innerHeight };
|
||||
const checks = items.map((selector) => {
|
||||
const el = document.querySelector<HTMLElement>(selector);
|
||||
if (!el) return { selector, ok: false, reason: "missing" };
|
||||
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;
|
||||
const ok =
|
||||
visible &&
|
||||
rect.top >= -1 &&
|
||||
rect.left >= -1 &&
|
||||
rect.right <= viewport.width + 1 &&
|
||||
rect.bottom <= viewport.height + 1;
|
||||
return {
|
||||
selector,
|
||||
ok,
|
||||
reason: visible ? "out-of-viewport" : "not-visible",
|
||||
rect: {
|
||||
top: Math.round(rect.top),
|
||||
left: Math.round(rect.left),
|
||||
right: Math.round(rect.right),
|
||||
bottom: Math.round(rect.bottom),
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height),
|
||||
},
|
||||
};
|
||||
});
|
||||
return { viewport, checks };
|
||||
}, selectors);
|
||||
|
||||
const failures = result.checks.filter((check) => !check.ok);
|
||||
expect(
|
||||
failures,
|
||||
`Viewport ${result.viewport.width}x${result.viewport.height} clipped session controls: ${JSON.stringify(failures)}`,
|
||||
).toEqual([]);
|
||||
}
|
||||
|
||||
async function expectActiveSessionUsableLayout(page: Page) {
|
||||
const result = await page.evaluate(() => {
|
||||
const grid = document.querySelector<HTMLElement>(".sx-page--active .sx-grid");
|
||||
const center = document.querySelector<HTMLElement>(".sx-page--active .sx-col-center");
|
||||
const stage = document.querySelector<HTMLElement>(".sx-page--active .sx-stage");
|
||||
const transcript = document.querySelector<HTMLElement>(".sx-page--active .sx-transcript");
|
||||
const scroll = document.querySelector<HTMLElement>(".sx-page--active .sx-transcript__scroll");
|
||||
const compose = document.querySelector<HTMLElement>(".sx-page--active .sx-compose");
|
||||
const status = document.querySelector<HTMLElement>(".sx-page--active .sx-stage__status");
|
||||
const timer = document.querySelector<HTMLElement>(".sx-page--active .sx-stage__timer");
|
||||
if (!grid || !center || !stage || !transcript || !scroll || !compose || !status || !timer) {
|
||||
return { ok: false, reason: "missing" };
|
||||
}
|
||||
|
||||
const gridRect = grid.getBoundingClientRect();
|
||||
const centerRect = center.getBoundingClientRect();
|
||||
const stageRect = stage.getBoundingClientRect();
|
||||
const transcriptRect = transcript.getBoundingClientRect();
|
||||
const composeRect = compose.getBoundingClientRect();
|
||||
const stageOverflow = stage.scrollHeight - stage.clientHeight;
|
||||
const transcriptOverflow = transcript.scrollHeight - transcript.clientHeight;
|
||||
const phone = window.matchMedia("(max-width: 880px)").matches;
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
phone,
|
||||
gridWidth: Math.round(gridRect.width),
|
||||
centerWidth: Math.round(centerRect.width),
|
||||
scrollHeight: Math.round(scroll.getBoundingClientRect().height),
|
||||
stageOverflow,
|
||||
transcriptOverflow,
|
||||
stageBottom: Math.round(stageRect.bottom),
|
||||
transcriptTop: Math.round(transcriptRect.top),
|
||||
transcriptBottom: Math.round(transcriptRect.bottom),
|
||||
composeTop: Math.round(composeRect.top),
|
||||
statusText: status.textContent ?? "",
|
||||
timerText: timer.textContent ?? "",
|
||||
};
|
||||
});
|
||||
|
||||
expect(result.ok, `Expected active session layout elements: ${JSON.stringify(result)}`).toBeTruthy();
|
||||
if ("phone" in result && result.phone) {
|
||||
expect(
|
||||
Math.abs(result.gridWidth - result.centerWidth),
|
||||
`Phone center column should use full grid width: ${JSON.stringify(result)}`,
|
||||
).toBeLessThanOrEqual(2);
|
||||
}
|
||||
expect(result.scrollHeight, `Transcript viewport too small: ${JSON.stringify(result)}`).toBeGreaterThanOrEqual(110);
|
||||
expect(result.stageOverflow, `Stage content clipped: ${JSON.stringify(result)}`).toBeLessThanOrEqual(4);
|
||||
expect(result.transcriptOverflow, `Transcript chrome clipped: ${JSON.stringify(result)}`).toBeLessThanOrEqual(4);
|
||||
expect(result.stageBottom, `Stage overlaps transcript: ${JSON.stringify(result)}`).toBeLessThanOrEqual(result.transcriptTop);
|
||||
expect(result.composeTop, `Compose overlaps transcript bounds: ${JSON.stringify(result)}`).toBeLessThan(result.transcriptBottom);
|
||||
expect(result.statusText, `Missing visible running status: ${JSON.stringify(result)}`).toContain("회기");
|
||||
expect(result.timerText, `Missing visible timer: ${JSON.stringify(result)}`).toMatch(/\d/);
|
||||
}
|
||||
|
||||
test.describe("learner session full-screen layout", () => {
|
||||
test("keeps the prestart and active session routes inside the viewport", async ({ page }) => {
|
||||
await signInAsLearner(page);
|
||||
const persona = await fetchAvailablePersona(page, 1);
|
||||
await page.goto(`/learn/session/${persona.code}`);
|
||||
|
||||
await expect(page.getByRole("button", { name: "회기 시작" })).toBeVisible();
|
||||
await expectNoHorizontalOverflow(page);
|
||||
|
||||
await page.getByRole("button", { name: "회기 시작" }).click();
|
||||
|
||||
await expect(page.locator(".sx-page.sx-page--active")).toBeVisible();
|
||||
await expect(page.locator(".sx-grid")).toBeVisible();
|
||||
await expect(page.locator(".vg-topbar")).toHaveCount(0);
|
||||
await expect(page.locator(".vg-nav")).toHaveCount(0);
|
||||
await expect(page.locator(".vg-main")).toHaveClass(/(^|\s)vg-main--bleed(\s|$)/);
|
||||
await expect(page.locator(".vg-shell__body")).toHaveClass(/(^|\s)vg-shell__body--bare(\s|$)/);
|
||||
|
||||
await expectNoSessionInternalCopy(page);
|
||||
await expectNoLocalStageDemoControl(page);
|
||||
await expectNoDocumentOverflow(page);
|
||||
await expectSessionPageHeightToMatchViewport(page);
|
||||
await expectMobileContextIfNarrow(page);
|
||||
await expectSessionControlsInsideViewport(page);
|
||||
});
|
||||
|
||||
test("keeps critical session controls visible across dense viewport sizes", async ({ page }) => {
|
||||
await signInAsLearner(page);
|
||||
const persona = await fetchAvailablePersona(page, 1);
|
||||
|
||||
const viewports = [
|
||||
{ width: 1366, height: 768 },
|
||||
{ width: 1366, height: 720 },
|
||||
{ width: 1024, height: 768 },
|
||||
{ width: 1024, height: 640 },
|
||||
{ width: 820, height: 1180 },
|
||||
{ width: 390, height: 844 },
|
||||
{ width: 375, height: 667 },
|
||||
{ width: 320, height: 568 },
|
||||
];
|
||||
|
||||
await page.setViewportSize(viewports[0]);
|
||||
await page.goto(`/learn/session/${persona.code}`);
|
||||
await page.getByRole("button", { name: "회기 시작" }).click();
|
||||
await expect(page.locator(".sx-page.sx-page--active")).toBeVisible();
|
||||
|
||||
for (const viewport of viewports) {
|
||||
await page.setViewportSize(viewport);
|
||||
await page.evaluate(() => new Promise(requestAnimationFrame));
|
||||
|
||||
await expect(page.locator(".sx-page.sx-page--active")).toBeVisible();
|
||||
await expectNoDocumentOverflow(page);
|
||||
await expectNoHorizontalOverflow(page);
|
||||
await expectNoLocalStageDemoControl(page);
|
||||
await expectSessionControlsInsideViewport(page);
|
||||
await expectSessionPageHeightToMatchViewport(page);
|
||||
await expectActiveSessionUsableLayout(page);
|
||||
|
||||
if (viewport.width <= 1180) {
|
||||
await expect(page.locator(".sx-page--active .sx-mobile-context")).toBeVisible();
|
||||
}
|
||||
if (viewport.width > 880 && viewport.width <= 1180) {
|
||||
await expect(page.locator(".sx-page--active .sx-col-right")).toBeVisible();
|
||||
await expect(page.locator(".sx-page--active .sx-col-right")).toBeInViewport();
|
||||
await expect(page.locator(".sx-page--active .sx-col-left")).toBeVisible();
|
||||
}
|
||||
if (viewport.width <= 880) {
|
||||
await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test("does not leave an unsaved local transcript when a text turn is rejected", 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.sx-page--active")).toBeVisible();
|
||||
|
||||
await page.route("**/api/sessions/*/stream", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 503,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ detail: "engine unavailable: e2e rejection" }),
|
||||
});
|
||||
});
|
||||
|
||||
const learnerText = "오늘은 너무 힘들었어요";
|
||||
const input = page.getByLabel("학습자 발화 입력");
|
||||
await input.fill(learnerText);
|
||||
await page.getByRole("button", { name: "보내기" }).click();
|
||||
|
||||
await expect(page.getByRole("alert")).toContainText("AI 엔진이 응답하지 않습니다");
|
||||
await expect(input).toHaveValue(learnerText);
|
||||
await expect(page.locator(".sx-utt")).toHaveCount(0);
|
||||
await expect(page.locator(".sx-utt").filter({ hasText: learnerText })).toHaveCount(0);
|
||||
await expect(page.getByText("내담자 응답 없음")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("removes pending transcript when an accepted stream later errors", 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.sx-page--active")).toBeVisible();
|
||||
|
||||
await page.route("**/api/sessions/*/stream", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: [
|
||||
"event: token",
|
||||
'data: {"text":"부분 응답"}',
|
||||
"",
|
||||
"event: error",
|
||||
'data: {"detail":"engine unavailable: e2e stream error"}',
|
||||
"",
|
||||
].join("\n"),
|
||||
});
|
||||
});
|
||||
|
||||
const learnerText = "스트림 중간에 실패하면 남기지 말아 주세요";
|
||||
const input = page.getByLabel("학습자 발화 입력");
|
||||
await input.fill(learnerText);
|
||||
await page.getByRole("button", { name: "보내기" }).click();
|
||||
|
||||
await expect(page.getByRole("alert")).toContainText("AI 엔진이 응답하지 않습니다");
|
||||
await expect(input).toHaveValue(learnerText);
|
||||
await expect(page.locator(".sx-utt")).toHaveCount(0);
|
||||
await expect(page.locator(".sx-utt").filter({ hasText: learnerText })).toHaveCount(0);
|
||||
await expect(page.getByText("부분 응답")).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue