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:

   docker compose -f tests/docker-compose.test.yml up -d
   

2. Playwright Installation:

   npm install @playwright/test
   

Quick Start

Run All Tests:

node tests/test-suite-runner.js

Run Specific Suite:

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:

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):

HEADLESS=false node tests/test-suite-runner.js --suite=security

Individual Test Execution

Direct Playwright Execution:

npx playwright test tests/test-event-creation-security.js
npx playwright test tests/test-rich-text-editor.js --headed

With Custom Base URL:

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:

bin/seed-comprehensive-events.sh

🔍 Debugging Tests

Visual Debugging (Headed Mode)

HEADLESS=false node tests/test-suite-runner.js --suite=modal-forms

Playwright Inspector

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)

- 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

#!/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.