# TERR-008: Catégorisation des Tests Frontend

## 📊 Vue d'Ensemble

- **Total fichiers de tests**: 189
- **Tests passants**: Majorité (✓ visible dans les logs)
- **Erreurs récurrentes**: 5 catégories principales

## 🔍 Catégorisation des Erreurs

### CATÉGORIE 1: APIs Browser Manquantes (PRIORITÉ HAUTE)

#### 1.1 ResizeObserver is not defined
**Fréquence**: Très élevée (apparaît dans de nombreux tests)
**Impact**: Tests échouent silencieusement ou avec warnings
**Cause**: `ResizeObserver` n'est pas mocké dans `src/test/setup.ts`
**Fichiers affectés**: 
- Composants utilisant des librairies UI (Radix UI, etc.)
- Composants avec resize detection
- Composants de layout dynamique

**Solution**:
```typescript
// Ajouter dans src/test/setup.ts
global.ResizeObserver = class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
};
```

**Temps estimé**: 5 minutes
**Complexité**: TRIVIAL

---

#### 1.2 WebSocket Mock Incomplet
**Fréquence**: Moyenne
**Impact**: Tests WebSocket échouent
**Erreur**: `TypeError: realWebSocket.addEventListener is not a function`
**Cause**: Le mock WebSocket dans `setup.ts` n'implémente pas `addEventListener`
**Fichiers affectés**:
- `src/features/streaming/hooks/usePlaybackRealtime.test.ts`
- Tous les tests utilisant WebSocket

**Solution**:
```typescript
// Améliorer MockWebSocket dans src/test/setup.ts
class MockWebSocket {
  // ... existing code ...
  addEventListener(type: string, listener: EventListener) {
    // Implementation
  }
  removeEventListener(type: string, listener: EventListener) {
    // Implementation
  }
}
```

**Temps estimé**: 15 minutes
**Complexité**: SIMPLE

---

### CATÉGORIE 2: Problèmes React Hooks (PRIORITÉ MOYENNE)

#### 2.1 Rendered more hooks than during the previous render
**Fréquence**: Moyenne
**Impact**: Tests échouent avec erreur React
**Cause**: 
- Hooks conditionnels
- Hooks dans des conditions if/else
- Hooks après des early returns
- Re-renders avec nombre différent de hooks

**Fichiers affectés**:
- Composants avec logique conditionnelle complexe
- Hooks personnalisés avec conditions

**Solution**:
- Auditer les composants pour hooks conditionnels
- Utiliser `useMemo`/`useCallback` au lieu de hooks conditionnels
- Réorganiser la logique pour éviter hooks conditionnels

**Temps estimé**: 2-4 heures
**Complexité**: MOYENNE

---

### CATÉGORIE 3: Mocks Manquants/Incomplets (PRIORITÉ MOYENNE)

#### 3.1 toast.success is not a function
**Fréquence**: Faible
**Impact**: Tests échouent lors de l'appel à toast
**Cause**: Mock de `toast` non configuré ou incomplet
**Fichiers affectés**:
- Tests utilisant `useToast` hook
- Tests avec notifications

**Solution**:
```typescript
// Dans src/mocks/test-setup.ts ou setup.ts
vi.mock('@/hooks/useToast', () => ({
  useToast: () => ({
    toast: {
      success: vi.fn(),
      error: vi.fn(),
      info: vi.fn(),
      warning: vi.fn(),
    },
  }),
}));
```

**Temps estimé**: 30 minutes
**Complexité**: SIMPLE

---

### CATÉGORIE 4: Problèmes de Sélecteurs de Tests (PRIORITÉ BASSE)

#### 4.1 Unable to find an element with the text
**Fréquence**: Faible
**Impact**: Tests échouent mais peuvent être corrigés facilement
**Cause**: 
- Texte divisé par plusieurs éléments
- Texte avec caractères spéciaux (✓, ✗)
- Sélecteurs trop spécifiques

**Exemples**:
- "✓ Ce nom d'utilisateur est disponible"
- "✗ Ce nom d'utilisateur est déjà pris"

**Solution**:
- Utiliser `getByText` avec fonction de matching
- Utiliser `getByRole` ou `getByTestId` au lieu de texte
- Normaliser le texte avant comparaison

**Temps estimé**: 1-2 heures
**Complexité**: SIMPLE

---

### CATÉGORIE 5: Warnings et Avertissements (PRIORITÉ BASSE)

#### 5.1 React Router Future Flag Warning
**Fréquence**: Élevée (warnings)
**Impact**: Aucun (warnings uniquement)
**Cause**: Configuration React Router
**Solution**: Mettre à jour la configuration React Router

**Temps estimé**: 15 minutes
**Complexité**: TRIVIAL

#### 5.2 An update to Component inside a test was not wrapped in act(...)
**Fréquence**: Moyenne (warnings)
**Impact**: Aucun (warnings uniquement)
**Cause**: Mises à jour asynchrones non wrappées
**Solution**: Utiliser `waitFor` et `act` correctement

**Temps estimé**: 1-2 heures
**Complexité**: SIMPLE

---

## 📋 Plan d'Action par Priorité

### PRIORITÉ HAUTE (Impact immédiat)
1. ✅ **ResizeObserver mock** (5 min) - TRIVIAL
2. ✅ **WebSocket addEventListener** (15 min) - SIMPLE
   **Total**: 20 minutes

### PRIORITÉ MOYENNE (Impact fonctionnel)
3. ✅ **toast mock** (30 min) - SIMPLE
4. ⏳ **Hooks conditionnels** (2-4h) - MOYENNE
   **Total**: 2.5-4.5 heures

### PRIORITÉ BASSE (Amélioration qualité)
5. ⏳ **Sélecteurs de tests** (1-2h) - SIMPLE
6. ⏳ **Warnings React Router** (15 min) - TRIVIAL
7. ⏳ **act() warnings** (1-2h) - SIMPLE
   **Total**: 2.25-4.25 heures

---

## 📊 Statistiques

| Catégorie | Erreurs | Warnings | Temps Estimé | Priorité |
|-----------|---------|----------|--------------|----------|
| APIs Browser | 2 types | - | 20 min | HAUTE |
| React Hooks | 1 type | - | 2-4h | MOYENNE |
| Mocks | 1 type | - | 30 min | MOYENNE |
| Sélecteurs | 1 type | - | 1-2h | BASSE |
| Warnings | - | 2 types | 2.25-4.25h | BASSE |
| **TOTAL** | **5** | **2** | **6-11h** | - |

---

## ✅ Points Positifs

1. **Majorité des tests passent** (✓ visible dans logs)
2. **Architecture de tests solide** (189 fichiers)
3. **Setup de base fonctionnel** (vitest, testing-library)
4. **Erreurs catégorisables et corrigeables**

## 🎯 Conclusion

**Statut**: ✅ **BON ÉTAT** avec améliorations nécessaires
- Tests fonctionnels dans l'ensemble
- Erreurs principalement liées à l'environnement de test
- Corrections rapides possibles pour la majorité

**Temps total estimé**: 6-11 heures
**Impact après corrections**: Tests stables et fiables
**Date**: 2025-11-09