G7 증명과 G8 clean-head 승격 준비

apps/web/e2e/self-directed-learning-loop.spec.ts

@@ -862,6 +862,60 @@ async function capture(page: Page, projectName: string, stage: string) {
 }
 
 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", (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) => {