ObsiViewer/docs/FOLDER_NAVIGATION_TEST_GUIDE.md

🧪 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

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)

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

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

   ## 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___________