8.1 Testando o Frontend
Nesta etapa, vamos ver como testar e depurar nosso aplicativo de múltiplos containers. O teste ajuda a identificar e corrigir erros, além de garantir que todos os componentes do sistema estejam funcionando corretamente.
Para testar o frontend em ReactJS, vamos usar a biblioteca Jest e a React Testing Library.
Instalação do Jest e React Testing Library
Passo 1. Instalação das dependências:
cd frontend
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Passo 2. Configuração do Jest:
Crie o arquivo jest.config.js no diretório frontend:
module.exports = {
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
testEnvironment: 'jsdom',
};
Passo 3. Criação do arquivo setupTests.js:
Crie o arquivo setupTests.js no diretório frontend/src:
import '@testing-library/jest-dom/extend-expect';
Passo 4. Escrevendo testes para componentes
Crie um arquivo de teste para o componente TaskList no diretório 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();
});
Passo 5. Rodando os testes
Para rodar os testes, use o comando:
npm test
8.2 Testando o backend
Pra testar o backend no Flask, vamos usar a biblioteca unittest.
Instalando dependências:
cd ../backend
pip install Flask-Testing
Escrevendo testes para endpoints
Cria o diretório tests e o arquivo test_routes.py no diretório 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': 'Tarefa de Teste',
'description': 'Descrição do Teste',
'owner_id': 1,
'status': 'não concluída'
}, headers={'Authorization': f'Bearer {access_token}'})
self.assertEqual(response.status_code, 201)
if __name__ == "__main__":
unittest.main()
Executando os testes
Pra rodar os testes, usa o comando:
python -m unittest discover
8.3 Testes de Integração
Os testes de integração verificam a interação entre os componentes do sistema.
Configuração do ambiente de teste
Para os testes de integração, vamos usar Docker Compose para subir todos os serviços no ambiente de teste.
Passo 1. Criação do arquivo Docker Compose para os testes:
Crie o arquivo docker-compose.test.yml no diretório raiz do projeto:
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:
Passo 2. Subindo o ambiente de teste:
Para subir todos os serviços no ambiente de teste, use o seguinte comando:
docker compose -f docker-compose.test.yml up --build
Escrevendo testes de integração
Os testes de integração podem ser escritos usando diferentes ferramentas. Uma das abordagens é usar o Selenium para testes automatizados da interface do usuário.
Passo 1. Instalando o Selenium:
pip install selenium
Passo 2. Escrevendo o teste de integração:
Crie o arquivo test_integration.py no diretório 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()
Passo 3. Executando o teste de integração:
Para executar o teste de integração, use o seguinte comando:
python tests/test_integration.py
8.4 Depuração
Pra fazer a depuração, dá pra usar os logs dos containers e as ferramentas de monitoramento.
Visualizar os logs dos containers
Pra ver os logs, usa o comando:
docker compose logs
Usando ferramentas de monitoramento
Usa o Prometheus e Grafana que já configurou antes pra monitorar as métricas e o estado dos serviços.
- Acesse a interface web do Grafana: Abre o navegador e vai pro endereço
http://localhost:3033. - Veja os dashboards: Usa os dashboards criados pra acompanhar o desempenho e o estado dos serviços.
GO TO FULL VERSION