# Guide de Test : Glissé-Déposé et Double-Clic
**Auteur : Dom, Alice, Kiro - 08 janvier 2026**

## Vue d'ensemble

Ce guide permet de tester les corrections apportées aux fonctionnalités de glissé-déposé et double-clic dans le Visual Workflow Builder V2.

## Corrections Appliquées

### 1. Correction du Glissé-Déposé (Drag-and-Drop)

**Problème identifié :**
- `useReactFlow()` était appelé à l'intérieur d'un callback, violant les règles des hooks React
- Cela empêchait le bon fonctionnement du glissé-déposé depuis la Palette vers le Canvas

**Solution appliquée :**
- Suppression de l'appel `useReactFlow()` dans le callback `onDrop`
- Calcul direct de la position sans utiliser la fonction `project`
- Simplification du gestionnaire de drop pour éviter les violations de hooks

### 2. Ajout du Double-Clic

**Fonctionnalité ajoutée :**
- Gestionnaire `onNodeDoubleClick` dans le composant Canvas
- Sélection automatique de l'étape lors du double-clic
- Intégration avec le panneau de propriétés

## Tests à Effectuer

### Test 1 : Glissé-Déposé depuis la Palette

1. **Démarrer l'application :**
   ```bash
   cd visual_workflow_builder/frontend
   npm start
   ```

2. **Ouvrir l'application dans le navigateur :**
   - URL : http://localhost:3000
   - Vérifier que l'interface se charge correctement

3. **Tester le glissé-déposé :**
   - Dans la Palette (panneau de gauche), localiser une étape (ex: "Cliquer")
   - Maintenir le clic gauche sur l'étape
   - Glisser vers le Canvas (zone centrale)
   - Relâcher le clic

4. **Résultat attendu :**
   - ✅ Une nouvelle étape apparaît sur le Canvas à la position du drop
   - ✅ L'étape a le bon type (ex: "click")
   - ✅ L'étape a un nom par défaut (ex: "Nouvelle étape click")
   - ✅ Aucune erreur dans la console du navigateur

### Test 2 : Double-Clic sur une Étape

1. **Prérequis :**
   - Avoir au moins une étape sur le Canvas (utiliser le Test 1)

2. **Tester le double-clic :**
   - Double-cliquer rapidement sur une étape du Canvas

3. **Résultat attendu :**
   - ✅ L'étape est sélectionnée (mise en évidence visuelle)
   - ✅ Le panneau de propriétés (à droite) affiche les détails de l'étape
   - ✅ Un message de log apparaît dans la console : "Double-clic sur étape: [ID]"

### Test 3 : Glissé-Déposé Multiple

1. **Tester plusieurs types d'étapes :**
   - Glisser "Cliquer" → Canvas
   - Glisser "Saisir" → Canvas
   - Glisser "Attendre" → Canvas

2. **Résultat attendu :**
   - ✅ Chaque étape apparaît avec le bon type
   - ✅ Les étapes ont des IDs uniques
   - ✅ Pas de conflit entre les étapes

### Test 4 : Validation des Positions

1. **Tester différentes positions de drop :**
   - Glisser une étape vers le coin supérieur gauche du Canvas
   - Glisser une étape vers le centre du Canvas
   - Glisser une étape vers le coin inférieur droit du Canvas

2. **Résultat attendu :**
   - ✅ Les étapes apparaissent aux positions correctes
   - ✅ Les coordonnées correspondent à la position du drop

## Vérification Technique

### Console du Navigateur

Ouvrir les outils de développement (F12) et vérifier :

1. **Onglet Console :**
   - Aucune erreur React/TypeScript
   - Messages de log pour les actions (drag, drop, double-clic)

2. **Onglet Network :**
   - Chargement correct des ressources
   - Pas d'erreurs 404 ou 500

### Tests Automatisés

Exécuter les tests de validation :

```bash
# Test de validation des corrections
python3 test_vwb_drag_drop_fix_validation.py

# Tests de propriétés
python3 -m pytest tests/property/test_vwb_frontend_v2_canvas.py -v
python3 -m pytest tests/property/test_vwb_frontend_v2_drag_drop.py -v
python3 -m pytest tests/property/test_vwb_frontend_v2_palette.py -v
```

## Résolution de Problèmes

### Problème : Le glissé-déposé ne fonctionne pas

**Vérifications :**
1. Vérifier que l'attribut `draggable` est présent sur les éléments de la Palette
2. Vérifier que `handleDragStart` est appelé
3. Vérifier que `onDrop` et `onDragOver` sont définis sur le Canvas

**Solution :**
- Recharger la page (Ctrl+F5)
- Vérifier la console pour les erreurs JavaScript

### Problème : Le double-clic ne fonctionne pas

**Vérifications :**
1. Vérifier que `onNodeDoubleClick` est défini dans ReactFlow
2. Vérifier que le gestionnaire `onNodeDoubleClick` existe

**Solution :**
- S'assurer que les clics sont suffisamment rapides
- Vérifier que l'étape est bien cliquable

### Problème : Erreurs TypeScript

**Vérifications :**
```bash
npx tsc --noEmit --skipLibCheck
```

**Solutions courantes :**
- Vérifier les imports des types
- S'assurer que tous les types sont correctement définis

## Critères de Réussite

Le test est réussi si :

- ✅ **Glissé-Déposé** : Toutes les étapes peuvent être glissées depuis la Palette vers le Canvas
- ✅ **Double-Clic** : Le double-clic sélectionne correctement les étapes
- ✅ **Positions** : Les étapes apparaissent aux bonnes positions
- ✅ **Types** : Les types d'étapes sont préservés
- ✅ **Interface** : L'interface reste réactive et sans erreurs
- ✅ **Tests** : Tous les tests automatisés passent

## Prochaines Étapes

Une fois ces tests validés, vous pouvez :

1. **Continuer l'implémentation** des tâches suivantes du plan
2. **Tester les connexions** entre étapes (drag entre nœuds)
3. **Implémenter la validation** des workflows
4. **Ajouter plus de types d'étapes** dans la Palette

## Support

En cas de problème, vérifier :
- Les logs de la console navigateur
- Les tests automatisés
- La conformité TypeScript
- L'état des composants React dans les DevTools