학생 회기 모바일 사용성 보정
This commit is contained in:
Yun Chan
parent
aaebe4450e
commit
c743e9ccb9
7 changed files with 395 additions and 31 deletions
|
|
@ -513,10 +513,46 @@ test.describe("full-sweep learner home", () => {
|
|||
await expect(coachCard.getByLabel("코칭 힌트")).toContainText(
|
||||
"마지막 반응 먼저 반영",
|
||||
);
|
||||
await coachCard.getByRole("button", { name: "이어하기" }).click();
|
||||
const primaryAction = page.locator("[data-learner-primary-action]");
|
||||
await expect(primaryAction).toHaveAccessibleName("이어하기");
|
||||
await primaryAction.click();
|
||||
await expect(page).toHaveURL(new RegExp(`/learn/session/${ACT_ID}$`));
|
||||
});
|
||||
|
||||
test("naturalizes persisted privacy placeholders in the spotlight recap", async ({
|
||||
page,
|
||||
}) => {
|
||||
await signInAsLearner(page);
|
||||
await installLearnerHomeFixtures(page, { detail: false });
|
||||
await page.route(new RegExp(`/api/sessions/${ACT_ID}$`), (route) =>
|
||||
route.fulfill(
|
||||
jsonRoute({
|
||||
...DETAIL_BODY,
|
||||
turns: [
|
||||
{
|
||||
...DETAIL_BODY.turns[0],
|
||||
text: "[NAME]에게 [PHONE]으로 연락해 볼까요?",
|
||||
},
|
||||
{
|
||||
...DETAIL_BODY.turns[1],
|
||||
text: "뭘… 할 수 있게 [NAME]는 건지 잘 [NAME]는데요. [ORG]에서 오라고 했어요.",
|
||||
},
|
||||
],
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
await page.goto("/learn");
|
||||
|
||||
const recap = page.getByLabel("마지막 세션 리캡");
|
||||
await expect(recap).toContainText("할 수 있게 되는 건지 잘 모르겠는데요");
|
||||
await expect(recap).toContainText("소속 기관에서 오라고 했어요");
|
||||
await expect(recap).toContainText("익명 내담자에게 연락처로 연락해 볼까요");
|
||||
for (const token of ["[NAME]", "[ORG]", "[PHONE]"]) {
|
||||
await expect(recap).not.toContainText(token);
|
||||
}
|
||||
});
|
||||
|
||||
// checklist: learner-home-dash-recommend-card, learner-home-dash-recent-feedback,
|
||||
// learner-home-dash-review-queue
|
||||
test("prioritizes review in the recommend card, recent feedback, and review queue", async ({
|
||||
|
|
@ -540,7 +576,9 @@ test.describe("full-sweep learner home", () => {
|
|||
const feedback = page.locator(".lh-dashboard-feedback");
|
||||
await expect(feedback.locator(".lh-panel__badge")).toHaveText("1건");
|
||||
const feedbackRow = feedback.locator(".lh-feedback-mini__row");
|
||||
await expect(feedbackRow).toContainText("P1 · 정리 · 62점");
|
||||
const feedbackMeta = feedbackRow.locator("b > span");
|
||||
await expect(feedbackMeta.nth(0)).toHaveText("P1 · 정리");
|
||||
await expect(feedbackMeta.nth(1)).toHaveText("62점");
|
||||
await expect(feedbackRow).toContainText(
|
||||
"감정 반영은 좋았지만 탐색 질문 전에 요약이 필요합니다.",
|
||||
);
|
||||
|
|
@ -831,9 +869,16 @@ test.describe("full-sweep learner home", () => {
|
|||
await expect(rows).toHaveCount(2);
|
||||
// 회기 수 내림차순 정렬 — P1(3회)이 먼저 온다.
|
||||
await expect(rows.nth(0)).toContainText("P1");
|
||||
await expect(rows.nth(0)).toContainText(
|
||||
"3회 · 1회 진행 · 1회 리뷰 · 평균 4턴",
|
||||
const firstMeta = rows.nth(0).locator(".lh-persona-progress__meta");
|
||||
await expect(firstMeta.locator(":scope > span").nth(0)).toHaveText(
|
||||
"3회 · 평균 4턴",
|
||||
);
|
||||
await expect(firstMeta.locator(":scope > span").nth(1)).toHaveText(
|
||||
"진행 1 · 리뷰 1",
|
||||
);
|
||||
await expect(
|
||||
rows.nth(0).locator(".lh-persona-progress__latest"),
|
||||
).toHaveText("진행 중 · 탐색");
|
||||
await expect(rows.nth(1)).toContainText("P2");
|
||||
|
||||
// 행 클릭 시 해당 페르소나가 선택된 채 연습 화면으로 진입.
|
||||
|
|
|
|||
|
|
@ -691,6 +691,69 @@ test.describe("full sweep — counseling session", () => {
|
|||
await expect(transcript).toContainText("소속 기관에서 오라고 했어요");
|
||||
});
|
||||
|
||||
test("caps an overdue active session honestly and preserves 44px mobile controls", async ({
|
||||
page,
|
||||
}) => {
|
||||
await routeSessionFixtureApi(page, {
|
||||
durationLimitSeconds: 3600,
|
||||
detailOverrides: {
|
||||
started_at: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
});
|
||||
|
||||
await page.goto(`/learn/session/${fixtureSessionId}`);
|
||||
await expect(page.locator("#sx-end-dialog-title")).toHaveText(
|
||||
"회기 시간이 끝났어요",
|
||||
);
|
||||
await expect(page.locator(".sx-sessionbar__meta")).toContainText("시간 만료");
|
||||
await expect(page.locator("span.sr-only[aria-live='polite']")).toHaveText(
|
||||
"회기 시간 만료",
|
||||
);
|
||||
|
||||
for (const viewport of [
|
||||
{ width: 390, height: 844 },
|
||||
{ width: 320, height: 568 },
|
||||
]) {
|
||||
await page.setViewportSize(viewport);
|
||||
await page.evaluate(() => new Promise(requestAnimationFrame));
|
||||
const targetMetrics = await page
|
||||
.locator(".sx-page--active button:visible, .sx-page--active textarea:visible")
|
||||
.evaluateAll((elements) =>
|
||||
elements.map((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return {
|
||||
label:
|
||||
element.getAttribute("aria-label") ||
|
||||
element.textContent?.replace(/\s+/g, " ").trim() ||
|
||||
element.tagName,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
};
|
||||
}),
|
||||
);
|
||||
expect(targetMetrics.length, `${viewport.width} visible controls`).toBeGreaterThan(0);
|
||||
for (const target of targetMetrics) {
|
||||
expect(
|
||||
target.width,
|
||||
`${viewport.width} ${target.label} touch width`,
|
||||
).toBeGreaterThanOrEqual(44);
|
||||
expect(
|
||||
target.height,
|
||||
`${viewport.width} ${target.label} touch height`,
|
||||
).toBeGreaterThanOrEqual(44);
|
||||
}
|
||||
const layout = await page.evaluate(() => ({
|
||||
viewportWidth: window.innerWidth,
|
||||
documentWidth: document.documentElement.scrollWidth,
|
||||
bodyText: document.body.innerText,
|
||||
}));
|
||||
expect(layout.documentWidth, `${viewport.width} horizontal overflow`).toBeLessThanOrEqual(
|
||||
layout.viewportWidth,
|
||||
);
|
||||
expect(layout.bodyText).not.toMatch(/\b\d{4,}:\d{2}\b/);
|
||||
}
|
||||
});
|
||||
|
||||
// checklist: session-transcript-autoscroll
|
||||
test("releases autoscroll when scrolling up, jumps back with the latest button, and follows new turns", async ({
|
||||
page,
|
||||
|
|
@ -715,12 +778,27 @@ test.describe("full sweep — counseling session", () => {
|
|||
const jumpButton = page.getByRole("button", { name: "최신으로" });
|
||||
await expect(jumpButton).toHaveCount(0);
|
||||
|
||||
// 최신 발화를 따라가는 동안 scrollport가 모바일 레이아웃으로 재배치돼도
|
||||
// ResizeObserver가 새 하단에 붙이고 layout scroll을 사용자 이탈로 오인하지 않는다.
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await expect
|
||||
.poll(() =>
|
||||
scroller.evaluate((el) => el.scrollHeight - el.scrollTop - el.clientHeight),
|
||||
)
|
||||
.toBeLessThan(24);
|
||||
await expect(jumpButton).toHaveCount(0);
|
||||
|
||||
// 위로 스크롤 → 자동 따라가기 해제 + '최신으로' 복귀 버튼 노출.
|
||||
await scroller.evaluate((el) => {
|
||||
el.scrollTop = 0;
|
||||
el.dispatchEvent(new Event("scroll"));
|
||||
});
|
||||
await scroller.hover();
|
||||
await page.mouse.wheel(0, -10_000);
|
||||
await expect(jumpButton).toBeVisible();
|
||||
await page.setViewportSize({ width: 320, height: 568 });
|
||||
await expect(jumpButton).toBeVisible();
|
||||
await expect
|
||||
.poll(() =>
|
||||
scroller.evaluate((el) => el.scrollHeight - el.scrollTop - el.clientHeight),
|
||||
)
|
||||
.toBeGreaterThanOrEqual(24);
|
||||
|
||||
await jumpButton.click();
|
||||
await expect(jumpButton).toHaveCount(0);
|
||||
|
|
|
|||
|
|
@ -806,9 +806,14 @@ async function expectMobileActiveVisualIntegrity(page: Page) {
|
|||
const avatar = visibleRect(".sx-orb-wrap");
|
||||
const client = visibleRect(".sx-stage__client");
|
||||
const now = visibleRect(".sx-stage__now");
|
||||
const sessionbar = visibleRect(".sx-sessionbar");
|
||||
const timebar = visibleRect(".sx-timebar");
|
||||
const mobileContext = visibleRect(".sx-mobile-context");
|
||||
const transcript = visibleRect(".sx-transcript");
|
||||
const transcriptHead = visibleRect(".sx-transcript__head");
|
||||
const scroll = visibleRect(".sx-transcript__scroll");
|
||||
const compose = visibleRect(".sx-compose");
|
||||
const controlbar = visibleRect(".sx-controlbar");
|
||||
const replies = Array.from(
|
||||
document.querySelectorAll<HTMLElement>(".sx-transcript__scroll .sx-utt"),
|
||||
).filter((element) => getComputedStyle(element).display !== "none");
|
||||
|
|
@ -820,6 +825,44 @@ async function expectMobileActiveVisualIntegrity(page: Page) {
|
|||
|
||||
return {
|
||||
viewport: `${innerWidth}x${innerHeight}`,
|
||||
compactStage: innerWidth <= 420 && innerHeight <= 620,
|
||||
avatarHidden: avatar == null,
|
||||
geometry: {
|
||||
scroll: scroll
|
||||
? { top: scroll.top, bottom: scroll.bottom, height: scroll.height }
|
||||
: null,
|
||||
scrollClientHeight:
|
||||
document.querySelector<HTMLElement>(".sx-transcript__scroll")?.clientHeight ?? null,
|
||||
scrollHeight:
|
||||
document.querySelector<HTMLElement>(".sx-transcript__scroll")?.scrollHeight ?? null,
|
||||
scrollTop:
|
||||
document.querySelector<HTMLElement>(".sx-transcript__scroll")?.scrollTop ?? null,
|
||||
latestReply: latestReply
|
||||
? { top: latestReply.top, bottom: latestReply.bottom, height: latestReply.height }
|
||||
: null,
|
||||
sessionbar: sessionbar
|
||||
? { top: sessionbar.top, bottom: sessionbar.bottom, height: sessionbar.height }
|
||||
: null,
|
||||
timebar: timebar
|
||||
? { top: timebar.top, bottom: timebar.bottom, height: timebar.height }
|
||||
: null,
|
||||
mobileContext: mobileContext
|
||||
? { top: mobileContext.top, bottom: mobileContext.bottom, height: mobileContext.height }
|
||||
: null,
|
||||
transcript: transcript
|
||||
? { top: transcript.top, bottom: transcript.bottom, height: transcript.height }
|
||||
: null,
|
||||
transcriptHead: transcriptHead
|
||||
? { top: transcriptHead.top, bottom: transcriptHead.bottom, height: transcriptHead.height }
|
||||
: null,
|
||||
compose: compose
|
||||
? { top: compose.top, bottom: compose.bottom, height: compose.height }
|
||||
: null,
|
||||
stage: stage ? { top: stage.top, bottom: stage.bottom, height: stage.height } : null,
|
||||
controlbar: controlbar
|
||||
? { top: controlbar.top, bottom: controlbar.bottom, height: controlbar.height }
|
||||
: null,
|
||||
},
|
||||
overlaps,
|
||||
stageContainsAvatar: Boolean(stage && avatar && contained(stage, avatar)),
|
||||
stageContainsClient: Boolean(stage && client && contained(stage, client)),
|
||||
|
|
@ -836,13 +879,18 @@ async function expectMobileActiveVisualIntegrity(page: Page) {
|
|||
};
|
||||
});
|
||||
|
||||
expect(result.overlaps, result.viewport).toEqual([]);
|
||||
expect(result.stageContainsAvatar, result.viewport).toBe(true);
|
||||
expect(result.stageContainsClient, result.viewport).toBe(true);
|
||||
expect(result.statusHidden, result.viewport).toBe(true);
|
||||
expect(result.transcriptContained, result.viewport).toBe(true);
|
||||
expect(result.composeContained, result.viewport).toBe(true);
|
||||
expect(result.latestReplyVisible, result.viewport).toBe(true);
|
||||
const diagnostic = `${result.viewport} ${JSON.stringify(result.geometry)}`;
|
||||
expect(result.overlaps, diagnostic).toEqual([]);
|
||||
if (result.compactStage) {
|
||||
expect(result.avatarHidden, diagnostic).toBe(true);
|
||||
} else {
|
||||
expect(result.stageContainsAvatar, diagnostic).toBe(true);
|
||||
}
|
||||
expect(result.stageContainsClient, diagnostic).toBe(true);
|
||||
expect(result.statusHidden, diagnostic).toBe(true);
|
||||
expect(result.transcriptContained, diagnostic).toBe(true);
|
||||
expect(result.composeContained, diagnostic).toBe(true);
|
||||
expect(result.latestReplyVisible, diagnostic).toBe(true);
|
||||
}
|
||||
|
||||
async function capture(page: Page, projectName: string, stage: string) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue