# Guide de Test - Frontend Restructuré

Date : 14 décembre 2025
Version : Frontend 2.0.0

## 🚀 Accès à l'Interface

L'interface restructurée est maintenant accessible :

```
http://localhost:8087/device_detail.html?id=1
```

**Note** : Remplacez `id=1` par l'ID du device que vous souhaitez consulter.

## ✅ Checklist de Vérification

### 1. Header du Device
- [ ] Le hostname s'affiche correctement
- [ ] Le score global apparaît en haut à droite (badge coloré)
- [ ] Les métadonnées (localisation, owner, asset_tag) s'affichent
- [ ] La date du dernier benchmark est visible

### 2. Section ⚡ Carte Mère (Motherboard)
- [ ] Fabricant affiché (ex: ASUSTeK, Gigabyte, MSI)
- [ ] Modèle de la carte mère
- [ ] Version du BIOS
- [ ] Date du BIOS
- [ ] Nombre de slots RAM (utilisés/total)

### 3. Section 🔲 Processeur (CPU)
- [ ] Fabricant (AMD/Intel)
- [ ] Modèle complet du CPU
- [ ] Microarchitecture (si disponible)
- [ ] Nombre de cores et threads
- [ ] Fréquences (base et max) en GHz
- [ ] TDP (si disponible)
- [ ] Cache L1, L2, L3 en KB
- [ ] **Instructions supportées** : Liste des flags CPU (limité à 50 + compteur)

**Exemple attendu** :
```
Intel(R) Core(TM) i7-9700K
Cores: 8 | Threads: 8
Fréquence max: 4.9 GHz
Cache L3: 12288 KB

Instructions supportées:
[sse] [sse2] [sse3] [ssse3] [sse4_1] [sse4_2] [avx] [avx2] ... +150 autres
```

### 4. Section 💾 Mémoire (RAM)
- [ ] Capacité totale en GB
- [ ] Mémoire utilisée (GB et %)
- [ ] Mémoire libre
- [ ] Mémoire partagée
- [ ] Slots utilisés/total
- [ ] Support ECC (Oui/Non)

#### Configuration des barrettes (si disponible)
- [ ] **Détail par slot** :
  - Nom du slot (ex: DIMM_A1)
  - Capacité (ex: 16 GB)
  - Type (ex: DDR4)
  - Vitesse (ex: 3200 MHz)
  - Fabricant
  - Part Number (si disponible)

**Exemple attendu** :
```
Slot DIMM_A1
  16 GB • DDR4 • 3200 MHz
  Fabricant: Corsair
  Part Number: CMK16GX4M1D3200C16
```

### 5. Section 💿 Stockage (Disques)
- [ ] **Vue par disque** (sda, sdb, nvme0n1, etc.)
- [ ] Icône différente pour SSD (💾) et HDD (💿)
- [ ] Nom du device (ex: /dev/sda)
- [ ] Modèle du disque
- [ ] Capacité en GB
- [ ] Type (SSD/HDD)
- [ ] Interface (sata/nvme/usb)
- [ ] **Badge de santé SMART** (vert = PASSED, rouge = FAILED)
- [ ] Température (si disponible)

**Exemple attendu** :
```
💾 /dev/sda
Samsung SSD 870 EVO 500GB
[PASSED] ✓

Capacité: 500 GB
Type: SSD
Interface: sata
Température: 35°C
```

### 6. Section 🎮 Carte Graphique (GPU)
- [ ] Fabricant (NVIDIA/AMD/Intel)
- [ ] Modèle complet
- [ ] Version du driver
- [ ] Mémoire dédiée (VRAM) en MB
- [ ] Mémoire partagée (si applicable)
- [ ] **APIs supportées** (OpenGL, Vulkan, etc.) en badges verts

**Si aucun GPU** :
- [ ] Message "Aucun GPU détecté" s'affiche

### 7. Section 🌐 Réseau (Network)
- [ ] **Vue par interface** (eth0, enp0s3, wlan0, etc.)
- [ ] Icône selon le type (🔌 ethernet, 📡 wifi)
- [ ] Nom de l'interface
- [ ] Type (ethernet/wifi)
- [ ] Adresse IP
- [ ] Adresse MAC (en code)
- [ ] Vitesse de liaison en Mbps
- [ ] Driver (si disponible)
- [ ] **Badge Wake-on-LAN** (WoL ✓ vert ou WoL ✗ gris)

**Exemple attendu** :
```
🔌 enp0s3 [WoL ✓]
ethernet

Adresse IP: 10.0.1.100
MAC: 08:00:27:12:34:56
Vitesse: 1000 Mbps
Driver: e1000
```

### 8. Section 🐧 Système d'exploitation
- [ ] Nom de l'OS (ex: debian, ubuntu)
- [ ] Version (ex: 11, 22.04)
- [ ] Version du kernel (ex: 6.1.0-13-amd64)
- [ ] Architecture (ex: x86_64, aarch64)
- [ ] Type de virtualisation (none, kvm, docker, etc.)

### 9. Section 📊 Résultats Benchmarks
- [ ] Date du dernier benchmark
- [ ] Version du script de benchmark
- [ ] **Score Global** (badge coloré)
- [ ] Score CPU
- [ ] Score Mémoire
- [ ] Score Disque
- [ ] Score Réseau
- [ ] Score GPU
- [ ] Bouton "Voir les détails complets (JSON)"

**Codes couleur des badges** :
- 🟢 Vert : Score > 70
- 🟡 Jaune : Score 40-70
- 🔴 Rouge : Score < 40
- ⚪ Gris : N/A

### 10. Onglets en bas de page
- [ ] **Historique Benchmarks** : Tableau avec historique
- [ ] **Documents** : Upload et liste des documents
- [ ] **Liens** : Ajout et liste des liens constructeurs

## 🧪 Tests de Robustesse

### Test 1 : Device sans GPU
```
Résultat attendu : "Aucun GPU détecté" dans la section GPU
```

### Test 2 : Device sans données SMART
```
Résultat attendu : Disques affichés sans badge de santé ni température
```

### Test 3 : RAM sans layout détaillé
```
Résultat attendu : Informations générales affichées, pas de section "Configuration des barrettes"
```

### Test 4 : CPU avec beaucoup de flags (>100)
```
Résultat attendu : 50 premiers flags affichés + badge "+XX autres..."
```

### Test 5 : Interface réseau sans Wake-on-LAN
```
Résultat attendu : Pas de badge WoL affiché
```

## 🎨 Responsive Design

### Test sur Desktop
- [ ] Grilles s'affichent sur 3-4 colonnes
- [ ] Sections bien espacées
- [ ] Badges lisibles

### Test sur Tablette (simuler avec DevTools)
- [ ] Grilles passent à 2 colonnes
- [ ] Informations restent lisibles
- [ ] Scroll vertical fluide

### Test sur Mobile (simuler avec DevTools)
- [ ] Grilles passent à 1 colonne
- [ ] Texte reste lisible
- [ ] Boutons cliquables facilement

## 🔧 Outils de Test

### Chrome DevTools
```
F12 → Console
```
Vérifier qu'il n'y a pas d'erreurs JavaScript

### Network Tab
```
F12 → Network → Rafraîchir
```
Vérifier que :
- device_detail.html charge (200)
- device_detail.js charge (200)
- API /api/devices/{id} retourne les données (200)

### Console Logs
Ouvrir la console et chercher :
- ⚠️ Warnings : `Failed to parse...` (normal si données manquantes)
- ❌ Errors : Ne devrait pas y en avoir

## 📊 Cas de Test par Type de Machine

### Machine Serveur (Dell PowerEdge, HP ProLiant)
- [ ] Carte mère : Modèle serveur détecté
- [ ] CPU : Processeur Xeon avec beaucoup de cores
- [ ] RAM : ECC activé, plusieurs barrettes détaillées
- [ ] Disques : Plusieurs disques avec SMART
- [ ] GPU : Souvent "Aucun GPU détecté" (serveur headless)

### Machine Desktop
- [ ] CPU : Intel Core i7/i9 ou AMD Ryzen
- [ ] RAM : 2-4 barrettes DDR4
- [ ] GPU : NVIDIA/AMD détecté avec VRAM
- [ ] Stockage : SSD + HDD

### Machine Virtuelle (VM)
- [ ] Virtualisation : kvm, vmware, ou virtualbox
- [ ] CPU : Moins de cores
- [ ] GPU : virtio ou "Aucun GPU détecté"
- [ ] Stockage : virtio ou scsi

### Raspberry Pi / SBC
- [ ] Architecture : aarch64 ou armv7l
- [ ] CPU : ARM Cortex
- [ ] RAM : Pas de layout DIMM (soudée)
- [ ] GPU : VideoCore ou Mali

## 🐛 Debugging

### Si une section ne s'affiche pas
1. Ouvrir la console (F12)
2. Chercher les erreurs `Failed to parse...`
3. Vérifier que les données existent dans l'API :
   ```bash
   curl http://localhost:8007/api/devices/1 | jq .
   ```

### Si les disques ne s'affichent pas
```bash
# Vérifier storage_devices_json
curl http://localhost:8007/api/devices/1 | jq '.last_hardware_snapshot.storage_devices_json'
```

### Si les barrettes RAM ne s'affichent pas
```bash
# Vérifier ram_layout_json
curl http://localhost:8007/api/devices/1 | jq '.last_hardware_snapshot.ram_layout_json'
```

### Si les flags CPU ne s'affichent pas
```bash
# Vérifier cpu_flags
curl http://localhost:8007/api/devices/1 | jq '.last_hardware_snapshot.cpu_flags'
```

## ✅ Validation Finale

Une fois tous les tests passés :
- [ ] Toutes les sections s'affichent correctement
- [ ] Aucune erreur dans la console
- [ ] Responsive fonctionne sur mobile
- [ ] Les données sont séparées logiquement
- [ ] L'interface est claire et lisible

## 🚀 Prochaines Étapes

Si tout fonctionne :
1. Tester sur plusieurs devices différents
2. Vérifier les performances (temps de chargement)
3. Valider l'UX avec un utilisateur final
4. Documenter les améliorations futures

## 📝 Rapport de Bug

En cas de bug, noter :
- URL de la page (avec l'ID du device)
- Section concernée
- Erreur dans la console (copier le message complet)
- Screenshot si possible

---

**Frontend Restructuré** : v2.0.0
**Date de test** : _______________
**Testé par** : _______________
**Résultat** : ⬜ Validé ⬜ À corriger