# 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