Set up comprehensive frontend testing infrastructure

- Install Jest for unit testing with React Testing Library - Install Playwright for end-to-end testing - Configure Jest with proper TypeScript support and module mapping - Create test setup files and utilities for both unit and e2e tests Components: * Jest configuration with coverage thresholds * Playwright configuration with browser automation * Unit tests for LoginForm, AuthContext, and useSocketIO hook * E2E tests for authentication, dashboard, and agents workflows * GitHub Actions workflow for automated testing * Mock data and API utilities for consistent testing * Test documentation with best practices Testing features: - Unit tests with 70% coverage threshold - E2E tests with API mocking and user journey testing - CI/CD integration for automated test runs - Cross-browser testing support with Playwright - Authentication system testing end-to-end 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-11 14:06:34 +10:00
parent c6d69695a8
commit aacb45156b
6109 changed files with 777927 additions and 1 deletions
--- a/frontend/TESTING.md
+++ b/frontend/TESTING.md
@@ -0,0 +1,207 @@
+# Frontend Testing Infrastructure
+
+This document describes the testing setup for the Hive frontend application.
+
+## Overview
+
+The testing infrastructure includes:
+- **Unit Tests**: Jest + React Testing Library for component and hook testing
+- **End-to-End Tests**: Playwright for full user journey testing
+- **Type Checking**: TypeScript compiler for type safety
+- **Linting**: ESLint for code quality
+
+## Test Commands
+
+### Unit Tests
+```bash
+# Run all unit tests
+npm run test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage report
+npm run test:coverage
+```
+
+### End-to-End Tests
+```bash
+# Run e2e tests headlessly
+npm run test:e2e
+
+# Run e2e tests with UI
+npm run test:e2e:ui
+
+# Debug e2e tests
+npm run test:e2e:debug
+```
+
+### All Tests
+```bash
+# Run both unit and e2e tests
+npm run test:all
+```
+
+## Test Structure
+
+### Unit Tests
+- Location: `src/**/__tests__/` or `src/**/*.test.tsx`
+- Framework: Jest + React Testing Library
+- Configuration: `jest.config.js`
+- Setup: `src/test/setup.ts`
+- Utilities: `src/test/utils.tsx`
+
+Example test file structure:
+```
+src/
+├── components/
+│   └── auth/
+│       ├── LoginForm.tsx
+│       └── __tests__/
+│           └── LoginForm.test.tsx
+├── hooks/
+│   └── __tests__/
+│       └── useSocketIO.test.ts
+└── test/
+    ├── setup.ts
+    └── utils.tsx
+```
+
+### End-to-End Tests
+- Location: `e2e/`
+- Framework: Playwright
+- Configuration: `playwright.config.ts`
+- Global Setup: `e2e/global-setup.ts`
+
+Example e2e test structure:
+```
+e2e/
+├── auth.spec.ts
+├── dashboard.spec.ts
+├── agents.spec.ts
+└── global-setup.ts
+```
+
+## Testing Best Practices
+
+### Unit Testing
+1. **Test user interactions, not implementation details**
+2. **Use semantic queries** (getByRole, getByLabelText)
+3. **Mock external dependencies** (APIs, WebSocket)
+4. **Test error states and loading states**
+5. **Maintain high coverage** (70%+ threshold)
+
+### E2E Testing
+1. **Test critical user journeys**
+2. **Mock API responses** for consistent testing
+3. **Use Page Object Model** for complex interactions
+4. **Test responsive design** across viewports
+5. **Include accessibility checks**
+
+### Mocking Strategies
+
+#### API Mocking (Unit Tests)
+```typescript
+jest.mock('../../api/auth');
+const mockAuthApi = authApi as jest.Mocked<typeof authApi>;
+
+mockAuthApi.login.mockResolvedValue(mockApiResponses.auth.login);
+```
+
+#### API Mocking (E2E Tests)
+```typescript
+await page.route('**/api/auth/login', async route => {
+  await route.fulfill({
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify(mockResponse),
+  });
+});
+```
+
+## Coverage Requirements
+
+- **Statements**: 70%
+- **Branches**: 70%
+- **Functions**: 70%
+- **Lines**: 70%
+
+## CI/CD Integration
+
+Tests run automatically on:
+- Push to main branches
+- Pull requests
+- Frontend code changes
+
+GitHub Actions workflow: `.github/workflows/frontend-tests.yml`
+
+## Debugging Tests
+
+### Unit Tests
+```bash
+# Debug specific test
+npm run test -- --testNamePattern="LoginForm"
+
+# Debug with Node.js inspector
+node --inspect-brk node_modules/.bin/jest --runInBand
+```
+
+### E2E Tests
+```bash
+# Run in headed mode
+npm run test:e2e:debug
+
+# Run specific test
+npx playwright test auth.spec.ts
+
+# Open test results
+npx playwright show-report
+```
+
+## Test Data
+
+Mock data is centralized in `src/test/utils.tsx`:
+- `mockUser`: Test user data
+- `mockAgent`: Test agent data
+- `mockTask`: Test task data
+- `mockApiResponses`: API response templates
+
+## Environment Setup
+
+### Prerequisites
+- Node.js 18+
+- Chrome/Chromium (for Playwright)
+
+### Installation
+```bash
+cd frontend
+npm install
+npx playwright install chromium
+```
+
+### Configuration Files
+- `jest.config.js`: Jest configuration
+- `playwright.config.ts`: Playwright configuration
+- `src/test/setup.ts`: Jest test setup
+- `e2e/global-setup.ts`: Playwright global setup
+
+## Common Issues
+
+### Jest Issues
+- **Module resolution**: Check `moduleNameMapping` in jest.config.js
+- **Async tests**: Use `act()` for async operations
+- **React warnings**: Mock console methods in setup
+
+### Playwright Issues
+- **Timeouts**: Increase timeout in playwright.config.ts
+- **Flaky tests**: Add proper wait conditions
+- **Browser not found**: Run `npx playwright install`
+
+## Contributing
+
+When adding new features:
+1. Write unit tests for components/hooks
+2. Add e2e tests for new user flows
+3. Update mock data if needed
+4. Ensure coverage thresholds are met
+5. Test both success and error scenarios