# AudiOhm - Guide de Test Frontend

**Date:** 2025-01-19
**Application:** AudiOhm Web (Flutter)
**URL:** http://localhost:8000

---

## Prérequis

1. **Serveur Backend en cours d'exécution:**
   ```bash
   cd /opt/audiOhm/backend
   python3 -m uvicorn app.main:app --reload
   ```

2. **Base de données PostgreSQL opérationnelle**

3. **Navigateur moderne** (Chrome, Firefox, Edge, Safari)

4. **Outils de développement** (DevTools F12)

---

## Test 1: Authentification

### 1.1 Login

**Étapes:**
1. Aller sur http://localhost:8000
2. Cliquer sur "Se connecter"
3. Entrer les identifiants: `admin@example.com` / `admin123`
4. Cliquer sur "Connexion"

**Résultat attendu:**
- ✅ Redirection vers la page d'accueil
- ✅ Nom d'utilisateur affiché dans le header
- ✅ Menu "Ma Bibliothèque" accessible

**Bug potentiel:**
- ❌ Message d'erreur incorrect
- ❌ Pas de redirection après login

---

## Test 2: Queue de Lecture

### 2.1 Ajouter une piste à la queue

**Étapes:**
1. Rechercher une piste (ex: "queen")
2. Cliquer sur le bouton "⋯" (plus) sur une piste
3. Sélectionner "Ajouter à la queue"
4. Ouvrir la sidebar "Queue" (icône queue)

**Résultat attendu:**
- ✅ La piste apparaît dans la queue
- ✅ Notification visuelle "Piste ajoutée"
- ✅ Compteur de queue mis à jour

### 2.2 Contrôles de la queue

**À tester:**
- ✅ Clic sur une piste de la queue → Lecture
- ✅ Bouton "Suivant" → Piste suivante
- ✅ Bouton "Précédent" → Piste précédente
- ✅ Bouton "Mélanger" → Queue mélangée
- ✅ Bouton "Vider" → Queue vide

### 2.3 Persistance localStorage

**Étapes:**
1. Ajouter 3-4 pistes à la queue
2. Fermer le navigateur (ou refresh F5)
3. Réouvrir l'application

**Résultat attendu:**
- ✅ La queue est toujours présente
- ✅ L'ordre est identique
- ✅ Les pistes sont rejouables

**Vérification technique:**
```javascript
// Dans la console DevTools (F12)
localStorage.getItem('audiohm_queue')
// Devrait retourner un JSON avec les pistes
```

---

## Test 3: Bibliothèque - Titres Likés

### 3.1 Liké une piste

**Étapes:**
1. Rechercher et lire une piste
2. Dans le player, cliquer sur le cœur (♡)

**Résultat attendu:**
- ✅ Le cœur se remplit (♥)
- ✅ Notification "Ajouté aux titres likés"
- ✅ La piste apparaît dans "Ma Bibliothèque > Titres likés"

**Vérification API:**
```bash
# Vérifier que la piste est likée
curl -H "Authorization: Bearer $TOKEN" \
  http://localhost:8000/api/v1/library/liked | jq
```

### 3.2 Unliké une piste

**Étapes:**
1. Aller dans "Titres likés"
2. Cliquer sur le cœur plein (♥) d'une piste

**Résultat attendu:**
- ✅ Le cœur se vide (♡)
- ✅ La piste disparaît de la liste
- ✅ Compteur "X titres likés" mis à jour

### 3.3 Consultation des titres likés

**À tester:**
- ✅ Page "Titres likés" accessible
- ✅ Liste des pistes affichée
- ✅ Pagination fonctionnelle
- ✅ Clic → Lecture de la piste
- ✅ Ordre chronologique inversé (plus récent en haut)

---

## Test 4: Bibliothèque - Historique

### 4.1 Consultation de l'historique

**Étapes:**
1. Jouer 3-4 pistes différentes
2. Aller dans "Ma Bibliothèque > Historique"

**Résultat attendu:**
- ✅ Les pistes apparaissent par ordre chronologique
- ✅ Groupement par date (Aujourd'hui, Hier, Cette semaine...)
- ✅ Heure d'écoute affichée

### 4.2 Relecture depuis l'historique

**Étapes:**
1. Dans l'historique, cliquer sur une piste

**Résultat attendu:**
- ✅ La piste se lance
- ✅ Elle s'ajoute à la fin de la queue
- ✅ Mise à jour du player

### 4.3 Vidange de l'historique

**À tester:**
- ✅ Bouton "Vider l'historique"
- ✅ Confirmation modal
- ✅ Historique vidé après confirmation

**Vérification API:**
```bash
# Vérifier que l'historique est vide
curl -H "Authorization: Bearer $TOKEN" \
  http://localhost:8000/api/v1/library/history | jq
# [] = vide
```

---

## Test 5: Playlists

### 5.1 Création de playlist

**Étapes:**
1. Cliquer sur "Créer une playlist"
2. Entrer nom: "Ma playlist test"
3. Entrer description (optionnelle)
4. Cliquer sur "Créer"

**Résultat attendu:**
- ✅ La playlist apparaît dans la sidebar
- ✅ Page de détails ouverte
- ✅ Message "Playlist créée"

### 5.2 Ajout de pistes

**Méthode A - Depuis la recherche:**
1. Rechercher des pistes
2. Clic sur "⋯" > "Ajouter à la playlist"
3. Sélectionner "Ma playlist test"

**Méthode B - Drag & Drop:**
1. Rechercher des pistes
2. Drag & drop vers la playlist dans la sidebar

**Résultat attendu:**
- ✅ Pistes ajoutées à la playlist
- ✅ Compteur "X pistes" mis à jour
- ✅ Notification visuelle

### 5.3 Lecture d'une playlist

**Étapes:**
1. Cliquer sur une playlist
2. Cliquer sur "Play" (▶)

**Résultat attendu:**
- ✅ Toutes les pistes s'ajoutent à la queue
- ✅ La première piste démarre
- ✅ Order de la playlist respecté

### 5.4 Modification de playlist

**À tester:**
- ✅ Changement de nom
- ✅ Changement de description
- ✅ Ajout d'image de couverture
- ✅ Playlist privée/publique

### 5.5 Suppression de playlist

**Étapes:**
1. Cliquer sur "⋯" sur la playlist
2. Sélectionner "Supprimer"
3. Confirmer

**Résultat attendu:**
- ✅ Modal de confirmation
- ✅ Playlist supprimée
- ✅ Disparition de la sidebar

---

## Test 6: Player Audio

### 6.1 Contrôles de base

**À tester:**
- ✅ Play/Pause (barre espace ou clic)
- ✅ Volume slider
- ✅ Barre de progression cliquable
- ✅ Temps écoulé / durée totale
- ✅ Bouton Repeat (Off/All/One)
- ✅ Bouton Shuffle

### 6.2 Affichage des métadonnées

**Résultat attendu:**
- ✅ Titre de la piste
- ✅ Nom de l'artiste
- ✅ Album (si disponible)
- ✅ Image de couverture

### 6.3 Gestion des erreurs

**À tester:**
- ❌ Piste indisponible → Message d'erreur
- ❌ Pas de connexion → Message offline

---

## Test 7: Responsive Design

### 7.1 Desktop (> 1024px)

**À vérifier:**
- ✅ Sidebar complète visible
- ✅ Player fixe en bas
- ✅ Grille de pistes responsive

### 7.2 Tablette (768px - 1024px)

**À vérifier:**
- ✅ Sidebar réduite
- ✅ Menu hamburger fonctionnel
- ✅ Player adapté

### 7.3 Mobile (< 768px)

**À vérifier:**
- ✅ Sidebar cachée par défaut
- ✅ Navigation par menu
- ✅ Player full width
- ✅ Gestes tactiles

---

## Test 8: Performance

### 8.1 Temps de chargement

**À mesurer:**
- ⏱️ Première page: < 2s
- ⏱️ Recherche: < 1s
- ⏱️ Lecture: < 500ms

### 8.2 Gestion des grandes listes

**À tester:**
- ✅ Recherche avec 100+ résultats
- ✅ Playlist avec 50+ pistes
- ✅ Historique avec 100+ entrées

**Résultat attendu:**
- ✅ Pas de lag
- ✅ Scroll fluide
- ✅ Pagination/virtualization

---

## Test 9: Accessibilité

### 9.1 Navigation clavier

**À tester:**
- ✅ Tab pour naviguer
- ✅ Entrée/Space pour valider
- ✅ Escape pour fermer les modals

### 9.2 Lecteur d'écran

**À vérifier:**
- ✅ Alt text sur les images
- ✅ ARIA labels sur les boutons
- ✅ Structure sémantique HTML

---

## Test 10: Cas Limites

### 10.1 Queue vide

**Actions:**
- ✅ Pas de piste dans la queue
- ✅ Clic sur "Play" → Message approprié

### 10.2 Piste supprimée

**Scénario:**
1. Ajouter une piste à la queue
2. Supprimer la piste de la BD
3. Essayer de la jouer

**Résultat attendu:**
- ✅ Message "Piste indisponible"
- ✅ Passer à la piste suivante

### 10.3 Déconnexion

**Étapes:**
1. Remplir la queue
2. Se déconnecter
3. Se reconnecter

**Résultat attendu:**
- ✅ Queue restaurée (localStorage)
- ✅ Historique intact (BD)

---

## Outils de Test

### DevTools Console

```javascript
// Vider le localStorage
localStorage.clear()

// Vérifier les données
console.log(JSON.parse(localStorage.getItem('audiohm_queue')))
console.log(JSON.parse(localStorage.getItem('audiohm_settings')))

// Simuler un utilisateur différent
localStorage.setItem('audiohm_token', 'new_token')
```

### Réseau (Network Tab)

**À surveiller:**
- ⏱️ Temps de réponse API
- ❌ Requêtes échouées (rouge)
- ⚠️ Requêtes lentes (jaune)

---

## Checklist Finale

Avant de valider la release:

- [ ] Tous les tests backend passent (100%)
- [ ] Tous les tests frontend manuels passent
- [ ] Bug #1 corrigé (type mismatch)
- [ ] Aucune erreur console DevTools
- [ ] Performance acceptable (< 2s)
- [ ] Responsive OK (mobile/desktop)
- [ ] Accessibilité vérifiée
- [ ] Documentation à jour

---

## Rapport de Bugs

**Template à utiliser:**

```markdown
### Bug #[NUMÉRO]: [TITRE]

**Sévérité:** CRITIQUE/MAJEURE/MINEURE
**Localisation:** [FICHIER/FONCTION]

**Description:**
[Ce qui ne va pas]

**Reproduction:**
1. Étape 1
2. Étape 2
3. ...

**Résultat attendu:**
[Ce qui devrait se passer]

**Résultat actuel:**
[Ce qui se passe réellement]

**Solution proposée:**
[Comment corriger]
```

---

**Fin du guide de test**