Bruno Charest
96745e9997
- Added UrlStateService to sync app state with URL parameters for note selection, tags, folders, and search - Implemented URL state effects in AppComponent to handle navigation from URL parameters - Updated sidebar and layout components to reflect URL state changes in UI - Added URL state updates when navigating via note selection, tag clicks, and search - Modified note sharing to use URL parameters instead of route paths - Added auto-opening of relevant
344 lines
7.6 KiB
Markdown
344 lines
7.6 KiB
Markdown
# UrlStateService Integration - Test Guide
|
|
|
|
## 🎯 Objectif
|
|
Valider que la navigation via les URLs fonctionne parfaitement dans ObsiViewer avec le UrlStateService intégré à AppComponent.
|
|
|
|
## ✅ Prérequis
|
|
- Backend: `node server/index.mjs` (port 4000)
|
|
- Frontend: `npm run dev` (port 3000)
|
|
- Navigateur: Chrome/Edge/Firefox
|
|
- Mode Nimbus activé (interface nouvelle)
|
|
|
|
## 📋 Test Plan
|
|
|
|
### Phase 1: Tests d'URLs simples
|
|
|
|
#### Test 1.1: Ouvrir une note via URL
|
|
**URL**: `http://localhost:3000/?note=Allo-3/test-new-file.md`
|
|
**Attendu**:
|
|
- [ ] Note "test-new-file.md" s'ouvre dans la vue principale
|
|
- [ ] Dossier "Allo-3" est sélectionné dans la sidebar
|
|
- [ ] L'URL reste `?note=Allo-3/test-new-file.md`
|
|
- [ ] Sur mobile/tablette: onglet "Page" devient actif
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 1.2: Filtrer par dossier via URL
|
|
**URL**: `http://localhost:3000/?folder=Allo-3`
|
|
**Attendu**:
|
|
- [ ] Liste des notes filtrée pour afficher seulement "Allo-3"
|
|
- [ ] Dossier "Allo-3" est sélectionné
|
|
- [ ] Aucune note n'est pré-sélectionnée (première note du dossier si auto-select)
|
|
- [ ] L'URL reste `?folder=Allo-3`
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 1.3: Filtrer par tag via URL
|
|
**URL**: `http://localhost:3000/?tag=home`
|
|
**Attendu**:
|
|
- [ ] Vue "Recherche" s'ouvre
|
|
- [ ] Liste filtrée pour afficher seulement les notes avec tag "home"
|
|
- [ ] Barre de recherche affiche "tag:home"
|
|
- [ ] L'URL reste `?tag=home`
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 1.4: Filtrer par quick link via URL
|
|
**URL**: `http://localhost:3000/?quick=Favoris`
|
|
**Attendu**:
|
|
- [ ] Liste filtrée pour afficher seulement les notes marquées comme favoris
|
|
- [ ] Badge "Favoris" visible dans la liste
|
|
- [ ] L'URL reste `?quick=Favoris`
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 1.5: Recherche via URL
|
|
**URL**: `http://localhost:3000/?search=home`
|
|
**Attendu**:
|
|
- [ ] Barre de recherche affiche "home"
|
|
- [ ] Liste filtrée pour afficher les notes contenant "home"
|
|
- [ ] L'URL reste `?search=home`
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
### Phase 2: Tests de combinaisons
|
|
|
|
#### Test 2.1: Dossier + Note
|
|
**URL**: `http://localhost:3000/?folder=Allo-3¬e=Allo-3/test-new-file.md`
|
|
**Attendu**:
|
|
- [ ] Note "test-new-file.md" s'ouvre
|
|
- [ ] Dossier "Allo-3" est sélectionné
|
|
- [ ] L'URL affiche les deux paramètres
|
|
- [ ] Priorité: note > folder (note s'ouvre)
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 2.2: Tag + Recherche
|
|
**URL**: `http://localhost:3000/?tag=home&search=test`
|
|
**Attendu**:
|
|
- [ ] Vue "Recherche" s'ouvre
|
|
- [ ] Barre de recherche affiche "tag:home"
|
|
- [ ] Liste filtrée par tag "home" ET contenant "test"
|
|
- [ ] L'URL affiche les deux paramètres
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 2.3: Folder + Search
|
|
**URL**: `http://localhost:3000/?folder=Allo-3&search=test`
|
|
**Attendu**:
|
|
- [ ] Liste filtrée pour dossier "Allo-3"
|
|
- [ ] Barre de recherche affiche "test"
|
|
- [ ] Seules les notes du dossier "Allo-3" contenant "test" s'affichent
|
|
- [ ] L'URL affiche les deux paramètres
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
### Phase 3: Tests d'interactions
|
|
|
|
#### Test 3.1: Cliquer un dossier → URL change
|
|
**Étapes**:
|
|
1. Commencer à `http://localhost:3000/`
|
|
2. Cliquer sur le dossier "Allo-3" dans la sidebar
|
|
|
|
**Attendu**:
|
|
- [ ] L'URL change vers `?folder=Allo-3`
|
|
- [ ] Liste filtrée pour "Allo-3"
|
|
- [ ] Pas de rechargement de page
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 3.2: Cliquer une note → URL change
|
|
**Étapes**:
|
|
1. Commencer à `http://localhost:3000/?folder=Allo-3`
|
|
2. Cliquer sur une note dans la liste
|
|
|
|
**Attendu**:
|
|
- [ ] L'URL change vers `?folder=Allo-3¬e=Allo-3/...`
|
|
- [ ] Note s'ouvre dans la vue principale
|
|
- [ ] Pas de rechargement de page
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 3.3: Cliquer un tag → URL change
|
|
**Étapes**:
|
|
1. Ouvrir une note
|
|
2. Cliquer sur un tag dans le contenu de la note
|
|
|
|
**Attendu**:
|
|
- [ ] L'URL change vers `?tag=...`
|
|
- [ ] Vue "Recherche" s'ouvre
|
|
- [ ] Barre de recherche affiche "tag:..."
|
|
- [ ] Pas de rechargement de page
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 3.4: Saisir une recherche → URL change
|
|
**Étapes**:
|
|
1. Commencer à `http://localhost:3000/`
|
|
2. Saisir "test" dans la barre de recherche
|
|
|
|
**Attendu**:
|
|
- [ ] L'URL change vers `?search=test`
|
|
- [ ] Liste filtrée pour "test"
|
|
- [ ] Pas de rechargement de page
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 3.5: Choisir un quick link → URL change
|
|
**Étapes**:
|
|
1. Commencer à `http://localhost:3000/`
|
|
2. Cliquer sur "Favoris" dans les quick links
|
|
|
|
**Attendu**:
|
|
- [ ] L'URL change vers `?quick=Favoris`
|
|
- [ ] Liste filtrée pour les favoris
|
|
- [ ] Pas de rechargement de page
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
### Phase 4: Tests de navigation
|
|
|
|
#### Test 4.1: Back navigateur
|
|
**Étapes**:
|
|
1. Aller à `http://localhost:3000/?folder=Allo-3`
|
|
2. Cliquer sur une note
|
|
3. Cliquer le bouton "Retour" du navigateur
|
|
|
|
**Attendu**:
|
|
- [ ] L'URL revient à `?folder=Allo-3`
|
|
- [ ] La note se ferme
|
|
- [ ] Liste filtrée pour "Allo-3"
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 4.2: Forward navigateur
|
|
**Étapes**:
|
|
1. Faire le test 4.1 jusqu'à cliquer "Retour"
|
|
2. Cliquer le bouton "Avancer" du navigateur
|
|
|
|
**Attendu**:
|
|
- [ ] L'URL revient à `?folder=Allo-3¬e=...`
|
|
- [ ] La note s'ouvre
|
|
- [ ] Pas de rechargement de page
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 4.3: Rechargement page
|
|
**Étapes**:
|
|
1. Aller à `http://localhost:3000/?folder=Allo-3¬e=Allo-3/test.md`
|
|
2. Appuyer F5 (rechargement)
|
|
|
|
**Attendu**:
|
|
- [ ] Page se recharge
|
|
- [ ] L'URL reste `?folder=Allo-3¬e=Allo-3/test.md`
|
|
- [ ] Après rechargement: dossier "Allo-3" sélectionné
|
|
- [ ] Après rechargement: note "test.md" ouverte
|
|
- [ ] Pas d'écran bleu ou vide
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
### Phase 5: Tests de cas limites
|
|
|
|
#### Test 5.1: Note inexistante
|
|
**URL**: `http://localhost:3000/?note=NonExistent/file.md`
|
|
**Attendu**:
|
|
- [ ] Pas d'erreur dans la console
|
|
- [ ] Aucune note n'est sélectionnée
|
|
- [ ] L'URL reste `?note=NonExistent/file.md`
|
|
- [ ] Message "Aucune note sélectionnée" s'affiche
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 5.2: Tag inexistant
|
|
**URL**: `http://localhost:3000/?tag=NonExistentTag`
|
|
**Attendu**:
|
|
- [ ] Pas d'erreur dans la console
|
|
- [ ] Vue "Recherche" s'ouvre
|
|
- [ ] Aucune note n'est affichée
|
|
- [ ] Message "Aucun résultat" ou liste vide
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 5.3: Dossier inexistant
|
|
**URL**: `http://localhost:3000/?folder=NonExistentFolder`
|
|
**Attendu**:
|
|
- [ ] Pas d'erreur dans la console
|
|
- [ ] Liste vide ou message d'erreur
|
|
- [ ] L'URL reste `?folder=NonExistentFolder`
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
#### Test 5.4: Paramètres vides
|
|
**URL**: `http://localhost:3000/?note=&folder=&tag=`
|
|
**Attendu**:
|
|
- [ ] Pas d'erreur dans la console
|
|
- [ ] Comportement par défaut (première note sélectionnée)
|
|
- [ ] Pas de filtre appliqué
|
|
|
|
**Résultat**: ✅ / ❌
|
|
**Notes**:
|
|
|
|
---
|
|
|
|
## 📊 Résumé des résultats
|
|
|
|
| Phase | Tests | Réussis | Échoués | Notes |
|
|
|-------|-------|---------|---------|-------|
|
|
| 1 | 5 | | | |
|
|
| 2 | 3 | | | |
|
|
| 3 | 5 | | | |
|
|
| 4 | 3 | | | |
|
|
| 5 | 4 | | | |
|
|
| **TOTAL** | **20** | | | |
|
|
|
|
## 🐛 Bugs trouvés
|
|
|
|
### Bug 1
|
|
**Description**:
|
|
**URL de reproduction**:
|
|
**Étapes**:
|
|
**Résultat attendu**:
|
|
**Résultat réel**:
|
|
**Sévérité**: 🔴 Critique / 🟠 Majeur / 🟡 Mineur
|
|
|
|
---
|
|
|
|
### Bug 2
|
|
**Description**:
|
|
**URL de reproduction**:
|
|
**Étapes**:
|
|
**Résultat attendu**:
|
|
**Résultat réel**:
|
|
**Sévérité**: 🔴 Critique / 🟠 Majeur / 🟡 Mineur
|
|
|
|
---
|
|
|
|
## ✅ Conclusion
|
|
|
|
**Date de test**:
|
|
**Testeur**:
|
|
**Statut global**: ✅ RÉUSSI / ⚠️ PARTIEL / ❌ ÉCHOUÉ
|
|
**Commentaires**:
|
|
|
|
---
|
|
|
|
## 📝 Notes supplémentaires
|
|
|