vignette/apps/web/e2e/learner.spec.ts

import { expect, test } from "@playwright/test";
import {
  expectNoDocumentOverflow,
  expectNoHorizontalOverflow,
  fetchAvailablePersona,
  fetchAvailablePersonas,
  signInAsLearner,
  useRealApi,
} from "./support";

async function signInAsLearnerEmail(
  page: import("@playwright/test").Page,
  email: string,
  displayName = "History Learner",
) {
  const res = await page.request.post("/api/auth/dev-login", {
    data: {
      email,
      role: "learner",
      display_name: displayName,
    },
  });
  expect(res.ok(), await res.text()).toBeTruthy();
}

async function createPracticeSession(page: import("@playwright/test").Page, personaCode?: string) {
  const selectedPersonaCode = personaCode ?? (await fetchAvailablePersona(page)).code;
  const res = await page.request.post("/api/sessions", {
    data: {
      persona_code: selectedPersonaCode,
      theory_mode: "humanistic",
    },
  });
  expect(res.ok(), await res.text()).toBeTruthy();
  return (await res.json()) as { session_id: string };
}

async function expectNoLearnerInternalCopy(page: import("@playwright/test").Page) {
  await expect(page.getByText(/API|GET \/|OPENAI_API_KEY|teacher\/dashboard/)).toHaveCount(0);
}

async function expectVisibleResumeLoadedSignal(page: import("@playwright/test").Page) {
  const result = await page.evaluate(() => {
    const candidates = Array.from(
      document.querySelectorAll<HTMLElement>(
        ".sx-page--active .sx-mobile-context__resume, .sx-page--active .sx-mic-block__h",
      ),
    );
    return candidates.map((el) => {
      const rect = el.getBoundingClientRect();
      const style = window.getComputedStyle(el);
      return {
        text: el.textContent ?? "",
        visible:
          style.display !== "none" &&
          style.visibility !== "hidden" &&
          Number(style.opacity) !== 0 &&
          rect.width > 0 &&
          rect.height > 0,
      };
    });
  });

  expect(
    result.some(
      (entry) => entry.visible && entry.text.includes("이전 회기 기록을 불러왔습니다."),
    ),
    `Expected visible resume-loaded signal: ${JSON.stringify(result)}`,
  ).toBeTruthy();
}

test.describe("learner app shell and session launcher", () => {
  test.beforeEach(async ({ page }) => {
    await useRealApi(page);
  });

  test("redirects an unauthenticated learner route to login", async ({ page }) => {
    await page.goto("/learn");

    await expect(page).toHaveURL(/\/login$/);
    await expect(page.getByRole("button", { name: /학교 Google 계정으로 계속/ })).toBeVisible();
    expect(await page.evaluate(() => window.localStorage.getItem("vignette.dev-auth"))).toBeNull();
  });

  test("renders API personas without legacy session rows", async ({ page }) => {
    await signInAsLearnerEmail(page, `learner.catalog.${Date.now()}@hs.ac.kr`, "Catalog Learner");
    await page.goto("/learn");
    const personas = await fetchAvailablePersonas(page);

    const launcher = page.getByRole("listbox", { name: "연습 페르소나" });
    await expect(launcher).toBeVisible();
    await expect(launcher.getByRole("option")).toHaveCount(personas.length);
    for (const persona of personas) {
      await expect(launcher.getByRole("option", { name: new RegExp(persona.code) })).toBeVisible();
      await expect(launcher.getByRole("option", { name: new RegExp(persona.display_name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) })).toBeVisible();
    }

    await expect(page.getByText(/12회/)).toHaveCount(0);
    await expect(page.getByText(/최근 연습/)).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.getByText("음성")).toBeInViewport();
    await expect(page.getByRole("button", { name: "새 회기 시작" })).toBeInViewport();
    await expectNoLearnerInternalCopy(page);
    await expectNoDocumentOverflow(page);
    await expectNoHorizontalOverflow(page);
  });

  test("routes the launcher CTA to the selected database persona", async ({ page }) => {
    await signInAsLearner(page);
    await page.goto("/learn");
    const persona = await fetchAvailablePersona(page, 1);

    const option = page.getByRole("option", { name: new RegExp(persona.code) });
    await option.click();
    await expect(option).toHaveAttribute("aria-selected", "true");

    await page.getByRole("button", { name: "새 회기 시작" }).click();

    await expect(page).toHaveURL(new RegExp(`/learn/session/${persona.code}$`));
    await expect(page.getByRole("button", { name: "회기 시작" })).toBeVisible();
    await expectNoDocumentOverflow(page);

    await page.getByRole("button", { name: "회기 시작" }).click();

    await expect(page.locator(".sx-grid")).toBeVisible();
    await expectNoLearnerInternalCopy(page);
    await expectNoDocumentOverflow(page);
    await expectNoHorizontalOverflow(page);
  });

  test("shows real session history with resume, record, and retry actions", async ({
    page,
  }, testInfo) => {
    const suffix = `${testInfo.project.name.replace(/\W+/g, "-")}-${testInfo.workerIndex}-${Date.now()}`.toLowerCase();
    await signInAsLearnerEmail(page, `history.${suffix}@hs.ac.kr`);

    const persona = await fetchAvailablePersona(page);
    const active = await createPracticeSession(page, persona.code);
    const ended = await createPracticeSession(page, persona.code);
    const endResponse = await page.request.post(`/api/sessions/${ended.session_id}/end`);
    expect(endResponse.ok(), await endResponse.text()).toBeTruthy();

    await page.goto("/learn");

    await expect(page.getByText("기존 회기")).toBeVisible();
    await expect(page.getByRole("button", { name: "이어하기" })).toBeVisible();
    await expect(page.getByRole("button", { name: "기록" })).toBeVisible();
    await expect(page.getByRole("button", { name: "다시 연습" })).toHaveCount(2);
    await expect(page.getByRole("button", { name: "새 회기 시작" })).toBeInViewport();
    await expect(page.getByRole("button", { name: "이어하기" })).toBeInViewport();
    await expect(page.getByRole("button", { name: "기록" })).toBeInViewport();
    await expect(page.getByRole("button", { name: "다시 연습" }).first()).toBeInViewport();
    await expect(page.locator(".lh-activity__stats")).toContainText("누적 회기");
    await expect(page.locator(".lh-activity__stats")).toContainText("2");

    await page.getByRole("button", { name: "이어하기" }).click();

    await expect(page).toHaveURL(new RegExp(`/learn/session/${active.session_id}$`));
    await expect(page.locator(".sx-page.sx-page--active")).toBeVisible();
    await expectVisibleResumeLoadedSignal(page);
    await expectNoDocumentOverflow(page);
    await expectNoHorizontalOverflow(page);
  });

  test("does not fall back to P1 for an unavailable persona code", async ({ page }) => {
    await signInAsLearner(page);
    await page.goto("/learn/session/P9");

    await expect(page.getByText(/P9 페르소나는 현재 연습 목록에 없습니다/)).toBeVisible();
    await expect(page.getByText("페르소나 P9")).toHaveCount(0);
    await expect(
      page.getByRole("heading", { name: "연습 대상 정보를 확인하고 있습니다." }),
    ).toBeVisible();
    await expect(page.getByRole("button", { name: "회기 시작" })).toBeDisabled();
    await expectNoDocumentOverflow(page);
    await expectNoHorizontalOverflow(page);
  });

  test("blocks direct session starts for degraded or non-database personas", async ({ page }) => {
    await signInAsLearner(page);
    await page.route("**/api/personas", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([
          {
            code: "SEEDX",
            display_name: "검증 불가 내담자",
            difficulty: "easy",
            theory_target: ["humanistic"],
            demographics: { age_band: "20대" },
            presenting_summary: "서버 카탈로그 원본이 확인되지 않은 항목",
            voice_preset: null,
            source: "seed_fallback",
            degraded: true,
          },
        ]),
      });
    });

    await page.goto("/learn/session/SEEDX");

    await expect(
      page.getByRole("heading", { name: "이 내담자는 현재 연습에 사용할 수 없습니다." }),
    ).toBeVisible();
    await expect(page.getByText("카탈로그 원본을 확인하지 못해 현재 연습에 사용할 수 없습니다.")).toBeVisible();
    await expect(page.getByRole("button", { name: "회기 시작" })).toBeDisabled();
    await expectNoDocumentOverflow(page);
    await expectNoHorizontalOverflow(page);
  });
});