blackcanyontickets/test-dark-mode-modal.cjs

const { test, expect } = require('@playwright/test');

test.describe('Dark Mode Modal Testing', () => {
  test('should test modal in dark mode with proper opacity', async ({ page }) => {
    console.log('Testing modal in dark mode...');
    
    // First, go to login page
    await page.goto('http://localhost:3001/login-new');
    await page.waitForLoadState('networkidle');
    
    // Login
    await page.fill('input[type="email"], input[name="email"]', 'tmartinez@gmail.com');
    await page.fill('input[type="password"], input[name="password"]', 'TestPassword123!');
    await page.click('button[type="submit"], button:has-text("Sign In"), button:has-text("Login")');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(3000);
    
    if (page.url().includes('/login')) {
      console.log('Login failed, skipping test');
      return;
    }
    
    // Navigate to manage page
    await page.goto('http://localhost:3001/events/d89dd7ec-01b3-4b89-a52e-b08afaf7661d/manage');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(5000);
    
    // Click on Ticket Types tab
    const ticketTypesTab = page.locator('button').filter({ hasText: /Ticket Types/i });
    if (await ticketTypesTab.count() > 0) {
      await ticketTypesTab.first().click();
      await page.waitForTimeout(3000);
    }
    
    // Test in light mode first
    console.log('Testing modal in light mode...');
    const addTicketButton = page.locator('button').filter({ hasText: /Add Ticket Type/i });
    
    if (await addTicketButton.count() > 0) {
      await addTicketButton.first().click();
      await page.waitForTimeout(2000);
      
      // Check modal background opacity in light mode
      const lightModeOpacity = await page.evaluate(() => {
        const modal = document.querySelector('[style*="background: rgba(0, 0, 0, 0.75)"]');
        if (modal) {
          const style = window.getComputedStyle(modal);
          return {
            background: style.background || modal.style.background,
            isVisible: modal.offsetParent !== null,
            zIndex: style.zIndex
          };
        }
        return null;
      });
      
      console.log('Light mode modal background:', lightModeOpacity);
      
      // Close modal by clicking X button
      const closeButton = page.locator('button[aria-label="Close modal"]');
      if (await closeButton.count() > 0) {
        console.log('Testing X button close functionality...');
        await closeButton.first().click();
        await page.waitForTimeout(1000);
        
        // Verify modal is closed
        const modalClosed = await page.evaluate(() => {
          const modal = document.querySelector('[style*="background: rgba(0, 0, 0, 0.75)"]');
          return !modal || modal.offsetParent === null;
        });
        
        console.log('Modal closed after X button click:', modalClosed);
      }
      
      await page.screenshot({ path: 'modal-light-mode-test.png', fullPage: true });
    }
    
    // Switch to dark mode - look for theme toggle
    console.log('Switching to dark mode...');
    const themeToggle = page.locator('button').filter({ hasText: /theme|dark|light/i }).first();
    const themeToggleIcon = page.locator('button svg').first(); // Often theme toggles are just icons
    
    // Try different approaches to toggle dark mode
    if (await themeToggle.count() > 0) {
      await themeToggle.click();
    } else if (await themeToggleIcon.count() > 0) {
      await themeToggleIcon.click();
    } else {
      // Try to find theme toggle by looking for common selectors
      const possibleToggles = await page.locator('button, [role="button"]').all();
      for (const toggle of possibleToggles) {
        const title = await toggle.getAttribute('title').catch(() => null);
        const ariaLabel = await toggle.getAttribute('aria-label').catch(() => null);
        if (title?.includes('theme') || title?.includes('dark') || 
            ariaLabel?.includes('theme') || ariaLabel?.includes('dark')) {
          await toggle.click();
          break;
        }
      }
    }
    
    await page.waitForTimeout(1000);
    
    // Test modal in dark mode
    console.log('Testing modal in dark mode...');
    if (await addTicketButton.count() > 0) {
      await addTicketButton.first().click();
      await page.waitForTimeout(2000);
      
      // Check modal background opacity in dark mode
      const darkModeOpacity = await page.evaluate(() => {
        const modal = document.querySelector('[style*="background: rgba(0, 0, 0, 0.75)"]');
        if (modal) {
          const style = window.getComputedStyle(modal);
          return {
            background: style.background || modal.style.background,
            isVisible: modal.offsetParent !== null,
            zIndex: style.zIndex,
            modalContent: modal.innerHTML.length > 0
          };
        }
        return null;
      });
      
      console.log('Dark mode modal background:', darkModeOpacity);
      
      // Test close button in dark mode
      const closeButtonDark = page.locator('button[aria-label="Close modal"]');
      if (await closeButtonDark.count() > 0) {
        console.log('Testing X button in dark mode...');
        await closeButtonDark.first().click();
        await page.waitForTimeout(1000);
        
        const modalClosedDark = await page.evaluate(() => {
          const modal = document.querySelector('[style*="background: rgba(0, 0, 0, 0.75)"]');
          return !modal || modal.offsetParent === null;
        });
        
        console.log('Dark mode modal closed after X button click:', modalClosedDark);
      }
      
      await page.screenshot({ path: 'modal-dark-mode-test.png', fullPage: true });
    }
    
    // Final verification - check if background opacity is correct (0.75)
    const opacityVerification = await page.evaluate(() => {
      // Look for any modals with the expected opacity
      const modalSelectors = [
        '[style*="rgba(0, 0, 0, 0.75)"]',
        '[style*="background: rgba(0, 0, 0, 0.75)"]',
        '.fixed.inset-0.backdrop-blur-sm'
      ];
      
      let found = false;
      for (const selector of modalSelectors) {
        const elements = document.querySelectorAll(selector);
        if (elements.length > 0) {
          found = true;
          console.log(`Found modal with selector: ${selector}`);
        }
      }
      
      return {
        correctOpacityFound: found,
        totalModalElements: document.querySelectorAll('.fixed.inset-0').length
      };
    });
    
    console.log('Final opacity verification:', opacityVerification);
  });
});