Disaster Response Dashboard

A comprehensive emergency response management system with real-time situational awareness, 3D terrain visualization, and intelligent routing capabilities.

🚀 Features

• Real-time Map Integration: Live Mapbox integration with 3D terrain and building visualization
• Emergency Response Tools: Route planning, waypoint management, and hazard assessment
• 3D Terrain Mapping: Advanced elevation visualization and building extrusion
• Intelligent Routing: AI-powered route optimization for emergency scenarios
• Cross-platform Support: Responsive design for desktop and mobile devices

🧪 Testing Strategy

Hybrid Testing Architecture

We've implemented a comprehensive testing strategy that balances speed, reliability, and real-world validation:

Testing Pyramid

    🔺 E2E Tests (5%)
    🔺 Integration Tests (10%) 
    🔺 Component Tests (25%)
    🔺 Unit Tests (60%)

Provider Selection

• Development/Production: Uses real MapboxProvider when valid token is available
• Testing: Automatically falls back to FakeMapProvider for speed and reliability
• Easy Switching: Command-line tools to switch between providers

Test Commands

# Fast development cycle (unit + smoke tests)
npm run test:fast

# Full validation (unit + integration + E2E)
npm run test:ci

# Nightly comprehensive testing
npm run test:nightly

# Provider management
npm run map:fake    # Use FakeMapProvider for speed
npm run map:real    # Use real MapboxProvider with token
npm run map:config  # Check current configuration

Test Categories

• Unit Tests (Vitest): Fast, isolated tests for utilities and logic
• Integration Tests (Playwright): Browser capabilities and API mocking
• E2E Tests (Playwright): Full application validation with real Mapbox
• Smoke Tests: Quick validation of core functionality

Current Test Status

• ✅ Unit Tests: 34/34 passing
• ✅ Integration Tests: 18/18 passing
• ✅ E2E Smoke Tests: 21/21 passing
• 🔄 Full E2E Suite: 47/153 passing (core features working, advanced features in development)

🛠️ Development Setup

Prerequisites

• Node.js 18+
• npm or yarn
• Mapbox access token (optional, falls back to fake provider)

Installation

# Clone the repository
git clone <repository-url>
cd disaster-response-dashboard/frontend

# Install dependencies
npm install

# Set up environment (optional)
cp config.env.example .env
# Edit .env and add your Mapbox token if desired

Environment Configuration

# Check current map provider configuration
npm run map:config

# Switch to fake provider for fast development
npm run map:fake

# Switch to real Mapbox provider
npm run map:real
# Then edit .env with your token

Development Commands

# Start development server
npm run dev

# Run tests
npm run test:fast      # Fast development cycle
npm run test:ci        # Full validation
npm run test:nightly   # Comprehensive testing

# Code quality
npm run lint           # ESLint checking
npm run lint:fix       # Auto-fix linting issues
npm run format         # Prettier formatting
npm run type-check     # TypeScript validation

🏗️ Architecture

Map Provider Abstraction

• MapProvider Interface: Abstract interface for map operations
• MapboxProvider: Production implementation using real Mapbox
• FakeMapProvider: Test implementation for fast, reliable testing
• Hybrid Selection: Automatic provider selection based on environment and token availability

Test API Integration

• Deterministic Testing: window.__mapTestApi__ for reliable test assertions
• Network Isolation: MSW and Playwright route interception for hermetic tests
• Scenario Builder: Programmatic test data generation for complex scenarios

Component Structure

• MapProviderComponent: React context provider for map instances
• SimpleMapboxTest: Main map component with provider abstraction
• Scenario Integration: Dynamic test data and map feature management

📊 Performance & Reliability

Test Performance

• Unit Tests: <1s execution time
• Smoke Tests: ~3s execution time
• Full E2E: ~3.5min execution time
• Cross-browser: Chromium, Firefox, WebKit support

Reliability Features

• Automatic Fallbacks: FakeMapProvider when Mapbox unavailable
• Network Mocking: No external dependencies in tests
• Deterministic Results: Consistent test outcomes across runs
• Error Recovery: Graceful degradation under stress conditions

🚧 Development Roadmap

Phase 1: Core Infrastructure ✅

• Map provider abstraction
• Hybrid testing strategy
• Test API integration
• Basic map functionality

Phase 2: Advanced Features 🔄

• 3D building layers and extrusion
• Terrain data integration
• Advanced routing algorithms
• Performance optimizations

Phase 3: Emergency Response Tools 📋

• Waypoint management system
• Hazard assessment tools
• Route optimization engine
• Real-time collaboration features

Phase 4: Production Readiness 🎯

• Performance benchmarking
• Stress testing validation
• Security hardening
• Deployment automation

🤝 Contributing

Development Workflow

1. Feature Development: Use npm run test:fast for rapid iteration
2. Integration Testing: Run npm run test:ci before committing
3. Provider Selection: Use fake provider for development, real provider for validation
4. Test Coverage: Maintain test coverage for all new features

Testing Guidelines

• Unit Tests: Test individual functions and utilities
• Integration Tests: Test component interactions and API mocking
• E2E Tests: Test complete user workflows
• Performance Tests: Validate performance budgets and stress handling

Code Quality

• TypeScript: Strict type checking enabled
• ESLint: Code style and best practices enforcement
• Prettier: Consistent code formatting
• Test Coverage: Maintain high test coverage for reliability

📝 License

[Add your license information here]

🆘 Support

For development questions or issues:

1. Check the test status: npm run test:fast
2. Verify provider configuration: npm run map:config
3. Review test output for specific error details
4. Check browser console for runtime errors