8.1 Test du frontend
À cette étape, on va voir comment tester et déboguer notre application multi-conteneurs. Les tests aident à détecter et corriger les bugs, ainsi qu'à vérifier le bon fonctionnement de tous les composants du système.
Pour tester le frontend sur ReactJS, on utilisera la bibliothèque Jest et React Testing Library.
Installation de Jest et React Testing Library
Étape 1. Installation des dépendances :
cd frontend
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Étape 2. Configuration de Jest :
Créez un fichier jest.config.js dans le répertoire frontend :
module.exports = {
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
testEnvironment: 'jsdom',
};
Étape 3. Création du fichier setupTests.js :
Créez un fichier setupTests.js dans le répertoire frontend/src :
import '@testing-library/jest-dom/extend-expect';
Étape 4. Écriture des tests pour les composants
Créez un fichier de test pour le composant TaskList dans le répertoire frontend/src :
import React from 'react';
import { render, screen } from '@testing-library/react';
import TaskList from './TaskList';
test('renders Task List heading', () => {
render(<TaskList />);
const headingElement = screen.getByText(/Task List/i);
expect(headingElement).toBeInTheDocument();
});
Étape 5. Exécution des tests
Pour exécuter les tests, utilisez la commande :
npm test
8.2 Test du backend
Pour tester un backend sur Flask, on va utiliser la bibliothèque unittest.
Installation des dépendances :
cd ../backend
pip install Flask-Testing
Écriture de tests pour les endpoints
Créez un répertoire tests et un fichier test_routes.py dans le répertoire backend :
import unittest
from app import app, db
from app.models import User, Task
class BasicTests(unittest.TestCase):
def setUp(self):
app.config['TESTING'] = True
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///:memory:'
self.app = app.test_client()
db.create_all()
def tearDown(self):
db.session.remove()
db.drop_all()
def test_user_registration(self):
response = self.app.post('/register', json={
'username': 'testuser',
'password': 'testpassword'
})
self.assertEqual(response.status_code, 201)
def test_task_creation(self):
self.app.post('/register', json={
'username': 'testuser',
'password': 'testpassword'
})
access_token = self.app.post('/login', json={
'username': 'testuser',
'password': 'testpassword'
}).json['access_token']
response = self.app.post('/tasks', json={
'title': 'Tâche Test',
'description': 'Description Test',
'owner_id': 1,
'status': 'non terminée'
}, headers={'Authorization': f'Bearer {access_token}'})
self.assertEqual(response.status_code, 201)
if __name__ == "__main__":
unittest.main()
Exécution des tests
Pour exécuter les tests, utilisez la commande :
python -m unittest discover
8.3 Tests d'intégration
Les tests d'intégration vérifient l'interaction entre les composants du système.
Configuration de l'environnement de test
Pour les tests d'intégration, on va utiliser Docker Compose pour déployer tous les services dans un environnement de test.
Étape 1. Création du fichier Docker Compose pour les tests :
Créez un fichier docker-compose.test.yml dans le répertoire racine du projet :
version: '3'
services:
frontend:
build: ./frontend
ports:
- "3001:3000"
networks:
- task-network
backend:
build: ./backend
ports:
- "5001:5000"
depends_on:
- database
networks:
- task-network
environment:
- DATABASE_URL=postgresql://taskuser:taskpassword@database:5432/taskdb
database:
image: postgres:13
environment:
- POSTGRES_DB=taskdb
- POSTGRES_USER=taskuser
- POSTGRES_PASSWORD=taskpassword
networks:
- task-network
volumes:
- db-data:/var/lib/postgresql/data
networks:
task-network:
driver: bridge
volumes:
db-data:
Étape 2. Lancer l'environnement de test :
Pour démarrer tous les services dans un environnement de test, utilisez la commande :
docker compose -f docker-compose.test.yml up --build
Écriture des tests d'intégration
Les tests d'intégration peuvent être écrits en utilisant différents outils. Une approche consiste à utiliser Selenium pour les tests automatisés de l'interface utilisateur.
Étape 1. Installation de Selenium :
pip install selenium
Étape 2. Écriture du test d'intégration :
Créez un fichier test_integration.py dans le répertoire tests :
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
def test_frontend():
driver = webdriver.Chrome()
driver.get("http://localhost:3001")
assert "Task List" in driver.title
driver.close()
if __name__ == "__main__":
test_frontend()
Étape 3. Lancer le test d'intégration :
Pour lancer le test d'intégration, utilisez la commande :
python tests/test_integration.py
8.4 Débogage
Pour le débogage, tu peux utiliser les logs des containers et des outils de monitoring.
Visualisation des logs des containers
Pour voir les logs, utilise la commande suivante :
docker compose logs
Utilisation des outils de monitoring
Utilise les outils Prometheus et Grafana configurés précédemment pour surveiller les métriques et l'état des services.
- Accède à l'interface web de Grafana : Ouvre ton navigateur et va sur l'adresse
http://localhost:3033. - Consulte les dashboards : Utilise les dashboards créés pour suivre les performances et l'état des services.
GO TO FULL VERSION