La Pyramide des Tests¶

Pour une stratégie de tests efficace, on utilise souvent le concept de la pyramide :

• Tests E2E (Sommet) : Peu nombreux, lents, coût de maintenance élevé
• Tests d'Intégration (Milieu) : Vérifient les contrats entre modules
• Tests Unitaires (Base) : Très nombreux, extrêmement rapides, feedback instantané

Objectif : Maximiser les tests rapides et isolés pour réduire le coût de la CI/CD

Tests unitaires¶

Introduction aux Tests Unitaires¶

Le test unitaire vise à tester une fonction individuelle ou un composant isolé de l’application pour s'assurer que son comportement est conforme aux attentes

Caractéristiques¶

• Couvre une seule unité de code (fonction, méthode, composant React)
• Exécuté de manière isolée via des Mocks (doublures) pour les dépendances
• Très rapide à exécuter (pas d'accès réseau ni base de données)
• Facilite le Refactoring en garantissant la non-régression

Outils¶

• Jest / Vitest : Frameworks de test JavaScript/TypeScript
• React Testing Library : Simulation des interactions utilisateur

Exemple de test unitaire¶

// Button.test.js
import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from './Button'

test('Button renders with correct text and handles clicks', () => {
  const handleClick = jest.fn() // Création d'un Mock
  render(<Button onClick={handleClick}>Click Me</Button>)

  const button = screen.getByText('Click Me')
  expect(button).toBeInTheDocument()

  fireEvent.click(button)
  expect(handleClick).toHaveBeenCalledTimes(1)
})

Intégration GitLab CI (Unit)¶

unit_tests:
  stage: test
  image: node:lts
  script:
    - npm ci
    - npm test -- --coverage
  artifacts:
    paths:
      - coverage/

Tests d'intégration¶

Introduction aux Tests d'Intégration¶

Le test d'intégration vérifie la communication entre plusieurs modules pour s’assurer qu'ils fonctionnent correctement ensemble

Caractéristiques¶

• Vérifie les interactions (ex : API -> Base de données)
• Teste les dépendances réelles ou des conteneurs (via Docker)
• Plus lent que l'unitaire car nécessite une infrastructure minimale
• Détecte les erreurs de configuration et de contrats d'API

Outils¶

• Supertest : Test de points d'entrée HTTP (Express)
• Testcontainers : Gestion de bases de données temporaires pour les tests

Intégration GitLab CI (Integration)¶

Utilisation des services GitLab pour fournir une base de données réelle :

integration_tests:
  stage: test
  services:
    - name: mongo:6.0
      alias: mongo
  variables:
    MONGO_URL: 'mongodb://mongo:27017/testdb'
  image: node:lts
  script:
    - npm ci
    - npm run test:integration

Tests End-to-End (E2E)¶

Introduction aux Tests E2E¶

Le test end-to-end simule le comportement d’un utilisateur réel du navigateur jusqu'à la persistance des données

Caractéristiques¶

• Couvre l’intégralité de la chaîne technique
• Valide les parcours critiques (Login, Checkout, Inscription)
• Exécuté dans un vrai navigateur (Chromium, Firefox, WebKit)
• Plus fragile et coûteux à maintenir (dépend de l'UI)

Outils¶

• Playwright : Moderne, rapide et supporte le multi-navigateur
• Cypress : Très populaire pour le debug visuel

Exemple de test E2E (Playwright)¶

// auth.spec.js
const { test, expect } = require('@playwright/test')

test('L utilisateur peut se connecter', async ({ page }) => {
  await page.goto('/login')
  await page.fill('#email', 'user@example.com')
  await page.fill('#password', 'secret')
  await page.click('button[type="submit"]')

  await expect(page).toHaveURL('/dashboard')
})

Intégration GitLab CI (E2E)¶

e2e_tests:
  stage: e2e
  image: mcr.microsoft.com/playwright:v1.40.0-focal
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: on_failure
    paths:
      - playwright-report/
      - test-results/

☕️ Si tu souhaites soutenir mon travail, tu peux m'offrir un café ici.