rpa_vision_v3/visual_workflow_builder/TEST_CANVAS.md

Guide de Test - Canvas Component

Démarrage Rapide

1. Démarrer le Backend

cd visual_workflow_builder
./start.sh

Le backend sera accessible sur http://localhost:5001

2. Démarrer le Frontend (dans un autre terminal)

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

cd visual_workflow_builder
./start.sh

Arrêter Tout

cd visual_workflow_builder
./stop.sh

Vérifier le Statut

cd visual_workflow_builder
./status.sh

Voir les Logs Frontend

cd visual_workflow_builder/frontend
tail -f frontend.log

Voir les Logs Backend

cd visual_workflow_builder/backend
tail -f server.log

Rebuild Frontend

cd visual_workflow_builder/frontend
npm run build

Type Check

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