frontend/src/responsive-design-test.js

/**
 * Responsive Design Test Suite
 * This file contains tests to validate responsive design implementation
 */

// Test configuration
const testConfig = {
  breakpoints: {
    xs: 0,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
    '3xl': 1920
  },
  testScenarios: [
    'mobile-navigation',
    'responsive-layouts',
    'touch-interactions',
    'accessibility',
    'performance',
    'typography-scaling',
    'grid-systems',
    'spacing-scaling'
  ]
};

// Test results storage
const testResults = {
  passed: 0,
  failed: 0,
  total: 0,
  details: []
};

/**
 * Test Mobile Navigation
 */
function testMobileNavigation() {
  console.log('Testing Mobile Navigation...');
  
  const tests = [
    {
      name: 'Hamburger Menu Button',
      check: () => {
        const button = document.querySelector('.mobile-menu-button');
        return button && button.getAttribute('aria-label');
      }
    },
    {
      name: 'Mobile Menu Overlay',
      check: () => {
        const overlay = document.querySelector('.mobile-menu-overlay');
        return overlay && overlay.getAttribute('aria-label');
      }
    },
    {
      name: 'Skip Link',
      check: () => {
        const skipLink = document.querySelector('.skip-link');
        return skipLink && skipLink.getAttribute('href') === '#main-content';
      }
    },
    {
      name: 'Touch Target Size',
      check: () => {
        const buttons = document.querySelectorAll('.mobile-menu-button');
        return Array.from(buttons).every(btn => 
          btn.offsetWidth >= 44 && btn.offsetHeight >= 44
        );
      }
    }
  ];

  return runTests(tests, 'Mobile Navigation');
}

/**
 * Test Responsive Layouts
 */
function testResponsiveLayouts() {
  console.log('Testing Responsive Layouts...');
  
  const tests = [
    {
      name: 'Container Max Width',
      check: () => {
        const containers = document.querySelectorAll('.container');
        return Array.from(containers).every(container => {
          const style = window.getComputedStyle(container);
          return style.maxWidth && style.maxWidth !== 'none';
        });
      }
    },
    {
      name: 'Grid System',
      check: () => {
        const grids = document.querySelectorAll('.grid');
        return Array.from(grids).every(grid => {
          const style = window.getComputedStyle(grid);
          return style.display === 'grid' || style.display === 'flex';
        });
      }
    },
    {
      name: 'Responsive Spacing',
      check: () => {
        const elements = document.querySelectorAll('[class*="p-"], [class*="m-"]');
        return elements.length > 0;
      }
    },
    {
      name: 'Flexbox Layout',
      check: () => {
        const flexElements = document.querySelectorAll('.flex');
        return Array.from(flexElements).every(el => {
          const style = window.getComputedStyle(el);
          return style.display === 'flex';
        });
      }
    }
  ];

  return runTests(tests, 'Responsive Layouts');
}

/**
 * Test Touch Interactions
 */
function testTouchInteractions() {
  console.log('Testing Touch Interactions...');
  
  const tests = [
    {
      name: 'Touch Optimization',
      check: () => {
        const touchElements = document.querySelectorAll('.touch-optimized');
        return touchElements.length > 0;
      }
    },
    {
      name: 'Tap Highlight',
      check: () => {
        const buttons = document.querySelectorAll('button');
        return Array.from(buttons).every(btn => {
          const style = window.getComputedStyle(btn);
          return style.getPropertyValue('-webkit-tap-highlight-color') === 'transparent';
        });
      }
    },
    {
      name: 'Touch Action',
      check: () => {
        const interactiveElements = document.querySelectorAll('button, a, [role="button"]');
        return Array.from(interactiveElements).every(el => {
          const style = window.getComputedStyle(el);
          return style.getPropertyValue('touch-action') === 'manipulation';
        });
      }
    },
    {
      name: 'Mobile Acceleration',
      check: () => {
        const accelerated = document.querySelectorAll('.mobile-accelerated');
        return accelerated.length > 0;
      }
    }
  ];

  return runTests(tests, 'Touch Interactions');
}

/**
 * Test Accessibility
 */
function testAccessibility() {
  console.log('Testing Accessibility...');
  
  const tests = [
    {
      name: 'ARIA Labels',
      check: () => {
        const elementsWithAria = document.querySelectorAll('[aria-label], [aria-labelledby], [aria-describedby]');
        return elementsWithAria.length > 0;
      }
    },
    {
      name: 'Focus Management',
      check: () => {
        const focusableElements = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
        return focusableElements.length > 0;
      }
    },
    {
      name: 'Skip Link',
      check: () => {
        const skipLink = document.querySelector('.skip-link');
        return skipLink && skipLink.getAttribute('href') === '#main-content';
      }
    },
    {
      name: 'High Contrast Support',
      check: () => {
        const highContrastElements = document.querySelectorAll('[style*="contrast"]');
        return highContrastElements.length > 0;
      }
    },
    {
      name: 'Reduced Motion',
      check: () => {
        const reducedMotionElements = document.querySelectorAll('.mobile-reduced-motion');
        return reducedMotionElements.length > 0;
      }
    }
  ];

  return runTests(tests, 'Accessibility');
}

/**
 * Test Performance
 */
function testPerformance() {
  console.log('Testing Performance...');
  
  const tests = [
    {
      name: 'Lazy Loading',
      check: () => {
        const lazyElements = document.querySelectorAll('[loading="lazy"], .lazy-load');
        return lazyElements.length > 0;
      }
    },
    {
      name: 'Hardware Acceleration',
      check: () => {
        const accelerated = document.querySelectorAll('.mobile-accelerated');
        return accelerated.length > 0;
      }
    },
    {
      name: 'Render Optimization',
      check: () => {
        const optimized = document.querySelectorAll('.mobile-render-optimized');
        return optimized.length > 0;
      }
    },
    {
      name: 'Animation Optimization',
      check: () => {
        const optimized = document.querySelectorAll('.mobile-optimized-animation');
        return optimized.length > 0;
      }
    }
  ];

  return runTests(tests, 'Performance');
}

/**
 * Test Typography Scaling
 */
function testTypographyScaling() {
  console.log('Testing Typography Scaling...');
  
  const tests = [
    {
      name: 'Fluid Typography',
      check: () => {
        const fluidElements = document.querySelectorAll('.text-fluid, .text-fluid-lg, .text-fluid-xl');
        return fluidElements.length > 0;
      }
    },
    {
      name: 'Responsive Font Sizes',
      check: () => {
        const responsiveElements = document.querySelectorAll('[class*="text-responsive"]');
        return responsiveElements.length > 0;
      }
    },
    {
      name: 'Line Height Scaling',
      check: () => {
        const elementsWithLineHeight = document.querySelectorAll('[class*="leading-responsive"]');
        return elementsWithLineHeight.length > 0;
      }
    },
    {
      name: 'Mobile Readability',
      check: () => {
        const readableElements = document.querySelectorAll('.mobile-readable, .mobile-readable-large');
        return readableElements.length > 0;
      }
    }
  ];

  return runTests(tests, 'Typography Scaling');
}

/**
 * Test Grid Systems
 */
function testGridSystems() {
  console.log('Testing Grid Systems...');
  
  const tests = [
    {
      name: 'Responsive Grid',
      check: () => {
        const gridElements = document.querySelectorAll('.grid');
        return Array.from(gridElements).every(grid => {
          const style = window.getComputedStyle(grid);
          return style.display === 'grid' || style.display === 'flex';
        });
      }
    },
    {
      name: 'Grid Breakpoints',
      check: () => {
        const gridElements = document.querySelectorAll('[class*="grid-cols-"]');
        return gridElements.length > 0;
      }
    },
    {
      name: 'Grid Gap',
      check: () => {
        const gridElements = document.querySelectorAll('[class*="gap-"]');
        return gridElements.length > 0;
      }
    },
    {
      name: 'Grid Alignment',
      check: () => {
        const gridElements = document.querySelectorAll('[class*="justify-"], [class*="items-"]');
        return gridElements.length > 0;
      }
    }
  ];

  return runTests(tests, 'Grid Systems');
}

/**
 * Test Spacing Scaling
 */
function testSpacingScaling() {
  console.log('Testing Spacing Scaling...');
  
  const tests = [
    {
      name: 'Responsive Padding',
      check: () => {
        const paddingElements = document.querySelectorAll('[class*="p-"]');
        return paddingElements.length > 0;
      }
    },
    {
      name: 'Responsive Margin',
      check: () => {
        const marginElements = document.querySelectorAll('[class*="m-"]');
        return marginElements.length > 0;
      }
    },
    {
      name: 'Spacing Breakpoints',
      check: () => {
        const responsiveElements = document.querySelectorAll('[class*="sm:"], [class*="md:"], [class*="lg:"]');
        return responsiveElements.length > 0;
      }
    },
    {
      name: 'Container Padding',
      check: () => {
        const containers = document.querySelectorAll('.container');
        return Array.from(containers).every(container => {
          const style = window.getComputedStyle(container);
          return style.paddingLeft && style.paddingRight;
        });
      }
    }
  ];

  return runTests(tests, 'Spacing Scaling');
}

/**
 * Run individual tests
 */
function runTests(tests, category) {
  const categoryResults = {
    category,
    passed: 0,
    failed: 0,
    details: []
  };

  tests.forEach(test => {
    testResults.total++;
    categoryResults.total = testResults.total;

    try {
      const result = test.check();
      if (result) {
        testResults.passed++;
        categoryResults.passed++;
        categoryResults.details.push({ name: test.name, status: 'PASSED' });
      } else {
        testResults.failed++;
        categoryResults.failed++;
        categoryResults.details.push({ name: test.name, status: 'FAILED' });
      }
    } catch (error) {
      testResults.failed++;
      categoryResults.failed++;
      categoryResults.details.push({ name: test.name, status: 'ERROR', error: error.message });
    }
  });

  return categoryResults;
}

/**
 * Run all tests
 */
function runAllTests() {
  console.log('🚀 Starting Responsive Design Tests...\n');
  
  const results = [
    testMobileNavigation(),
    testResponsiveLayouts(),
    testTouchInteractions(),
    testAccessibility(),
    testPerformance(),
    testTypographyScaling(),
    testGridSystems(),
    testSpacingScaling()
  ];

  // Generate report
  generateReport(results);
}

/**
 * Generate test report
 */
function generateReport(results) {
  console.log('\n📊 Responsive Design Test Report');
  console.log('='.repeat(50));
  
  results.forEach(result => {
    console.log(`\n${result.category.toUpperCase()}`);
    console.log('-'.repeat(30));
    console.log(`Passed: ${result.passed}`);
    console.log(`Failed: ${result.failed}`);
    console.log(`Total: ${result.passed + result.failed}`);
    
    if (result.details.length > 0) {
      console.log('\nDetails:');
      result.details.forEach(detail => {
        const status = detail.status === 'PASSED' ? '✅' : detail.status === 'FAILED' ? '❌' : '⚠️';
        console.log(`  ${status} ${detail.name}`);
        if (detail.error) {
          console.log(`     Error: ${detail.error}`);
        }
      });
    }
  });

  console.log('\n🎯 Overall Results');
  console.log('='.repeat(50));
  console.log(`Total Tests: ${testResults.total}`);
  console.log(`Passed: ${testResults.passed}`);
  console.log(`Failed: ${testResults.failed}`);
  console.log(`Success Rate: ${((testResults.passed / testResults.total) * 100).toFixed(2)}%`);
  
  if (testResults.failed === 0) {
    console.log('\n🎉 All tests passed! Responsive design implementation is complete.');
  } else {
    console.log('\n⚠️ Some tests failed. Please review the details above.');
  }
}

/**
 * Test specific breakpoint
 */
function testBreakpoint(breakpoint) {
  const width = testConfig.breakpoints[breakpoint];
  if (!width) {
    console.error(`Unknown breakpoint: ${breakpoint}`);
    return;
  }

  // Set viewport width
  window.innerWidth = width;
  window.dispatchEvent(new Event('resize'));

  console.log(`\n📱 Testing ${breakpoint.toUpperCase()} breakpoint (${width}px)`);
  
  // Run tests for this breakpoint
  const results = [
    testResponsiveLayouts(),
    testTypographyScaling(),
    testSpacingScaling()
  ];

  return results;
}

/**
 * Initialize responsive design testing
 */
function initResponsiveTesting() {
  console.log('🔧 Responsive Design Test Suite Initialized');
  console.log('Available functions:');
  console.log('  - runAllTests()');
  console.log('  - testBreakpoint(breakpoint)');
  console.log('  - testMobileNavigation()');
  console.log('  - testResponsiveLayouts()');
  console.log('  - testTouchInteractions()');
  console.log('  - testAccessibility()');
  console.log('  - testPerformance()');
  console.log('  - testTypographyScaling()');
  console.log('  - testGridSystems()');
  console.log('  - testSpacingScaling()');
}

// Initialize testing
initResponsiveTesting();

// Export functions for external use
window.responsiveTests = {
  runAllTests,
  testBreakpoint,
  testMobileNavigation,
  testResponsiveLayouts,
  testTouchInteractions,
  testAccessibility,
  testPerformance,
  testTypographyScaling,
  testGridSystems,
  testSpacingScaling
};

export default {
  runAllTests,
  testBreakpoint,
  testMobileNavigation,
  testResponsiveLayouts,
  testTouchInteractions,
  testAccessibility,
  testPerformance,
  testTypographyScaling,
  testGridSystems,
  testSpacingScaling
};