prod: UI Optimisée mise en production
- Documentation archivée et réorganisée - Backend: Ajout tests, migrations, library service, rate limiting - Frontend: Suppression Flutter, focus sur interface web HTML/JS - Tailwind CSS ajouté pour le style - Améliorations UX et corrections bugs Generated with [Claude Code](https://claude.com/claude-code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
root
@@ -0,0 +1,434 @@
|
||||
# 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**
|
||||
Reference in New Issue
Block a user