Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ObsiViewer/URL_STATE_INTEGRATION_TEST.md
Bruno Charest 96745e9997 feat: add URL state synchronization for navigation 
- 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
2025-10-24 23:23:30 -04:00

7.6 KiB
Raw Blame History

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&note=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&note=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&note=...
  • 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&note=Allo-3/test.md
  2. Appuyer F5 (rechargement)

Attendu:

  • Page se recharge
  • L'URL reste ?folder=Allo-3&note=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