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
342
visual_workflow_builder/TEST_CANVAS.md
Normal file
342
visual_workflow_builder/TEST_CANVAS.md
Normal file
@@ -0,0 +1,342 @@
|
||||
# Guide de Test - Canvas Component
|
||||
|
||||
## Démarrage Rapide
|
||||
|
||||
### 1. Démarrer le Backend
|
||||
```bash
|
||||
cd visual_workflow_builder
|
||||
./start.sh
|
||||
```
|
||||
|
||||
Le backend sera accessible sur http://localhost:5001
|
||||
|
||||
### 2. Démarrer le Frontend (dans un autre terminal)
|
||||
```bash
|
||||
cd visual_workflow_builder/frontend
|
||||
npm start
|
||||
```
|
||||
|
||||
Le frontend sera accessible sur http://localhost:3000
|
||||
|
||||
### 3. Ouvrir dans le Navigateur
|
||||
Ouvrez http://localhost:3000 dans votre navigateur
|
||||
|
||||
## Tests à Effectuer
|
||||
|
||||
### Test 1: Affichage Initial ✅
|
||||
**Objectif**: Vérifier que le canvas s'affiche correctement
|
||||
|
||||
**Étapes**:
|
||||
1. Ouvrir http://localhost:3000
|
||||
2. Vérifier que l'AppBar s'affiche en haut
|
||||
3. Vérifier que le canvas s'affiche au centre
|
||||
4. Vérifier que la grille de points est visible
|
||||
5. Vérifier le message "Espace de travail vide"
|
||||
|
||||
**Résultat attendu**:
|
||||
- AppBar avec titre "Visual Workflow Builder"
|
||||
- Canvas avec grille de points
|
||||
- Message d'accueil au centre
|
||||
- Panneau d'information "0 étapes • 0 connexions"
|
||||
|
||||
### Test 2: Ajout de Nodes ✅
|
||||
**Objectif**: Vérifier qu'on peut ajouter des nodes
|
||||
|
||||
**Étapes**:
|
||||
1. Cliquer sur le bouton "Click" dans la palette (drawer gauche)
|
||||
2. Vérifier qu'un node apparaît sur le canvas
|
||||
3. Cliquer sur le bouton "Type" dans la palette
|
||||
4. Vérifier qu'un deuxième node apparaît
|
||||
|
||||
**Résultat attendu**:
|
||||
- Nodes apparaissent avec icônes et couleurs
|
||||
- Chaque node a un badge avec sa première lettre
|
||||
- Le compteur d'étapes s'incrémente
|
||||
|
||||
### Test 3: Sélection de Nodes ✅
|
||||
**Objectif**: Vérifier la sélection de nodes
|
||||
|
||||
**Étapes**:
|
||||
1. Ajouter 2-3 nodes
|
||||
2. Cliquer sur un node
|
||||
3. Vérifier qu'il est surligné
|
||||
4. Cliquer sur un autre node
|
||||
5. Vérifier que la sélection change
|
||||
|
||||
**Résultat attendu**:
|
||||
- Node sélectionné a une bordure bleue
|
||||
- Panneau de propriétés s'ouvre à droite
|
||||
- Un seul node sélectionné à la fois
|
||||
|
||||
### Test 4: Déplacement de Nodes ✅
|
||||
**Objectif**: Vérifier qu'on peut déplacer les nodes
|
||||
|
||||
**Étapes**:
|
||||
1. Ajouter un node
|
||||
2. Cliquer et maintenir sur le node
|
||||
3. Déplacer la souris
|
||||
4. Relâcher
|
||||
|
||||
**Résultat attendu**:
|
||||
- Node suit le curseur pendant le drag
|
||||
- Node reste à la nouvelle position après relâchement
|
||||
- Mouvement fluide sans lag
|
||||
|
||||
### Test 5: Connexion de Nodes ✅
|
||||
**Objectif**: Vérifier qu'on peut connecter des nodes
|
||||
|
||||
**Étapes**:
|
||||
1. Ajouter 2 nodes
|
||||
2. Cliquer sur le port de sortie (droite) du premier node
|
||||
3. Glisser vers le port d'entrée (gauche) du deuxième node
|
||||
4. Relâcher
|
||||
|
||||
**Résultat attendu**:
|
||||
- Une ligne apparaît pendant le drag
|
||||
- Un edge connecte les deux nodes après relâchement
|
||||
- Le compteur de connexions s'incrémente
|
||||
|
||||
### Test 6: Suppression de Nodes ✅
|
||||
**Objectif**: Vérifier qu'on peut supprimer des nodes
|
||||
|
||||
**Étapes**:
|
||||
1. Ajouter 2 nodes et les connecter
|
||||
2. Sélectionner un node
|
||||
3. Appuyer sur la touche "Delete"
|
||||
|
||||
**Résultat attendu**:
|
||||
- Node disparaît
|
||||
- Edges connectés disparaissent aussi
|
||||
- Compteurs se mettent à jour
|
||||
|
||||
### Test 7: Zoom et Panoramique ✅
|
||||
**Objectif**: Vérifier la navigation dans le canvas
|
||||
|
||||
**Étapes**:
|
||||
1. Ajouter plusieurs nodes
|
||||
2. Utiliser la molette de la souris pour zoomer
|
||||
3. Cliquer et glisser sur l'espace vide pour panoramiquer
|
||||
4. Cliquer sur le bouton "Fit View" dans les contrôles
|
||||
|
||||
**Résultat attendu**:
|
||||
- Zoom centré sur le curseur
|
||||
- Panoramique fluide
|
||||
- Fit View montre tous les nodes
|
||||
|
||||
### Test 8: Minimap ✅
|
||||
**Objectif**: Vérifier que la minimap fonctionne
|
||||
|
||||
**Étapes**:
|
||||
1. Ajouter plusieurs nodes
|
||||
2. Zoomer et panoramiquer
|
||||
3. Observer la minimap en bas à droite
|
||||
4. Cliquer dans la minimap
|
||||
|
||||
**Résultat attendu**:
|
||||
- Minimap montre tous les nodes
|
||||
- Rectangle bleu montre la zone visible
|
||||
- Clic dans la minimap déplace la vue
|
||||
|
||||
### Test 9: Contrôles ✅
|
||||
**Objectif**: Vérifier les contrôles de zoom
|
||||
|
||||
**Étapes**:
|
||||
1. Cliquer sur "+" pour zoomer
|
||||
2. Cliquer sur "-" pour dézoomer
|
||||
3. Cliquer sur "Fit View"
|
||||
4. Cliquer sur "Lock/Unlock"
|
||||
|
||||
**Résultat attendu**:
|
||||
- Boutons fonctionnent correctement
|
||||
- Zoom incrémental
|
||||
- Fit View centre tous les nodes
|
||||
|
||||
### Test 10: Sauvegarde ✅
|
||||
**Objectif**: Vérifier qu'on peut sauvegarder
|
||||
|
||||
**Étapes**:
|
||||
1. Créer un workflow avec plusieurs nodes
|
||||
2. Cliquer sur "Sauvegarder" dans l'AppBar
|
||||
3. Ouvrir la console du navigateur (F12)
|
||||
4. Vérifier les logs
|
||||
|
||||
**Résultat attendu**:
|
||||
- Message "Saving workflow" dans la console
|
||||
- Objet JSON avec nodes et edges
|
||||
|
||||
### Test 11: Exécution ✅
|
||||
**Objectif**: Vérifier le bouton d'exécution
|
||||
|
||||
**Étapes**:
|
||||
1. Créer un workflow avec plusieurs nodes
|
||||
2. Cliquer sur "Exécuter" dans l'AppBar
|
||||
3. Ouvrir la console du navigateur
|
||||
|
||||
**Résultat attendu**:
|
||||
- Message "Running workflow" dans la console
|
||||
- Bouton désactivé si aucun node
|
||||
|
||||
## Tests de Performance
|
||||
|
||||
### Test P1: Rendu avec Beaucoup de Nodes
|
||||
**Objectif**: Vérifier la performance avec 50+ nodes
|
||||
|
||||
**Étapes**:
|
||||
1. Ajouter 50 nodes en cliquant rapidement
|
||||
2. Déplacer plusieurs nodes
|
||||
3. Zoomer et panoramiquer
|
||||
|
||||
**Résultat attendu**:
|
||||
- Pas de lag visible
|
||||
- Animations fluides
|
||||
- Réactivité maintenue
|
||||
|
||||
### Test P2: Connexions Multiples
|
||||
**Objectif**: Vérifier avec beaucoup d'edges
|
||||
|
||||
**Étapes**:
|
||||
1. Créer 10 nodes
|
||||
2. Connecter chaque node à plusieurs autres
|
||||
3. Déplacer les nodes
|
||||
|
||||
**Résultat attendu**:
|
||||
- Edges se redessinent correctement
|
||||
- Pas de ralentissement
|
||||
|
||||
## Tests d'Accessibilité
|
||||
|
||||
### Test A1: Navigation Clavier
|
||||
**Objectif**: Vérifier la navigation au clavier
|
||||
|
||||
**Étapes**:
|
||||
1. Utiliser Tab pour naviguer
|
||||
2. Utiliser Delete pour supprimer
|
||||
3. Vérifier les focus visibles
|
||||
|
||||
**Résultat attendu**:
|
||||
- Focus visible sur les éléments
|
||||
- Raccourcis clavier fonctionnent
|
||||
|
||||
### Test A2: Contraste
|
||||
**Objectif**: Vérifier le contraste des couleurs
|
||||
|
||||
**Étapes**:
|
||||
1. Observer les couleurs des nodes
|
||||
2. Vérifier la lisibilité du texte
|
||||
3. Tester en mode high contrast
|
||||
|
||||
**Résultat attendu**:
|
||||
- Texte lisible
|
||||
- Couleurs distinctes
|
||||
- Bon contraste
|
||||
|
||||
## Tests de Compatibilité
|
||||
|
||||
### Navigateurs à Tester
|
||||
- ✅ Chrome/Chromium
|
||||
- ✅ Firefox
|
||||
- ✅ Safari
|
||||
- ✅ Edge
|
||||
|
||||
### Résolutions à Tester
|
||||
- ✅ 1920x1080 (Full HD)
|
||||
- ✅ 1366x768 (Laptop)
|
||||
- ✅ 2560x1440 (2K)
|
||||
- ✅ 3840x2160 (4K)
|
||||
|
||||
## Problèmes Connus
|
||||
|
||||
### Limitations Actuelles
|
||||
1. **Palette**: Version temporaire avec seulement 2 boutons
|
||||
2. **Propriétés**: Version temporaire sans édition
|
||||
3. **Sauvegarde**: Seulement console.log, pas d'API
|
||||
4. **Exécution**: Seulement console.log, pas d'API
|
||||
|
||||
### À Implémenter
|
||||
- [ ] Palette complète avec tous les types de nodes
|
||||
- [ ] Panneau de propriétés fonctionnel
|
||||
- [ ] Intégration API backend
|
||||
- [ ] WebSocket pour temps réel
|
||||
- [ ] Validation de workflow
|
||||
- [ ] Templates
|
||||
|
||||
## Commandes Utiles
|
||||
|
||||
### Démarrer Tout
|
||||
```bash
|
||||
cd visual_workflow_builder
|
||||
./start.sh
|
||||
```
|
||||
|
||||
### Arrêter Tout
|
||||
```bash
|
||||
cd visual_workflow_builder
|
||||
./stop.sh
|
||||
```
|
||||
|
||||
### Vérifier le Statut
|
||||
```bash
|
||||
cd visual_workflow_builder
|
||||
./status.sh
|
||||
```
|
||||
|
||||
### Voir les Logs Frontend
|
||||
```bash
|
||||
cd visual_workflow_builder/frontend
|
||||
tail -f frontend.log
|
||||
```
|
||||
|
||||
### Voir les Logs Backend
|
||||
```bash
|
||||
cd visual_workflow_builder/backend
|
||||
tail -f server.log
|
||||
```
|
||||
|
||||
### Rebuild Frontend
|
||||
```bash
|
||||
cd visual_workflow_builder/frontend
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Type Check
|
||||
```bash
|
||||
cd visual_workflow_builder/frontend
|
||||
npm run type-check
|
||||
```
|
||||
|
||||
## Résolution de Problèmes
|
||||
|
||||
### Le Frontend ne Démarre Pas
|
||||
1. Vérifier que node_modules existe
|
||||
2. Exécuter `npm install`
|
||||
3. Vérifier le port 3000 est libre
|
||||
4. Voir les logs: `cat frontend.log`
|
||||
|
||||
### Le Backend ne Répond Pas
|
||||
1. Vérifier que le backend est démarré
|
||||
2. Vérifier le port 5001 est libre
|
||||
3. Voir les logs: `cat backend/server.log`
|
||||
|
||||
### Erreurs TypeScript
|
||||
1. Exécuter `npm run type-check`
|
||||
2. Corriger les erreurs
|
||||
3. Rebuild avec `npm run build`
|
||||
|
||||
### Canvas Vide
|
||||
1. Ouvrir la console (F12)
|
||||
2. Vérifier les erreurs JavaScript
|
||||
3. Vérifier que react-flow-renderer est installé
|
||||
|
||||
## Feedback
|
||||
|
||||
Si vous rencontrez des problèmes ou avez des suggestions:
|
||||
1. Noter le problème
|
||||
2. Capturer une capture d'écran si possible
|
||||
3. Noter les étapes pour reproduire
|
||||
4. Vérifier les logs
|
||||
|
||||
---
|
||||
|
||||
**Version**: 1.0.0
|
||||
**Date**: 2 décembre 2024
|
||||
**Statut**: ✅ Canvas Opérationnel
|
||||
Reference in New Issue
Block a user