# Guide de Test - Optimisation Vue Commande Clients

## 📝 Comment Tester les Optimisations

### Test 1️⃣ : Compactage de la Modale
**Étapes:**
1. Ouvrir la page Commande Clients
2. Cliquer sur un client pour charger une commande
3. Observer la modale de saisie produit

**Points de vérification:**
- ✅ La modale ne remplit pas tout l'écran (90vw)
- ✅ Les headers sont compactés
- ✅ Les inputs sont petits mais lisibles
- ✅ Les badges d'info tiennent sur une ligne
- ✅ Les labels sont courts et clairs

**Résultat attendu:** 
Modale propre et compacte, prenant ~90% de la largeur écran

---

### Test 2️⃣ : Visibilité du Tableau
**Étapes:**
1. Ouvrir la modale (cliquer sur le bouton d'ajout produit)
2. Observer l'arrière-plan derrière la modale
3. Regarder vers le bas de la page

**Points de vérification:**
- ✅ Le tableau des produits est visible en semi-transparent (30%)
- ✅ Le backdrop grise l'écran légèrement
- ✅ Les colonnes du tableau sont lisibles
- ✅ Les données du tableau sont accessibles à la lecture

**Résultat attendu:**
Pouvoir voir vaguement le tableau principal à travers la modale

---

### Test 3️⃣ : Ajout de Produit et Visibilité
**Étapes:**
1. Ouvrir la modale
2. Rechercher un produit
3. Entrer les quantités
4. Cliquer sur "Ajouter" (bouton +)
5. **SANS fermer la modale** - regarder le tableau principal

**Points de vérification:**
- ✅ Le produit ajouté apparaît dans le tableau en arrière-plan
- ✅ Les quantités sont visibles
- ✅ Le total est calculé
- ✅ Les données sont correctes (pas d'erreur de saisie)

**Résultat attendu:**
Voir le produit s'ajouter au tableau même avec la modale ouverte

---

### Test 4️⃣ : Scroll de la Modale
**Étapes:**
1. Ouvrir la modale avec un produit déjà sélectionné
2. Faire défiler vers le bas du modal-body
3. Observer si les tableaux internes sont accessibles

**Points de vérification:**
- ✅ Le scroll est fluide
- ✅ Les tableaux (UG, Prix) sont visibles
- ✅ Les packs (si applicable) sont accessibles
- ✅ Pas de scrolling du page entière

**Résultat attendu:**
Scroll interne fonctionnel sans affecter la page principale

---

### Test 5️⃣ : Tableau Principal - Headers Sticky
**Étapes:**
1. Fermer la modale
2. Scroller dans le tableau
3. Vérifier que les headers restent visibles

**Points de vérification:**
- ✅ Les en-têtes du tableau restent en haut
- ✅ Le z-index est correct (headers au-dessus des données)
- ✅ Scroll fluide

**Résultat attendu:**
Headers collés en haut du tableau pendant le scroll

---

### Test 6️⃣ : Responsive Design
**Étapes:**
1. Tester sur mobile (< 768px)
2. Tester sur tablet (768px - 1199px)
3. Tester sur desktop (> 1200px)

**Points de vérification (Mobile):**
- ✅ Modale prend 95vw
- ✅ Pas de débordement horizontal
- ✅ Inputs restent cliquables
- ✅ Tableaux sont scrollables

**Points de vérification (Tablet):**
- ✅ Modale prend 90-95vw
- ✅ Layout reste lisible
- ✅ Fonctionnalité identique à desktop

**Points de vérification (Desktop):**
- ✅ Modale prend 90vw
- ✅ Tableau principal visible
- ✅ Tout l'espace utilisé correctement

**Résultat attendu:**
Expérience cohérente sur tous les appareils

---

### Test 7️⃣ : Performance
**Étapes:**
1. Ouvrir DevTools (F12)
2. Onglet "Performance"
3. Enregistrer pendant l'ouverture de la modale
4. Vérifier le FPS

**Points de vérification:**
- ✅ Pas de saccades (FPS ≈ 60)
- ✅ Scroll fluide
- ✅ Pas de lag lors de l'ajout de produit
- ✅ Pas d'erreur console

**Résultat attendu:**
Performance stable, pas de ralentissements

---

### Test 8️⃣ : Détection d'Erreurs
**Étapes:**
1. Ajouter un produit avec quantité erronée (ex: 0 ou -1)
2. Observer le tableau pendant qu'on ajoute
3. Vérifier que l'erreur est visible

**Points de vérification:**
- ✅ Erreurs de validation visibles dans le tableau
- ✅ Totaux incorrects détectés visuellement
- ✅ Corrections possibles en temps réel

**Résultat attendu:**
Détection précoce des erreurs de saisie

---

### Test 9️⃣ : Plusieurs Produits
**Étapes:**
1. Ajouter 5-10 produits successivement
2. Observer le tableau qui s'alourdit

**Points de vérification:**
- ✅ Le tableau affiche tous les produits
- ✅ Le scroll du tableau fonctionne
- ✅ Les headers restent visibles
- ✅ Performance acceptable

**Résultat attendu:**
Gestion fluide de plusieurs lignes

---

### Test 🔟 : Interopérabilité
**Étapes:**
1. Tester sur Chrome
2. Tester sur Firefox
3. Tester sur Safari (si disponible)
4. Tester sur Edge

**Points de vérification (par navigateur):**
- ✅ Modale s'affiche correctement
- ✅ Scrollbar visible/fonctionnelle
- ✅ Styles appliqués correctement
- ✅ Pas d'erreur console

**Résultat attendu:**
Compatibilité multi-navigateurs

---

## 🐛 Si des problèmes surviennent

### Problème: La modale remplit tout l'écran
**Solution:**
```css
Vérifier que: #modalCmdeClient { --bs-modal-width: 90vw !important; }
```

### Problème: Le tableau n'est pas visible en arrière-plan
**Solution:**
```css
Vérifier que: .modal-backdrop { opacity: 0.3 !important; }
```

### Problème: Le scroll de la modale ne fonctionne pas
**Solution:**
```css
Vérifier que: #modalCmdeClient .modal-body { overflow-y: auto; max-height: calc(85vh - 60px); }
```

### Problème: Les inputs sont trop petits
**Solution:**
- Augmenter padding: 0.35rem → 0.5rem
- Augmenter font-size: 0.85rem → 1rem

---

## ✅ Checklist de Validation

- [ ] Modale compacte et lisible
- [ ] Tableau principal visible en arrière-plan
- [ ] Produits ajoutés visibles immédiatement
- [ ] Scroll modale fonctionnel
- [ ] Headers tableau sticky
- [ ] Responsive sur mobile/tablet/desktop
- [ ] Performance stable (60 FPS)
- [ ] Aucune erreur console
- [ ] Validations visibles
- [ ] Compatible tous navigateurs

---

## 🎯 Critères de Succès

**La modification est réussie si:**
1. ✅ L'utilisateur voit les produits ajoutés pendant la saisie
2. ✅ La modale reste compacte et lisible
3. ✅ Le tableau principal n'est jamais complètement masqué
4. ✅ Les erreurs de saisie sont détectées visuellement
5. ✅ La performance reste stable
6. ✅ L'UX est meilleure qu'avant

---

**Date:** 28 Janvier 2026
**Last Updated:** 28/01/2026
**Status:** Ready for Testing ✅