# 🧪 Guide de Test - Navigation Folders

## 🎯 Objectif

Valider que la correction de la navigation dans les dossiers fonctionne correctement dans tous les scénarios.

## 🚀 Préparation

### 1. Démarrer le serveur de développement
```bash
cd c:\dev\git\web\ObsiViewer
npm start
```

### 2. Ouvrir la console du navigateur
- **Chrome/Edge**: F12 → Onglet Console
- **Firefox**: F12 → Onglet Console
- Filtrer les logs: `[PaginatedNotesList]`

### 3. Préparer l'environnement de test
- Créer plusieurs dossiers avec différents nombres de notes:
  - `test-empty` (0 notes)
  - `test-small` (5 notes)
  - `test-medium` (50 notes)
  - `test-large` (200 notes)
  - `test-deep/level1/level2` (sous-dossiers)

## 📋 Scénarios de Test

### ✅ Test 1: Navigation Simple

**Objectif**: Vérifier que la sélection d'un dossier affiche les bonnes notes

**Étapes**:
1. Ouvrir l'application
2. Cliquer sur le dossier `test-medium` (50 notes)
3. Observer la liste de notes

**Résultat attendu**:
- ✅ La liste affiche exactement 50 notes
- ✅ Le compteur indique "50" en bas à droite
- ✅ Console log: `[PaginatedNotesList] Folder filter changed: { from: null, to: 'test-medium' }`
- ✅ Requête HTTP: `GET /api/vault/metadata/paginated?folder=test-medium&limit=100`

**Résultat observé**: ___________

---

### ✅ Test 2: Navigation Rapide (Multiple Clics)

**Objectif**: Vérifier qu'il n'y a pas de "flicker" lors de changements rapides

**Étapes**:
1. Cliquer sur `test-small` (5 notes)
2. **Immédiatement** cliquer sur `test-medium` (50 notes)
3. **Immédiatement** cliquer sur `test-large` (200 notes)

**Résultat attendu**:
- ✅ Pas de "flash" des notes du dossier précédent
- ✅ La liste finale affiche 200 notes de `test-large`
- ✅ Pas d'erreur dans la console
- ✅ Chaque clic déclenche un nouveau `setFolderFilter()`

**Résultat observé**: ___________

---

### ✅ Test 3: Dossier Vide

**Objectif**: Vérifier le comportement avec un dossier sans contenu

**Étapes**:
1. Cliquer sur le dossier `test-empty` (0 notes)

**Résultat attendu**:
- ✅ Message "Aucune note trouvée"
- ✅ Compteur indique "0"
- ✅ Pas d'erreur dans la console
- ✅ Requête HTTP: `GET /api/vault/metadata/paginated?folder=test-empty&limit=100`

**Résultat observé**: ___________

---

### ✅ Test 4: Dossiers Profonds

**Objectif**: Vérifier la navigation dans des sous-dossiers

**Étapes**:
1. Développer (expand) le dossier `test-deep`
2. Développer le sous-dossier `level1`
3. Cliquer sur `level2`

**Résultat attendu**:
- ✅ Affiche uniquement les notes de `test-deep/level1/level2`
- ✅ N'affiche PAS les notes des dossiers parents
- ✅ Le chemin complet est envoyé au serveur: `folder=test-deep/level1/level2`

**Résultat observé**: ___________

---

### ✅ Test 5: Combinaison Dossier + Recherche

**Objectif**: Vérifier que la recherche fonctionne dans un dossier filtré

**Étapes**:
1. Cliquer sur `test-medium` (50 notes)
2. Saisir "test" dans la barre de recherche
3. Observer le résultat
4. Effacer la recherche

**Résultat attendu**:
- ✅ Après saisie: Affiche uniquement les notes contenant "test" dans `test-medium`
- ✅ Compteur mis à jour (ex: "12")
- ✅ Après effacement: Revient aux 50 notes
- ✅ Requête HTTP inclut: `?folder=test-medium&search=test`

**Résultat observé**: ___________

---

### ✅ Test 6: Combinaison Dossier + Tag

**Objectif**: Vérifier l'interaction entre filtres de dossier et de tag

**Étapes**:
1. Cliquer sur `test-medium` (50 notes)
2. Noter le nombre de notes affichées (ex: 50)
3. Cliquer sur un tag (ex: `#important`)
4. Observer le résultat
5. Cliquer sur un autre dossier

**Résultat attendu**:
- ✅ Après tag: Affiche les notes de `test-medium` ayant le tag `#important`
- ✅ Après changement dossier: Affiche les notes du nouveau dossier ayant le tag `#important`
- ✅ Requête HTTP: `?folder=...&tag=important`

**Résultat observé**: ___________

---

### ✅ Test 7: Retour à "Tout Afficher"

**Objectif**: Vérifier la réinitialisation du filtre

**Étapes**:
1. Cliquer sur un dossier (ex: `test-medium`)
2. Cliquer sur "✨ Tout" dans Quick Links

**Résultat attendu**:
- ✅ Affiche toutes les notes de tous les dossiers
- ✅ Compteur affiche le total (ex: "1,234")
- ✅ Console log: `[PaginatedNotesList] Folder filter changed: { from: 'test-medium', to: null }`

**Résultat observé**: ___________

---

### ✅ Test 8: Scroll Infini

**Objectif**: Vérifier la pagination avec un grand dossier

**Étapes**:
1. Cliquer sur `test-large` (200 notes)
2. Scroller vers le bas de la liste
3. Observer le chargement automatique

**Résultat attendu**:
- ✅ Les premières 100 notes se chargent immédiatement
- ✅ En scrollant, les 100 notes suivantes se chargent automatiquement
- ✅ Indicateur "Chargement..." visible pendant le chargement
- ✅ Requête HTTP avec cursor: `?folder=test-large&cursor=100`

**Résultat observé**: ___________

---

### ✅ Test 9: Rafraîchissement Page

**Objectif**: Vérifier la persistance de l'état après F5

**Étapes**:
1. Cliquer sur un dossier (ex: `test-medium`)
2. Observer l'URL (doit contenir `?folder=test-medium`)
3. Appuyer sur F5 (rafraîchir la page)

**Résultat attendu**:
- ✅ La page se recharge avec le même dossier sélectionné
- ✅ Les notes du dossier s'affichent immédiatement
- ✅ L'URL conserve `?folder=test-medium`

**Résultat observé**: ___________

---

### ✅ Test 10: Navigation Back/Forward

**Objectif**: Vérifier la compatibilité avec l'historique du navigateur

**Étapes**:
1. Cliquer sur `test-small`
2. Cliquer sur `test-medium`
3. Cliquer sur `test-large`
4. Cliquer sur le bouton "Retour" du navigateur (2 fois)
5. Cliquer sur le bouton "Avancer" du navigateur

**Résultat attendu**:
- ✅ Retour 1: Revient à `test-medium` avec ses notes
- ✅ Retour 2: Revient à `test-small` avec ses notes
- ✅ Avancer: Revient à `test-medium`
- ✅ L'URL change à chaque navigation

**Résultat observé**: ___________

---

## 🔍 Validation Console

### Logs Attendus (Exemple)

```javascript
// Navigation vers un dossier
[PaginatedNotesList] Folder filter changed: { from: null, to: 'folder-4' }

// Requête HTTP
GET /api/vault/metadata/paginated?folder=folder-4&limit=100 200 OK (45ms)

// Changement de dossier
[PaginatedNotesList] Folder filter changed: { from: 'folder-4', to: 'Allo-3' }
GET /api/vault/metadata/paginated?folder=Allo-3&limit=100 200 OK (38ms)

// Réinitialisation
[PaginatedNotesList] Folder filter changed: { from: 'Allo-3', to: null }
GET /api/vault/metadata/paginated?limit=100 200 OK (120ms)
```

### ⚠️ Logs d'Erreur à Surveiller

```javascript
// ❌ Ne devrait PAS apparaître
[PaginatedNotesList] Failed to set folder filter: ...
Error: Network error
Error: 404 Not Found
```

---

## 📊 Métriques de Performance

### Temps de Réponse Attendus

| Scénario | Temps Cible | Acceptable | Critique |
|----------|-------------|------------|----------|
| Dossier < 100 notes | < 100ms | < 200ms | > 500ms |
| Dossier > 100 notes | < 150ms | < 300ms | > 1s |
| Changement rapide | < 50ms | < 100ms | > 200ms |
| Scroll infini | < 100ms | < 200ms | > 500ms |

### Utilisation Mémoire

- **Initial**: ~50 MB
- **Après navigation 10 dossiers**: ~60-70 MB
- **Maximum acceptable**: < 150 MB

### Requêtes HTTP

- **Chaque sélection de dossier**: 1 requête
- **Pas de double requête** pour la même sélection
- **Annulation automatique** si navigation rapide

---

## ✅ Checklist Finale

### Fonctionnel
- [ ] Test 1: Navigation simple - OK
- [ ] Test 2: Navigation rapide - OK
- [ ] Test 3: Dossier vide - OK
- [ ] Test 4: Dossiers profonds - OK
- [ ] Test 5: Dossier + Recherche - OK
- [ ] Test 6: Dossier + Tag - OK
- [ ] Test 7: Retour "Tout" - OK
- [ ] Test 8: Scroll infini - OK
- [ ] Test 9: Rafraîchissement page - OK
- [ ] Test 10: Back/Forward - OK

### Performance
- [ ] Temps de réponse < 200ms - OK
- [ ] Pas de "flicker" visuel - OK
- [ ] Mémoire < 150 MB - OK
- [ ] Pas de double requête - OK

### Console
- [ ] Logs corrects `[PaginatedNotesList]` - OK
- [ ] Requêtes HTTP avec bons params - OK
- [ ] Pas d'erreur JavaScript - OK
- [ ] Pas de warning Angular - OK

---

## 🐛 Signaler un Bug

Si un test échoue:

1. **Noter les détails**:
   - Numéro du test
   - Résultat observé
   - Logs console (screenshot ou copie)
   - URL actuelle

2. **Reproduire** le bug:
   - Essayer 3 fois
   - Noter si c'est intermittent

3. **Créer un rapport**:
   ```markdown
   ## Bug: [Titre court]
   
   **Test**: #X - [Nom du test]
   **Observé**: [Description]
   **Attendu**: [Description]
   **Console**: [Logs]
   **URL**: [URL complète]
   **Reproductible**: Oui/Non
   ```

---

## 🎉 Validation Finale

**Tous les tests passent ?**
- ✅ **OUI** → La correction est validée ✨
- ❌ **NON** → Voir la section "Signaler un Bug"

**Signature du testeur**: ___________  
**Date**: ___________  
**Environnement**: Windows/Mac/Linux + Chrome/Firefox/Edge  
**Version**: Angular 20 + ObsiViewer v___________