upskill-event-manager/tests/README.md

# HVAC Event Creation - Comprehensive Test Suite

This directory contains the complete test suite for the enhanced HVAC event creation page UI/UX features. The tests cover all components implemented during the Phase 2B template system enhancements.

## 📋 Test Coverage

### Security Tests (`test-event-creation-security.js`)
- **XSS Prevention**: Rich text editor content sanitization
- **CSRF Protection**: Nonce validation in form submissions
- **File Upload Security**: Malicious file type rejection, size limits
- **Input Validation**: SQL injection prevention, HTML sanitization
- **Content Security Policy**: Inline script blocking

### Rich Text Editor Tests (`test-rich-text-editor.js`)
- **Basic Functionality**: Text input, content synchronization
- **Toolbar Commands**: Bold, italic, lists, links
- **Content Validation**: Character limits, paste sanitization
- **Accessibility**: Keyboard shortcuts, ARIA labels
- **Error Handling**: execCommand failures, DOM corruption
- **Browser Compatibility**: Deprecated API handling

### Featured Image Upload Tests (`test-featured-image-upload.js`)
- **File Validation**: Type checking, size limits, format validation
- **Drag and Drop**: Visual feedback, multiple file handling
- **Image Management**: Preview, replacement, removal
- **Security Validation**: MIME type spoofing, malicious content
- **Accessibility**: Keyboard navigation, screen reader support
- **Error Recovery**: FileReader errors, network failures

### Searchable Selectors Tests (`test-searchable-selectors.js`)
- **Multi-select Organizers**: Search, selection limits (max 3)
- **Multi-select Categories**: Filtering, duplicate prevention
- **Single-select Venue**: Search functionality, clear selection
- **Keyboard Navigation**: Arrow keys, Enter/Escape handling
- **Accessibility**: ARIA attributes, screen reader support
- **Performance**: Large datasets, request debouncing

### Modal Forms Tests (`test-modal-forms.js`)
- **Organizer Modal**: Creation, validation, AJAX submission
- **Category Modal**: Parent selection, field validation
- **Venue Modal**: Comprehensive address fields, capacity validation
- **Modal Behavior**: Focus management, backdrop interaction
- **Error Handling**: Server errors, network failures
- **Data Integration**: Selector updates, temporary IDs

### Toggle Controls Tests (`test-toggle-controls.js`)
- **Virtual Event Toggle**: URL validation, platform-specific fields
- **RSVP Toggle**: Deadline validation, waitlist options
- **Ticketing Toggle**: Price validation, multiple ticket types
- **State Management**: Value persistence, form data updates
- **Accessibility**: ARIA attributes, keyboard support
- **Visual Feedback**: Animation, loading states

### Comprehensive Integration Tests (`test-integration-comprehensive.js`)
- **Complete Workflows**: End-to-end event creation
- **Template Application**: Enhanced feature integration
- **TEC Integration**: Ticketing system, fieldset validation
- **Responsive Behavior**: Mobile layouts, touch interactions
- **Performance Testing**: Large datasets, memory management
- **Error Recovery**: Network failures, browser crashes

## 🚀 Running Tests

### Prerequisites

1. **Docker Test Environment**:
   ```bash
   docker compose -f tests/docker-compose.test.yml up -d
   ```

2. **Playwright Installation**:
   ```bash
   npm install @playwright/test
   ```

### Quick Start

**Run All Tests:**
```bash
node tests/test-suite-runner.js
```

**Run Specific Suite:**
```bash
node tests/test-suite-runner.js --suite=security
node tests/test-suite-runner.js --suite=rich-text-editor
node tests/test-suite-runner.js --suite=integration
```

**Browser Options:**
```bash
node tests/test-suite-runner.js --browser=chromium
node tests/test-suite-runner.js --browser=firefox
node tests/test-suite-runner.js --browser=webkit
```

**Development Mode (Headed):**
```bash
HEADLESS=false node tests/test-suite-runner.js --suite=security
```

### Individual Test Execution

**Direct Playwright Execution:**
```bash
npx playwright test tests/test-event-creation-security.js
npx playwright test tests/test-rich-text-editor.js --headed
```

**With Custom Base URL:**
```bash
BASE_URL=http://localhost:3000 npx playwright test tests/test-integration-comprehensive.js
```

## 📊 Test Reports

### HTML Report
Generated automatically at `tests/reports/test-results.html`:
- Visual test results dashboard
- Suite-by-suite breakdown
- Error details and stack traces
- Performance metrics

### Console Output
Real-time test progress with:
- ✅ Pass/fail indicators per suite
- 📊 Summary statistics
- 🕐 Execution duration
- 🎯 Success rate percentage

## 🔧 Configuration

### Environment Variables
- `BASE_URL`: Test server URL (default: http://localhost:8080)
- `BROWSER`: Browser to use (chromium/firefox/webkit)
- `HEADLESS`: Run in headless mode (true/false)
- `MAX_WORKERS`: Parallel test workers (default: 4)

### Test Timeouts
- **Security Tests**: 60s (complex XSS validation)
- **Upload Tests**: 60s (file processing)
- **Integration Tests**: 120s (complete workflows)
- **Other Suites**: 30-45s

## 🧪 Test Data Requirements

### Docker Test Environment
The test suite expects:
- WordPress 6.4+ with HVAC plugin activated
- Test users with appropriate roles (hvac_trainer)
- Sample organizers, categories, and venues
- TEC plugin integration configured

### Test Fixtures
Located in `tests/fixtures/`:
- **Images**: Valid/invalid image files for upload testing
- **Test Data**: Mock API responses and form data

### Database Seeding
If using staging environment:
```bash
bin/seed-comprehensive-events.sh
```

## 🔍 Debugging Tests

### Visual Debugging (Headed Mode)
```bash
HEADLESS=false node tests/test-suite-runner.js --suite=modal-forms
```

### Playwright Inspector
```bash
npx playwright test tests/test-rich-text-editor.js --debug
```

### Console Logging
Tests include comprehensive logging for:
- Component initialization states
- User interaction sequences
- API request/response cycles
- Validation error scenarios

## ⚡ Performance Considerations

### Test Optimization
- **Parallel Execution**: 4 workers by default
- **Smart Retries**: Failed tests retry up to 2 times
- **Resource Management**: Proper cleanup between tests
- **Network Mocking**: Reduces external dependencies

### Large Dataset Testing
Some tests simulate:
- 500+ organizers for selector performance
- 200+ venues for search functionality
- Large file uploads (5MB+ images)
- Extended user interaction patterns

## 🛡️ Security Test Coverage

### Critical Vulnerabilities
- **XSS in Rich Text Editor**: Direct innerHTML injection
- **CSRF in Modal Forms**: Missing nonce validation
- **File Upload Bypass**: Malicious file type spoofing
- **Input Sanitization**: SQL injection attempts

### Compliance Testing
- **OWASP Top 10**: Coverage for web application security
- **WordPress Security Standards**: Plugin security best practices
- **Content Security Policy**: Inline script prevention

## 🚨 Known Issues and Limitations

### Browser Compatibility
- **execCommand Deprecation**: Rich text editor uses deprecated API
- **FileReader Errors**: Some browsers have upload limitations
- **Touch Events**: Mobile testing limited to viewport simulation

### Test Environment
- **Docker Dependencies**: Requires Docker for full integration
- **Network Timeouts**: Some tests sensitive to slow connections
- **File System**: Image fixture creation may fail on restricted systems

## 📚 Test Framework Architecture

### Page Object Model (POM)
- **HVACTestBase**: Common authentication and navigation
- **Component Objects**: Reusable selectors and interactions
- **Utility Functions**: Shared test helpers

### Test Structure
Each test file follows the pattern:
1. **Setup**: Login and navigate to create event page
2. **Component Tests**: Individual feature testing
3. **Integration Tests**: Combined functionality
4. **Cleanup**: State reset and resource cleanup

### Assertions
- **Visual Assertions**: Element visibility and content
- **Functional Assertions**: Behavior and state changes
- **Security Assertions**: XSS prevention and input validation
- **Performance Assertions**: Load times and responsiveness

## 🔄 CI/CD Integration

### GitHub Actions (if configured)
```yaml
- name: Run HVAC Event Tests
  run: |
    docker compose -f tests/docker-compose.test.yml up -d
    node tests/test-suite-runner.js
    docker compose -f tests/docker-compose.test.yml down    
```

### Local Pre-commit Hook
```bash
#!/bin/sh
# Run security tests before commit
node tests/test-suite-runner.js --suite=security
```

---

## 📞 Support

For test-related issues:
1. Check the HTML report for detailed error information
2. Run individual test suites to isolate problems
3. Verify Docker test environment is running
4. Review console logs for specific error messages

The test suite is designed to be comprehensive and maintainable, providing confidence in the enhanced UI/UX functionality while preventing regression of critical security features.