ObsiViewer/QUICK_TEST_GUIDE.md

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

Démarrage rapide

# 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 :

// 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

// 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

// 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 ! 🎨