8.1 Тестування фронтенду
На цьому етапі ми розглянемо, як провести тестування та налагодження нашого багатоконтейнерного застосунку. Тестування допоможе виявити й усунути помилки, а також переконатися у коректній роботі всіх компонентів системи.
Для тестування фронтенду на ReactJS ми будемо використовувати бібліотеки Jest і React Testing Library.
Встановлення Jest і React Testing Library
Крок 1. Встановлення залежностей:
cd frontend
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Крок 2. Налаштування Jest:
Створіть файл jest.config.js в директорії frontend:
module.exports = {
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
testEnvironment: 'jsdom',
};
Крок 3. Створення файлу setupTests.js:
Створіть файл setupTests.js в директорії frontend/src:
import '@testing-library/jest-dom/extend-expect';
Крок 4. Написання тестів для компонентів
Створіть тестовий файл для компонента TaskList в директорії 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();
});
Крок 5. Запуск тестів
Для запуску тестів скористайтеся командою:
npm test
8.2 Тестування бекенду
Для тестування бекенду на Flask ми будемо використовувати бібліотеку unittest.
Встановлення залежностей:
cd ../backend
pip install Flask-Testing
Написання тестів для ендпойнтів
Створіть директорію tests і файл test_routes.py у директорії 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': 'Тестове завдання',
'description': 'Тестовий опис',
'owner_id': 1,
'status': 'невиконано'
}, headers={'Authorization': f'Bearer {access_token}'})
self.assertEqual(response.status_code, 201)
if __name__ == "__main__":
unittest.main()
Запуск тестів
Для запуску тестів використовуйте команду:
python -m unittest discover
8.3 Інтеграційне тестування
Інтеграційне тестування перевіряє взаємодію між компонентами системи.
Налаштування тестового середовища
Для інтеграційного тестування ми будемо використовувати Docker Compose, щоб підняти всі сервіси у тестовому середовищі.
Крок 1. Створення Docker Compose файлу для тестів:
Створіть файл docker-compose.test.yml у кореневій директорії проєкту:
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:
Крок 2. Запуск тестового середовища:
Для запуску всіх сервісів у тестовому середовищі використовуйте команду:
docker compose -f docker-compose.test.yml up --build
Написання інтеграційних тестів
Інтеграційні тести можна писати з використанням різних інструментів. Один із підходів - використовувати Selenium для автоматизованого тестування користувацького інтерфейсу.
Крок 1. Встановлення Selenium:
pip install selenium
Крок 2. Написання інтеграційного тесту:
Створіть файл test_integration.py у директорії tests:
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
def test_frontend():
driver = webdriver.Chrome()
driver.get("http://localhost:3001")
assert "Список Завдань" in driver.title
driver.close()
if __name__ == "__main__":
test_frontend()
Крок 3. Запуск інтеграційного тесту:
Для запуску інтеграційного тесту використовуйте команду:
python tests/test_integration.py
8.4 Відлагодження
Для відлагодження можна використовувати логи контейнерів і інструменти моніторингу.
Перегляд логів контейнерів
Для перегляду логів використовуйте команду:
docker compose logs
Використання інструментів моніторингу
Використовуйте налаштовані раніше Prometheus та Grafana для моніторингу метрик і стану сервісів.
- Перейдіть у веб-інтерфейс Grafana: Відкрийте браузер і перейдіть за адресою
http://localhost:3033. - Перегляньте дашборди: Використовуйте створені дашборди для відстеження продуктивності та стану сервісів.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ