# Guide de Test des Propriétés d'Étapes VWB

**Auteur :** Dom, Alice, Kiro - 10 janvier 2026  
**Statut :** ✅ IMPLÉMENTATION COMPLÈTE  
**Objectif :** Valider l'affichage des propriétés d'étapes VWB dans le Properties Panel

## Vue d'Ensemble

Ce guide détaille comment tester et valider l'affichage des propriétés des étapes VWB (Visual Workflow Builder) dans l'interface utilisateur. Les propriétés des étapes VWB permettent de configurer les actions du catalogue VisionOnly avec des paramètres spécialisés comme les ancres visuelles.

## Prérequis

### 1. Backend Catalogue Disponible
```bash
# Vérifier que le backend est démarré
curl http://localhost:5004/health

# Si non disponible, démarrer le backend
cd visual_workflow_builder
source ../venv_v3/bin/activate
python -m backend.app_catalogue_simple
```

### 2. Frontend VWB Disponible
```bash
# Démarrer le frontend
cd visual_workflow_builder/frontend
npm start
```

### 3. Actions du Catalogue Chargées
Le backend doit avoir au moins 9 actions VisionOnly disponibles :
- `click_anchor` - Clic sur Ancre Visuelle
- `type_text` - Saisie de Texte Visuelle
- `wait_for_anchor` - Attente d'Ancre Visuelle
- `scroll_to_anchor` - Défilement vers Ancre
- `extract_text_from_anchor` - Extraction de Texte
- `validate_anchor_presence` - Validation de Présence
- `focus_anchor` - Donner le Focus
- `type_secret` - Saisie de Secret
- `hotkey` - Raccourci Clavier

## Méthodes de Test

### Méthode 1 : Test Automatisé Intégré

1. **Ouvrir l'interface VWB**
   ```
   http://localhost:3000
   ```

2. **Accéder au test VWB**
   - Cliquer sur l'onglet "Test VWB" dans la barre supérieure
   - Le panneau de test s'ouvre sur la droite

3. **Exécuter les tests**
   - Cliquer sur "Exécuter les Tests"
   - Vérifier que tous les tests sont verts ✅
   - Observer l'aperçu du Properties Panel

4. **Valider l'affichage**
   - Les propriétés de l'étape VWB doivent s'afficher
   - Les paramètres requis et optionnels doivent être listés
   - Les ancres visuelles doivent avoir des éditeurs spécialisés

### Méthode 2 : Test Manuel dans l'Interface

1. **Créer une étape VWB par drag-and-drop**
   - Ouvrir l'interface VWB : `http://localhost:3000`
   - Dans la palette de gauche, chercher les actions "Vision"
   - Glisser une action VWB (ex: "Clic sur Ancre Visuelle") vers le canvas
   - Une étape avec badge "VWB" doit apparaître

2. **Sélectionner l'étape VWB**
   - Cliquer sur l'étape créée
   - Elle doit se mettre en surbrillance bleue
   - Le Properties Panel de droite doit se mettre à jour

3. **Vérifier l'affichage des propriétés**
   - **En-tête** : Nom de l'action et badge de catégorie
   - **Paramètres requis** : Section rouge avec paramètres obligatoires
   - **Paramètres optionnels** : Section bleue avec paramètres facultatifs
   - **Ancres visuelles** : Éditeur spécialisé avec bouton "Sélectionner un élément"
   - **Validation** : Alertes de validation en temps réel

4. **Tester l'interaction**
   - Modifier les paramètres texte et nombre
   - Cliquer sur "Sélectionner un élément" pour les ancres visuelles
   - Observer la validation en temps réel

### Méthode 3 : Test par Script Automatisé

```bash
# Exécuter le script de test complet
./scripts/test_proprietes_vwb_complet.sh

# Ou exécuter les tests Python
python scripts/test_proprietes_etapes_vwb_10jan2026.py
python scripts/test_creation_etape_vwb_10jan2026.py
```

## Validation des Résultats

### ✅ Critères de Succès

1. **Détection d'Étapes VWB**
   - Les étapes créées depuis le catalogue ont `isVWBCatalogAction: true`
   - Le hook `useIsVWBStep` retourne `true`
   - Le hook `useVWBActionId` retourne l'ID correct de l'action

2. **Affichage du Properties Panel**
   - Le composant `VWBActionProperties` s'affiche pour les étapes VWB
   - Les paramètres sont organisés en sections (requis/optionnels)
   - Les ancres visuelles ont des éditeurs spécialisés

3. **Fonctionnalités Spécialisées**
   - **Éditeur d'ancres visuelles** : Bouton de sélection, aperçu d'image, configuration de seuil
   - **Validation en temps réel** : Alertes d'erreur et d'avertissement
   - **Exemples d'utilisation** : Section accordéon avec exemples
   - **Tooltips informatifs** : Aide contextuelle sur les paramètres

4. **Intégration Complète**
   - Les étapes VWB apparaissent avec badge "VWB" sur le canvas
   - La sélection d'étapes VWB déclenche l'affichage spécialisé
   - Les modifications de paramètres sont sauvegardées

### ❌ Problèmes Possibles

1. **Backend Non Disponible**
   ```
   Symptôme : Aucune action dans la palette "Vision"
   Solution : Démarrer le backend catalogue
   ```

2. **Étapes Non Détectées comme VWB**
   ```
   Symptôme : Properties Panel standard au lieu de VWB
   Solution : Vérifier les marqueurs isVWBCatalogAction et vwbActionId
   ```

3. **Composant VWBActionProperties Non Affiché**
   ```
   Symptôme : Propriétés génériques au lieu de spécialisées
   Solution : Vérifier l'intégration dans PropertiesPanel/index.tsx
   ```

4. **Erreurs TypeScript**
   ```
   Symptôme : Console avec erreurs de types
   Solution : Vérifier les types dans catalog.ts
   ```

## Débogage

### Console du Navigateur

Ouvrir les outils de développement (F12) et vérifier :

1. **Onglet Console**
   ```javascript
   // Messages attendus
   "Actions du catalogue chargées: 9"
   "Étape VWB créée: vwb_step_..."
   "Hook useIsVWBStep fonctionne"
   ```

2. **Onglet Network**
   ```
   GET /api/vwb/catalog/actions → 200 OK
   GET /api/vwb/catalog/actions/click_anchor → 200 OK
   POST /api/vwb/catalog/validate → 200 OK
   ```

3. **Onglet React DevTools**
   ```
   Composants à vérifier :
   - PropertiesPanel (props: selectedStep avec isVWBCatalogAction)
   - VWBActionProperties (props: action, parameters)
   - VisualAnchorEditor (pour les paramètres d'ancres)
   ```

### Tests de Validation

```bash
# Test de l'API catalogue
curl http://localhost:5004/api/vwb/catalog/actions | jq '.actions | length'
# Doit retourner : 9

# Test de détails d'action
curl http://localhost:5004/api/vwb/catalog/actions/click_anchor | jq '.action.name'
# Doit retourner : "Clic sur Ancre Visuelle"

# Test de validation
curl -X POST http://localhost:5004/api/vwb/catalog/validate \
  -H "Content-Type: application/json" \
  -d '{"type":"click_anchor","parameters":{}}'
# Doit retourner : {"validation":{"is_valid":false,...}}
```

## Architecture Technique

### Flux de Données

1. **Création d'Étape VWB**
   ```
   Palette → Drag → Canvas → useVWBStepIntegration.createVWBStep()
   → Step avec isVWBCatalogAction: true
   ```

2. **Sélection d'Étape**
   ```
   Canvas → handleStepSelect → selectedStep
   → PropertiesPanel → useIsVWBStep(selectedStep)
   ```

3. **Affichage des Propriétés**
   ```
   PropertiesPanel → isVWBCatalogAction ? VWBActionProperties : StandardProperties
   → catalogService.getActionDetails(vwbActionId)
   → Rendu spécialisé avec paramètres VWB
   ```

### Composants Clés

- **`useVWBStepIntegration`** : Hook principal pour la gestion des étapes VWB
- **`VWBActionProperties`** : Composant spécialisé pour les propriétés VWB
- **`VisualAnchorEditor`** : Éditeur pour les ancres visuelles
- **`catalogService`** : Service de communication avec l'API catalogue

## Résolution de Problèmes

### Problème : Propriétés VWB Non Affichées

1. **Vérifier la détection d'étape VWB**
   ```javascript
   // Dans la console du navigateur
   console.log(selectedStep?.data?.isVWBCatalogAction); // doit être true
   console.log(selectedStep?.data?.vwbActionId); // doit être l'ID de l'action
   ```

2. **Vérifier le hook d'intégration**
   ```javascript
   // Tester le hook manuellement
   const isVWB = useIsVWBStep(selectedStep);
   console.log('Is VWB Step:', isVWB); // doit être true
   ```

3. **Vérifier le chargement de l'action**
   ```javascript
   // Tester le service catalogue
   catalogService.getActionDetails('click_anchor').then(console.log);
   // Doit retourner les détails de l'action
   ```

### Problème : Erreurs de Validation

1. **Vérifier l'API de validation**
   ```bash
   curl -X POST http://localhost:5004/api/vwb/catalog/validate \
     -H "Content-Type: application/json" \
     -d '{"type":"click_anchor","parameters":{"visual_anchor":null}}'
   ```

2. **Vérifier les types TypeScript**
   - S'assurer que `VWBActionValidationResult` est défini
   - Vérifier la compatibilité des interfaces

## Conclusion

Ce guide fournit une méthode complète pour tester et valider l'affichage des propriétés d'étapes VWB. L'implémentation est maintenant complète et fonctionnelle, permettant aux utilisateurs de configurer facilement les actions VisionOnly avec des interfaces spécialisées.

Pour toute question ou problème, consulter les logs de la console du navigateur et les réponses de l'API catalogue pour identifier la source du problème.