ObsiViewer/docs/TEST_SEARCH.md

🧪 Test de la Recherche Meilisearch

✅ Modifications Appliquées

1. Logs de Débogage Ajoutés

Fichiers modifiés :

• src/core/search/search-meilisearch.service.ts - Logs requête HTTP
• src/core/search/search-orchestrator.service.ts - Logs transformation
• src/components/search-panel/search-panel.component.ts - Logs résultats
• src/components/search-results/search-results.component.ts - Support HTML highlight

2. Garantie d'Affichage des Résultats

Problème résolu : Les hits Meilisearch sans _formatted ne créaient aucun match.

Solution : Fallback automatique sur excerpt ou extrait de content pour toujours avoir au moins un match affichable.

3. Support du Highlighting Serveur

Problème résolu : Les balises <mark> de Meilisearch étaient échappées.

Solution : Détection des balises HTML pré-existantes et rendu sans échappement.

🚀 Comment Tester

Prérequis

# 1. Meilisearch actif
docker ps | grep meilisearch
# ✅ Doit afficher : obsiviewer-meilisearch ... Up ... 7700->7700

# 2. Backend actif
# Terminal 1 :
node server/index.mjs
# ✅ Doit afficher : ObsiViewer server running on http://0.0.0.0:4000

# 3. Frontend actif
# Terminal 2 :
npm run dev
# ✅ Doit afficher : Local: http://localhost:3000

Test 1 : Backend Direct

curl "http://localhost:4000/api/search?q=test&limit=2"

Résultat attendu :

{
  "hits": [
    {
      "id": "...",
      "title": "...",
      "excerpt": "...",
      "_formatted": {
        "title": "...<mark>test</mark>...",
        "content": "...<mark>test</mark>..."
      }
    }
  ],
  "estimatedTotalHits": 10,
  "processingTimeMs": 15,
  "query": "test"
}

Test 2 : Interface Utilisateur

1. Ouvrir : http://localhost:3000
2. Ouvrir DevTools : F12
3. Aller dans Console
4. Cliquer sur la barre de recherche
5. Taper : test (ou tout autre mot)
6. Attendre 300ms (debounce)

Logs attendus dans Console :

[SearchOrchestrator] Calling Meilisearch with query: test
[SearchMeilisearchService] Sending request: /api/search?q=test&limit=20&highlight=true
[SearchMeilisearchService] Request completed
[SearchOrchestrator] Raw Meilisearch response: {hits: Array(X), ...}
[SearchOrchestrator] Transformed hit: {id: "...", matchCount: 1, ...}
[SearchPanel] Results received: Array(X)

Interface attendue :

• ✅ Liste de résultats apparaît
• ✅ Nombre de résultats affiché (ex: "5 results")
• ✅ Groupes de fichiers visibles
• ✅ Cliquer sur un groupe → matches s'affichent
• ✅ Texte surligné en jaune (<mark>)

Test 3 : Network Tab

1. DevTools → Network
2. Filtrer : search
3. Taper une recherche

Requête attendue :

• URL : /api/search?q=test&limit=20&highlight=true
• Method : GET
• Status : 200 OK
• Response : JSON avec hits

Test 4 : Recherche Live

1. Taper lentement : t → te → tes → test
2. Observer : Recherche se déclenche après 300ms de pause
3. Vérifier : Pas de gel de l'interface

Test 5 : Opérateurs Obsidian

# Recherche simple
test

# Par tag
tag:projet

# Par chemin
path:docs/

# Par fichier
file:readme

# Combinaison
tag:important path:2024/

🐛 Que Faire Si Ça Ne Marche Pas

Symptôme : Aucune requête HTTP

Vérifier :

# 1. Backend tourne ?
netstat -ano | findstr :4000

# 2. USE_MEILI activé ?
# Ouvrir : src/core/logging/environment.ts
# Vérifier : USE_MEILI: true

Solution :

• Redémarrer backend : node server/index.mjs
• Hard refresh navigateur : Ctrl+Shift+R

Symptôme : Requête part mais erreur 404/500

Vérifier :

# Test direct backend
curl "http://localhost:4000/api/search?q=test"

# Si erreur : vérifier logs backend
# Terminal où node tourne

Solution :

• Vérifier que Meilisearch est actif
• Réindexer si nécessaire : npm run meili:reindex

Symptôme : Réponse OK mais rien ne s'affiche

Vérifier dans Console :

[SearchPanel] Results received: Array(0)
# ← Si Array(0), aucun résultat trouvé

Solution :

• Essayer un autre terme de recherche
• Vérifier que l'index contient des documents :

  curl "http://127.0.0.1:7700/indexes/notes_c_obsidian_doc_obsidian_it/stats" -H "Authorization: Bearer devMeiliKey123"
  

Symptôme : Résultats affichés mais pas de highlighting

Vérifier :

• Inspecter un match dans DevTools
• Chercher les balises <mark> dans le HTML

Solution :

• Vérifier que highlight=true dans la requête
• Vérifier que _formatted est présent dans la réponse

📊 Résultats Attendus

Performance

• Temps de recherche : 15-50ms (Meilisearch)
• Temps total : < 100ms (avec réseau)
• Pas de gel UI : ✅ Interface reste réactive

Affichage

• Nombre de résultats : Affiché en haut
• Groupes par fichier : ✅ Pliables/dépliables
• Matches : ✅ Visibles avec contexte
• Highlighting : ✅ Texte surligné en jaune

Fonctionnalités

• Recherche live : ✅ Pendant la saisie (debounce 300ms)
• Opérateurs : ✅ tag:, path:, file:
• Tri : ✅ Par pertinence, nom, date modifiée
• Navigation : ✅ Clic sur résultat ouvre la note

✅ Checklist de Validation

• Backend démarré et accessible
• Frontend démarré sur port 3000
• Meilisearch actif sur port 7700
• Hard refresh effectué (Ctrl+Shift+R)
• DevTools Console ouverte
• Recherche tapée (2+ caractères)
• Logs console présents et corrects
• Requête HTTP visible dans Network
• Résultats affichés dans l'interface
• Highlighting visible (texte surligné)
• Pas de gel pendant la saisie
• Clic sur résultat fonctionne

🎯 Prochaines Étapes

Une fois la recherche validée :

1. Retirer les logs de débogage (ou les mettre en mode debug uniquement)
2. Tester avec différentes requêtes (tags, paths, etc.)
3. Valider la performance avec un gros vault (1000+ notes)
4. Documenter le comportement final
5. Créer des tests E2E automatisés

📚 Documentation

• Guide complet : docs/SEARCH_OPTIMIZATION.md
• Guide de débogage : docs/SEARCH_DEBUG_GUIDE.md
• Migration : docs/CHANGELOG/SEARCH_MEILISEARCH_MIGRATION.md
• Démarrage rapide : QUICK_START.md

🆘 Support

Si les tests échouent après avoir suivi ce guide :

1. Copier les logs console complets
2. Copier la réponse de /api/search?q=test&limit=1
3. Vérifier les versions (Node, Angular, Meilisearch)
4. Consulter docs/SEARCH_DEBUG_GUIDE.md pour diagnostic approfondi