v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Dom
178
docs/GUIDE_TEST_GLISSE_DEPOSE_DOUBLE_CLIC.md
Normal file
178
docs/GUIDE_TEST_GLISSE_DEPOSE_DOUBLE_CLIC.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user