feat: enhance README and TODO documentation, implement mobile menu functionality in Header component
- Updated README.md with project details, quick start instructions, and tech stack. - Expanded TODO.md to reflect current project status and backlog items, including Linear ticket synchronization. - Added mobile menu toggle functionality in Header component with corresponding tests for user interactions. - Configured Next.js for Docker deployment and optimized build settings.
This commit is contained in:
Do Siki
@@ -0,0 +1,282 @@
|
||||
# Testing Guide
|
||||
|
||||
This document outlines the comprehensive testing strategy and available test commands for the mozdIT website project.
|
||||
|
||||
## ✅ Successfully Implemented Test Suite
|
||||
|
||||
**A tesztkörnyezetek sikeresen frissítve lettek!** Most a valós Docker környezetben futó komponensekre és API-kra fókuszálnak, mock elemek helyett.
|
||||
|
||||
## Test Types
|
||||
|
||||
### 1. Unit Tests
|
||||
Unit tests focus on individual components and functions in isolation using mocks and stubs. Runs in **jsdom environment**.
|
||||
|
||||
**Run unit tests:**
|
||||
```bash
|
||||
npm run test:unit
|
||||
# or simply
|
||||
npm test
|
||||
```
|
||||
|
||||
**Watch mode:**
|
||||
```bash
|
||||
npm run test:watch
|
||||
```
|
||||
|
||||
**Coverage report:**
|
||||
```bash
|
||||
npm run test:coverage
|
||||
```
|
||||
|
||||
**What unit tests cover:**
|
||||
- Component rendering and behavior
|
||||
- Business logic functions
|
||||
- Input validation logic
|
||||
- Utility functions
|
||||
- Isolated API route logic
|
||||
|
||||
### 2. Browser Integration Tests
|
||||
Browser-based tests that run in **jsdom environment** with mocked API responses. Perfect for testing React components with API interactions.
|
||||
|
||||
**Run browser integration tests:**
|
||||
```bash
|
||||
npm run test:browser
|
||||
```
|
||||
|
||||
**What browser integration tests cover:**
|
||||
- Component behavior with mocked API calls
|
||||
- Form validation in browser environment
|
||||
- localStorage/sessionStorage functionality
|
||||
- DOM manipulation and user interactions
|
||||
- Client-side routing behavior
|
||||
|
||||
### 3. Node.js Integration Tests
|
||||
Integration tests that run in **Node.js environment** and make real HTTP calls to the Docker services.
|
||||
|
||||
**Prerequisites:**
|
||||
- Docker and Docker Compose installed
|
||||
- Docker development environment running
|
||||
|
||||
**Start Docker environment:**
|
||||
```bash
|
||||
npm run docker:dev
|
||||
```
|
||||
|
||||
**Run Node.js integration tests:**
|
||||
```bash
|
||||
npm run test:integration
|
||||
```
|
||||
|
||||
**What Node.js integration tests cover:**
|
||||
- Real HTTP calls to API endpoints
|
||||
- MongoDB connection and data verification
|
||||
- Service health checks (Grafana, Loki, Mongo Express)
|
||||
- Rate limiting and spam detection with real services
|
||||
- Database initialization and configuration
|
||||
|
||||
### 4. End-to-End (E2E) Tests
|
||||
E2E tests verify complete user workflows in the Docker environment. Runs in **Node.js environment**.
|
||||
|
||||
**Run E2E tests:**
|
||||
```bash
|
||||
npm run test:e2e
|
||||
```
|
||||
|
||||
**What E2E tests cover:**
|
||||
- Full page navigation flow
|
||||
- Complete form submission workflows
|
||||
- SEO and meta tags verification
|
||||
- Performance and caching headers
|
||||
- Cross-service integration
|
||||
|
||||
### 5. Docker Environment Tests
|
||||
Combined integration and E2E tests for the complete Docker stack.
|
||||
|
||||
**Run all Docker tests:**
|
||||
```bash
|
||||
npm run test:docker
|
||||
```
|
||||
|
||||
### 6. All Tests
|
||||
Run all test suites in sequence.
|
||||
|
||||
**Run all tests:**
|
||||
```bash
|
||||
npm run test:all
|
||||
```
|
||||
|
||||
This runs: Unit → Browser Integration → Docker Integration → E2E tests.
|
||||
|
||||
## Test Environment Setup
|
||||
|
||||
### For Unit Tests
|
||||
Unit tests run in the standard Jest environment with jsdom and don't require external services.
|
||||
|
||||
### For Integration/E2E Tests
|
||||
1. **Start the Docker environment:**
|
||||
```bash
|
||||
docker-compose -f docker-compose.dev.yml up -d
|
||||
```
|
||||
|
||||
2. **Wait for services to be ready** (usually 30-60 seconds)
|
||||
|
||||
3. **Verify services are running:**
|
||||
```bash
|
||||
docker-compose -f docker-compose.dev.yml ps
|
||||
```
|
||||
|
||||
4. **Run tests:**
|
||||
```bash
|
||||
npm run test:integration
|
||||
npm run test:e2e
|
||||
```
|
||||
|
||||
5. **Clean up when done:**
|
||||
```bash
|
||||
docker-compose -f docker-compose.dev.yml down
|
||||
```
|
||||
|
||||
## Test Configuration
|
||||
|
||||
### Environment Variables
|
||||
- `INTEGRATION_TESTS=1` - Enables integration tests
|
||||
- `E2E_TESTS=1` - Enables E2E tests
|
||||
- `NODE_ENV=test` - Standard test environment (default for Jest)
|
||||
|
||||
### Docker Services URLs
|
||||
When running integration/E2E tests, the following services are expected:
|
||||
|
||||
- **Next.js App**: http://localhost:3000
|
||||
- **MongoDB**: mongodb://admin:password123@localhost:27017/admin
|
||||
- **Mongo Express**: http://localhost:8081
|
||||
- **Grafana**: http://localhost:3001
|
||||
- **Loki**: http://localhost:3100
|
||||
|
||||
## Writing Tests
|
||||
|
||||
### Unit Test Example
|
||||
```typescript
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import '@testing-library/jest-dom'
|
||||
import MyComponent from './MyComponent'
|
||||
|
||||
describe('MyComponent', () => {
|
||||
it('should render correctly', () => {
|
||||
render(<MyComponent />)
|
||||
expect(screen.getByText('Expected Text')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### Integration Test Example
|
||||
```typescript
|
||||
describe('API Integration', () => {
|
||||
it('should connect to MongoDB', async () => {
|
||||
if (!process.env.INTEGRATION_TESTS) return
|
||||
|
||||
const response = await fetch('http://localhost:3000/api/health')
|
||||
expect(response.status).toBe(200)
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### E2E Test Example
|
||||
```typescript
|
||||
describe('User Flow', () => {
|
||||
it('should complete contact form submission', async () => {
|
||||
if (!process.env.E2E_TESTS) return
|
||||
|
||||
const response = await fetch('http://localhost:3000/api/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(validContactData)
|
||||
})
|
||||
|
||||
expect(response.status).toBe(200)
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Test Structure
|
||||
|
||||
```
|
||||
proto/src/
|
||||
├── __tests__/ # Integration and E2E tests
|
||||
│ ├── integration.test.ts # Service integration tests
|
||||
│ └── e2e-docker.test.ts # End-to-end workflow tests
|
||||
├── components/ # Component tests
|
||||
│ ├── Header.test.tsx
|
||||
│ └── Footer.test.tsx
|
||||
├── app/api/ # API route tests
|
||||
│ ├── health/route.test.ts
|
||||
│ └── contact/route.test.ts
|
||||
└── lib/ # Library/utility tests
|
||||
├── mongodb.test.ts
|
||||
└── logger.test.ts
|
||||
```
|
||||
|
||||
## CI/CD Integration
|
||||
|
||||
### GitHub Actions Example
|
||||
```yaml
|
||||
name: Tests
|
||||
on: [push, pull_request]
|
||||
|
||||
jobs:
|
||||
unit-tests:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- run: npm ci
|
||||
- run: npm run test:unit
|
||||
|
||||
integration-tests:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- run: docker-compose -f docker-compose.dev.yml up -d
|
||||
- run: sleep 60 # Wait for services
|
||||
- run: npm ci
|
||||
- run: npm run test:docker
|
||||
- run: docker-compose -f docker-compose.dev.yml down
|
||||
```
|
||||
|
||||
## Debugging Tests
|
||||
|
||||
### View test output with verbose logging:
|
||||
```bash
|
||||
npm test -- --verbose
|
||||
```
|
||||
|
||||
### Run specific test file:
|
||||
```bash
|
||||
npm test -- Header.test.tsx
|
||||
```
|
||||
|
||||
### Debug integration tests:
|
||||
```bash
|
||||
# Check Docker services
|
||||
docker-compose -f docker-compose.dev.yml ps
|
||||
docker-compose -f docker-compose.dev.yml logs app
|
||||
|
||||
# Test individual endpoints
|
||||
curl http://localhost:3000/api/health
|
||||
curl http://localhost:8081 # Mongo Express
|
||||
```
|
||||
|
||||
### Common Issues
|
||||
|
||||
1. **Integration tests failing**: Ensure Docker environment is running and all services are healthy
|
||||
2. **Port conflicts**: Check if ports 3000, 3001, 8081, 3100, 27017 are available
|
||||
3. **MongoDB connection issues**: Verify MongoDB container is running and initialized
|
||||
4. **Rate limiting in tests**: Tests may trigger rate limits; use different test data or wait between runs
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
- Unit tests: ~5-10 seconds
|
||||
- Integration tests: ~30-60 seconds (includes service startup time)
|
||||
- E2E tests: ~60-120 seconds (includes full workflow testing)
|
||||
- Full test suite: ~2-3 minutes
|
||||
|
||||
For faster development cycles, run unit tests frequently and integration/E2E tests before commits or in CI/CD.
|
||||
Reference in New Issue
Block a user