312 lines
13 KiB
TypeScript
312 lines
13 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
const P1_PERSONA = {
|
|
code: "P1",
|
|
display_name: "서연(가명) · 고2 · 우울/자살사고",
|
|
difficulty: "hard",
|
|
theory_target: ["humanistic", "cbt"],
|
|
demographics: { age_band: "16-18", sex: "female", grade: "고2", status: "재학" },
|
|
presenting_summary: "우울감과 자살사고 위험",
|
|
voice_preset: null,
|
|
source: "database",
|
|
degraded: false,
|
|
expectedExpression: "sad",
|
|
expectedModel: "vignette-p1-live2d",
|
|
} as const;
|
|
|
|
const PERSONAS = [
|
|
{
|
|
code: "P4",
|
|
display_name: "하늘(가명) · 고2 · 학업/시험 불안",
|
|
difficulty: "easy",
|
|
theory_target: ["cbt", "humanistic"],
|
|
demographics: { age_band: "16-18", sex: "female", grade: "고2", status: "재학" },
|
|
presenting_summary: "시험 불안과 완벽주의 부담",
|
|
voice_preset: null,
|
|
source: "database",
|
|
degraded: false,
|
|
expectedExpression: "anxious",
|
|
expectedModel: "vignette-p4-live2d",
|
|
},
|
|
{
|
|
code: "P5",
|
|
display_name: "도윤(가명) · 중3 · 또래관계 갈등/소외감",
|
|
difficulty: "moderate",
|
|
theory_target: ["humanistic", "cbt"],
|
|
demographics: { age_band: "14-16", sex: "male", grade: "중3", status: "재학" },
|
|
presenting_summary: "또래관계 갈등과 소외감",
|
|
voice_preset: null,
|
|
source: "database",
|
|
degraded: false,
|
|
expectedExpression: "guarded",
|
|
expectedModel: "vignette-p5-live2d",
|
|
},
|
|
{
|
|
code: "P6",
|
|
display_name: "하린(가명) · 고3 · 진로갈등",
|
|
difficulty: "moderate",
|
|
theory_target: ["humanistic", "cbt"],
|
|
demographics: { age_band: "16-18", sex: "female", grade: "고3", status: "진로갈등" },
|
|
presenting_summary: "부모 기대와 본인 욕구 사이의 진로갈등",
|
|
voice_preset: null,
|
|
source: "database",
|
|
degraded: false,
|
|
expectedExpression: "conflicted",
|
|
expectedModel: "vignette-p6-live2d",
|
|
},
|
|
{
|
|
code: "P7",
|
|
display_name: "도현(가명) · 고3 · 입시 번아웃/무기력",
|
|
difficulty: "hard",
|
|
theory_target: ["humanistic", "cbt"],
|
|
demographics: { age_band: "16-18", sex: "male", grade: "고3", status: "정시 준비" },
|
|
presenting_summary: "입시 번아웃과 무기력",
|
|
voice_preset: null,
|
|
source: "database",
|
|
degraded: false,
|
|
expectedExpression: "tired",
|
|
expectedModel: "vignette-p7-live2d",
|
|
},
|
|
] as const;
|
|
|
|
async function setLearnerUtterance(page: import("@playwright/test").Page, text: string) {
|
|
const textbox = page.getByLabel("학습자 발화 입력");
|
|
await expect(textbox).toBeVisible();
|
|
await expect(textbox).toBeEnabled();
|
|
await textbox.fill(text);
|
|
await expect(textbox).toHaveValue(text);
|
|
await expect(page.getByRole("button", { name: "보내기" })).toBeEnabled();
|
|
}
|
|
|
|
async function mockSessionDetail(
|
|
page: import("@playwright/test").Page,
|
|
sessionId: string,
|
|
personaCode = "P4",
|
|
) {
|
|
await page.route(`**/api/sessions/${sessionId}`, async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
session_id: sessionId,
|
|
case_id: "case-avatar-expression",
|
|
persona_code: personaCode,
|
|
session_no: 1,
|
|
status: "active",
|
|
stage: "라포",
|
|
effective_openness: 0.2,
|
|
started_at: new Date().toISOString(),
|
|
ended_at: null,
|
|
review_ready: false,
|
|
turns: [],
|
|
}),
|
|
});
|
|
});
|
|
}
|
|
|
|
test.describe("persona avatar expression rig", () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route("**/api/auth/me", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
user_id: "avatar-expression-learner",
|
|
email: "learner@hs.ac.kr",
|
|
display_name: "Avatar Expression Learner",
|
|
role: "learner",
|
|
cohort_ids: [],
|
|
consent_at: Math.floor(Date.now() / 1000),
|
|
onboarding_completed_at: Math.floor(Date.now() / 1000),
|
|
}),
|
|
}),
|
|
);
|
|
|
|
await page.route("**/api/personas", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify(
|
|
[P1_PERSONA, ...PERSONAS].map(
|
|
({
|
|
expectedExpression: _expectedExpression,
|
|
expectedModel: _expectedModel,
|
|
...persona
|
|
}) => persona,
|
|
),
|
|
),
|
|
}),
|
|
);
|
|
});
|
|
|
|
test("renders every persona with a distinct baseline expression and at least 20 expressions", async ({
|
|
page,
|
|
}) => {
|
|
for (const persona of PERSONAS) {
|
|
await page.goto(`/learn/session/${persona.code}`);
|
|
const avatar = page.locator(`.vg-avatar[data-persona-code="${persona.code}"]`).first();
|
|
|
|
await expect(avatar).toBeVisible();
|
|
await expect(avatar).toHaveAttribute("data-affect", persona.expectedExpression);
|
|
|
|
const metrics = await avatar.evaluate((el) => ({
|
|
expressionCount: Number(el.getAttribute("data-expression-count")),
|
|
live2dSchema: el.getAttribute("data-live2d-schema"),
|
|
live2dModel: el.getAttribute("data-live2d-model"),
|
|
live2dModelUrl: el.getAttribute("data-live2d-model-url"),
|
|
live2dMotion: el.getAttribute("data-live2d-motion"),
|
|
live2dMotionFile: el.getAttribute("data-live2d-motion-file"),
|
|
live2dExpressionCount: Number(el.getAttribute("data-live2d-expression-count")),
|
|
renderMode: el.getAttribute("data-render-mode"),
|
|
rasterArtSet: el.querySelector(".vg-raster")?.getAttribute("data-raster-art-set"),
|
|
rasterMode: el.querySelector(".vg-raster")?.getAttribute("data-raster-mode"),
|
|
rasterLayerCount: el.querySelectorAll(".vg-raster__layer").length,
|
|
rasterBox: el.querySelector<HTMLElement>(".vg-raster")?.getBoundingClientRect().toJSON(),
|
|
primitiveCount: el.querySelectorAll("svg path, svg ellipse, svg circle, svg line, svg rect")
|
|
.length,
|
|
neckBox: el.querySelector<SVGGraphicsElement>('[data-avatar-neck="true"]')?.getBoundingClientRect().toJSON(),
|
|
svgBox: el.querySelector("svg")?.getBoundingClientRect().toJSON(),
|
|
}));
|
|
const expectedArtSet = `${persona.code.toLowerCase()}-live2d-generated`;
|
|
|
|
expect(metrics.expressionCount, `${persona.code} expression count`).toBeGreaterThanOrEqual(20);
|
|
expect(metrics.live2dSchema, `${persona.code} Live2D schema`).toBe("vignette.live2d.v1");
|
|
expect(metrics.live2dModel, `${persona.code} Live2D model`).toBe(persona.expectedModel);
|
|
expect(metrics.live2dModelUrl, `${persona.code} Live2D model URL`).toBe(
|
|
`/live2d/personas/${persona.code.toLowerCase()}/${persona.code.toLowerCase()}.model3.json`,
|
|
);
|
|
expect(metrics.live2dMotion, `${persona.code} Live2D motion`).toBe(persona.expectedExpression);
|
|
expect(metrics.live2dMotionFile, `${persona.code} Live2D motion file`).toBe(
|
|
`expressions/${persona.expectedExpression}.exp3.json`,
|
|
);
|
|
expect(metrics.live2dExpressionCount, `${persona.code} Live2D expressions`).toBeGreaterThanOrEqual(20);
|
|
expect(metrics.renderMode, `${persona.code} render mode`).toBe("raster");
|
|
expect(metrics.rasterArtSet, `${persona.code} generated art set`).toBe(expectedArtSet);
|
|
expect(metrics.rasterMode, `${persona.code} raster rig mode`).toBe("psb-detailed");
|
|
expect(metrics.rasterLayerCount, `${persona.code} raster layers`).toBeGreaterThanOrEqual(20);
|
|
expect(metrics.rasterBox?.width, `${persona.code} raster width`).toBeGreaterThan(0);
|
|
expect(metrics.rasterBox?.height, `${persona.code} raster height`).toBeGreaterThan(0);
|
|
expect(metrics.primitiveCount, `${persona.code} fallback SVG primitives`).toBe(0);
|
|
expect(metrics.neckBox, `${persona.code} SVG neck fallback`).toBeUndefined();
|
|
expect(metrics.svgBox, `${persona.code} SVG fallback`).toBeUndefined();
|
|
}
|
|
});
|
|
|
|
test("keeps the active session avatar expression wired after session start", async ({ page }) => {
|
|
const sessionId = "11111111-1111-4111-8111-111111111111";
|
|
await mockSessionDetail(page, sessionId);
|
|
await page.route("**/api/sessions", async (route) => {
|
|
if (route.request().method() !== "POST") {
|
|
await route.fallback();
|
|
return;
|
|
}
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
session_id: "11111111-1111-4111-8111-111111111111",
|
|
case_id: "case-avatar-expression",
|
|
session_no: 1,
|
|
stage: "라포",
|
|
effective_openness: 0.2,
|
|
recall_summary: null,
|
|
degraded: false,
|
|
}),
|
|
});
|
|
});
|
|
|
|
await page.goto("/learn/session/P4");
|
|
await page.getByRole("button", { name: "회기 시작" }).click();
|
|
await expect(page.locator(".sx-page--active")).toBeVisible();
|
|
|
|
const activeAvatar = page.locator(".sx-page--active .vg-avatar").first();
|
|
await expect(activeAvatar).toBeVisible();
|
|
await expect(activeAvatar).toHaveAttribute("data-render-mode", "raster");
|
|
await expect(activeAvatar.locator('.vg-raster[data-raster-art-set="p4-live2d-generated"]')).toBeVisible();
|
|
await expect(activeAvatar).toHaveAttribute("data-expression-count", "28");
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-expression-count", "28");
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-model", "vignette-p4-live2d");
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-model-url", "/live2d/personas/p4/p4.model3.json");
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-fade-in-ms", "260");
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-motion-file", "expressions/anxious.exp3.json");
|
|
await expect(activeAvatar).toHaveAttribute("data-affect", "anxious");
|
|
await expect(page.locator(".sx-stage__now")).toContainText("불안");
|
|
});
|
|
|
|
test("animates expression transitions after session openness changes", async ({ page }) => {
|
|
const sessionId = "22222222-2222-4222-8222-222222222222";
|
|
await mockSessionDetail(page, sessionId);
|
|
await page.route("**/api/sessions", async (route) => {
|
|
if (route.request().method() !== "POST") {
|
|
await route.fallback();
|
|
return;
|
|
}
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
session_id: sessionId,
|
|
case_id: "case-avatar-transition",
|
|
session_no: 1,
|
|
stage: "라포",
|
|
effective_openness: 0.2,
|
|
recall_summary: null,
|
|
degraded: false,
|
|
}),
|
|
});
|
|
});
|
|
|
|
await page.route("**/api/sessions/*/stream", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: [
|
|
"event: token",
|
|
"data: 조금은 괜찮아진 것 같아요.",
|
|
"",
|
|
"event: done",
|
|
'data: {"session_id":"22222222-2222-4222-8222-222222222222","stage":"정리","effective_openness":0.86,"safety_flagged":false}',
|
|
"",
|
|
].join("\n"),
|
|
});
|
|
});
|
|
|
|
await page.goto("/learn/session/P4");
|
|
await page.getByRole("button", { name: "회기 시작" }).click();
|
|
await expect(page.locator(".sx-page--active")).toBeVisible();
|
|
const activeAvatar = page.locator(".sx-page--active .vg-avatar").first();
|
|
await expect(activeAvatar).toHaveAttribute("data-render-mode", "raster");
|
|
await expect(activeAvatar.locator('.vg-raster[data-raster-art-set="p4-live2d-generated"]')).toBeVisible();
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-motion", "anxious");
|
|
|
|
await setLearnerUtterance(page, "조금 안정된 것 같아요.");
|
|
await page.getByRole("button", { name: "보내기" }).click();
|
|
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-motion", "warm");
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-motion-file", "expressions/warm.exp3.json");
|
|
await expect(activeAvatar).toHaveAttribute("data-live2d-fade-in-ms", "260");
|
|
await expect
|
|
.poll(
|
|
async () =>
|
|
Number((await activeAvatar.getAttribute("data-live2d-transition-progress")) ?? "0"),
|
|
{ timeout: 15_000 },
|
|
)
|
|
.toBeGreaterThanOrEqual(0.99);
|
|
await expect(page.locator(".sx-stage__now")).toContainText("온화함");
|
|
});
|
|
|
|
test("uses the PSD v2 crying raster rig for P1 Seoyeon", async ({ page }) => {
|
|
await page.goto("/learn/session/P1");
|
|
|
|
const avatar = page.locator('.vg-avatar[data-persona-code="P1"]').first();
|
|
await expect(avatar).toBeVisible();
|
|
await expect(avatar).toHaveAttribute("data-render-mode", "raster");
|
|
await expect(avatar).toHaveAttribute("data-affect", "sad");
|
|
|
|
const raster = avatar.locator('.vg-raster[data-raster-art-set="seoyeon-live2d-psd-v2"]');
|
|
await expect(raster).toBeVisible();
|
|
await expect(raster).toHaveAttribute("data-raster-variant", "sad");
|
|
await expect(raster.locator('.vg-raster__layer--tear[src$="/tear-left.png"]')).toHaveCount(1);
|
|
await expect(raster.locator('.vg-raster__layer--tear[src$="/tear-right.png"]')).toHaveCount(1);
|
|
});
|
|
});
|