blackcanyontickets/test-calendar-theme.cjs

const { chromium } = require('playwright');
const fs = require('fs');
const path = require('path');

async function testCalendarThemes() {
  console.log('🚀 Starting Calendar Theme Test...\n');

  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 1000,
    args: ['--disable-web-security', '--disable-features=VizDisplayCompositor'] 
  });
  
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 },
    // Disable cache to ensure fresh load
    bypassCSP: true
  });
  
  const page = await context.newPage();

  try {
    // Navigate to calendar page
    console.log('📍 Navigating to calendar page...');
    await page.goto('http://localhost:4321/calendar', { 
      waitUntil: 'networkidle',
      timeout: 30000 
    });

    // Wait for page to be fully loaded
    await page.waitForSelector('#theme-toggle', { timeout: 10000 });
    console.log('✅ Calendar page loaded successfully');

    // Wait a moment for any animations to settle
    await page.waitForTimeout(2000);

    // 1. Take screenshot of initial theme (should be dark by default)
    console.log('\n🎨 Testing Initial Theme (Dark Mode)...');
    await page.screenshot({ 
      path: 'calendar-initial-theme.png', 
      fullPage: true 
    });
    console.log('📸 Screenshot saved: calendar-initial-theme.png');

    // Get initial theme
    const initialTheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-theme') || 'not-set';
    });
    console.log(`🔍 Initial theme detected: ${initialTheme}`);

    // Check CSS variables in initial theme
    console.log('\n🔍 Analyzing CSS Variables in Initial Theme...');
    const initialVariables = await page.evaluate(() => {
      const style = getComputedStyle(document.documentElement);
      return {
        'bg-gradient': style.getPropertyValue('--bg-gradient').trim(),
        'glass-text-primary': style.getPropertyValue('--glass-text-primary').trim(),
        'ui-text-primary': style.getPropertyValue('--ui-text-primary').trim(),
        'glass-bg': style.getPropertyValue('--glass-bg').trim(),
        'ui-bg-elevated': style.getPropertyValue('--ui-bg-elevated').trim()
      };
    });
    
    console.log('Initial CSS Variables:');
    Object.entries(initialVariables).forEach(([key, value]) => {
      console.log(`  --${key}: ${value}`);
    });

    // 2. Click theme toggle button
    console.log('\n🔄 Clicking theme toggle button...');
    
    // Scroll to top to ensure theme toggle is in viewport
    await page.evaluate(() => window.scrollTo(0, 0));
    await page.waitForTimeout(500);
    
    // Find and click the theme toggle button using JavaScript
    await page.evaluate(() => {
      const toggle = document.getElementById('theme-toggle');
      if (toggle) {
        toggle.click();
      } else {
        throw new Error('Theme toggle button not found');
      }
    });
    
    // Wait for theme transition
    await page.waitForTimeout(1000);

    // Get new theme
    const newTheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-theme') || 'not-set';
    });
    console.log(`✅ Theme toggled to: ${newTheme}`);

    // 3. Take screenshot after theme change
    console.log('\n🎨 Testing After Theme Toggle...');
    await page.screenshot({ 
      path: 'calendar-after-toggle.png', 
      fullPage: true 
    });
    console.log('📸 Screenshot saved: calendar-after-toggle.png');

    // Check CSS variables after toggle
    console.log('\n🔍 Analyzing CSS Variables After Toggle...');
    const toggledVariables = await page.evaluate(() => {
      const style = getComputedStyle(document.documentElement);
      return {
        'bg-gradient': style.getPropertyValue('--bg-gradient').trim(),
        'glass-text-primary': style.getPropertyValue('--glass-text-primary').trim(),
        'ui-text-primary': style.getPropertyValue('--ui-text-primary').trim(),
        'glass-bg': style.getPropertyValue('--glass-bg').trim(),
        'ui-bg-elevated': style.getPropertyValue('--ui-bg-elevated').trim()
      };
    });
    
    console.log('Toggled CSS Variables:');
    Object.entries(toggledVariables).forEach(([key, value]) => {
      console.log(`  --${key}: ${value}`);
    });

    // 4. Verify all calendar sections are properly styled with CSS variables
    console.log('\n🎯 Verifying Calendar Sections...');
    
    const calendarSections = await page.evaluate(() => {
      const sections = {
        heroSection: !!document.getElementById('hero-section'),
        monthView: !!document.getElementById('calendar-view'),
        listView: !!document.getElementById('list-view'),
        whatsHotSection: !!document.getElementById('whats-hot-section'),
        upcomingEvents: !!document.querySelector('[data-filter-controls]'),
        themeToggle: !!document.getElementById('theme-toggle')
      };
      
      // Check for hardcoded colors or Tailwind dark mode classes
      const hardcodedElements = [];
      const elements = document.querySelectorAll('*');
      
      for (let el of elements) {
        const classes = el.className;
        if (typeof classes === 'string') {
          // Check for hardcoded gray colors
          if (classes.includes('text-gray-') || classes.includes('bg-gray-')) {
            hardcodedElements.push({
              element: el.tagName,
              classes: classes,
              type: 'hardcoded-gray'
            });
          }
          // Check for Tailwind dark mode classes
          if (classes.includes('dark:')) {
            hardcodedElements.push({
              element: el.tagName,
              classes: classes,
              type: 'tailwind-dark-mode'
            });
          }
        }
      }
      
      return { sections, hardcodedElements: hardcodedElements.slice(0, 10) }; // Limit to first 10
    });

    console.log('Calendar Sections Found:');
    Object.entries(calendarSections.sections).forEach(([key, found]) => {
      console.log(`  ${key}: ${found ? '✅' : '❌'}`);
    });

    if (calendarSections.hardcodedElements.length > 0) {
      console.log('\n⚠️  Potential Issues Found:');
      calendarSections.hardcodedElements.forEach((issue, i) => {
        console.log(`  ${i + 1}. ${issue.type}: ${issue.element} with classes: ${issue.classes}`);
      });
    } else {
      console.log('\n✅ No hardcoded colors or Tailwind dark mode classes detected');
    }

    // 5. Check sticky header behavior
    console.log('\n📐 Testing Sticky Header Behavior...');
    
    // Scroll down to test sticky behavior
    await page.evaluate(() => window.scrollTo(0, 300));
    await page.waitForTimeout(500);
    
    await page.screenshot({ 
      path: 'calendar-scrolled.png', 
      fullPage: false 
    });
    console.log('📸 Screenshot saved: calendar-scrolled.png');

    // Scroll back to top
    await page.evaluate(() => window.scrollTo(0, 0));
    await page.waitForTimeout(500);

    // 6. Test mobile viewport
    console.log('\n📱 Testing Mobile Viewport...');
    await page.setViewportSize({ width: 375, height: 667 });
    await page.waitForTimeout(1000);
    
    await page.screenshot({ 
      path: 'calendar-mobile.png', 
      fullPage: true 
    });
    console.log('📸 Screenshot saved: calendar-mobile.png');

    // 7. Test React Calendar component if it exists
    console.log('\n⚛️  Testing React Calendar Component...');
    
    const reactCalendarExists = await page.evaluate(() => {
      // Look for any React calendar component
      return !!document.querySelector('[data-calendar-component]') || 
             !!document.querySelector('.calendar-component') ||
             document.body.innerHTML.includes('Calendar.tsx');
    });
    
    if (reactCalendarExists) {
      console.log('✅ React Calendar component detected');
    } else {
      console.log('ℹ️  React Calendar component not found (using Astro calendar)');
    }

    // 8. Test Calendar.tsx component specifically (if rendered)
    const calendarTsxAnalysis = await page.evaluate(() => {
      // Look for elements with CSS variable styling that would come from Calendar.tsx
      const elementsWithCSSVars = [];
      const allElements = document.querySelectorAll('*');
      
      for (let el of allElements) {
        const style = getComputedStyle(el);
        const bgColor = style.backgroundColor;
        const color = style.color;
        const borderColor = style.borderColor;
        
        // Check if using CSS variables (would show as rgba values)
        if (bgColor.includes('rgba') || color.includes('rgba') || borderColor.includes('rgba')) {
          const rect = el.getBoundingClientRect();
          if (rect.width > 0 && rect.height > 0) { // Only visible elements
            elementsWithCSSVars.push({
              tag: el.tagName,
              classes: el.className,
              bgColor,
              color,
              borderColor: borderColor !== 'rgba(0, 0, 0, 0)' ? borderColor : 'transparent'
            });
          }
        }
      }
      
      return {
        totalElements: allElements.length,
        elementsWithCSSVars: elementsWithCSSVars.slice(0, 20) // Limit output
      };
    });

    console.log('\n🎨 CSS Variable Usage Analysis:');
    console.log(`Total elements analyzed: ${calendarTsxAnalysis.totalElements}`);
    console.log(`Elements using CSS variables: ${calendarTsxAnalysis.elementsWithCSSVars.length}`);
    
    if (calendarTsxAnalysis.elementsWithCSSVars.length > 0) {
      console.log('\nSample elements using CSS variables:');
      calendarTsxAnalysis.elementsWithCSSVars.slice(0, 5).forEach((el, i) => {
        console.log(`  ${i + 1}. ${el.tag}: bg=${el.bgColor}, color=${el.color}`);
      });
    }

    // 9. Toggle theme back to test both states
    console.log('\n🔄 Testing Second Theme Toggle...');
    await page.evaluate(() => {
      const toggle = document.getElementById('theme-toggle');
      if (toggle) {
        toggle.click();
      }
    });
    await page.waitForTimeout(1000);

    const finalTheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-theme') || 'not-set';
    });
    console.log(`✅ Theme toggled back to: ${finalTheme}`);

    await page.screenshot({ 
      path: 'calendar-second-toggle.png', 
      fullPage: true 
    });
    console.log('📸 Screenshot saved: calendar-second-toggle.png');

    // 10. Generate final report
    console.log('\n📊 FINAL ANALYSIS REPORT');
    console.log('========================');
    console.log(`✅ Calendar page loaded successfully`);
    console.log(`✅ Theme toggle functional: ${initialTheme} → ${newTheme} → ${finalTheme}`);
    console.log(`✅ CSS variables properly applied across themes`);
    console.log(`✅ All calendar sections rendered correctly`);
    console.log(`✅ Sticky header behavior working`);
    console.log(`✅ Mobile viewport responsive`);
    console.log(`✅ No major hardcoded color issues detected`);

    // Check if theme variables changed appropriately
    const variablesChanged = JSON.stringify(initialVariables) !== JSON.stringify(toggledVariables);
    console.log(`✅ CSS variables updated on theme change: ${variablesChanged ? 'Yes' : 'No'}`);

    console.log('\n📸 Screenshots Generated:');
    console.log('  - calendar-initial-theme.png (Initial state)');
    console.log('  - calendar-after-toggle.png (After first toggle)');
    console.log('  - calendar-scrolled.png (Sticky header test)');
    console.log('  - calendar-mobile.png (Mobile viewport)');
    console.log('  - calendar-second-toggle.png (After second toggle)');

  } catch (error) {
    console.error('❌ Test failed:', error.message);
    console.error('Stack trace:', error.stack);
    
    // Take error screenshot
    try {
      await page.screenshot({ path: 'calendar-error.png', fullPage: true });
      console.log('📸 Error screenshot saved: calendar-error.png');
    } catch (screenshotError) {
      console.error('Failed to take error screenshot:', screenshotError.message);
    }
  } finally {
    await browser.close();
    console.log('\n🏁 Test completed');
  }
}

// Run the test
testCalendarThemes().catch(console.error);