# 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)_