dramaling-vocab-learning/複習功能核心組件測試計劃.md

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

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

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

---

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

### **1. ReviewRunner.tsx** ⭐⭐⭐⭐⭐
**為什麼重要**: 複習系統的大腦，協調所有測驗邏輯
```typescript
// 核心邏輯:
- 測驗模式切換
- 答題處理和驗證
- Store 狀態協調
- 錯誤處理
- 導航控制
```

### **2. BaseTestComponent.tsx** ⭐⭐⭐⭐⭐
**為什麼重要**: 所有測驗組件的基礎，包含關鍵邏輯
```typescript
// 核心邏輯:
- useTestAnswer Hook (狀態管理核心)
- 測驗狀態管理
- 答題流程控制
- 通用測驗邏輯
```

### **3. NavigationController.tsx** ⭐⭐⭐⭐
**為什麼重要**: 控制整個複習流程的導航邏輯
```typescript
// 核心邏輯:
- 導航狀態計算
- 跳過/繼續/完成邏輯
- 測驗完成判斷
- 智能按鈕顯示
```

---

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

### **4. FlipMemoryTest.tsx** ⭐⭐⭐
**為什麼重要**: 最核心的測驗模式，複雜的UI邏輯
```typescript
// 核心邏輯:
- 3D翻卡動畫控制
- 響應式高度計算
- 信心度選擇邏輯
- 複雜的狀態管理
```

### **5. VocabChoiceTest.tsx** ⭐⭐⭐
**為什麼重要**: 第二核心測驗模式，選擇邏輯
```typescript
// 核心邏輯:
- 答案驗證邏輯
- 選項狀態管理
- 結果顯示控制
```

### **6. SentenceFillTest.tsx** ⭐⭐
**為什麼重要**: 填空測驗的核心邏輯
```typescript
// 核心邏輯:
- 輸入驗證和處理
- 答案匹配算法
- 提示系統邏輯
```

### **7. AnswerActions.tsx** ⭐⭐
**為什麼重要**: 答題操作的統一邏輯
```typescript
// 核心邏輯:
- 提交/跳過狀態管理
- 按鈕啟用/禁用邏輯
- 操作流程控制
```

---

## ❌ **不測試的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: 基礎邏輯組件**
1. **BaseTestComponent.tsx** - `useTestAnswer` Hook 測試
2. **NavigationController.tsx** - 導航邏輯測試
3. **AnswerActions.tsx** - 操作邏輯測試

### **Phase 2: 核心測驗組件**
1. **ReviewRunner.tsx** - 集成邏輯測試
2. **FlipMemoryTest.tsx** - 翻卡邏輯測試
3. **VocabChoiceTest.tsx** - 選擇邏輯測試
4. **SentenceFillTest.tsx** - 填空邏輯測試

---

## 📊 **投資回報分析**

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

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

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

---

## ✅ **立即執行的測試重點**

### **最值得測試的核心組件**
1. **BaseTestComponent** - 包含 `useTestAnswer` Hook
2. **NavigationController** - 導航邏輯核心
3. **ReviewRunner** - 系統集成邏輯
4. **FlipMemoryTest** - 最重要的測驗模式

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

---

## 🎯 **實用建議**

### **現在立即開始**
```typescript
// 1. BaseTestComponent 的 useTestAnswer Hook 測試
describe('useTestAnswer Hook', () => {
  test('答題狀態管理')
  test('重複提交防護')
  test('重置功能')
})

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

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

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