zellyy-finance/verify-fix.mjs

#!/usr/bin/env node

/**
 * Playwright 기반 useAuth 오류 수정 검증 테스트
 */

import { chromium } from "playwright";

async function verifyClerkFix() {
  console.log("🧪 Zellyy Finance - useAuth 오류 수정 검증 시작...\n");

  const browser = await chromium.launch({
    headless: false,
    devtools: true,
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  // 콘솔 에러 추적
  const errors = [];
  page.on("console", (msg) => {
    if (msg.type() === "error") {
      errors.push(msg.text());
      console.log("❌ Console Error:", msg.text());
    }
  });

  // 예외 추적
  page.on("pageerror", (error) => {
    errors.push(error.message);
    console.log("❌ Page Error:", error.message);
  });

  try {
    console.log("📍 1. Clerk 비활성화 상태로 앱 로딩 테스트...");

    // Clerk 비활성화 플래그와 함께 페이지 로드
    await page.goto("http://localhost:3003?noClerk=true", {
      waitUntil: "networkidle",
      timeout: 10000,
    });

    await page.waitForTimeout(2000);

    // useAuth 에러가 발생하지 않았는지 확인
    const hasUseAuthError = errors.some(
      (error) =>
        error.includes("useAuth can only be used within") ||
        error.includes("@clerk/clerk-react: useAuth")
    );

    if (hasUseAuthError) {
      console.log("❌ useAuth 에러가 여전히 발생합니다!");
      console.log("에러 목록:", errors);
      return false;
    } else {
      console.log("✅ useAuth 에러가 발생하지 않았습니다!");
    }

    console.log("\n📍 2. 앱 정상 렌더링 확인...");

    // 앱이 정상적으로 렌더링되었는지 확인
    const appElement = await page.locator("body").first();
    const isVisible = await appElement.isVisible();

    if (!isVisible) {
      console.log("❌ 앱이 정상적으로 렌더링되지 않았습니다!");
      return false;
    } else {
      console.log("✅ 앱이 정상적으로 렌더링되었습니다!");
    }

    console.log("\n📍 3. Mock 인증 시스템 확인...");

    // Mock 인증 시스템이 정상 작동하는지 확인
    const titleElement = await page.locator("h1").first();
    const titleText = await titleElement.textContent();

    if (titleText && titleText.includes("Zellyy Finance")) {
      console.log("✅ Mock 인증 시스템이 정상 작동합니다!");
    } else {
      console.log(
        "⚠️  Mock 인증 시스템 확인이 어렵습니다. 하지만 에러는 없습니다."
      );
    }

    console.log("\n📍 4. 스토리지 클리어 후 재테스트...");

    // 브라우저 스토리지 클리어
    await page.evaluate(() => {
      sessionStorage.clear();
      localStorage.clear();
    });

    await page.reload({ waitUntil: "networkidle" });
    await page.waitForTimeout(2000);

    // 다시 useAuth 에러 확인
    const hasUseAuthErrorAfterReload = errors.some(
      (error) =>
        error.includes("useAuth can only be used within") ||
        error.includes("@clerk/clerk-react: useAuth")
    );

    if (hasUseAuthErrorAfterReload) {
      console.log("❌ 리로드 후에도 useAuth 에러가 발생합니다!");
      return false;
    } else {
      console.log("✅ 리로드 후에도 useAuth 에러가 발생하지 않습니다!");
    }

    console.log(
      "\n🎉 모든 테스트 통과! useAuth 오류가 성공적으로 해결되었습니다!"
    );
    return true;
  } catch (error) {
    console.log("❌ 테스트 중 오류 발생:", error.message);
    return false;
  } finally {
    await browser.close();
  }
}

// 테스트 실행
if (import.meta.url === `file://${process.argv[1]}`) {
  verifyClerkFix().then((success) => {
    process.exit(success ? 0 : 1);
  });
}

export { verifyClerkFix };