ObsiViewer/docs/TESTING_COMMENTS.md

Guide de Test - Commentaires dans les Colonnes

🧪 Ajouter des Commentaires de Test

Méthode 1: Via la Console du Navigateur

1. Ouvrir l'application dans le navigateur
2. Appuyer sur F12 pour ouvrir les DevTools
3. Aller dans l'onglet Console
4. Coller le code suivant:

// Fonction helper pour ajouter des commentaires facilement
function addTestComments() {
  // Récupérer l'instance Angular
  const appRoot = document.querySelector('app-root');
  const ngContext = appRoot?.__ngContext__;
  
  if (!ngContext) {
    console.error('❌ Angular context not found');
    return;
  }
  
  // Chercher le CommentService dans le contexte
  let commentService = null;
  let documentService = null;
  
  // Scanner le contexte pour trouver les services
  for (let i = 0; i < 20; i++) {
    if (ngContext[i]?.commentService) {
      commentService = ngContext[i].commentService;
    }
    if (ngContext[i]?.documentService) {
      documentService = ngContext[i].documentService;
    }
  }
  
  if (!commentService || !documentService) {
    console.error('❌ Services not found');
    return;
  }
  
  // Récupérer tous les blocs
  const blocks = documentService.blocks();
  console.log(`📝 Found ${blocks.length} blocks`);
  
  // Ajouter des commentaires aléatoires
  let commentsAdded = 0;
  blocks.slice(0, 10).forEach((block, index) => {
    const numComments = Math.floor(Math.random() * 3); // 0-2 comments
    
    for (let i = 0; i < numComments; i++) {
      const comments = [
        'Great point!',
        'Need to review this',
        'Important section',
        'Question about this',
        'Looks good',
        'Need clarification'
      ];
      
      const randomComment = comments[Math.floor(Math.random() * comments.length)];
      commentService.addComment(
        block.id,
        randomComment,
        `User${index + 1}`
      );
      commentsAdded++;
    }
  });
  
  console.log(`✅ Added ${commentsAdded} test comments!`);
  console.log('💡 Hover over blocks to see comment buttons');
  
  return { commentService, documentService, blocks };
}

// Exécuter
const result = addTestComments();

Méthode 2: Ajouter un Commentaire Spécifique

// Ajouter 1 commentaire au premier bloc
function addCommentToFirstBlock() {
  const appRoot = document.querySelector('app-root');
  const ngContext = appRoot?.__ngContext__;
  
  let commentService = null;
  let documentService = null;
  
  for (let i = 0; i < 20; i++) {
    if (ngContext[i]?.commentService) commentService = ngContext[i].commentService;
    if (ngContext[i]?.documentService) documentService = ngContext[i].documentService;
  }
  
  if (!commentService || !documentService) {
    console.error('❌ Services not found');
    return;
  }
  
  const blocks = documentService.blocks();
  if (blocks.length > 0) {
    commentService.addComment(
      blocks[0].id,
      'This is a test comment!',
      'TestUser'
    );
    console.log('✅ Comment added to first block!');
  }
}

addCommentToFirstBlock();

Méthode 3: Ajouter Plusieurs Commentaires au Même Bloc

// Ajouter 5 commentaires au premier bloc
function addMultipleComments() {
  const appRoot = document.querySelector('app-root');
  const ngContext = appRoot?.__ngContext__;
  
  let commentService = null;
  let documentService = null;
  
  for (let i = 0; i < 20; i++) {
    if (ngContext[i]?.commentService) commentService = ngContext[i].commentService;
    if (ngContext[i]?.documentService) documentService = ngContext[i].documentService;
  }
  
  if (!commentService || !documentService) {
    console.error('❌ Services not found');
    return;
  }
  
  const blocks = documentService.blocks();
  if (blocks.length > 0) {
    const blockId = blocks[0].id;
    
    const comments = [
      'First comment',
      'Second comment',
      'Third comment',
      'Fourth comment',
      'Fifth comment'
    ];
    
    comments.forEach((text, index) => {
      commentService.addComment(blockId, text, `User${index + 1}`);
    });
    
    console.log(`✅ Added ${comments.length} comments to first block!`);
    console.log(`💬 Block should now show: ${comments.length}`);
  }
}

addMultipleComments();

📋 Vérifications à Faire

Test 1: Bouton de Menu (3 Points)

1. Créer des blocs:

   • Créer 2-3 blocs H2 avec du texte

2. Organiser en colonnes:

   • Drag le premier bloc vers le bord du second
   • Vérifier que 2 colonnes sont créées

3. Vérifier les boutons:

   • Hover sur un bloc dans une colonne
   • ✅ Le bouton avec 3 points doit apparaître en haut à gauche
   • ✅ Le bouton doit être visible au survol

Test 2: Bouton de Commentaires

1. Ajouter des commentaires:

   • Exécuter addTestComments() dans la console

2. Vérifier l'affichage:

   • ✅ Les blocs avec commentaires montrent un badge avec le nombre
   • ✅ Le badge est dans un cercle gris en haut à droite
   • ✅ Hover sur un bloc sans commentaire montre l'icône de bulle

3. Organiser en colonnes:

   • Drag les blocs avec commentaires en colonnes
   • ✅ Les badges de commentaires restent visibles
   • ✅ Chaque bloc conserve son propre compteur

Test 3: Blocs Éditables dans les Colonnes

1. Créer des colonnes avec blocs:

   • Créer 3 H2: "Premier", "Second", "Troisième"
   • Les organiser en 3 colonnes

2. Éditer le contenu:

   • Cliquer sur "Premier" dans la colonne
   • Modifier le texte
   • ✅ Le texte doit être éditable
   • ✅ Les changements doivent persister

3. Tester différents types:

   • Créer un Paragraph, un H1, un H2
   • Les mettre en colonnes
   • ✅ Chaque type doit rester éditable

Test 4: Indépendance des Blocs

1. Setup:

   • Créer 4 blocs H2
   • Ajouter 1 commentaire au 1er bloc
   • Ajouter 2 commentaires au 3ème bloc

2. Organiser:

   • Mettre les 4 blocs en 4 colonnes

3. Vérifier:

   • ✅ 1er bloc: Badge "1"
   • ✅ 2ème bloc: Pas de badge (icône au hover)
   • ✅ 3ème bloc: Badge "2"
   • ✅ 4ème bloc: Pas de badge (icône au hover)

🎯 Résultats Attendus

Apparence du Bloc avec Commentaires:

┌─────────────────┐
│ ⋯          💬 2 │  ← Menu et Compteur
│                 │
│   H2 Content    │  ← Contenu éditable
│                 │
└─────────────────┘

Apparence du Bloc sans Commentaires (hover):

┌─────────────────┐
│ ⋯           💭  │  ← Menu et Icône (au hover)
│                 │
│   H2 Content    │  ← Contenu éditable
│                 │
└─────────────────┘

3 Blocs en Colonnes:

┌─────────┬─────────┬─────────┐
│⋯     💬1│⋯       │⋯     💬3│
│         │         │         │
│  H2     │  H2     │  H2     │
└─────────┴─────────┴─────────┘

🐛 Dépannage

Les boutons n'apparaissent pas

Solution:

• Vérifier que les blocs sont bien dans un groupe avec group class
• Vérifier que le CSS group-hover:opacity-100 fonctionne
• Rafraîchir la page

Les compteurs ne s'affichent pas

Solution:

1. Vérifier que les commentaires sont bien ajoutés:

const appRoot = document.querySelector('app-root');
const commentService = /* trouver le service */;
console.log('All comments:', commentService.getAllComments());

2. Vérifier les blockIds:

const blocks = documentService.blocks();
console.log('Block IDs:', blocks.map(b => ({ id: b.id, type: b.type })));

Les blocs ne sont pas éditables

Solution:

• Vérifier que les composants de blocs sont correctement importés
• Vérifier que onBlockUpdate() est appelé
• Consulter la console pour les erreurs

📚 API du CommentService

// Ajouter un commentaire
commentService.addComment(blockId: string, text: string, author?: string)

// Obtenir le nombre de commentaires
commentService.getCommentCount(blockId: string): number

// Obtenir tous les commentaires d'un bloc
commentService.getCommentsForBlock(blockId: string): Comment[]

// Supprimer un commentaire
commentService.deleteComment(commentId: string)

// Marquer comme résolu
commentService.resolveComment(commentId: string)

// Obtenir tous les commentaires
commentService.getAllComments(): Comment[]

✅ Checklist de Test

• Boutons de menu (3 points) visibles au hover
• Boutons de commentaires visibles (badge ou icône)
• Compteurs affichent le bon nombre
• Blocs restent éditables dans les colonnes
• Commentaires persistent après réorganisation
• Chaque bloc a ses propres boutons indépendants
• Les colonnes multiples fonctionnent (2, 3, 4+)
• Le CSS responsive fonctionne correctement