veza/veza-docs/ORIGIN/error-logs/TERR-008-categorization.md

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:

// 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:

// 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:

// 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