AudiOhm/backend/FRONTEND_TEST_GUIDE.md

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:

   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:

// 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:

# 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:

# 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

// 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:

### 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