5e5fcf4714
Réorganise la documentation du projet selon les principes du Domain-Driven Design (DDD) pour améliorer la cohésion, la maintenabilité et l'alignement avec l'architecture modulaire du backend. **Structure cible:** ``` docs/domains/ ├── README.md (Context Map) ├── _shared/ (Core Domain) ├── recommendation/ (Supporting Subdomain) ├── content/ (Supporting Subdomain) ├── moderation/ (Supporting Subdomain) ├── advertising/ (Generic Subdomain) ├── premium/ (Generic Subdomain) └── monetization/ (Generic Subdomain) ``` **Changements effectués:** Phase 1: Création de l'arborescence des 7 bounded contexts Phase 2: Déplacement des règles métier (01-19) vers domains/*/rules/ Phase 3: Déplacement des diagrammes d'entités vers domains/*/entities/ Phase 4: Déplacement des diagrammes flux/états/séquences vers domains/*/ Phase 5: Création des README.md pour chaque domaine Phase 6: Déplacement des features Gherkin vers domains/*/features/ Phase 7: Création du Context Map (domains/README.md) Phase 8: Mise à jour de mkdocs.yml pour la nouvelle navigation Phase 9: Correction automatique des liens internes (script fix-markdown-links.sh) Phase 10: Nettoyage de l'ancienne structure (regles-metier/, diagrammes/, features/) **Configuration des tests:** - Makefile: godog run docs/domains/*/features/ - scripts/generate-bdd-docs.py: features_dir → docs/domains **Avantages:** ✅ Cohésion forte: toute la doc d'un domaine au même endroit ✅ Couplage faible: domaines indépendants, dépendances explicites ✅ Navigabilité améliorée: README par domaine = entrée claire ✅ Alignement code/docs: miroir de backend/internal/ ✅ Onboarding facilité: exploration domaine par domaine ✅ Tests BDD intégrés: features au plus près des règles métier Voir docs/REFACTOR-DDD.md pour le plan complet.
292 lines
13 KiB
Gherkin
292 lines
13 KiB
Gherkin
# language: fr
|
||
|
||
@ui @moderation @signalement
|
||
Fonctionnalité: Interface de signalement de contenu (Mobile)
|
||
En tant qu'utilisateur de l'application mobile
|
||
Je veux pouvoir signaler un contenu inapproprié facilement
|
||
Afin de contribuer à améliorer la qualité de la plateforme
|
||
|
||
# 14.1 - Interface de signalement utilisateur
|
||
|
||
Contexte:
|
||
Étant donné que je suis connecté à l'application mobile
|
||
Et que je suis en train d'écouter un contenu
|
||
|
||
# Accès au formulaire de signalement
|
||
|
||
Scénario: Accéder au signalement depuis le player audio
|
||
Étant donné que j'écoute un contenu audio
|
||
Quand j'ouvre le menu "⋮" du player
|
||
Alors je vois l'option "🚫 Signaler ce contenu"
|
||
Et l'option est facilement accessible (3ème position)
|
||
Et l'icône est rouge pour la visibilité
|
||
|
||
Scénario: Accéder au signalement depuis la page de détails
|
||
Étant donné que je consulte la page de détails d'un contenu
|
||
Quand j'ouvre le menu "⋮" en haut à droite
|
||
Alors je vois l'option "🚫 Signaler ce contenu"
|
||
Et je peux ouvrir le formulaire de signalement
|
||
|
||
Scénario: Accéder au signalement depuis l'historique d'écoute
|
||
Étant donné que je consulte mon historique d'écoute
|
||
Quand je fais un appui long sur un contenu
|
||
Alors un menu contextuel s'affiche
|
||
Et je vois l'option "🚫 Signaler"
|
||
Et je peux signaler le contenu même si je ne l'écoute plus
|
||
|
||
# Formulaire de signalement - Design et UX
|
||
|
||
Scénario: Affichage du formulaire de signalement
|
||
Étant donné que je clique sur "Signaler ce contenu"
|
||
Quand le formulaire s'affiche
|
||
Alors il apparaît en modal plein écran (iOS) ou bottom sheet (Android)
|
||
Et le titre est "Signaler ce contenu"
|
||
Et je vois le nom du contenu et le créateur en haut
|
||
Et le formulaire contient:
|
||
| élément | type | obligatoire |
|
||
| Catégorie du problème | Liste déroulante | oui |
|
||
| Commentaire | Zone texte | non* |
|
||
| Bouton Annuler | Secondaire (gris) | - |
|
||
| Bouton Envoyer | Primaire (rouge) | - |
|
||
Et le bouton "Envoyer" est désactivé tant qu'aucune catégorie n'est sélectionnée
|
||
|
||
Scénario: Design responsive du formulaire
|
||
Étant donné que le formulaire de signalement est affiché
|
||
Quand je vérifie l'adaptation de l'interface
|
||
Alors sur petit écran (<375px), le texte est réduit mais lisible
|
||
Et sur grand écran (>414px), le formulaire utilise l'espace disponible
|
||
Et le clavier ne masque pas le bouton "Envoyer"
|
||
Et je peux scroller si le contenu dépasse la hauteur de l'écran
|
||
|
||
# Liste des catégories avec icônes
|
||
|
||
Scénario: Affichage des 7 catégories prédéfinies
|
||
Étant donné que le formulaire de signalement est affiché
|
||
Quand je clique sur "Catégorie du problème"
|
||
Alors une liste déroulante s'affiche avec 7 options:
|
||
| icône | catégorie | description visible en sous-titre |
|
||
| 🚫 | Haine & violence | Incitation à la haine, discrimination |
|
||
| 🔞 | Contenu sexuel | Pornographie, contenu explicite |
|
||
| ⚖️ | Illégalité | Terrorisme, apologie de crimes |
|
||
| 🎵 | Droits d'auteur | Musique/contenu protégé non autorisé |
|
||
| 📧 | Spam | Publicité non sollicitée, répétition |
|
||
| ❌ | Fausse information | Désinformation santé, sécurité routière |
|
||
| 🔧 | Autre | Champ texte obligatoire si sélectionné |
|
||
Et chaque option affiche l'icône, le titre et la description
|
||
Et la description est en gris clair pour la hiérarchie visuelle
|
||
|
||
Scénario: Sélection d'une catégorie
|
||
Étant donné que la liste des catégories est affichée
|
||
Quand je sélectionne "🚫 Haine & violence"
|
||
Alors la liste se ferme
|
||
Et le champ "Catégorie du problème" affiche "🚫 Haine & violence"
|
||
Et le bouton "Envoyer" s'active (devient rouge)
|
||
Et je peux passer au champ commentaire (optionnel)
|
||
|
||
Scénario: Animation visuelle lors de la sélection
|
||
Étant donné que je suis sur le formulaire de signalement
|
||
Quand je sélectionne une catégorie
|
||
Alors une animation de validation subtile s'affiche (✓ vert)
|
||
Et le champ commentaire s'anime légèrement pour attirer l'attention
|
||
Et l'UX est fluide et encourageante
|
||
|
||
# Catégorie "Autre" avec commentaire obligatoire
|
||
|
||
Scénario: Catégorie "Autre" rend le commentaire obligatoire
|
||
Étant donné que le formulaire de signalement est affiché
|
||
Quand je sélectionne "🔧 Autre"
|
||
Alors le champ "Commentaire" affiche un astérisque rouge (*)
|
||
Et le placeholder change en "Décrivez le problème (obligatoire)"
|
||
Et une étiquette "Obligatoire" apparaît en rouge
|
||
Et le bouton "Envoyer" reste désactivé tant que je n'ai pas saisi de commentaire
|
||
|
||
Scénario: Validation du commentaire obligatoire pour "Autre"
|
||
Étant donné que j'ai sélectionné "🔧 Autre"
|
||
Et que je n'ai pas rempli le champ commentaire
|
||
Quand je clique sur "Envoyer"
|
||
Alors un message d'erreur s'affiche sous le champ:
|
||
"""
|
||
Veuillez décrire le problème (minimum 10 caractères)
|
||
"""
|
||
Et le champ commentaire est mis en évidence en rouge
|
||
Et le signalement n'est pas envoyé
|
||
|
||
# Champ commentaire - UX et validation
|
||
|
||
Scénario: Commentaire optionnel avec incitation
|
||
Étant donné que j'ai sélectionné une catégorie autre que "Autre"
|
||
Quand je consulte le champ "Commentaire"
|
||
Alors le placeholder indique "Décrivez le problème (optionnel mais recommandé)"
|
||
Et aucun astérisque rouge n'est affiché
|
||
Et un compteur "0/500" s'affiche en bas à droite
|
||
Et l'incitation encourage à fournir des détails sans obliger
|
||
|
||
Scénario: Compteur de caractères en temps réel
|
||
Étant donné que je suis dans le champ commentaire
|
||
Quand je tape du texte
|
||
Alors le compteur se met à jour en temps réel: "42/500"
|
||
Et quand j'atteins 450 caractères, le compteur passe en orange
|
||
Et quand j'atteins 490 caractères, le compteur passe en rouge
|
||
Et à 500 caractères, le clavier bloque la saisie
|
||
Et un message s'affiche: "Limite atteinte"
|
||
|
||
Scénario: Limite stricte de 500 caractères
|
||
Étant donné que j'ai saisi 500 caractères dans le commentaire
|
||
Quand j'essaie de taper un caractère supplémentaire
|
||
Alors le caractère n'est pas accepté
|
||
Et le clavier vibre légèrement (feedback haptique)
|
||
Et le compteur reste à "500/500" en rouge
|
||
|
||
# Envoi du signalement
|
||
|
||
Scénario: Envoi d'un signalement sans commentaire
|
||
Étant donné que j'ai sélectionné "📧 Spam"
|
||
Et que je n'ai pas rempli le champ commentaire
|
||
Quand je clique sur "Envoyer"
|
||
Alors un loader s'affiche sur le bouton "Envoyer"
|
||
Et le formulaire se ferme après 1 seconde
|
||
Et le signalement est envoyé avec succès
|
||
Et aucune erreur ne s'affiche
|
||
|
||
Scénario: Envoi d'un signalement avec commentaire
|
||
Étant donné que j'ai sélectionné "🚫 Haine & violence"
|
||
Et que j'ai saisi "Propos discriminatoires à 2:30"
|
||
Quand je clique sur "Envoyer"
|
||
Alors un loader s'affiche pendant l'envoi
|
||
Et le formulaire se ferme
|
||
Et le signalement est envoyé avec le commentaire
|
||
Et le commentaire sera visible par les modérateurs
|
||
|
||
Scénario: Gestion d'erreur lors de l'envoi
|
||
Étant donné que j'ai rempli le formulaire de signalement
|
||
Et que ma connexion réseau est perdue
|
||
Quand je clique sur "Envoyer"
|
||
Alors un message d'erreur s'affiche:
|
||
"""
|
||
Impossible d'envoyer le signalement.
|
||
Vérifiez votre connexion internet.
|
||
"""
|
||
Et le formulaire reste ouvert avec mes données
|
||
Et je peux réessayer sans perdre ma saisie
|
||
|
||
# Toast de confirmation
|
||
|
||
Scénario: Toast de confirmation après envoi réussi
|
||
Étant donné que j'ai envoyé un signalement
|
||
Quand le signalement est enregistré avec succès
|
||
Alors un toast notification s'affiche en bas de l'écran
|
||
Et le toast contient:
|
||
| élément | contenu |
|
||
| Icône | ✓ (vert) |
|
||
| Message | Signalement envoyé. Examen sous 24-48h. |
|
||
| Bouton | Voir mes signalements |
|
||
| Bouton fermer | × (croix en haut à droite) |
|
||
Et le toast s'affiche pendant 5 secondes
|
||
Et je peux le fermer manuellement
|
||
|
||
Scénario: Animation du toast
|
||
Étant donné que le signalement est envoyé
|
||
Quand le toast s'affiche
|
||
Alors il apparaît avec une animation slide-up depuis le bas
|
||
Et après 5 secondes, il disparaît avec une animation fade-out
|
||
Et l'animation est fluide et professionnelle
|
||
|
||
Scénario: Redirection vers l'historique depuis le toast
|
||
Étant donné que le toast de confirmation est affiché
|
||
Quand je clique sur "Voir mes signalements"
|
||
Alors le toast se ferme
|
||
Et je suis redirigé vers "Profil > Mes signalements"
|
||
Et je vois mon nouveau signalement en tête de liste
|
||
Et le statut est "En cours 🔍"
|
||
|
||
# Modal de découverte au premier signalement
|
||
|
||
Scénario: Découverte du système de badges au 1er signalement
|
||
Étant donné que je viens d'envoyer mon tout premier signalement
|
||
Et que le toast de confirmation s'est affiché
|
||
Quand 2 secondes se sont écoulées
|
||
Alors une modal d'information s'affiche par-dessus
|
||
Et la modal contient le titre "🎯 Bravo ! Vous contribuez à une communauté plus saine"
|
||
Et la modal explique le système de badges:
|
||
"""
|
||
🥉 Bronze : 5 signalements validés
|
||
🥈 Argent : 20 signalements validés
|
||
🥇 Or : 50 signalements validés → -50% Premium 3 mois
|
||
"""
|
||
Et la modal contient 2 boutons:
|
||
| bouton | action |
|
||
| En savoir plus | Ouvre page dédiée badges |
|
||
| J'ai compris | Ferme la modal |
|
||
Et cette modal ne se réaffiche jamais
|
||
|
||
Scénario: Modal responsive et accessible
|
||
Étant donné que la modal de découverte s'affiche
|
||
Quand je vérifie l'accessibilité
|
||
Alors la modal est centrée sur l'écran
|
||
Et le fond est assombri (overlay semi-transparent)
|
||
Et je ne peux pas interagir avec l'écran en arrière-plan
|
||
Et je peux fermer en cliquant hors de la modal
|
||
Et le texte est lisible (contraste WCAG AA)
|
||
|
||
# Limite de signalements déjà effectués
|
||
|
||
Scénario: Impossible de signaler deux fois le même contenu
|
||
Étant donné que j'ai déjà signalé ce contenu il y a 3 jours
|
||
Quand j'ouvre le menu "⋮" du contenu
|
||
Alors l'option "Signaler" est désactivée (grisée)
|
||
Et un tooltip s'affiche: "Vous avez déjà signalé ce contenu"
|
||
Et je peux consulter mon signalement précédent via le tooltip (lien)
|
||
|
||
Scénario: Redirection vers le signalement existant
|
||
Étant donné que j'ai déjà signalé ce contenu
|
||
Et que l'option "Signaler" est désactivée
|
||
Quand je clique sur le tooltip "Vous avez déjà signalé ce contenu"
|
||
Alors je suis redirigé vers "Mes signalements"
|
||
Et le signalement concerné est mis en évidence
|
||
Et je vois le statut actuel: "En cours 🔍" / "Traité ✓" / "Rejeté ✗"
|
||
|
||
# Accessibilité et dark mode
|
||
|
||
Scénario: Support du dark mode
|
||
Étant donné que j'ai activé le dark mode sur mon téléphone
|
||
Quand j'ouvre le formulaire de signalement
|
||
Alors le formulaire s'adapte au dark mode:
|
||
| élément | couleur dark mode |
|
||
| Fond de la modal | Gris foncé (#1E1E1E) |
|
||
| Texte principal | Blanc (#FFFFFF) |
|
||
| Texte secondaire | Gris clair (#B0B0B0) |
|
||
| Bordures | Gris moyen (#3E3E3E) |
|
||
| Bouton Envoyer | Rouge (#FF4444) |
|
||
Et le contraste reste suffisant (WCAG AA)
|
||
|
||
Scénario: Accessibilité pour lecteur d'écran
|
||
Étant donné que j'utilise un lecteur d'écran (VoiceOver/TalkBack)
|
||
Quand je navigue dans le formulaire de signalement
|
||
Alors chaque élément a un label descriptif:
|
||
| élément | label lecteur d'écran |
|
||
| Bouton menu | "Menu du contenu" |
|
||
| Option signaler | "Signaler ce contenu" |
|
||
| Liste catégories | "Sélectionner une catégorie de problème" |
|
||
| Champ commentaire | "Commentaire optionnel, 500 caractères maximum" |
|
||
| Bouton Envoyer | "Envoyer le signalement" |
|
||
Et je peux naviguer au clavier (tab/shift-tab)
|
||
Et tous les états (activé/désactivé) sont annoncés
|
||
|
||
# Coût et performance
|
||
|
||
Scénario: Performance de l'interface
|
||
Étant donné que j'ouvre le formulaire de signalement
|
||
Quand je mesure les performances
|
||
Alors le formulaire s'affiche en <300ms
|
||
Et l'animation est fluide (60 FPS)
|
||
Et l'envoi du signalement prend <2 secondes
|
||
Et l'UX est instantanée et réactive
|
||
|
||
Scénario: Coût de développement
|
||
Étant donné que l'interface de signalement est développée
|
||
Quand on évalue le coût
|
||
Alors le développement est 100% interne (Flutter)
|
||
Et aucun service tiers n'est utilisé
|
||
Et le coût opérationnel est de 0€
|
||
Et l'interface est native iOS et Android
|