zellyy-finance/test-chunk-error.cjs

/**
 * Playwright 테스트: ChunkLoadError 복구 시스템 검증
 *
 * 1. 일반적인 앱 로딩 테스트
 * 2. Clerk 비활성화 상태에서 앱 로딩 테스트
 * 3. ChunkLoadError 시뮬레이션 테스트
 */

const { chromium } = require("playwright");

async function testChunkErrorRecovery() {
  const browser = await chromium.launch({
    headless: false, // 브라우저 창을 보여줌
    slowMo: 1000, // 1초씩 천천히 실행
  });

  console.log("🚀 Playwright 테스트 시작...");

  try {
    // 테스트 1: 일반적인 앱 로딩
    console.log("\n📋 테스트 1: 일반적인 앱 로딩");
    const page1 = await browser.newPage();

    // 콘솔 로그 캡처
    page1.on("console", (msg) => {
      if (msg.type() === "error") {
        console.log("❌ Console Error:", msg.text());
      } else if (msg.text().includes("Clerk") || msg.text().includes("Mock")) {
        console.log("🔍 Clerk 관련 로그:", msg.text());
      }
    });

    await page1.goto("http://localhost:3000");
    await page1.waitForTimeout(3000);

    const title = await page1.title();
    console.log("✅ 페이지 제목:", title);

    // 페이지에 오류가 없는지 확인
    const errorElements = await page1.$$(".error-screen");
    if (errorElements.length > 0) {
      console.log("⚠️  오류 화면이 감지됨");
    } else {
      console.log("✅ 정상적인 앱 로딩 확인");
    }

    await page1.close();

    // 테스트 2: Clerk 비활성화 상태 테스트
    console.log("\n📋 테스트 2: Clerk 비활성화 상태 테스트");
    const page2 = await browser.newPage();

    page2.on("console", (msg) => {
      if (msg.type() === "error") {
        console.log("❌ Console Error:", msg.text());
      } else if (msg.text().includes("Clerk") || msg.text().includes("Mock")) {
        console.log("🔍 Clerk 관련 로그:", msg.text());
      }
    });

    // sessionStorage에 Clerk 비활성화 플래그 설정
    await page2.goto("http://localhost:3000");
    await page2.evaluate(() => {
      sessionStorage.setItem("disableClerk", "true");
    });

    await page2.reload();
    await page2.waitForTimeout(3000);

    console.log("✅ Clerk 비활성화 상태에서 페이지 로딩 완료");

    // Mock 데이터가 제대로 작동하는지 확인
    const mockIndicator = await page2.evaluate(() => {
      return sessionStorage.getItem("disableClerk");
    });

    console.log("🔍 Clerk 비활성화 플래그:", mockIndicator);

    await page2.close();

    // 테스트 3: URL 파라미터로 Clerk 비활성화
    console.log("\n📋 테스트 3: URL 파라미터로 Clerk 비활성화");
    const page3 = await browser.newPage();

    page3.on("console", (msg) => {
      if (msg.type() === "error") {
        console.log("❌ Console Error:", msg.text());
      } else if (
        msg.text().includes("Clerk") ||
        msg.text().includes("Mock") ||
        msg.text().includes("useAuth")
      ) {
        console.log("🔍 인증 관련 로그:", msg.text());
      }
    });

    await page3.goto("http://localhost:3000?noClerk=true");
    await page3.waitForTimeout(3000);

    console.log("✅ URL 파라미터로 Clerk 비활성화된 상태에서 페이지 로딩 완료");

    // 페이지가 정상적으로 로드되었는지 확인
    const pageContent = await page3.textContent("body");
    if (pageContent && pageContent.includes("Zellyy Finance")) {
      console.log("✅ 앱 콘텐츠가 정상적으로 표시됨");
    } else {
      console.log("⚠️  앱 콘텐츠가 표시되지 않음");
    }

    await page3.close();

    // 테스트 4: ChunkLoadError 시뮬레이션
    console.log("\n📋 테스트 4: ChunkLoadError 시뮬레이션");
    const page4 = await browser.newPage();

    let chunkErrorCaught = false;
    page4.on("console", (msg) => {
      if (msg.type() === "error" || msg.text().includes("ChunkLoadError")) {
        console.log("🔍 ChunkLoadError 감지:", msg.text());
        chunkErrorCaught = true;
      } else if (msg.text().includes("Clerk") || msg.text().includes("Mock")) {
        console.log("🔍 복구 로그:", msg.text());
      }
    });

    // 네트워크 요청을 가로채서 Clerk CDN 요청을 실패시킴
    await page4.route("**/*clerk*", (route) => {
      console.log("🚫 Clerk CDN 요청 차단:", route.request().url());
      route.abort();
    });

    await page4.goto("http://localhost:3000");
    await page4.waitForTimeout(5000); // 더 긴 대기 시간

    console.log("✅ ChunkLoadError 시뮬레이션 테스트 완료");

    await page4.close();

    console.log("\n🎉 모든 테스트 완료!");
  } catch (error) {
    console.error("❌ 테스트 중 오류 발생:", error);
  } finally {
    await browser.close();
  }
}

// 테스트 실행
testChunkErrorRecovery().catch(console.error);