rpa_vision_v3/docs/GUIDE_TEST_GLISSE_DEPOSE_DOUBLE_CLIC.md

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 :

   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 :

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

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