Implement Phase 8: Testing & Deployment
Testing Infrastructure: - Configure Jest with Next.js integration and TypeScript support - Add React Testing Library with proper setup for Next.js components - Install and configure Playwright for E2E testing - Create jest.setup.ts with mocks for Next.js router and browser APIs - Add CSS module mocking with identity-obj-proxy Unit Tests: - Create LoadingFallback component tests covering all 5 variants - Create tracking API tests for data transformation logic - Test createActivity, getActivities data structure conversions - Verify frontend (timestamp/data) to backend (startedAt/metadata) mapping E2E Tests (Playwright): - Create comprehensive tracking flow tests - Test navigation to all tracker pages (feeding, sleep, diaper) - Test homepage Today's Summary display - Test AI Assistant and Analytics navigation - Test feeding, sleep, and diaper tracker UI elements - Configure multi-browser testing (Chrome, Firefox, Safari, Mobile) CI/CD Pipeline (GitHub Actions): - Create automated CI/CD workflow for master/main branches - Run linting on every push and PR - Execute unit tests with coverage reporting - Run E2E tests (Chromium) in CI environment - Build application and upload artifacts - Upload test coverage to Codecov - Upload Playwright test reports as artifacts Test Scripts: - npm test: Run Jest unit tests - npm run test⌚ Run tests in watch mode - npm run test:coverage: Generate coverage report - npm run test:e2e: Run Playwright E2E tests - npm run test:e2e:ui: Run E2E tests with UI mode - npm run test:e2e:headed: Run E2E tests in headed mode Documentation: - Create comprehensive testing guide (tests/README.md) - Document test structure and best practices - Add troubleshooting section for common issues - Include useful commands for debugging tests Coverage Thresholds: - Branches: 70% - Functions: 70% - Lines: 70% - Statements: 70% 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
145
maternal-web/tests/README.md
Normal file
145
maternal-web/tests/README.md
Normal file
@@ -0,0 +1,145 @@
|
||||
# Testing Guide
|
||||
|
||||
This document describes the testing setup and best practices for the Maternal Web application.
|
||||
|
||||
## Test Structure
|
||||
|
||||
```
|
||||
maternal-web/
|
||||
├── components/
|
||||
│ └── **/__tests__/ # Component unit tests
|
||||
├── lib/
|
||||
│ └── **/__tests__/ # Library/utility unit tests
|
||||
├── tests/
|
||||
│ └── e2e/ # End-to-end tests
|
||||
├── jest.config.js # Jest configuration
|
||||
├── jest.setup.ts # Jest setup file
|
||||
└── playwright.config.ts # Playwright configuration
|
||||
```
|
||||
|
||||
## Running Tests
|
||||
|
||||
### Unit Tests (Jest + React Testing Library)
|
||||
|
||||
```bash
|
||||
# Run all unit tests
|
||||
npm test
|
||||
|
||||
# Run tests in watch mode
|
||||
npm run test:watch
|
||||
|
||||
# Run tests with coverage
|
||||
npm run test:coverage
|
||||
```
|
||||
|
||||
### E2E Tests (Playwright)
|
||||
|
||||
```bash
|
||||
# Run all E2E tests
|
||||
npm run test:e2e
|
||||
|
||||
# Run E2E tests with UI
|
||||
npm run test:e2e:ui
|
||||
|
||||
# Run E2E tests in headed mode (see browser)
|
||||
npm run test:e2e:headed
|
||||
```
|
||||
|
||||
## Writing Tests
|
||||
|
||||
### Unit Tests
|
||||
|
||||
Unit tests should be placed in `__tests__` directories next to the code they test.
|
||||
|
||||
Example component test:
|
||||
|
||||
```typescript
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { MyComponent } from '../MyComponent'
|
||||
|
||||
describe('MyComponent', () => {
|
||||
it('renders correctly', () => {
|
||||
render(<MyComponent title="Test" />)
|
||||
expect(screen.getByText('Test')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### E2E Tests
|
||||
|
||||
E2E tests should be placed in `tests/e2e/` directory.
|
||||
|
||||
Example E2E test:
|
||||
|
||||
```typescript
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('should navigate to page', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await expect(page.locator('h1')).toContainText('Welcome');
|
||||
});
|
||||
```
|
||||
|
||||
## Coverage Thresholds
|
||||
|
||||
The project maintains the following coverage thresholds:
|
||||
|
||||
- Branches: 70%
|
||||
- Functions: 70%
|
||||
- Lines: 70%
|
||||
- Statements: 70%
|
||||
|
||||
## CI/CD Integration
|
||||
|
||||
Tests run automatically on:
|
||||
- Every push to `master` or `main` branches
|
||||
- Every pull request
|
||||
|
||||
The CI pipeline:
|
||||
1. Runs linting
|
||||
2. Runs unit tests with coverage
|
||||
3. Runs E2E tests (Chromium only in CI)
|
||||
4. Builds the application
|
||||
5. Uploads test artifacts
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Write tests for new features** - All new features should include tests
|
||||
2. **Test user interactions** - Focus on testing what users see and do
|
||||
3. **Keep tests simple** - Each test should test one thing
|
||||
4. **Use descriptive test names** - Test names should describe what they test
|
||||
5. **Avoid implementation details** - Test behavior, not implementation
|
||||
6. **Mock external dependencies** - Use mocks for API calls and external services
|
||||
|
||||
## Useful Commands
|
||||
|
||||
```bash
|
||||
# Run specific test file
|
||||
npm test -- MyComponent.test.tsx
|
||||
|
||||
# Run tests matching pattern
|
||||
npm test -- --testNamePattern="should render"
|
||||
|
||||
# Update snapshots
|
||||
npm test -- -u
|
||||
|
||||
# Debug tests
|
||||
node --inspect-brk node_modules/.bin/jest --runInBand
|
||||
|
||||
# Generate Playwright test code
|
||||
npx playwright codegen http://localhost:3030
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Jest
|
||||
|
||||
- **Tests timing out**: Increase timeout with `jest.setTimeout(10000)` in test file
|
||||
- **Module not found**: Check `moduleNameMapper` in `jest.config.js`
|
||||
- **Async tests failing**: Make sure to `await` async operations and use `async/await` in tests
|
||||
|
||||
### Playwright
|
||||
|
||||
- **Browser not launching**: Run `npx playwright install` to install browsers
|
||||
- **Tests flaky**: Add `await page.waitForLoadState('networkidle')` or explicit waits
|
||||
- **Selectors not working**: Use Playwright Inspector with `npx playwright test --debug`
|
||||
139
maternal-web/tests/e2e/tracking.spec.ts
Normal file
139
maternal-web/tests/e2e/tracking.spec.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Activity Tracking Flow', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Login before each test
|
||||
await page.goto('/login');
|
||||
await page.fill('input[name="email"]', 'andrei@cloudz.ro');
|
||||
await page.fill('input[name="password"]', 'password');
|
||||
await page.click('button[type="submit"]');
|
||||
|
||||
// Wait for redirect to homepage
|
||||
await page.waitForURL('/');
|
||||
});
|
||||
|
||||
test('should navigate to feeding tracker', async ({ page }) => {
|
||||
// Click on feeding quick action
|
||||
await page.click('text=Feeding');
|
||||
|
||||
// Verify we're on the feeding page
|
||||
await expect(page).toHaveURL('/track/feeding');
|
||||
await expect(page.locator('text=Track Feeding')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should navigate to sleep tracker', async ({ page }) => {
|
||||
// Click on sleep quick action
|
||||
await page.click('text=Sleep');
|
||||
|
||||
// Verify we're on the sleep page
|
||||
await expect(page).toHaveURL('/track/sleep');
|
||||
await expect(page.locator('text=Track Sleep')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should navigate to diaper tracker', async ({ page }) => {
|
||||
// Click on diaper quick action
|
||||
await page.click('text=Diaper');
|
||||
|
||||
// Verify we're on the diaper page
|
||||
await expect(page).toHaveURL('/track/diaper');
|
||||
await expect(page.locator('text=Track Diaper Change')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display today summary on homepage', async ({ page }) => {
|
||||
// Check that Today's Summary section exists
|
||||
await expect(page.locator('text=Today\'s Summary')).toBeVisible();
|
||||
|
||||
// Check that the three metrics are displayed
|
||||
await expect(page.locator('text=Feedings')).toBeVisible();
|
||||
await expect(page.locator('text=Sleep')).toBeVisible();
|
||||
await expect(page.locator('text=Diapers')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should navigate to AI Assistant', async ({ page }) => {
|
||||
// Click on AI Assistant quick action
|
||||
await page.click('text=AI Assistant');
|
||||
|
||||
// Verify we're on the AI Assistant page
|
||||
await expect(page).toHaveURL('/ai-assistant');
|
||||
await expect(page.locator('text=AI Assistant')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should navigate to Analytics', async ({ page }) => {
|
||||
// Click on Analytics quick action
|
||||
await page.click('text=Analytics');
|
||||
|
||||
// Verify we're on the Analytics page
|
||||
await expect(page).toHaveURL('/analytics');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Feeding Tracker', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/login');
|
||||
await page.fill('input[name="email"]', 'andrei@cloudz.ro');
|
||||
await page.fill('input[name="password"]', 'password');
|
||||
await page.click('button[type="submit"]');
|
||||
await page.waitForURL('/');
|
||||
|
||||
// Navigate to feeding tracker
|
||||
await page.goto('/track/feeding');
|
||||
});
|
||||
|
||||
test('should have feeding type options', async ({ page }) => {
|
||||
// Check that feeding type buttons are visible
|
||||
await expect(page.locator('text=Bottle')).toBeVisible();
|
||||
await expect(page.locator('text=Breast')).toBeVisible();
|
||||
await expect(page.locator('text=Solid')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should have save button', async ({ page }) => {
|
||||
await expect(page.locator('button:has-text("Save")')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Sleep Tracker', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/login');
|
||||
await page.fill('input[name="email"]', 'andrei@cloudz.ro');
|
||||
await page.fill('input[name="password"]', 'password');
|
||||
await page.click('button[type="submit"]');
|
||||
await page.waitForURL('/');
|
||||
|
||||
// Navigate to sleep tracker
|
||||
await page.goto('/track/sleep');
|
||||
});
|
||||
|
||||
test('should have sleep type options', async ({ page }) => {
|
||||
// Check that sleep type buttons are visible
|
||||
await expect(page.locator('text=Nap')).toBeVisible();
|
||||
await expect(page.locator('text=Night')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should have save button', async ({ page }) => {
|
||||
await expect(page.locator('button:has-text("Save")')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Diaper Tracker', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/login');
|
||||
await page.fill('input[name="email"]', 'andrei@cloudz.ro');
|
||||
await page.fill('input[name="password"]', 'password');
|
||||
await page.click('button[type="submit"]');
|
||||
await page.waitForURL('/');
|
||||
|
||||
// Navigate to diaper tracker
|
||||
await page.goto('/track/diaper');
|
||||
});
|
||||
|
||||
test('should have diaper type options', async ({ page }) => {
|
||||
// Check that diaper type buttons are visible
|
||||
await expect(page.locator('text=Wet')).toBeVisible();
|
||||
await expect(page.locator('text=Dirty')).toBeVisible();
|
||||
await expect(page.locator('text=Both')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should have save button', async ({ page }) => {
|
||||
await expect(page.locator('button:has-text("Save")')).toBeVisible();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user