1394 lines
53 KiB
TypeScript
1394 lines
53 KiB
TypeScript
import path from "node:path";
|
|
import { expect, test, type Page, type Route } from "@playwright/test";
|
|
import type { DeliberatePracticeReadModel } from "../src/pages/session-review/deliberatePracticeApi";
|
|
import { parsePracticeLaunchIntent } from "../src/lib/practiceLaunchIntent";
|
|
import {
|
|
filledReviewResponse,
|
|
routePrepostMeasures,
|
|
} from "./session-review-fixture";
|
|
import { expectNoHorizontalOverflow } from "./support";
|
|
|
|
const LEARNER_ID = "71000000-0000-4000-8000-000000000001";
|
|
const PRIMARY_SESSION_ID = "71000000-0000-4000-8000-000000000000";
|
|
const RETRY_SESSION_ID = "71000000-0000-4000-8000-000000000002";
|
|
const TURN_IDS = [
|
|
"71000000-0000-4000-8000-000000000011",
|
|
"71000000-0000-4000-8000-000000000012",
|
|
"71000000-0000-4000-8000-000000000013",
|
|
"71000000-0000-4000-8000-000000000014",
|
|
"71000000-0000-4000-8000-000000000015",
|
|
"71000000-0000-4000-8000-000000000016",
|
|
];
|
|
const PRESCRIPTION_ID = "oas-g4-practice-self-directed-replay";
|
|
const LEARNER_TEXT = "그 무기력함이 가장 크게 느껴지는 때를 천천히 살펴봐도 괜찮을까요?";
|
|
const CLIENT_REPLY = "아침에 눈을 뜰 때가 제일 막막해요.";
|
|
|
|
async function fulfillJson(route: Route, body: unknown, status = 200) {
|
|
await route.fulfill({
|
|
status,
|
|
contentType: "application/json",
|
|
body: JSON.stringify(body),
|
|
});
|
|
}
|
|
|
|
function practiceReadModel(observed = false): DeliberatePracticeReadModel {
|
|
const model: DeliberatePracticeReadModel = {
|
|
learner_id: LEARNER_ID,
|
|
clinical_claim_allowed: false,
|
|
prescriptions: [
|
|
{
|
|
prescription_record_id: "71000000-0000-4000-8000-000000000021",
|
|
prescription_key: PRESCRIPTION_ID,
|
|
session_id: PRIMARY_SESSION_ID,
|
|
competency_id: "competency.empathic_reflection",
|
|
criterion_id: "criterion.reflect-and-check",
|
|
observable_behavior: "핵심 정서를 한 문장으로 반영한 뒤 이해가 맞는지 확인한다.",
|
|
activity_mode: "replay",
|
|
scenario_variant_id: "self-directed-reflection-replay",
|
|
scenario_novelty: "familiar",
|
|
difficulty_level: 1,
|
|
prescription_payload: {
|
|
schema_version: "vignette.practice-prescription.v1",
|
|
event_name: "practice.prescribed",
|
|
prescription_id: PRESCRIPTION_ID,
|
|
coaching_card_id: "oas-g4-card-self-directed-replay",
|
|
scene_id: "self-directed-review-scene",
|
|
competency_id: "competency.empathic_reflection",
|
|
criterion_id: "criterion.reflect-and-check",
|
|
observable_behavior:
|
|
"핵심 정서를 한 문장으로 반영한 뒤 이해가 맞는지 확인한다.",
|
|
activity: {
|
|
mode: "replay",
|
|
launch_intent: "practice.replay.launch",
|
|
scenario_variant_id: "self-directed-reflection-replay",
|
|
scenario_novelty: "familiar",
|
|
difficulty_level: 1,
|
|
pause_at_evidence_ref: TURN_IDS[0],
|
|
},
|
|
can_launch: true,
|
|
evidence_refs: [
|
|
{
|
|
ref_id: TURN_IDS[0],
|
|
scene_id: "self-directed-review-scene",
|
|
turn_index: 1,
|
|
actor: "learner",
|
|
kind: "learner_behavior",
|
|
},
|
|
{
|
|
ref_id: TURN_IDS[1],
|
|
scene_id: "self-directed-review-scene",
|
|
turn_index: 2,
|
|
actor: "client",
|
|
kind: "client_response",
|
|
},
|
|
],
|
|
source_refs: ["ui-fixture:self-directed-loop:v1"],
|
|
uncertainty: 0.35,
|
|
counterevidence: ["unseen_transfer_not_verified"],
|
|
},
|
|
coach_claim:
|
|
"정서를 알아차렸지만 이해가 맞는지 확인하기 전에 다음 질문으로 이동했습니다.",
|
|
card_key: "oas-g4-card-self-directed-replay",
|
|
evidence_turn_ids: [TURN_IDS[0], TURN_IDS[1]],
|
|
source_refs: ["ui-fixture:self-directed-loop:v1"],
|
|
uncertainty: 0.35,
|
|
counterevidence: ["unseen_transfer_not_verified"],
|
|
created_at: "2026-08-07T03:00:00Z",
|
|
},
|
|
],
|
|
episodes: observed
|
|
? [
|
|
{
|
|
episode_submission_id:
|
|
"71000000-0000-4000-8000-000000000041",
|
|
episode_key: "runtime-practice-retry-session",
|
|
session_id: RETRY_SESSION_ID,
|
|
progress: "transfer_pending",
|
|
mastery_allowed: false,
|
|
mastery_blockers: ["unseen_transfer_not_verified"],
|
|
uncertainty: 0.25,
|
|
evidence_turn_ids: [TURN_IDS[2], TURN_IDS[3]],
|
|
counterevidence: ["unseen_transfer_not_verified"],
|
|
assessment_payload: {
|
|
prescription_id: PRESCRIPTION_ID,
|
|
competency_id: "competency.empathic_reflection",
|
|
practice_session_source: "independent_observer",
|
|
} as DeliberatePracticeReadModel["episodes"][number]["assessment_payload"],
|
|
created_at: "2026-08-07T03:20:00Z",
|
|
attempts: [
|
|
{
|
|
attempt_record_id:
|
|
"71000000-0000-4000-8000-000000000042",
|
|
attempt_key: "runtime-practice-retry-session-attempt-1",
|
|
episode_submission_id:
|
|
"71000000-0000-4000-8000-000000000041",
|
|
sequence_no: 1,
|
|
scenario_variant_id: "runtime-session-retry",
|
|
scenario_novelty: "familiar",
|
|
difficulty_level: 1,
|
|
criterion_status: "observed",
|
|
client_response: "engaged",
|
|
outcome: "passed",
|
|
utterance_template_id: "utterance-sha256:runtime-fixture",
|
|
learner_claimed_success: false,
|
|
uncertainty: 0.25,
|
|
evidence_turn_ids: [TURN_IDS[2], TURN_IDS[3]],
|
|
counterevidence: [],
|
|
attempt_payload: {
|
|
observation_source: "independent_observer",
|
|
},
|
|
created_at: "2026-08-07T03:20:00Z",
|
|
corrections: [],
|
|
},
|
|
],
|
|
},
|
|
]
|
|
: [],
|
|
competency_graph: {
|
|
schema_version: "vignette.competency-graph.v1",
|
|
definitions: [
|
|
{
|
|
competency_id: "competency.empathic_reflection",
|
|
label_ko: "공감적 반영",
|
|
description: "정서를 반영하고 이해가 맞는지 확인하는 역량입니다.",
|
|
prerequisite_ids: [],
|
|
},
|
|
],
|
|
states: [
|
|
{
|
|
competency_id: "competency.empathic_reflection",
|
|
band: observed ? "consistent_local" : "unassessed",
|
|
forgetting_risk: 0.7,
|
|
uncertainty: 0.35,
|
|
attempt_count: observed ? 1 : 0,
|
|
familiar_demonstrations: observed ? 1 : 0,
|
|
unseen_transfer_demonstrations: 0,
|
|
highest_familiar_difficulty: 0,
|
|
evidence_refs: [],
|
|
counterevidence: ["unseen_transfer_not_verified"],
|
|
},
|
|
],
|
|
},
|
|
snapshot_id: observed
|
|
? "71000000-0000-4000-8000-000000000043"
|
|
: "71000000-0000-4000-8000-000000000022",
|
|
snapshot_no: observed ? 2 : 1,
|
|
next_practice: {
|
|
schema_version: "vignette.curriculum-decision.v1",
|
|
selected_prescription_id: PRESCRIPTION_ID,
|
|
competency_id: "competency.empathic_reflection",
|
|
competency_band: "unassessed",
|
|
forgetting_risk: 0.7,
|
|
mode: "replay",
|
|
selection_basis: [
|
|
"weakest_available_band:unassessed",
|
|
"scenario_novelty:familiar",
|
|
],
|
|
deferred_prescription_ids: [],
|
|
blocked_prescription_reasons: [],
|
|
},
|
|
decision_id: "71000000-0000-4000-8000-000000000023",
|
|
};
|
|
return model;
|
|
}
|
|
|
|
function sessionSummary(ended: boolean) {
|
|
return {
|
|
session_id: PRIMARY_SESSION_ID,
|
|
persona_code: "P1",
|
|
persona_name: "민서",
|
|
session_no: 1,
|
|
status: ended ? "ended" : "active",
|
|
stage: ended ? "탐색" : "라포",
|
|
started_at: "2026-08-07T02:00:00Z",
|
|
ended_at: ended ? "2026-08-07T02:10:00Z" : null,
|
|
review_ready: ended,
|
|
turn_count: ended ? 2 : 0,
|
|
learner_turn_count: ended ? 1 : 0,
|
|
client_turn_count: ended ? 1 : 0,
|
|
archived: false,
|
|
archived_at: null,
|
|
};
|
|
}
|
|
|
|
function activeSessionDetail(sessionId: string, ended: boolean) {
|
|
return {
|
|
session_id: sessionId,
|
|
case_id: "self-directed-case-001",
|
|
persona_code: "P1",
|
|
persona_name: "민서",
|
|
session_no: sessionId === PRIMARY_SESSION_ID ? 1 : 2,
|
|
status: ended ? "ended" : "active",
|
|
stage: ended ? "탐색" : "라포",
|
|
theory_mode: "humanistic",
|
|
effective_openness: ended ? 0.42 : 0.21,
|
|
started_at: "2026-08-07T02:00:00Z",
|
|
ended_at: ended ? "2026-08-07T02:10:00Z" : null,
|
|
review_ready: ended,
|
|
goal_stages: ["라포", "탐색", "개입"],
|
|
turns: ended
|
|
? [
|
|
{
|
|
turn_id: TURN_IDS[0],
|
|
turn_seq: 1,
|
|
speaker: "counselor",
|
|
stage: "라포",
|
|
text: LEARNER_TEXT,
|
|
text_masked: LEARNER_TEXT,
|
|
},
|
|
{
|
|
turn_id: TURN_IDS[1],
|
|
turn_seq: 2,
|
|
speaker: "client",
|
|
stage: "탐색",
|
|
text: CLIENT_REPLY,
|
|
text_masked: CLIENT_REPLY,
|
|
},
|
|
]
|
|
: [],
|
|
};
|
|
}
|
|
|
|
async function routeSelfDirectedUiFixture(page: Page) {
|
|
let primaryEnded = false;
|
|
let retryEnded = false;
|
|
let practiceObserved = false;
|
|
let practiceReadCount = 0;
|
|
let runtimeObservationCount = 0;
|
|
let startCount = 0;
|
|
const startRequests: Array<Record<string, unknown>> = [];
|
|
const runtimeObservationRequests: Array<{
|
|
method: string;
|
|
url: string;
|
|
body: string | null;
|
|
}> = [];
|
|
|
|
await page.addInitScript(() => {
|
|
const audit = { getUserMedia: 0, enumerateDevices: 0 };
|
|
Object.defineProperty(globalThis, "__selfDirectedMediaAudit", {
|
|
configurable: true,
|
|
value: audit,
|
|
});
|
|
const denied = async (kind: keyof typeof audit) => {
|
|
audit[kind] += 1;
|
|
throw new DOMException(
|
|
"물리 미디어 접근은 자기주도 UI fixture에서 금지됩니다.",
|
|
"NotAllowedError",
|
|
);
|
|
};
|
|
if (!navigator.mediaDevices) {
|
|
Object.defineProperty(navigator, "mediaDevices", {
|
|
configurable: true,
|
|
value: {},
|
|
});
|
|
}
|
|
Object.defineProperty(navigator.mediaDevices, "getUserMedia", {
|
|
configurable: true,
|
|
value: () => denied("getUserMedia"),
|
|
});
|
|
Object.defineProperty(navigator.mediaDevices, "enumerateDevices", {
|
|
configurable: true,
|
|
value: () => denied("enumerateDevices"),
|
|
});
|
|
});
|
|
|
|
// Fail closed: every unowned API route is a fixture 404, never a real backend call.
|
|
await page.route("**/api/**", (route) =>
|
|
fulfillJson(route, { detail: "not part of self-directed UI fixture" }, 404),
|
|
);
|
|
await page.route("**/api/auth/me", (route) =>
|
|
fulfillJson(route, {
|
|
user_id: LEARNER_ID,
|
|
email: "self-directed-ui-fixture@hs.ac.kr",
|
|
display_name: "자기주도 UI Fixture",
|
|
role: "learner",
|
|
admin_access: false,
|
|
super_admin: false,
|
|
account_status: "approved",
|
|
approval_required: false,
|
|
cohort_ids: ["ui-fixture"],
|
|
consent_at: 1,
|
|
onboarding_completed_at: 1,
|
|
nickname: "자기주도 학습자",
|
|
self_introduction: "",
|
|
avatar_url: "",
|
|
}),
|
|
);
|
|
await page.route("**/api/personas", (route) =>
|
|
fulfillJson(route, [
|
|
{
|
|
code: "P1",
|
|
display_name: "민서(가명) · 고2 · 무기력과 학교 적응",
|
|
difficulty: "hard",
|
|
theory_target: ["humanistic", "cbt"],
|
|
demographics: { age_band: "10대" },
|
|
presenting_summary: "무기력과 학교 적응을 다루는 상담 연습",
|
|
voice_preset: "soft-young-fem",
|
|
source: "database",
|
|
degraded: false,
|
|
},
|
|
]),
|
|
);
|
|
await page.route("**/api/sessions/dashboard", (route) =>
|
|
fulfillJson(route, {
|
|
source: "ui_fixture",
|
|
message: "로그인 없는 브라우저 UI 계약 fixture",
|
|
overview: {
|
|
total_sessions: primaryEnded ? 1 : 0,
|
|
active_sessions: 0,
|
|
completed_sessions: primaryEnded ? 1 : 0,
|
|
review_ready_sessions: primaryEnded ? 1 : 0,
|
|
archived_sessions: 0,
|
|
learner_turns: primaryEnded ? 1 : 0,
|
|
client_turns: primaryEnded ? 1 : 0,
|
|
last_practiced_at: primaryEnded ? "2026-08-07T02:10:00Z" : null,
|
|
},
|
|
growth: {
|
|
evaluated_sessions: primaryEnded ? 1 : 0,
|
|
trend: "insufficient",
|
|
avg_rapport: null,
|
|
avg_score: null,
|
|
first_score: null,
|
|
latest_score: null,
|
|
score_delta: null,
|
|
points: [],
|
|
top_techniques: [],
|
|
},
|
|
recent_feedback: [],
|
|
persona_progress: [],
|
|
achievements: [],
|
|
}),
|
|
);
|
|
await page.route("**/api/sessions", async (route) => {
|
|
if (route.request().method() === "POST") {
|
|
startCount += 1;
|
|
startRequests.push(
|
|
route.request().postDataJSON() as Record<string, unknown>,
|
|
);
|
|
await fulfillJson(
|
|
route,
|
|
{
|
|
session_id:
|
|
startCount === 1 ? PRIMARY_SESSION_ID : RETRY_SESSION_ID,
|
|
case_id: "self-directed-case-001",
|
|
session_no: startCount,
|
|
stage: "라포",
|
|
effective_openness: 0.21,
|
|
recall_summary: null,
|
|
degraded: false,
|
|
goal_stages: ["라포", "탐색", "개입"],
|
|
},
|
|
201,
|
|
);
|
|
return;
|
|
}
|
|
await fulfillJson(route, {
|
|
source: "ui_fixture",
|
|
sessions: primaryEnded ? [sessionSummary(true)] : [],
|
|
});
|
|
});
|
|
await page.route(/\/api\/sessions\/(P1|[0-9a-f-]{36})$/, (route) => {
|
|
const sessionId = new URL(route.request().url()).pathname.split("/").at(-1)!;
|
|
if (sessionId === "P1") {
|
|
return fulfillJson(route, { detail: "persona route, not a session UUID" }, 404);
|
|
}
|
|
return fulfillJson(
|
|
route,
|
|
activeSessionDetail(
|
|
sessionId,
|
|
(sessionId === PRIMARY_SESSION_ID && primaryEnded) ||
|
|
(sessionId === RETRY_SESSION_ID && retryEnded),
|
|
),
|
|
);
|
|
});
|
|
for (const sessionId of [PRIMARY_SESSION_ID, RETRY_SESSION_ID]) {
|
|
await page.route(`**/api/sessions/${sessionId}/alliance-pulses`, (route) =>
|
|
fulfillJson(route, {
|
|
items: [
|
|
{
|
|
pulse_id:
|
|
sessionId === PRIMARY_SESSION_ID
|
|
? "71000000-0000-4000-8000-000000000031"
|
|
: "71000000-0000-4000-8000-000000000032",
|
|
checkpoint: "pre",
|
|
status: "ready",
|
|
learner_locked_at: "2026-08-07T02:00:00Z",
|
|
revealed_at: "2026-08-07T02:00:01Z",
|
|
error_code: null,
|
|
self_scores: { goal: 0.5, task: 0.5, bond: 0.5 },
|
|
measurements: [],
|
|
},
|
|
],
|
|
}),
|
|
);
|
|
await page.route(`**/api/sessions/${sessionId}/live-coach`, (route) =>
|
|
fulfillJson(route, {
|
|
source: "ui_fixture",
|
|
quota: { remaining: 3, max: 3 },
|
|
credit_events: [],
|
|
events: [],
|
|
}),
|
|
);
|
|
}
|
|
await page.route(`**/api/sessions/${PRIMARY_SESSION_ID}/stream`, (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: [
|
|
"event: token",
|
|
`data: ${CLIENT_REPLY}`,
|
|
"",
|
|
"event: done",
|
|
`data: ${JSON.stringify({
|
|
session_id: PRIMARY_SESSION_ID,
|
|
stage: "탐색",
|
|
effective_openness: 0.42,
|
|
turn_seq: 1,
|
|
safety_flagged: false,
|
|
})}`,
|
|
"",
|
|
].join("\n"),
|
|
}),
|
|
);
|
|
await page.route(`**/api/sessions/${RETRY_SESSION_ID}/stream`, (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: [
|
|
"event: token",
|
|
`data: ${CLIENT_REPLY}`,
|
|
"",
|
|
"event: done",
|
|
`data: ${JSON.stringify({
|
|
session_id: RETRY_SESSION_ID,
|
|
stage: "탐색",
|
|
effective_openness: 0.48,
|
|
turn_seq: 1,
|
|
safety_flagged: false,
|
|
})}`,
|
|
"",
|
|
].join("\n"),
|
|
}),
|
|
);
|
|
await page.route(`**/api/sessions/${PRIMARY_SESSION_ID}/end`, (route) => {
|
|
primaryEnded = true;
|
|
return fulfillJson(route, {
|
|
session_id: PRIMARY_SESSION_ID,
|
|
session_no: 1,
|
|
digest_pending: true,
|
|
end_state: {
|
|
stage: "탐색",
|
|
turn_seq: 1,
|
|
effective_openness: 0.42,
|
|
},
|
|
});
|
|
});
|
|
await page.route(`**/api/sessions/${PRIMARY_SESSION_ID}/review`, (route) => {
|
|
const review = filledReviewResponse(PRIMARY_SESSION_ID);
|
|
review.turns = review.turns.map((turn, index) => ({
|
|
...turn,
|
|
turn_id: TURN_IDS[index],
|
|
}));
|
|
review.summary = "평가 AI가 저장된 축어록을 분석했습니다.";
|
|
review.clientFeedback = CLIENT_REPLY;
|
|
return fulfillJson(route, review);
|
|
});
|
|
await page.route(`**/api/sessions/${RETRY_SESSION_ID}/end`, (route) => {
|
|
retryEnded = true;
|
|
return fulfillJson(route, {
|
|
session_id: RETRY_SESSION_ID,
|
|
session_no: 2,
|
|
digest_pending: true,
|
|
end_state: {
|
|
stage: "탐색",
|
|
turn_seq: 1,
|
|
effective_openness: 0.48,
|
|
},
|
|
});
|
|
});
|
|
await page.route(`**/api/sessions/${RETRY_SESSION_ID}/review`, (route) => {
|
|
const review = filledReviewResponse(RETRY_SESSION_ID);
|
|
review.turns = review.turns.map((turn, index) => ({
|
|
...turn,
|
|
turn_id: TURN_IDS[index + 2],
|
|
}));
|
|
review.summary = "재연습 회기의 저장된 축어록 평가가 준비됐습니다.";
|
|
review.clientFeedback = CLIENT_REPLY;
|
|
return fulfillJson(route, review);
|
|
});
|
|
await page.route("**/api/practice/learners/me", (route) => {
|
|
practiceReadCount += 1;
|
|
return fulfillJson(route, practiceReadModel(practiceObserved));
|
|
});
|
|
await page.route(
|
|
`**/api/practice/${PRESCRIPTION_ID}/attempts/from-session/${RETRY_SESSION_ID}`,
|
|
(route) => {
|
|
runtimeObservationCount += 1;
|
|
runtimeObservationRequests.push({
|
|
method: route.request().method(),
|
|
url: route.request().url(),
|
|
body: route.request().postData(),
|
|
});
|
|
if (runtimeObservationCount === 1) {
|
|
return fulfillJson(
|
|
route,
|
|
{
|
|
detail:
|
|
"session evaluation is not ready for runtime practice observation",
|
|
},
|
|
422,
|
|
);
|
|
}
|
|
practiceObserved = true;
|
|
return fulfillJson(
|
|
route,
|
|
{
|
|
submission_id: "71000000-0000-4000-8000-000000000041",
|
|
progress: "transfer_pending",
|
|
mastery_allowed: false,
|
|
snapshot_id: "71000000-0000-4000-8000-000000000043",
|
|
decision_id: "71000000-0000-4000-8000-000000000044",
|
|
next_prescription_id: PRESCRIPTION_ID,
|
|
idempotent_replay: runtimeObservationCount > 2,
|
|
},
|
|
201,
|
|
);
|
|
},
|
|
);
|
|
await page.route("**/api/voice/health", (route) =>
|
|
fulfillJson(route, { available: false, reason: "UI fixture: physical mic disabled" }),
|
|
);
|
|
await routePrepostMeasures(page);
|
|
|
|
return {
|
|
startRequests,
|
|
runtimeObservationRequests,
|
|
get primaryEnded() {
|
|
return primaryEnded;
|
|
},
|
|
get retryEnded() {
|
|
return retryEnded;
|
|
},
|
|
get practiceReadCount() {
|
|
return practiceReadCount;
|
|
},
|
|
};
|
|
}
|
|
|
|
async function expectInsideInitialViewport(
|
|
page: Page,
|
|
selector: string,
|
|
label: string,
|
|
) {
|
|
const result = await page.locator(selector).evaluate((element) => {
|
|
const rect = element.getBoundingClientRect();
|
|
return {
|
|
top: rect.top,
|
|
right: rect.right,
|
|
bottom: rect.bottom,
|
|
left: rect.left,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
viewportWidth: window.innerWidth,
|
|
viewportHeight: window.innerHeight,
|
|
};
|
|
});
|
|
expect(result.top, `${label} top`).toBeGreaterThanOrEqual(0);
|
|
expect(result.left, `${label} left`).toBeGreaterThanOrEqual(0);
|
|
expect(result.right, `${label} right`).toBeLessThanOrEqual(
|
|
result.viewportWidth,
|
|
);
|
|
expect(result.bottom, `${label} bottom`).toBeLessThanOrEqual(
|
|
result.viewportHeight,
|
|
);
|
|
expect(result.height, `${label} touch target height`).toBeGreaterThanOrEqual(
|
|
44,
|
|
);
|
|
}
|
|
|
|
async function expectMinimumHitTargets(
|
|
page: Page,
|
|
selector: string,
|
|
label: string,
|
|
) {
|
|
const boxes = await page.locator(selector).evaluateAll((elements) =>
|
|
elements
|
|
.filter((element) => {
|
|
const style = getComputedStyle(element);
|
|
const rect = element.getBoundingClientRect();
|
|
return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0;
|
|
})
|
|
.map((element) => {
|
|
const rect = element.getBoundingClientRect();
|
|
return {
|
|
text: element.textContent?.trim() ?? "",
|
|
width: rect.width,
|
|
height: rect.height,
|
|
};
|
|
}),
|
|
);
|
|
expect(boxes.length, `${label} count`).toBeGreaterThan(0);
|
|
for (const box of boxes) {
|
|
expect(box.width, `${label} ${box.text} width`).toBeGreaterThanOrEqual(44);
|
|
expect(box.height, `${label} ${box.text} height`).toBeGreaterThanOrEqual(44);
|
|
}
|
|
}
|
|
|
|
async function expectAtMainScrollStart(
|
|
page: Page,
|
|
selector: string,
|
|
label: string,
|
|
) {
|
|
const main = page.locator(".vg-main");
|
|
await main.evaluate((element) => {
|
|
element.scrollTop = 0;
|
|
});
|
|
const result = await page.locator(selector).evaluate((element) => {
|
|
const mainElement = document.querySelector<HTMLElement>(".vg-main");
|
|
if (!mainElement) throw new Error(".vg-main not found");
|
|
const mainRect = mainElement.getBoundingClientRect();
|
|
const rect = element.getBoundingClientRect();
|
|
return {
|
|
scrollTop: mainElement.scrollTop,
|
|
top: rect.top,
|
|
bottom: rect.bottom,
|
|
mainTop: mainRect.top,
|
|
mainBottom: mainRect.bottom,
|
|
height: rect.height,
|
|
};
|
|
});
|
|
expect(result.scrollTop, `${label} main scroll start`).toBe(0);
|
|
expect(result.top, `${label} top`).toBeGreaterThanOrEqual(result.mainTop);
|
|
expect(result.bottom, `${label} bottom`).toBeLessThanOrEqual(result.mainBottom);
|
|
expect(result.height, `${label} touch target`).toBeGreaterThanOrEqual(44);
|
|
}
|
|
|
|
async function expectLearnerMobileNavIntegrity(page: Page) {
|
|
const result = await page.locator(".vg-nav").evaluate((nav) => {
|
|
const navRect = nav.getBoundingClientRect();
|
|
return Array.from(nav.querySelectorAll<HTMLElement>(".vg-nav__item")).map(
|
|
(item) => {
|
|
const rect = item.getBoundingClientRect();
|
|
return {
|
|
label: item.textContent?.trim() ?? "",
|
|
left: rect.left,
|
|
right: rect.right,
|
|
height: rect.height,
|
|
navLeft: navRect.left,
|
|
navRight: navRect.right,
|
|
};
|
|
},
|
|
);
|
|
});
|
|
expect(result.map((item) => item.label)).toEqual([
|
|
"대시보드",
|
|
"학습",
|
|
"기록",
|
|
"설정",
|
|
]);
|
|
for (const item of result) {
|
|
expect(item.left, `${item.label} left`).toBeGreaterThanOrEqual(item.navLeft);
|
|
expect(item.right, `${item.label} right`).toBeLessThanOrEqual(item.navRight);
|
|
expect(item.height, `${item.label} touch target height`).toBeGreaterThanOrEqual(
|
|
44,
|
|
);
|
|
}
|
|
}
|
|
|
|
async function expectNoPhysicalMediaAccess(page: Page) {
|
|
const audit = await page.evaluate(() =>
|
|
(
|
|
globalThis as typeof globalThis & {
|
|
__selfDirectedMediaAudit?: {
|
|
getUserMedia: number;
|
|
enumerateDevices: number;
|
|
};
|
|
}
|
|
).__selfDirectedMediaAudit,
|
|
);
|
|
expect(audit).toEqual({ getUserMedia: 0, enumerateDevices: 0 });
|
|
}
|
|
|
|
async function expectReadableButtonContrast(page: Page, name: string) {
|
|
const ratio = await page
|
|
.getByRole("button", { name })
|
|
.evaluate((element) => {
|
|
const parse = (value: string): [number, number, number] => {
|
|
const channels = value.match(/[\d.]+/g)?.slice(0, 3).map(Number) ?? [];
|
|
return [channels[0] ?? 0, channels[1] ?? 0, channels[2] ?? 0];
|
|
};
|
|
const luminance = ([red, green, blue]: [number, number, number]) => {
|
|
const linear = [red, green, blue].map((channel) => {
|
|
const normalized = channel / 255;
|
|
return normalized <= 0.04045
|
|
? normalized / 12.92
|
|
: ((normalized + 0.055) / 1.055) ** 2.4;
|
|
});
|
|
return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
|
|
};
|
|
const style = getComputedStyle(element);
|
|
const foreground = luminance(parse(style.color));
|
|
const background = luminance(parse(style.backgroundColor));
|
|
return (
|
|
(Math.max(foreground, background) + 0.05) /
|
|
(Math.min(foreground, background) + 0.05)
|
|
);
|
|
});
|
|
expect(ratio, `${name} text contrast`).toBeGreaterThanOrEqual(4.5);
|
|
}
|
|
|
|
async function expectCoachNudgeContrast(page: Page) {
|
|
const ratios = await page.locator(".sx-coach-nudge").evaluate((element) => {
|
|
const parse = (value: string): [number, number, number] => {
|
|
const channels = value.match(/[\d.]+/g)?.slice(0, 3).map(Number) ?? [];
|
|
return [channels[0] ?? 0, channels[1] ?? 0, channels[2] ?? 0];
|
|
};
|
|
const luminance = ([red, green, blue]: [number, number, number]) => {
|
|
const linear = [red, green, blue].map((channel) => {
|
|
const normalized = channel / 255;
|
|
return normalized <= 0.04045
|
|
? normalized / 12.92
|
|
: ((normalized + 0.055) / 1.055) ** 2.4;
|
|
});
|
|
return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
|
|
};
|
|
const ratio = (foreground: string, background: string) => {
|
|
const foregroundLuminance = luminance(parse(foreground));
|
|
const backgroundLuminance = luminance(parse(background));
|
|
return (
|
|
(Math.max(foregroundLuminance, backgroundLuminance) + 0.05) /
|
|
(Math.min(foregroundLuminance, backgroundLuminance) + 0.05)
|
|
);
|
|
};
|
|
const buttonStyle = getComputedStyle(element);
|
|
const emphasis = element.querySelector<HTMLElement>("em");
|
|
return {
|
|
body: ratio(buttonStyle.color, buttonStyle.backgroundColor),
|
|
action: ratio(
|
|
emphasis ? getComputedStyle(emphasis).color : buttonStyle.color,
|
|
buttonStyle.backgroundColor,
|
|
),
|
|
};
|
|
});
|
|
expect(ratios.body, "코칭 토스트 본문 대비").toBeGreaterThanOrEqual(4.5);
|
|
expect(ratios.action, "코칭 열기 대비").toBeGreaterThanOrEqual(4.5);
|
|
}
|
|
|
|
async function expectMobileActiveVisualIntegrity(page: Page) {
|
|
const clientReply = page.locator(".sx-utt").filter({ hasText: CLIENT_REPLY });
|
|
await clientReply.scrollIntoViewIfNeeded();
|
|
const result = await page.evaluate(() => {
|
|
const visibleRect = (selector: string) => {
|
|
const element = document.querySelector<HTMLElement>(selector);
|
|
if (!element) return null;
|
|
const style = getComputedStyle(element);
|
|
const rect = element.getBoundingClientRect();
|
|
if (
|
|
style.display === "none" ||
|
|
style.visibility === "hidden" ||
|
|
rect.width <= 0 ||
|
|
rect.height <= 0
|
|
) {
|
|
return null;
|
|
}
|
|
return rect;
|
|
};
|
|
const intersects = (a: DOMRect, b: DOMRect) =>
|
|
Math.min(a.right, b.right) - Math.max(a.left, b.left) > 1 &&
|
|
Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 1;
|
|
const contained = (outer: DOMRect, inner: DOMRect) =>
|
|
inner.left >= outer.left - 1 &&
|
|
inner.right <= outer.right + 1 &&
|
|
inner.top >= outer.top - 1 &&
|
|
inner.bottom <= outer.bottom + 1;
|
|
|
|
const stage = visibleRect(".sx-stage");
|
|
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");
|
|
const latestReply = replies.at(-1)?.getBoundingClientRect() ?? null;
|
|
const overlaps: string[] = [];
|
|
if (avatar && client && intersects(avatar, client)) overlaps.push("avatar/client");
|
|
if (client && now && intersects(client, now)) overlaps.push("client/status");
|
|
if (scroll && compose && intersects(scroll, compose)) overlaps.push("transcript/compose");
|
|
|
|
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)),
|
|
statusHidden: now == null,
|
|
transcriptContained: Boolean(
|
|
transcript && scroll && contained(transcript, scroll),
|
|
),
|
|
composeContained: Boolean(
|
|
transcript && compose && contained(transcript, compose),
|
|
),
|
|
latestReplyVisible: Boolean(
|
|
scroll && latestReply && contained(scroll, latestReply),
|
|
),
|
|
};
|
|
});
|
|
|
|
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) {
|
|
if (process.env.E2E_SKIP_EVIDENCE_CAPTURE === "1") return;
|
|
const safeProject = projectName.replace(/[^a-z0-9-]+/gi, "-").toLowerCase();
|
|
const evidenceDirectory = process.env.E2E_EVIDENCE_DIR
|
|
? path.resolve(process.env.E2E_EVIDENCE_DIR)
|
|
: path.resolve(process.cwd(), "../../docs/ops/evidence");
|
|
await page.screenshot({
|
|
path: path.resolve(
|
|
evidenceDirectory,
|
|
`self-directed-loop-${stage}-${safeProject}-2026-08-07.png`,
|
|
),
|
|
fullPage: true,
|
|
animations: "disabled",
|
|
});
|
|
}
|
|
|
|
test.describe("학습자 자기주도 전체 루프 — 실제 src UI / route fixture", () => {
|
|
test("3.5초 경계의 자기주도 경로 전환이 복구되면 부트 진단을 즉시 닫는다", async ({
|
|
page,
|
|
}) => {
|
|
await routeSelfDirectedUiFixture(page);
|
|
await page.goto("/learn");
|
|
await expect(
|
|
page.getByRole("heading", { name: "오늘 이어갈 회기를 먼저 봅니다." }),
|
|
).toBeVisible();
|
|
|
|
// index.html의 첫 watchdog(3.5초)과 실제 자기주도 경로 전환을 겹친다.
|
|
// route가 잠깐 비어 보이는 동안에는 진단이 뜨되, React 콘텐츠 복구 후에는
|
|
// 두 번째 watchdog(8초)을 기다리지 않고 바로 사라져야 한다.
|
|
await page.evaluate(async () => {
|
|
const remaining = Math.max(0, 3_300 - performance.now());
|
|
await new Promise((resolve) => window.setTimeout(resolve, remaining));
|
|
const root = document.getElementById("root");
|
|
const action = document.querySelector<HTMLElement>(
|
|
"[data-learner-primary-action]",
|
|
);
|
|
if (!root || !action) {
|
|
throw new Error("self-directed route transition fixture unavailable");
|
|
}
|
|
root.style.visibility = "hidden";
|
|
action.click();
|
|
});
|
|
|
|
await expect(page).toHaveURL(/\/learn\/practice$/);
|
|
await expect(page.locator("#vignette-boot-diagnostic")).toBeVisible({
|
|
timeout: 1_200,
|
|
});
|
|
|
|
await page.evaluate(() => {
|
|
document.getElementById("root")?.style.removeProperty("visibility");
|
|
});
|
|
await expect(
|
|
page.getByRole("heading", { name: "연습할 내담자를 선택합니다." }),
|
|
).toBeVisible();
|
|
await expect(page.locator("#vignette-boot-diagnostic")).toHaveCount(0, {
|
|
timeout: 1_000,
|
|
});
|
|
});
|
|
|
|
test("React 부트가 실제로 비어 있으면 진단을 유지한다", async ({ page }) => {
|
|
await page.route(
|
|
/\/(?:src\/main\.tsx|assets\/index-[^/]+\.js)(?:\?.*)?$/,
|
|
(route) => route.abort("failed"),
|
|
);
|
|
await page.goto("/learn", { waitUntil: "domcontentloaded" });
|
|
|
|
const diagnostic = page.locator("#vignette-boot-diagnostic");
|
|
await expect(diagnostic).toBeVisible({ timeout: 4_500 });
|
|
await expect(diagnostic).toContainText("React 화면이 정상 콘텐츠를 표시하지 못해서");
|
|
await page.waitForTimeout(250);
|
|
await expect(diagnostic).toBeVisible();
|
|
await expect(page.locator("#root")).toBeEmpty();
|
|
});
|
|
|
|
test("홈 추천과 목표 선택부터 회기·복기·처방 재연습 시작까지 한 흐름으로 보존한다", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
const fixture = await routeSelfDirectedUiFixture(page);
|
|
|
|
await page.goto("/learn");
|
|
await expect(
|
|
page.getByRole("heading", { name: "오늘 이어갈 회기를 먼저 봅니다." }),
|
|
).toBeVisible();
|
|
await expect(page.getByLabel("AI 코치")).toContainText(
|
|
"첫 회기를 시작할 차례입니다.",
|
|
);
|
|
await expect(page.getByText("연습 목표를 좁힙니다.")).toBeVisible();
|
|
await expect(page.getByText("난도 확장 검토")).toBeVisible();
|
|
const dashboardTablist = page.getByRole("tablist", {
|
|
name: "대시보드 영역 선택",
|
|
});
|
|
const dashboardTabs = dashboardTablist.getByRole("tab");
|
|
await expect(dashboardTabs).toHaveCount(3);
|
|
for (const tabName of ["오늘의 회기", "기록 · 리뷰", "성장 지표"]) {
|
|
const tab = dashboardTablist.getByRole("tab", { name: tabName });
|
|
const panelId = await tab.getAttribute("aria-controls");
|
|
expect(panelId).toBeTruthy();
|
|
await expect(page.locator(`#${panelId}`)).toHaveAttribute("role", "tabpanel");
|
|
}
|
|
const todayTab = dashboardTablist.getByRole("tab", { name: "오늘의 회기" });
|
|
const recordsTab = dashboardTablist.getByRole("tab", { name: "기록 · 리뷰" });
|
|
const growthTab = dashboardTablist.getByRole("tab", { name: "성장 지표" });
|
|
await todayTab.focus();
|
|
await page.keyboard.press("End");
|
|
await expect(growthTab).toBeFocused();
|
|
await expect(growthTab).toHaveAttribute("aria-selected", "true");
|
|
await expect(page.locator("#lh-panel-growth")).toBeVisible();
|
|
await page.keyboard.press("Home");
|
|
await expect(todayTab).toBeFocused();
|
|
await page.keyboard.press("ArrowRight");
|
|
await expect(recordsTab).toBeFocused();
|
|
await expect(recordsTab).toHaveAttribute("aria-selected", "true");
|
|
await page.keyboard.press("ArrowLeft");
|
|
await expect(todayTab).toBeFocused();
|
|
await expect(todayTab).toHaveAttribute("tabindex", "0");
|
|
await expect(recordsTab).toHaveAttribute("tabindex", "-1");
|
|
await expectMinimumHitTargets(page, ".lh-tabs [role='tab']", "학습 홈 탭");
|
|
const primaryAction = page.locator("[data-learner-primary-action]");
|
|
await expect(primaryAction).toHaveCount(1);
|
|
await expect(primaryAction).toHaveAccessibleName("학습 대상 선택");
|
|
await expectInsideInitialViewport(
|
|
page,
|
|
"[data-learner-primary-action]",
|
|
"학습자 홈 핵심 행동",
|
|
);
|
|
await expectReadableButtonContrast(page, "학습 대상 선택");
|
|
await expectNoHorizontalOverflow(page);
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await page.setViewportSize({ width: 320, height: 568 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
await expectInsideInitialViewport(
|
|
page,
|
|
"[data-learner-primary-action]",
|
|
"320px 학습자 홈 핵심 행동",
|
|
);
|
|
await expectMinimumHitTargets(page, ".lh-tabs [role='tab']", "320px 학습 홈 탭");
|
|
await expectNoHorizontalOverflow(page);
|
|
await capture(page, testInfo.project.name, "home-320x568");
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
}
|
|
await capture(page, testInfo.project.name, "home");
|
|
|
|
await primaryAction.click();
|
|
await expect(page).toHaveURL(/\/learn\/practice$/);
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await expectLearnerMobileNavIntegrity(page);
|
|
}
|
|
const persona = page.getByRole("option", { name: /P1/ });
|
|
await persona.click();
|
|
await page.getByRole("button", { name: "새 회기 시작" }).click();
|
|
await expect(page).toHaveURL(/\/learn\/session\/P1$/);
|
|
|
|
const goals = page.getByRole("group", { name: "이번 회기 목표 선택" });
|
|
await expect(goals.getByRole("button", { name: /라포/ })).toHaveAttribute(
|
|
"aria-pressed",
|
|
"true",
|
|
);
|
|
await expect(goals.getByRole("button", { name: /탐색/ })).toHaveAttribute(
|
|
"aria-pressed",
|
|
"true",
|
|
);
|
|
await goals.getByRole("button", { name: /개입/ }).click();
|
|
await expect(goals.getByRole("button", { name: /개입/ })).toHaveAttribute(
|
|
"aria-pressed",
|
|
"true",
|
|
);
|
|
await page.getByRole("button", { name: "회기 시작" }).click();
|
|
await expect(page).toHaveURL(
|
|
new RegExp(`/learn/session/${PRIMARY_SESSION_ID}$`),
|
|
);
|
|
expect(fixture.startRequests[0]).toMatchObject({
|
|
persona_code: "P1",
|
|
theory_mode: "humanistic",
|
|
goal_stages: ["라포", "탐색", "개입"],
|
|
});
|
|
|
|
await expect(page.locator(".sx-page.sx-page--active")).toBeVisible();
|
|
await page.getByLabel("학습자 발화 입력").fill(LEARNER_TEXT);
|
|
await page.getByRole("button", { name: "보내기" }).click();
|
|
await expect(page.locator(".sx-utt").filter({ hasText: LEARNER_TEXT })).toBeVisible();
|
|
await expect(page.locator(".sx-utt").filter({ hasText: CLIENT_REPLY })).toBeVisible();
|
|
await expect(page.locator(".sx-page")).not.toContainText("[NAME]");
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await expect(
|
|
page.getByRole("region", { name: "현재 회기 요약" }),
|
|
).toContainText("호소 문제와 일상을 함께 이해");
|
|
} else {
|
|
await expect(page.getByText(/민서 · 탐색 단계/)).toBeVisible();
|
|
}
|
|
await expectNoHorizontalOverflow(page);
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
for (const viewport of [
|
|
{ width: 390, height: 844, stage: "active-session" },
|
|
{ width: 320, height: 568, stage: "active-session-320x568" },
|
|
]) {
|
|
await page.setViewportSize(viewport);
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
await expectMobileActiveVisualIntegrity(page);
|
|
await expectCoachNudgeContrast(page);
|
|
await expectNoHorizontalOverflow(page);
|
|
await capture(page, testInfo.project.name, viewport.stage);
|
|
}
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
} else {
|
|
await capture(page, testInfo.project.name, "active-session");
|
|
}
|
|
|
|
await page.getByRole("button", { name: "회기 종료" }).click();
|
|
await page.getByRole("button", { name: "종료하고 리뷰 보기" }).click();
|
|
await expect(page).toHaveURL(
|
|
new RegExp(`/learn/session/${PRIMARY_SESSION_ID}/review$`),
|
|
);
|
|
expect(fixture.primaryEnded).toBe(true);
|
|
await expect(
|
|
page.getByText("평가 AI가 저장된 축어록을 분석했습니다."),
|
|
).toBeVisible();
|
|
const reviewTablist = page.getByRole("tablist", { name: "리뷰 영역 선택" });
|
|
const reviewTabs = reviewTablist.getByRole("tab");
|
|
await expect(reviewTabs).toHaveCount(3);
|
|
for (const tabName of ["축어록", "피드백", "워크시트"]) {
|
|
const tab = reviewTablist.getByRole("tab", { name: tabName });
|
|
const panelIds = (await tab.getAttribute("aria-controls"))?.split(/\s+/) ?? [];
|
|
expect(panelIds.length, `${tabName} controls`).toBeGreaterThan(0);
|
|
for (const panelId of panelIds) {
|
|
await expect(page.locator(`#${panelId}`)).toHaveAttribute("role", "tabpanel");
|
|
}
|
|
}
|
|
const transcriptTab = reviewTablist.getByRole("tab", { name: "축어록" });
|
|
const feedbackTab = reviewTablist.getByRole("tab", { name: "피드백" });
|
|
const worksheetTab = reviewTablist.getByRole("tab", { name: "워크시트" });
|
|
await transcriptTab.focus();
|
|
await page.keyboard.press("End");
|
|
await expect(worksheetTab).toBeFocused();
|
|
await expect(worksheetTab).toHaveAttribute("aria-selected", "true");
|
|
await expect(page.locator("#sr-panel-worksheet")).toBeVisible();
|
|
await page.keyboard.press("Home");
|
|
await expect(transcriptTab).toBeFocused();
|
|
await page.keyboard.press("ArrowRight");
|
|
await expect(feedbackTab).toBeFocused();
|
|
await page.keyboard.press("ArrowLeft");
|
|
await expect(transcriptTab).toBeFocused();
|
|
await expect(transcriptTab).toHaveAttribute("tabindex", "0");
|
|
await expect(feedbackTab).toHaveAttribute("tabindex", "-1");
|
|
await expectMinimumHitTargets(page, ".sr-tabs [role='tab']", "리뷰 탭");
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await expectMinimumHitTargets(page, ".sr-chip-toggle", "축어록 필터");
|
|
await expectMinimumHitTargets(page, ".sr-actions .vg-btn", "리뷰 주요 행동");
|
|
}
|
|
await feedbackTab.click();
|
|
await expect(page.locator("#sr-panel-insights")).toBeVisible();
|
|
await expect(page.locator("#sr-panel-feedback")).toBeVisible();
|
|
await expect(page.locator(".sr-root")).not.toContainText(PRIMARY_SESSION_ID);
|
|
const practiceCard = page.locator(".dp-card");
|
|
await expect(practiceCard).toBeVisible();
|
|
await expect(practiceCard).toContainText("공감적 반영");
|
|
await expect(practiceCard).toContainText(
|
|
"핵심 정서를 한 문장으로 반영한 뒤 이해가 맞는지 확인한다.",
|
|
);
|
|
await expect(practiceCard).toContainText("행동 근거를 더 확인해야 합니다");
|
|
await expect(practiceCard).toContainText(
|
|
"숙달 확인에는 익숙한 장면과 다른 장면·다른 문장이 모두 필요합니다.",
|
|
);
|
|
await expect(practiceCard).toContainText("감정 반영 후 이해 확인");
|
|
await expect(practiceCard).toContainText("미지 사례 전이 아직 미검증");
|
|
await expect(practiceCard).not.toContainText("criterion.reflect-and-check");
|
|
await expect(practiceCard).not.toContainText("unseen_transfer_not_verified");
|
|
await expect(page.locator(".sr-root")).not.toContainText("[NAME]");
|
|
await expectNoHorizontalOverflow(page);
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await page.setViewportSize({ width: 320, height: 568 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
await practiceCard.scrollIntoViewIfNeeded();
|
|
await expectMinimumHitTargets(
|
|
page,
|
|
".dp-launch-ticket__cta",
|
|
"320px 처방 연습 시작 행동",
|
|
);
|
|
await expectNoHorizontalOverflow(page);
|
|
await capture(page, testInfo.project.name, "review-prescription-320x568");
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
}
|
|
await practiceCard.scrollIntoViewIfNeeded();
|
|
await capture(page, testInfo.project.name, "review-prescription");
|
|
|
|
const launch = practiceCard.getByRole("link", {
|
|
name: "이 처방으로 연습 시작",
|
|
});
|
|
await expect(launch).toBeVisible();
|
|
await launch.focus();
|
|
await page.keyboard.press("Enter");
|
|
await expect(page).toHaveURL(/\/learn\/practice\?/);
|
|
const practiceHomeUrl = new URL(page.url());
|
|
expect(parsePracticeLaunchIntent(practiceHomeUrl.searchParams)).toEqual({
|
|
kind: "deliberate",
|
|
prescriptionId: PRESCRIPTION_ID,
|
|
suiteId: null,
|
|
trialId: null,
|
|
sourceSessionId: PRIMARY_SESSION_ID,
|
|
criterionId: "criterion.reflect-and-check",
|
|
novelty: "familiar",
|
|
mode: "replay",
|
|
});
|
|
await expect(
|
|
page.getByRole("heading", { name: "장면 다시 보기 처방을 이어받았습니다." }),
|
|
).toBeVisible();
|
|
const launchDetails = page.locator(
|
|
"details.lh-practice-launch-intent__details",
|
|
);
|
|
await expect(launchDetails).not.toHaveAttribute("open", "");
|
|
await expect(launchDetails.locator("summary")).toContainText(
|
|
"감정 반영 후 이해 확인",
|
|
);
|
|
await expect(launchDetails.locator("dl")).not.toBeVisible();
|
|
await expect(page.locator(".lh-practice-launch-intent")).toContainText(
|
|
"원본 회기의 내담자를 우선 선택했으며",
|
|
);
|
|
await expect(page.locator(".lh-root")).toContainText("감정 반영 후 이해 확인");
|
|
await expect(page.locator(".lh-root")).toContainText("원본 회기 참조");
|
|
await expect(page.locator(".lh-root")).not.toContainText("criterion.reflect-and-check");
|
|
await expect(page.locator(".lh-root")).not.toContainText(PRIMARY_SESSION_ID.slice(0, 8));
|
|
await expect(page.locator(".lh-root")).not.toContainText("[NAME]");
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await page.setViewportSize({ width: 320, height: 568 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
await expectMinimumHitTargets(page, ".lh-actions .vg-btn", "320px 재연습 대상 행동");
|
|
await expectNoHorizontalOverflow(page);
|
|
await capture(page, testInfo.project.name, "repractice-home-320x568");
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
}
|
|
await page.getByRole("button", { name: "새 회기 시작" }).click();
|
|
await expect(
|
|
page.getByRole("heading", { name: "처방 연습 · 장면 다시 보기" }),
|
|
).toBeVisible();
|
|
await expect(page.locator(".sx-page--prestart")).toContainText("인간중심 · 인지행동");
|
|
await expect(page.locator(".sx-page--prestart")).toContainText("감정 반영 후 이해 확인");
|
|
await expect(page.locator(".sx-page--prestart")).toContainText("원본 회기 참조");
|
|
await expect(page.locator(".sx-page--prestart")).not.toContainText("humanistic, cbt");
|
|
await expect(page.locator(".sx-page--prestart")).not.toContainText("criterion.reflect-and-check");
|
|
await expect(page.locator(".sx-page--prestart")).not.toContainText(PRIMARY_SESSION_ID.slice(0, 8));
|
|
const prescribedSettings = page.locator(
|
|
"details.sx-prestart__settings.is-prescribed",
|
|
);
|
|
await expect(prescribedSettings).not.toHaveAttribute("open", "");
|
|
await expect(prescribedSettings.locator("summary")).toContainText(
|
|
"인간중심",
|
|
);
|
|
await expect(prescribedSettings.locator(".sx-prestart__settings-body")).not.toBeVisible();
|
|
await expectInsideInitialViewport(
|
|
page,
|
|
".sx-prestart__actions .vg-btn",
|
|
"처방 재연습 시작 행동",
|
|
);
|
|
await expectNoHorizontalOverflow(page);
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await page.setViewportSize({ width: 320, height: 568 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
await expectInsideInitialViewport(
|
|
page,
|
|
".sx-prestart__actions .vg-btn",
|
|
"320px 처방 재연습 시작 행동",
|
|
);
|
|
await expectMinimumHitTargets(
|
|
page,
|
|
".sx-prestart__actions .vg-btn",
|
|
"320px 처방 재연습 시작 행동",
|
|
);
|
|
await expectNoHorizontalOverflow(page);
|
|
await capture(page, testInfo.project.name, "repractice-prestart-320x568");
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
}
|
|
await capture(page, testInfo.project.name, "repractice-prestart");
|
|
|
|
await page.getByRole("button", { name: "회기 시작" }).click();
|
|
await expect(page).toHaveURL(
|
|
new RegExp(`/learn/session/${RETRY_SESSION_ID}\\?`),
|
|
);
|
|
const retryUrl = new URL(page.url());
|
|
expect(parsePracticeLaunchIntent(retryUrl.searchParams)).toEqual({
|
|
kind: "deliberate",
|
|
prescriptionId: PRESCRIPTION_ID,
|
|
suiteId: null,
|
|
trialId: null,
|
|
sourceSessionId: PRIMARY_SESSION_ID,
|
|
criterionId: "criterion.reflect-and-check",
|
|
novelty: "familiar",
|
|
mode: "replay",
|
|
});
|
|
expect(fixture.startRequests[1]).toMatchObject({
|
|
persona_code: "P1",
|
|
goal_stages: ["라포", "탐색"],
|
|
});
|
|
await expect(page.locator('.sx-page[data-practice-mode="replay"]')).toBeVisible();
|
|
await expectNoHorizontalOverflow(page);
|
|
|
|
await page.getByLabel("학습자 발화 입력").fill(LEARNER_TEXT);
|
|
await page.getByRole("button", { name: "보내기" }).click();
|
|
await expect(
|
|
page.locator(".sx-utt").filter({ hasText: CLIENT_REPLY }),
|
|
).toBeVisible();
|
|
await page.getByRole("button", { name: "회기 종료" }).click();
|
|
await page.getByRole("button", { name: "종료하고 리뷰 보기" }).click();
|
|
await expect(page).toHaveURL(
|
|
new RegExp(`/learn/session/${RETRY_SESSION_ID}/review\\?`),
|
|
);
|
|
expect(fixture.retryEnded).toBe(true);
|
|
const retryReviewUrl = new URL(page.url());
|
|
expect(parsePracticeLaunchIntent(retryReviewUrl.searchParams)).toEqual({
|
|
kind: "deliberate",
|
|
prescriptionId: PRESCRIPTION_ID,
|
|
suiteId: null,
|
|
trialId: null,
|
|
sourceSessionId: PRIMARY_SESSION_ID,
|
|
criterionId: "criterion.reflect-and-check",
|
|
novelty: "familiar",
|
|
mode: "replay",
|
|
});
|
|
|
|
const retryFeedbackTab = page.getByRole("tab", { name: "피드백" });
|
|
await expect(retryFeedbackTab).toHaveAttribute("aria-selected", "true");
|
|
await expectAtMainScrollStart(
|
|
page,
|
|
".sr-practice-result-jump.is-deliberate",
|
|
"G4 연습 근거 진입 행동",
|
|
);
|
|
await page
|
|
.getByRole("button", { name: "이번 회기 연습 근거 확인" })
|
|
.click();
|
|
const observation = page.locator(".dp-runtime-observation");
|
|
await expect(observation).toBeVisible();
|
|
await expect(
|
|
observation.getByRole("heading", {
|
|
name: "이번 재연습을 서버 근거로 확인합니다",
|
|
}),
|
|
).toBeVisible();
|
|
await expect(observation).toContainText("반영 전");
|
|
await expect(observation).toContainText("행동 근거를 더 확인해야 합니다");
|
|
await expect(observation).not.toContainText(PRESCRIPTION_ID);
|
|
await expect(observation).not.toContainText(RETRY_SESSION_ID.slice(0, 8));
|
|
|
|
await observation
|
|
.getByRole("button", { name: "이번 회기를 독립 관찰로 반영" })
|
|
.click();
|
|
await expect(observation).toContainText("평가 근거 준비 중");
|
|
await expect(observation).toContainText(
|
|
"평가가 준비되면 같은 회기를 중복 없이 이어서 확인합니다.",
|
|
);
|
|
|
|
const readsBeforeSuccess = fixture.practiceReadCount;
|
|
await observation
|
|
.getByRole("button", { name: "평가 상태 다시 확인" })
|
|
.click();
|
|
await expect(observation).toContainText("서버 독립 관찰 반영 완료");
|
|
await expect(observation).toContainText("반영 후");
|
|
await expect(observation).toContainText("새 장면 확인 대기");
|
|
await expect(observation).toContainText("익숙한 장면 근거 1회");
|
|
await expect.poll(() => fixture.practiceReadCount).toBeGreaterThan(
|
|
readsBeforeSuccess,
|
|
);
|
|
if (testInfo.project.name.includes("mobile")) {
|
|
await page.setViewportSize({ width: 320, height: 568 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
await observation.scrollIntoViewIfNeeded();
|
|
await expectMinimumHitTargets(
|
|
page,
|
|
".dp-runtime-observation button",
|
|
"320px 서버 관찰 행동",
|
|
);
|
|
await expect(observation).not.toContainText(RETRY_SESSION_ID.slice(0, 8));
|
|
await expect(observation).not.toContainText("[NAME]");
|
|
await expectNoHorizontalOverflow(page);
|
|
await capture(page, testInfo.project.name, "repractice-observation-320x568");
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.evaluate(() => new Promise(requestAnimationFrame));
|
|
}
|
|
await observation.scrollIntoViewIfNeeded();
|
|
await capture(page, testInfo.project.name, "repractice-observation");
|
|
|
|
await observation
|
|
.getByRole("button", { name: "반영 상태 다시 확인" })
|
|
.click();
|
|
await expect(observation).toContainText(
|
|
"같은 회기 근거를 중복 없이 확인했습니다.",
|
|
);
|
|
expect(fixture.runtimeObservationRequests).toHaveLength(3);
|
|
for (const request of fixture.runtimeObservationRequests) {
|
|
expect(request.method).toBe("POST");
|
|
expect(request.url).toContain(
|
|
`/practice/${PRESCRIPTION_ID}/attempts/from-session/${RETRY_SESSION_ID}`,
|
|
);
|
|
expect(request.body).toBeNull();
|
|
}
|
|
await expectNoHorizontalOverflow(page);
|
|
await expectNoPhysicalMediaAccess(page);
|
|
});
|
|
});
|