jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-vocab-learning/Popup樣式一致性測試案例.md

5.9 KiB
Raw Blame History

Popup樣式一致性測試案例

測試目標

驗證展示頁面的"詞卡風格"popup與AI生成頁面的實際詞彙popup樣式是否完全一致。

測試環境

詳細測試案例

TC-001: 視覺外觀對比

TC-001-01: 整體尺寸檢查

測試步驟:

  1. 打開展示頁面，選擇"詞卡風格"，點擊預覽按鈕
  2. 打開AI生成頁面，輸入"Hello world"，點擊分析，點擊任意詞彙
  3. 使用瀏覽器開發者工具測量popup尺寸

檢查項目:

  • popup寬度是否相同
  • popup高度是否相似
  • 圓角半徑是否一致 (rounded-xl)
  • 陰影效果是否相同 (shadow-lg)

預期結果: 兩個popup的外觀尺寸應該完全相同

TC-001-02: 標題區對比

檢查項目:

  • 漸層背景是否相同 (bg-gradient-to-br from-blue-50 to-indigo-50)
  • 內邊距是否一致 (p-5)
  • 邊框是否相同 (border-b border-blue-200)

測試方法: 使用瀏覽器檢查元素工具對比CSS類別

TC-001-03: 關閉按鈕檢查

檢查項目:

  • 按鈕位置: 右上角
  • 按鈕尺寸: w-6 h-6
  • 背景色: bg-white bg-opacity-80
  • 懸停效果是否相同

TC-002: 內容佈局對比

TC-002-01: 詞彙標題行

展示頁面: elaborate + [B2]在同一行 實際popup: {word} + {difficultyLevel}

檢查項目:

  • 詞彙名稱字體大小 (text-2xl font-bold)
  • CEFR標籤位置 (最右邊)
  • 行間距是否一致 (mb-3)

TC-002-02: 詞性發音行

展示頁面: [verb] /pronunciation/ ▶️ + [B2] 實際popup: [partOfSpeech] /pronunciation/ ▶️ + [difficultyLevel]

檢查項目:

  • 詞性標籤樣式 (bg-gray-100 text-gray-700 px-3 py-1 rounded-full)
  • 發音字體大小 (text-base text-gray-600)
  • 播放按鈕尺寸 (w-8 h-8 bg-blue-600 rounded-full)
  • 元素間距 (gap-3)

TC-003: 彩色區塊對比

TC-003-01: 翻譯區塊

檢查項目:

  • 背景色: bg-green-50
  • 邊框: border border-green-200
  • 內邊距: p-3
  • 標題樣式: font-semibold text-green-900 mb-2 text-left text-sm
  • 內容樣式: text-green-800 font-medium text-left

TC-003-02: 定義區塊

檢查項目:

  • 背景色: bg-gray-50
  • 邊框: border border-gray-200
  • 標題: font-semibold text-gray-900 mb-2 text-left text-sm
  • 內容: text-gray-700 text-left text-sm leading-relaxed

TC-003-03: 同義詞區塊

檢查項目:

  • 背景色: bg-purple-50
  • 邊框: border border-purple-200
  • 標籤樣式: bg-white text-purple-700 px-2 py-1 rounded-full text-xs

TC-004: CEFR顏色測試

TC-004-01: 六個等級顏色檢查

測試數據: A1, A2, B1, B2, C1, C2

檢查項目:

  • A1: bg-green-100 text-green-700 border-green-200
  • A2: bg-blue-100 text-blue-700 border-blue-200
  • B1: bg-yellow-100 text-yellow-700 border-yellow-200
  • B2: bg-orange-100 text-orange-700 border-orange-200
  • C1: bg-red-100 text-red-700 border-red-200
  • C2: bg-purple-100 text-purple-700 border-purple-200

測試方法:

  1. 在展示頁面修改mock數據的difficultyLevel
  2. 在實際頁面測試不同CEFR等級的詞彙
  3. 對比顏色是否完全相同

TC-005: 按鈕樣式對比

TC-005-01: 保存按鈕檢查

檢查項目:

  • 寬度: w-full
  • 背景: bg-primary
  • 內邊距: py-3
  • 圓角: rounded-lg
  • 字體: font-medium
  • 圖標尺寸: w-4 h-4

TC-006: 響應式測試

TC-006-01: 手機端對比

測試步驟:

  1. 將瀏覽器調整為手機尺寸 (375px寬度)
  2. 分別測試兩個popup
  3. 檢查是否都能完整顯示

檢查項目:

  • 寬度自動調整
  • 不會超出屏幕邊界
  • 內容不會被截掉
  • 觸控操作友好

實際差異分析

🔍 程式碼層面的差異

1. CEFR顏色實現方式

展示頁面 (正確):

const getCEFRColor = (level: string) => {
  switch (level) {
    case 'A1': return 'bg-green-100 text-green-700 border-green-200'
    // ... 完整的6個等級
  }
}

實際popup (簡化版):

difficulty === 'A1' || difficulty === 'A2' ? 'bg-green-100 text-green-700' :
difficulty === 'B1' || difficulty === 'B2' ? 'bg-yellow-100 text-yellow-700' :
// ... 只有3-4個分組

2. 容器尺寸差異

展示頁面:

className="bg-white rounded-xl shadow-lg w-96 max-w-md overflow-hidden"
// 固定寬度 w-96 = 384px

實際popup:

width: 'min(384px, calc(100vw - 32px))'
// 響應式寬度

3. 可能的其他差異

  • 字體載入狀態
  • CSS優先級問題
  • 瀏覽器快取問題
  • 假資料vs真實資料的處理差異

修正建議

高優先級修正:

  1. 統一CEFR顏色函數: 在ClickableTextV2中實現完整的getCEFRColor
  2. 統一容器樣式: 確保所有CSS類別完全相同
  3. 統一寬度處理: 在保持響應式的前提下統一寬度邏輯

測試驗證:

  1. 並排對比: 同時打開兩個頁面進行視覺對比
  2. 開發者工具: 使用瀏覽器工具檢查computed styles
  3. 不同設備: 在桌面端和手機端都進行測試

結論

我承認之前的判斷可能不準確，因為我無法實際看到瀏覽器渲染效果。通過程式碼分析，確實存在一些可能導致視覺差異的技術細節。需要進行實際的程式碼修正和測試來確保兩者完全一致。