test-extension.js

// 測試腳本 - 在 Threads 頁面的 Console 中執行
// 用於測試 Threads AI Assistant 的功能

console.log('🧪 開始測試 Threads AI Assistant');

// 測試 1: 檢查擴充功能是否載入
function testExtensionLoaded() {
  console.log('\n📝 測試 1: 檢查擴充功能載入狀態');
  
  const aiButtons = document.querySelectorAll('.threads-ai-button');
  console.log(`找到 ${aiButtons.length} 個 AI 按鈕`);
  
  if (aiButtons.length > 0) {
    console.log('✅ 擴充功能已正常載入');
    return true;
  } else {
    console.log('❌ 未找到 AI 按鈕，擴充功能可能未載入');
    return false;
  }
}

// 測試 2: 檢查貼文檢測
function testPostDetection() {
  console.log('\n📝 測試 2: 檢查貼文檢測功能');
  
  // 模擬貼文檢測邏輯
  const possiblePosts = document.querySelectorAll('[data-pressable-container="true"]');
  console.log(`使用主選擇器找到 ${possiblePosts.length} 個候選元素`);
  
  let validPosts = 0;
  possiblePosts.forEach((post, index) => {
    const hasContent = post.querySelector('[dir="auto"]');
    const hasButtons = post.querySelector('[role="button"], button');
    const hasAIButton = post.querySelector('.threads-ai-button');
    
    if (hasContent && hasButtons) {
      validPosts++;
      console.log(`貼文 ${index + 1}: 有效 ${hasAIButton ? '(已有AI按鈕)' : '(無AI按鈕)'}`);
    }
  });
  
  console.log(`✅ 找到 ${validPosts} 個有效貼文`);
  return validPosts;
}

// 測試 3: 檢查 MutationObserver
function testMutationObserver() {
  console.log('\n📝 測試 3: 檢查 MutationObserver 狀態');
  
  // 創建一個新元素來觸發 MutationObserver
  const testDiv = document.createElement('div');
  testDiv.setAttribute('data-pressable-container', 'true');
  testDiv.innerHTML = `
    <div dir="auto">這是測試貼文內容</div>
    <button role="button" aria-label="讚">讚</button>
    <button role="button" aria-label="回覆">回覆</button>
  `;
  
  console.log('添加測試元素...');
  document.body.appendChild(testDiv);
  
  setTimeout(() => {
    const hasAIButton = testDiv.querySelector('.threads-ai-button');
    if (hasAIButton) {
      console.log('✅ MutationObserver 正常工作，自動添加了 AI 按鈕');
    } else {
      console.log('⚠️ MutationObserver 可能未觸發或有延遲');
    }
    
    // 清理測試元素
    testDiv.remove();
  }, 3000);
}

// 測試 4: 檢查錯誤處理
function testErrorHandling() {
  console.log('\n📝 測試 4: 檢查錯誤處理');
  
  // 模擬 API 錯誤
  chrome.runtime.sendMessage({
    type: 'GENERATE_REPLY',
    data: {
      postText: '測試貼文',
      style: 'supportive',
      prompt: '測試提示'
    }
  }).then(response => {
    if (response.success) {
      console.log('✅ API 呼叫成功:', response.reply);
    } else {
      console.log('⚠️ API 呼叫失敗 (預期的):', response.error);
      
      if (response.debugInfo) {
        console.log('🔍 除錯信息:', response.debugInfo);
      }
    }
  }).catch(error => {
    console.log('❌ Chrome Extension 通信錯誤:', error);
  });
}

// 測試 5: 性能檢查
function testPerformance() {
  console.log('\n📝 測試 5: 性能檢查');
  
  const startTime = performance.now();
  
  // 檢查 DOM 查詢性能
  const posts = document.querySelectorAll('[data-pressable-container="true"]');
  const buttons = document.querySelectorAll('.threads-ai-button');
  
  const endTime = performance.now();
  const duration = endTime - startTime;
  
  console.log(`DOM 查詢耗時: ${duration.toFixed(2)}ms`);
  console.log(`記憶體使用: ${(performance.memory?.usedJSHeapSize / 1024 / 1024).toFixed(2)}MB`);
  
  if (duration < 50) {
    console.log('✅ 性能良好');
  } else {
    console.log('⚠️ 性能可能需要優化');
  }
}

// 執行所有測試
async function runAllTests() {
  console.log('🚀 開始執行所有測試...\n');
  
  const extensionLoaded = testExtensionLoaded();
  
  if (extensionLoaded) {
    testPostDetection();
    testMutationObserver();
    testErrorHandling();
    testPerformance();
  } else {
    console.log('❌ 擴充功能未載入，跳過其他測試');
    console.log('💡 請確認：');
    console.log('1. 擴充功能已安裝並啟用');
    console.log('2. 在正確的 Threads 頁面 (threads.com)');
    console.log('3. 頁面已完全載入');
  }
  
  console.log('\n🎯 測試完成！');
}

// 延遲 2 秒後開始測試，確保頁面載入完成
setTimeout(runAllTests, 2000);

// 導出測試函數供手動使用
window.threadsAITest = {
  runAllTests,
  testExtensionLoaded,
  testPostDetection,
  testMutationObserver,
  testErrorHandling,
  testPerformance
};

console.log('📋 測試腳本已載入，2秒後自動開始測試');
console.log('💡 也可以手動執行: window.threadsAITest.runAllTests()');