Bruno Charest
0dc346d6b7
- Added server-side folder filtering to paginated metadata endpoint with support for regular folders and .trash - Improved list view performance by optimizing kind filtering and non-markdown file handling - Updated folder navigation to properly reset other filters (tags, quick links, search) when selecting a folder - Added request ID tracking to prevent stale responses from affecting pagination state - Enhanced list view to show loading
340 lines
8.9 KiB
Markdown
340 lines
8.9 KiB
Markdown
# 🧪 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___________
|