Aller au contenu principal

Stratégie QA & Tests Frontend

Cette section détaille la stratégie de tests, les workflows et les technologies utilisés dans le dépôt Control-Hub (my-app).

🛠 Stack Technologique​

  • Framework: Next.js 16 (React)
  • Langage: TypeScript
  • Gestion d'État: React Query (État serveur), Context API
  • Styling: Tailwind CSS, Radix UI, shadcn/ui
  • Frameworks de Test:
  • Linting & Formatage: ESLint, Prettier

🧪 Stratégie de Tests​

Nous employons une approche de tests en couches :

1. Tests Unitaires & Intégration (Vitest)​

  • Situés dans __tests__ ou co-localisés avec les composants.
  • Se concentrent sur les composants individuels, les hooks et les fonctions utilitaires.
  • Exécution : 
    pnpm test

2. Tests End-to-End (Playwright)​

  • Situés dans le répertoire e2e.
  • Statut : Infrastructure configurée dans la CI, tests automatisés en attente d'implémentation.
  • Exécution : 
    pnpm test:e2e

3. Tests de Composants (Storybook)​

  • Utilisé pour développer et tester les composants UI de manière isolée.
  • Intégration avec Chromatic pour les tests de régression visuelle (configuré dans chromatic.config.json).
  • Exécution locale : 
    pnpm storybook

🔄 Workflows CI/CD​

1. Pipeline CI (ci.yml)​

Déclenché sur push et pull_request vers main et dev.

Étapes :

  1. Quality Gates :
    • Vérification TypeScript (tsc --noEmit)
    • Linting (pnpm run lint)
    • Vérification du formatage (pnpm run format --check)
  2. Audit de Sécurité : pnpm audit
  3. Tests Unitaires : Exécute la suite Vitest avec couverture.
  4. Tests E2E : Exécute les tests Playwright (headless Chromium).
  5. Vérification du Build : Vérifie que l'application Next.js se compile avec succès.
  6. Build Storybook : Compile Storybook et exécute les tests d'accessibilité.

2. Analyse SonarQube (sonar.yml)​

  • Exécute les tests avec accumulation de couverture.
  • Scanne le code pour les bugs, vulnérabilités et "code smells".
  • Envoie les rapports au serveur SonarQube.

♿ Accessibilité​

  • Storybook A11y Addon : Utilisé pour vérifier la conformité à l'accessibilité lors du développement des composants.
  • Linting : eslint-plugin-jsx-a11y assure les meilleures pratiques d'accessibilité dans le JSX.