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：
在 frontend 目錄下建立文件 jest.config.js：
module.exports = {
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
testEnvironment: 'jsdom',
};
步驟 3. 建立檔案 setupTests.js：
在 frontend/src 目錄下建立檔案 setupTests.js：
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('渲染 Task List 標題', () => {
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. 編寫整合測試：
在 tests 目錄中建立一個 test_integration.py 檔案：
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()
步驟 3. 執行整合測試：
使用以下指令來執行整合測試：
python tests/test_integration.py
8.4 除錯
要進行除錯可以使用容器的日誌和監控工具。
查看容器的日誌
為了查看日誌，使用以下命令：
docker compose logs
使用監控工具
使用之前設定好的 Prometheus 和 Grafana 來監控指標和服務的狀態。
- 進入 Grafana 的 web 介面： 打開瀏覽器並進入
http://localhost:3033。 - 查看儀表板： 使用已建立的儀表板來追蹤服務的效能和狀態。
GO TO FULL VERSION