ObsiViewer/docs/GRAPH_ACCORDION_TESTING_CHECKLIST.md

Graph Settings Accordion - Testing Checklist

🧪 Checklist de test manuel

1. Fonctionnalités de base

Ouverture/Fermeture

• Cliquer sur "FILTERS" ouvre/ferme la section
• Cliquer sur "GROUPS" ouvre/ferme la section
• Cliquer sur "DISPLAY" ouvre/ferme la section
• Cliquer sur "FORCES" ouvre/ferme la section
• Plusieurs sections peuvent être ouvertes simultanément
• L'icône chevron pivote à 180° quand ouvert

Animation

• L'animation d'ouverture est fluide (200ms)
• L'animation de fermeture est fluide (200ms)
• Pas de saccade (jank) visible
• Le contenu ne déborde pas pendant l'animation
• L'animation fonctionne sur tous les navigateurs (Chrome, Firefox, Edge)

Persistance

• Ouvrir "Groups", recharger la page → "Groups" reste ouvert
• Fermer "Filters", recharger la page → "Filters" reste fermé
• Ouvrir plusieurs sections, recharger → toutes restent ouvertes
• État initial par défaut : "Filters" ouvert uniquement

2. Accessibilité (A11y)

Navigation clavier

• Tab : Focus se déplace entre les headers
• Enter sur un header : Toggle la section
• Espace sur un header : Toggle la section
• Shift+Tab : Navigation inverse fonctionne
• Le focus est visible (outline bleu)

Attributs ARIA

• Inspecter : aria-expanded="true" quand ouvert
• Inspecter : aria-expanded="false" quand fermé
• Inspecter : aria-controls pointe vers l'ID du panel
• Inspecter : Panel a role="region"
• Inspecter : aria-labelledby sur le panel

Lecteur d'écran (optionnel)

• NVDA/JAWS annonce "expanded" / "collapsed"
• Le titre de la section est annoncé
• Le contenu est accessible

3. Modes Dark/Light

Light Mode

• Borders : gris clair visible
• Background : blanc/gris très clair
• Text : gris foncé lisible
• Hover : background change légèrement
• Section active : border bleue visible
• Shadow : subtile et élégante

Dark Mode

• Activer dark mode (toggle dans l'app)
• Borders : gris foncé visible
• Background : gris très foncé / noir
• Text : blanc/gris clair lisible
• Hover : background change légèrement
• Section active : border bleue visible
• Shadow : adaptée au dark mode

Transition Light ↔ Dark

• Passer de light à dark : transition fluide
• Passer de dark à light : transition fluide
• Pas de flash ou de couleur incorrecte

4. Responsive / Mobile

Desktop (> 768px)

• Accordéon s'affiche correctement
• Largeur du panel : 400px max
• Scroll vertical si contenu dépasse

Tablet (768px)

• Accordéon s'affiche correctement
• Panel prend toute la largeur

Mobile (< 768px)

• Accordéon s'affiche correctement
• Panel prend toute la largeur
• Touch : tap sur header fonctionne
• Scroll vertical fonctionne
• Pas de débordement horizontal

5. Contenu des sections

Filters

• Search input visible et fonctionnel
• Checkboxes : Tags, Attachments, Existing files only, Orphans
• Changements persistés dans graph.json

Groups

• Liste des color groups affichée
• Bouton "New group" fonctionne
• Color picker fonctionne
• Input query fonctionne
• Boutons duplicate/delete fonctionnent
• Changements persistés

Display

• Checkbox "Arrows" fonctionne
• Slider "Text fade threshold" fonctionne
• Slider "Node size" fonctionne
• Slider "Link thickness" fonctionne
• Bouton "Animate" fonctionne
• Valeurs affichées en temps réel
• Changements persistés

Forces

• Slider "Center force" fonctionne
• Slider "Repel force" fonctionne
• Slider "Link force" fonctionne
• Slider "Link distance" fonctionne
• Valeurs affichées en temps réel
• Changements persistés

6. Toggle "Collapse All / Expand All"

• Bouton visible en bas de l'accordéon
• Texte : "Expand all" quand au moins une section fermée
• Texte : "Collapse all" quand toutes ouvertes
• Cliquer "Expand all" : ouvre toutes les sections
• Cliquer "Collapse all" : ferme toutes les sections
• État persisté après rechargement

7. Performance

Rendu conditionnel

• Ouvrir DevTools > Elements
• Inspecter une section fermée : contenu absent du DOM
• Ouvrir la section : contenu apparaît dans le DOM
• Fermer la section : contenu reste dans le DOM (Angular garde le template)

Change Detection

• Ouvrir DevTools > Performance
• Enregistrer : ouvrir/fermer plusieurs sections
• Vérifier : pas de re-render massif
• Frame rate : stable à 60 FPS

Memory Leaks

• Ouvrir/fermer sections 50 fois
• DevTools > Memory > Take snapshot
• Vérifier : pas d'augmentation anormale de mémoire

8. Intégration

Panel Settings

• Bouton "Graph settings" ouvre le panel
• Accordéon s'affiche dans le panel
• Bouton "Reset all" fonctionne (avec confirmation)
• Bouton "Close" (X) ferme le panel
• Escape ferme le panel
• Cliquer sur backdrop ferme le panel

Synchronisation

• Modifier un setting dans l'accordéon
• Vérifier : graph se met à jour en temps réel
• Modifier .obsidian/graph.json manuellement
• Vérifier : accordéon se met à jour (polling 2s)

9. Edge Cases

Données invalides

• graph.json vide : utilise les defaults
• graph.json corrompu : utilise les defaults
• Valeurs hors limites : clampées automatiquement

Conflits

• Modifier graph.json pendant que panel ouvert
• Vérifier : détection de conflit et reload

Erreurs réseau

• Simuler erreur 500 sur /api/vault/graph
• Vérifier : fallback sur defaults, pas de crash

10. Build & Production

• npm run build : succès sans erreur
• npm run build : pas de warning critique
• Build production : tester en mode preview
• Bundle size : vérifier impact (devrait être neutre ou négatif)

🐛 Bugs connus / À surveiller

• Safari : animation grid parfois saccadée (iOS < 16)
• Firefox : focus outline peut être trop épais
• Edge : color picker style peut différer

✅ Résultat final

Date du test : ___________
Testeur : ___________
Navigateur(s) : ___________
OS : ___________

Nombre de tests réussis : ___ / ___
Bugs critiques : ___
Bugs mineurs : ___

Validation : ☐ Approuvé ☐ À corriger

---

📝 Notes de test

(Espace pour notes additionnelles)