8.1 Pruebas del frontend
En esta etapa vamos a ver cómo realizar pruebas y depurar nuestra aplicación multicontenedor. Las pruebas nos ayudarán a identificar y corregir errores, además de asegurarnos de que todos los componentes del sistema funcionen correctamente.
Para probar el frontend en ReactJS utilizaremos las bibliotecas Jest y React Testing Library.
Instalación de Jest y React Testing Library
Paso 1. Instalación de dependencias:
cd frontend
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Paso 2. Configuración de Jest:
Crea un archivo jest.config.js en el directorio frontend:
module.exports = {
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
testEnvironment: 'jsdom',
};
Paso 3. Creación del archivo setupTests.js:
Crea un archivo setupTests.js en el directorio frontend/src:
import '@testing-library/jest-dom/extend-expect';
Paso 4. Escribir pruebas para los componentes
Crea un archivo de prueba para el componente TaskList en el directorio 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();
});
Paso 5. Ejecutar pruebas
Para ejecutar las pruebas utiliza el comando:
npm test
8.2 Pruebas del backend
Para probar el backend en Flask, vamos a usar la biblioteca unittest.
Instalación de dependencias:
cd ../backend
pip install Flask-Testing
Creación de tests para endpoints
Crea el directorio tests y el archivo test_routes.py en el directorio 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': 'Tarea de Prueba',
'description': 'Descripción de Prueba',
'owner_id': 1,
'status': 'no completada'
}, headers={'Authorization': f'Bearer {access_token}'})
self.assertEqual(response.status_code, 201)
if __name__ == "__main__":
unittest.main()
Ejecución de tests
Para ejecutar los tests utiliza el comando:
python -m unittest discover
8.3 Pruebas de integración
Las pruebas de integración verifican la interacción entre los componentes del sistema.
Configuración del entorno de pruebas
Para las pruebas de integración, vamos a usar Docker Compose para levantar todos los servicios en un entorno de pruebas.
Paso 1. Crear un archivo Docker Compose para las pruebas:
Crea el archivo docker-compose.test.yml en el directorio raíz del proyecto:
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:
Paso 2. Iniciar el entorno de pruebas:
Para levantar todos los servicios en el entorno de pruebas usa el comando:
docker compose -f docker-compose.test.yml up --build
Escribir pruebas de integración
Se pueden escribir pruebas de integración utilizando varias herramientas. Uno de los enfoques es usar Selenium para pruebas automatizadas de la interfaz de usuario.
Paso 1. Instalar Selenium:
pip install selenium
Paso 2. Escribir la prueba de integración:
Crea el archivo test_integration.py en el directorio tests:
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
def test_frontend():
driver = webdriver.Chrome()
driver.get("http://localhost:3001")
assert "Lista de tareas" in driver.title
driver.close()
if __name__ == "__main__":
test_frontend()
Paso 3. Ejecutar la prueba de integración:
Para ejecutar la prueba de integración utiliza el comando:
python tests/test_integration.py
8.4 Depuración
Para depurar se pueden usar logs de los contenedores y herramientas de monitoreo.
Visualización de logs de contenedores
Para ver los logs usa el comando:
docker compose logs
Uso de herramientas de monitoreo
Usa los Prometheus y Grafana configurados anteriormente para monitorear métricas y el estado de los servicios.
- Accede a la interfaz web de Grafana: Abre tu navegador y ve a la dirección
http://localhost:3033. - Revisa los dashboards: Usa los dashboards creados para seguir el rendimiento y el estado de los servicios.
GO TO FULL VERSION