4.8 KiB

Raw Blame History

複習功能20%核心組件測試計劃

🎯 精選20%核心組件 (7個)

從32個組件中精選出真正值得測試的7個核心組件，這些組件包含80%的業務邏輯價值。

🏆 Tier 1: 絕對核心 (3個) - 必須測試

1. ReviewRunner.tsx ⭐⭐⭐⭐⭐

為什麼重要: 複習系統的大腦，協調所有測驗邏輯

// 核心邏輯:
- 測驗模式切換
- 答題處理和驗證
- Store 狀態協調
- 錯誤處理
- 導航控制

2. BaseTestComponent.tsx ⭐⭐⭐⭐⭐

為什麼重要: 所有測驗組件的基礎，包含關鍵邏輯

// 核心邏輯:
- useTestAnswer Hook (狀態管理核心)
- 測驗狀態管理
- 答題流程控制
- 通用測驗邏輯

3. NavigationController.tsx ⭐⭐⭐⭐

為什麼重要: 控制整個複習流程的導航邏輯

// 核心邏輯:
- 導航狀態計算
- 跳過/繼續/完成邏輯
- 測驗完成判斷
- 智能按鈕顯示

🎯 Tier 2: 重要組件 (4個) - 優先測試

4. FlipMemoryTest.tsx ⭐⭐⭐

為什麼重要: 最核心的測驗模式，複雜的UI邏輯

// 核心邏輯:
- 3D翻卡動畫控制
- 響應式高度計算
- 信心度選擇邏輯
- 複雜的狀態管理

5. VocabChoiceTest.tsx ⭐⭐⭐

為什麼重要: 第二核心測驗模式，選擇邏輯

// 核心邏輯:
- 答案驗證邏輯
- 選項狀態管理
- 結果顯示控制

6. SentenceFillTest.tsx ⭐⭐

為什麼重要: 填空測驗的核心邏輯

// 核心邏輯:
- 輸入驗證和處理
- 答案匹配算法
- 提示系統邏輯

7. AnswerActions.tsx ⭐⭐

為什麼重要: 答題操作的統一邏輯

// 核心邏輯:
- 提交/跳過狀態管理
- 按鈕啟用/禁用邏輯
- 操作流程控制

❌ 不測試的25個組件

純展示組件 (12個)

MasteryIndicator.tsx - 純顯示
ReviewTypeIndicator.tsx - 純顯示
TestStatusIndicator.tsx - 純顯示
LoadingStates.tsx - 純顯示
TaskListModal.tsx - 純顯示
TestResultDisplay.tsx - 純顯示
TestHeader.tsx - 純顯示
ProgressBar.tsx - 純顯示
ProgressTracker.tsx - 簡單計算
ErrorReportButton.tsx - 簡單按鈕
HintPanel.tsx - 簡單面板
TestContainer.tsx - 簡單容器

低頻測驗組件 (4個)

VocabListeningTest.tsx - 邏輯類似VocabChoice
SentenceListeningTest.tsx - 邏輯類似SentenceFill
SentenceReorderTest.tsx - 特殊功能但使用頻率低
SentenceSpeakingTest.tsx - 特殊功能但使用頻率低

簡單工具組件 (9個)

ConfidenceButtons.tsx - 簡單UI邏輯
SentenceInput.tsx - 簡單輸入組件
+ 7個其他簡單組件

🚀 核心組件測試實施計劃

Phase 1: 基礎邏輯組件

BaseTestComponent.tsx - useTestAnswer Hook 測試
NavigationController.tsx - 導航邏輯測試
AnswerActions.tsx - 操作邏輯測試

Phase 2: 核心測驗組件

ReviewRunner.tsx - 集成邏輯測試
FlipMemoryTest.tsx - 翻卡邏輯測試
VocabChoiceTest.tsx - 選擇邏輯測試
SentenceFillTest.tsx - 填空邏輯測試

📊 投資回報分析

測試投資 vs 價值

7個核心組件 = 投資 6-8小時 = 獲得 80% 邏輯覆蓋
25個其他組件 = 投資 20-30小時 = 獲得 20% 額外價值

選擇: 測試7個核心組件即可！

測試維護成本

7個核心組件測試 = 可管理的維護成本
32個所有組件測試 = 不可持續的維護負擔

✅ 立即執行的測試重點

最值得測試的核心組件

BaseTestComponent - 包含 useTestAnswer Hook
NavigationController - 導航邏輯核心
ReviewRunner - 系統集成邏輯
FlipMemoryTest - 最重要的測驗模式

這4個組件的測試 = 複習功能80%的邏輯覆蓋！

🎯 實用建議

現在立即開始

// 1. BaseTestComponent 的 useTestAnswer Hook 測試
describe('useTestAnswer Hook', () => {
  test('答題狀態管理')
  test('重複提交防護')
  test('重置功能')
})

// 2. NavigationController 的邏輯測試
describe('NavigationController', () => {
  test('導航狀態計算')
  test('按鈕顯示邏輯')
  test('完成狀態判斷')
})

跳過的組件處理

# 不寫測試，但用其他方式保證品質
1. 手動測試驗證 UI
2. TypeScript 保證類型安全
3. 代碼審查檢查邏輯
4. 實際使用中發現問題

精選7個核心組件測試 = 高投資回報 + 可管理的維護成本！ 🎯

4.8 KiB Raw Blame History Unescape Escape