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:

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

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

```javascript
// 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:
```javascript
const appRoot = document.querySelector('app-root');
const commentService = /* trouver le service */;
console.log('All comments:', commentService.getAllComments());
```

2. Vérifier les blockIds:
```javascript
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

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