ObsiViewer/QUICK_TEST_GUIDE.md

# 🧪 Guide de Test Rapide - Système de Théming

## Démarrage rapide

```bash
# 1. Installer les dépendances (si nécessaire)
npm install

# 2. Lancer l'application en mode dev
npm run dev

# 3. Ouvrir dans le navigateur
# http://localhost:4200
```

## Test manuel des thèmes

### Accéder aux paramètres

1. Ouvrir l'application
2. Naviguer vers **Parameters** / **Paramètres**
3. Section **Apparence** / **Appearance**

### Tester les modes

**Mode System** :
- Sélectionner "System"
- Changer le mode de votre OS (light/dark)
- L'application doit suivre automatiquement

**Mode Light** :
- Sélectionner "Light"
- Toute l'interface doit être en mode clair

**Mode Dark** :
- Sélectionner "Dark"
- Toute l'interface doit être en mode sombre

### Tester les thèmes

Pour chaque thème, vérifier en mode Light ET Dark (si applicable) :

#### 1. **Light** (thème par défaut clair)
- Mode : Light uniquement
- Palette : Blanc, gris, bleus

#### 2. **Dark** (thème par défaut sombre)
- Mode : Dark uniquement
- Palette : Bleu-gris foncé, texte clair

#### 3. **Obsidian**
- Mode Light : Beige chaud, texte anthracite
- Mode Dark : Gris très foncé, accents beiges

#### 4. **Nord**
- Mode Light : Blanc neigeux, palette nordique pastel
- Mode Dark : Bleu-gris arctique, palette nordique

#### 5. **Notion**
- Mode Light : Blanc pur, minimaliste
- Mode Dark : Noir profond, contraste élevé

#### 6. **GitHub**
- Mode Light : Style GitHub classique
- Mode Dark : GitHub Dimmed Dark

#### 7. **Discord**
- Mode Light : Gris très clair, violet Discord
- Mode Dark : Gris Discord, violet Discord

#### 8. **Monokai**
- Mode Light : Crème, accents atténués
- Mode Dark : Vert-gris foncé, palette Monokai

## Checklist de vérification

Pour chaque combinaison thème/mode, vérifier :

### 🏠 Page d'accueil / Liste

- [ ] **Sidebar gauche**
  - Fond cohérent
  - Items hover visibles
  - Item actif distinct
  - Badges de compteurs lisibles
  - Séparateurs visibles

- [ ] **Topbar**
  - Fond cohérent
  - Barre de recherche lisible
  - Placeholder visible
  - Focus ring visible
  - Icônes visibles

- [ ] **Liste des notes**
  - Items lisibles
  - Hover distinct
  - Selected visible
  - Path muted lisible
  - Séparateurs visibles

### 📄 Page de détail

- [ ] **Contenu markdown**
  - Titres (H1-H6) lisibles
  - Paragraphes lisibles
  - Liens visibles et hover
  - Listes (ul, ol) lisibles
  - Blockquotes distincts
  - Code inline lisible
  - Code blocks (fences) lisibles
  - Tables lisibles (headers, zebra)
  - HR visibles

- [ ] **Panneaux latéraux**
  - TOC lisible
  - Propriétés lisibles
  - Tags lisibles et hover

### ✏️ Mode édition

- [ ] **Éditeur**
  - Fond CodeMirror cohérent
  - Texte lisible
  - Sélection visible
  - Gutters lisibles
  - Cursor visible
  - Coloration syntaxique cohérente

- [ ] **Toolbar**
  - Boutons lisibles
  - Hover visible
  - Active visible

### 🎨 Composants UI

- [ ] **Modales**
  - Fond cohérent
  - Overlay visible
  - Bordures visibles
  - Boutons lisibles

- [ ] **Menus contextuels**
  - Fond cohérent
  - Items hover visibles
  - Séparateurs visibles

- [ ] **Toasts**
  - Fond cohérent
  - Texte lisible
  - Bordure visible
  - Barre de progression visible

- [ ] **Chips/Tags**
  - Fond cohérent
  - Texte lisible
  - Hover visible
  - Selected distinct

- [ ] **Inputs**
  - Fond cohérent
  - Texte lisible
  - Placeholder visible
  - Focus ring visible
  - Border visible

- [ ] **Buttons**
  - Fond cohérent
  - Texte lisible
  - Hover visible
  - Active visible
  - Disabled visible

### 📱 Mobile

- [ ] **Bottom navigation**
  - Fond cohérent
  - Icônes visibles
  - Active visible

- [ ] **Drawers/Sheets**
  - Fond cohérent
  - Overlay visible

### 🎯 Graphes (si applicable)

- [ ] **Graph view**
  - Nœuds visibles
  - Liens visibles
  - Labels lisibles
  - Légende lisible

## Tests de contraste

### Outils recommandés

1. **Chrome DevTools**
   - F12 → Lighthouse → Accessibility
   - Vérifier les contrastes automatiquement

2. **WebAIM Contrast Checker**
   - https://webaim.org/resources/contrastchecker/
   - Tester manuellement les combinaisons critiques

### Combinaisons à tester

Pour chaque thème :
- [ ] Texte principal / Fond principal (ratio ≥ 4.5:1)
- [ ] Texte muted / Fond principal (ratio ≥ 4.5:1)
- [ ] Liens / Fond principal (ratio ≥ 4.5:1)
- [ ] Boutons / Fond bouton (ratio ≥ 4.5:1)

## Tests de persistance

1. **Sélectionner un thème** (ex: Obsidian Dark)
2. **Recharger la page** (F5)
   - ✅ Le thème doit être conservé
   - ✅ Pas de flash de contenu (anti-FOUC)

3. **Fermer et rouvrir le navigateur**
   - ✅ Le thème doit être conservé

4. **Tester en navigation privée**
   - ✅ Thème par défaut (Light)
   - ✅ Changement de thème fonctionne
   - ⚠️ Non persisté après fermeture (comportement attendu)

## Tests de réactivité

1. **Ouvrir la page Parameters**
2. **Changer le mode** (Light → Dark)
   - ✅ Changement immédiat sur toute la page
   - ✅ Pas de rechargement nécessaire

3. **Changer le thème** (Obsidian → Nord)
   - ✅ Changement immédiat sur toute la page
   - ✅ Pas de rechargement nécessaire

4. **Ouvrir plusieurs onglets**
   - ✅ Changement dans un onglet se reflète dans les autres (après focus)

## Debugging

### Vérifier le thème actif

Ouvrir la console (F12) et taper :

```javascript
// Vérifier la classe dark
document.documentElement.classList.contains('dark')

// Vérifier le thème
document.documentElement.getAttribute('data-theme')

// Vérifier les préférences stockées
JSON.parse(localStorage.getItem('obsiviewer.preferences.v1'))
```

### Forcer un thème manuellement

```javascript
// Forcer dark mode
document.documentElement.classList.add('dark')

// Forcer un thème
document.documentElement.setAttribute('data-theme', 'nord')

// Recharger pour restaurer les préférences
location.reload()
```

### Inspecter les tokens CSS

```javascript
// Obtenir la valeur d'un token
getComputedStyle(document.documentElement).getPropertyValue('--bg-main')

// Lister tous les tokens
Array.from(document.styleSheets)
  .flatMap(sheet => Array.from(sheet.cssRules))
  .filter(rule => rule.style?.getPropertyValue('--bg'))
```

## Rapport de bugs

Si vous trouvez un problème :

1. **Capturer** :
   - Screenshot du problème
   - Thème actif (nom + mode)
   - Navigateur + version
   - Résolution d'écran

2. **Reproduire** :
   - Étapes pour reproduire
   - Comportement attendu
   - Comportement observé

3. **Vérifier** :
   - Console (erreurs JS ?)
   - Network (ressources manquantes ?)
   - Computed styles (tokens appliqués ?)

## Checklist finale

Avant de valider le système de théming :

- [ ] Les 14 combinaisons sont testées
- [ ] Tous les composants UI sont cohérents
- [ ] Les contrastes respectent WCAG AA
- [ ] La persistance fonctionne
- [ ] Pas de flash au chargement (anti-FOUC)
- [ ] Les transitions sont fluides
- [ ] Le mode System fonctionne
- [ ] Mobile est testé
- [ ] Aucune couleur hardcodée visible
- [ ] Documentation à jour

---

**Bon test ! 🎨**