# Guide de Correction des Tests qui Échouent

**Date:** 2025-01-27  
**Objectif:** Corriger systématiquement les 163 fichiers de tests qui échouent

---

## 🔍 Problèmes Communs Identifiés

### 1. Mock `useToast` Incorrect
**Symptôme:** `showError is not a function`

**Problème:**
```typescript
// ❌ Incorrect
vi.mock('@/hooks/useToast', () => ({
  useToast: vi.fn(() => ({
    toast: vi.fn(),
  })),
}));
```

**Solution:**
```typescript
// ✅ Correct
const mockShowSuccess = vi.fn();
const mockShowError = vi.fn();

vi.mock('@/hooks/useToast', () => ({
  useToast: vi.fn(() => ({
    success: mockShowSuccess,
    error: mockShowError,
    toast: vi.fn(), // Optionnel pour compatibilité
  })),
}));
```

**Fichiers affectés:** ~10-15 fichiers

---

### 2. React Router Context Manquant
**Symptôme:** `Cannot destructure property 'basename' of React__namespace.useContext(...) as it is null`

**Problème:**
```typescript
// ❌ Incorrect
render(<Component />);
```

**Solution:**
```typescript
// ✅ Correct - Option 1: Utiliser customRender
import { render } from '@/test/test-utils';

render(<Component />); // customRender inclut déjà Router

// ✅ Correct - Option 2: Wrapper manuel
import { BrowserRouter } from 'react-router-dom';
import { render } from '@testing-library/react';

render(
  <BrowserRouter>
    <Component />
  </BrowserRouter>
);
```

**Fichiers affectés:** ~20-30 fichiers

---

### 3. WebSocket Mock Incomplet
**Symptôme:** `realWebSocket.addEventListener is not a function`

**Solution:** Déjà corrigé dans `src/test/setup.ts` - MockWebSocket inclut maintenant `addEventListener`, `removeEventListener`, `dispatchEvent`

**Fichiers affectés:** Tests utilisant WebSocket

---

### 4. Context Manquants (ToastContext, AuthContext, etc.)
**Symptôme:** `Cannot read property 'X' of undefined`

**Solution:** Utiliser `customRender` de `test-utils.tsx` qui inclut tous les Contexts nécessaires

```typescript
import { render } from '@/test/test-utils';

// customRender inclut automatiquement:
// - BrowserRouter
// - QueryClientProvider
// - ToastProvider
render(<Component />);
```

**Fichiers affectés:** ~30-40 fichiers

---

### 5. Mocks API Manquants
**Symptôme:** `Network Error` ou `404 Not Found` dans les tests

**Solution:** Ajouter handlers MSW appropriés dans le test

```typescript
import { server } from '@/mocks/test-setup';
import { rest } from 'msw';

beforeEach(() => {
  server.use(
    rest.get('/api/tracks', (req, res, ctx) => {
      return res(ctx.json({ tracks: [] }));
    })
  );
});
```

**Fichiers affectés:** ~50-60 fichiers

---

## 🛠️ Processus de Correction

### Étape 1: Identifier les Erreurs
```bash
npm test -- --run 2>&1 | grep -E "(Error|failed|Cannot|TypeError)" > test-errors.log
```

### Étape 2: Catégoriser les Erreurs
- Grouper par type d'erreur (useToast, Router, Context, etc.)
- Identifier les fichiers affectés

### Étape 3: Corriger par Catégorie
1. **useToast** - Corriger tous les mocks useToast d'abord
2. **Router** - Ajouter BrowserRouter/customRender
3. **Context** - Utiliser customRender
4. **Mocks API** - Ajouter handlers MSW

### Étape 4: Vérifier
```bash
npm test -- --run
```

---

## 📋 Checklist de Correction

Pour chaque fichier de test qui échoue:

- [ ] Vérifier si le test utilise `customRender` de `test-utils.tsx`
- [ ] Si non, remplacer `render` par `customRender` ou wrapper avec Router
- [ ] Vérifier si le mock `useToast` retourne `{ success, error }`
- [ ] Si non, corriger le mock
- [ ] Vérifier si le composant utilise React Router (Link, useNavigate, etc.)
- [ ] Si oui, s'assurer que Router est présent (via customRender ou wrapper)
- [ ] Vérifier si le test nécessite des mocks API
- [ ] Si oui, ajouter handlers MSW appropriés
- [ ] Exécuter le test individuellement pour vérifier
- [ ] Répéter pour tous les tests du fichier

---

## 🚀 Script Automatique

Un script `scripts/fix-failing-tests.sh` a été créé pour automatiser certaines corrections:

```bash
cd apps/web
./scripts/fix-failing-tests.sh
```

**Note:** Le script fait des corrections automatiques mais certaines nécessitent une vérification manuelle.

---

## 📊 Progression

### Corrections Appliquées
- ✅ Mock useToast corrigé dans `PlaylistBatchActions.test.tsx`
- ✅ Router ajouté dans `TrackSearch.test.tsx`
- ✅ Mock WebSocket amélioré dans `setup.ts`
- ✅ Helpers créés dans `test-utils.tsx` et `mocks.ts`

### À Faire
- ⏳ Corriger ~160 fichiers restants selon les patterns identifiés

---

## 🎯 Objectif

**Avant:**
- ❌ 163 fichiers de tests échouent
- ❌ 683 tests échouent

**Après:**
- ✅ 0 fichiers de tests échouent
- ✅ 0 tests échouent

---

**Dernière mise à jour:** 2025-01-27