blackcanyontickets/test-tickets-tab-diagnosis.cjs

/**
 * Focused test to diagnose why TicketsTab component logs aren't appearing
 */

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

test('Diagnose TicketsTab component mounting issue', async ({ page }) => {
  const consoleMessages = [];
  
  // Capture all console messages
  page.on('console', msg => {
    const text = msg.text();
    consoleMessages.push({ type: msg.type(), text, timestamp: Date.now() });
    
    // Log all TicketsTab, TicketingAccessTab and component-related messages
    if (text.includes('TICKETS TAB') || 
        text.includes('TICKETING ACCESS TAB') || 
        text.includes('EventManagement') ||
        text.includes('component rendered') ||
        text.includes('TicketsTab') ||
        text.includes('React')) {
      console.log(`🔍 [${msg.type()}] ${text}`);
    }
  });

  console.log('🚀 Starting TicketsTab component diagnosis...');

  // Step 1: Navigate directly to event management page (assume user is already logged in)
  console.log('📝 Step 1: Navigating directly to event management page...');
  
  // Replace with an actual event ID from your system
  const testEventId = 'test-event-or-first-available';
  
  try {
    // First, try to get to dashboard to find an event
    await page.goto('http://localhost:3000/dashboard');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    // Look for any event management links
    const eventLinks = await page.locator('a[href*="/events/"][href*="/manage"]').all();
    
    if (eventLinks.length === 0) {
      console.log('❌ No event management links found on dashboard');
      console.log('📄 Page content preview:');
      const bodyText = await page.locator('body').textContent();
      console.log(bodyText.substring(0, 500) + '...');
      return;
    }
    
    const firstEventLink = await eventLinks[0].getAttribute('href');
    console.log(`✅ Found event management link: ${firstEventLink}`);
    
    // Navigate to the event management page
    await page.goto(`http://localhost:3000${firstEventLink}`);
    await page.waitForLoadState('networkidle');
    
  } catch (error) {
    console.log(`❌ Error navigating to event management: ${error.message}`);
    return;
  }

  // Step 2: Wait for components to load and check console
  console.log('⏳ Step 2: Waiting for React components to mount...');
  await page.waitForTimeout(5000);
  
  // Check what console messages we have so far
  const componentMessages = consoleMessages.filter(msg => 
    msg.text.includes('TICKETS TAB') || 
    msg.text.includes('TICKETING ACCESS TAB') || 
    msg.text.includes('EventManagement') ||
    msg.text.includes('component rendered')
  );
  
  console.log(`\n📊 Component-related console messages found: ${componentMessages.length}`);
  componentMessages.forEach((msg, i) => {
    console.log(`  ${i + 1}. [${msg.type}] ${msg.text}`);
  });

  // Step 3: Check if we're on the Ticketing & Access tab
  console.log('\n📋 Step 3: Checking current tab state...');
  
  // Look for active tab
  const activeTab = page.locator('[aria-selected="true"], .tab-active, .active').first();
  if (await activeTab.isVisible()) {
    const activeTabText = await activeTab.textContent();
    console.log(`Current active tab: "${activeTabText}"`);
    
    if (!activeTabText.includes('Ticketing')) {
      console.log('🎫 Clicking on Ticketing & Access tab...');
      const ticketingTab = page.locator('text="Ticketing & Access"').first();
      if (await ticketingTab.isVisible()) {
        await ticketingTab.click();
        await page.waitForTimeout(2000);
        console.log('✅ Clicked Ticketing & Access tab');
      } else {
        console.log('❌ Ticketing & Access tab not found');
      }
    }
  }

  // Step 4: Check if we're on the correct sub-tab (Ticket Types)
  console.log('\n🎟️  Step 4: Checking sub-tab state...');
  
  // Look for sub-tab navigation
  const subTabs = await page.locator('button:has-text("Ticket Types"), button:has-text("Ticket")').all();
  console.log(`Found ${subTabs.length} potential ticket-related sub-tabs`);
  
  if (subTabs.length > 0) {
    const ticketTypesTab = subTabs[0];
    const isActive = await ticketTypesTab.evaluate(el => el.classList.contains('active') || el.getAttribute('aria-selected') === 'true');
    console.log(`Ticket Types tab active: ${isActive}`);
    
    if (!isActive) {
      console.log('🎫 Clicking Ticket Types sub-tab...');
      await ticketTypesTab.click();
      await page.waitForTimeout(2000);
    }
  }

  // Step 5: Check for React component mounting
  console.log('\n⚛️  Step 5: Checking for React component mounting...');
  
  const reactCheck = await page.evaluate(() => {
    // Check for astro islands that might contain TicketsTab
    const islands = Array.from(document.querySelectorAll('astro-island'));
    const islandInfo = islands.map(island => ({
      component: island.getAttribute('component-export'),
      url: island.getAttribute('component-url'),
      props: island.getAttribute('props'),
      hasContent: island.innerHTML.length > 0,
      contentPreview: island.innerHTML.substring(0, 100)
    }));
    
    // Check for any elements that look like they should contain TicketsTab
    const ticketElements = Array.from(document.querySelectorAll('[class*="ticket"], [id*="ticket"], [data-testid*="ticket"]'));
    
    return {
      islandCount: islands.length,
      islandInfo,
      ticketElementsCount: ticketElements.length,
      bodyInnerHTMLLength: document.body.innerHTML.length
    };
  });
  
  console.log('React mounting check:', JSON.stringify(reactCheck, null, 2));

  // Step 6: Look specifically for TicketsTab component output
  console.log('\n🔍 Step 6: Looking for TicketsTab-specific elements...');
  
  // Look for elements that should be rendered by TicketsTab
  const ticketTabElements = [
    'text="No ticket types created yet"',
    'text="Create Your First Ticket Type"',
    'text="Add Ticket Type"',
    'text="Ticket Types & Pricing"',
    '[data-testid="tickets-tab"]'
  ];
  
  const foundElements = [];
  for (const selector of ticketTabElements) {
    const element = page.locator(selector).first();
    const isVisible = await element.isVisible();
    foundElements.push({ selector, visible: isVisible });
    if (isVisible) {
      console.log(`✅ Found: ${selector}`);
    }
  }
  
  const visibleCount = foundElements.filter(e => e.visible).length;
  console.log(`Found ${visibleCount} out of ${foundElements.length} expected TicketsTab elements`);

  // Step 7: Check for any error states
  console.log('\n❌ Step 7: Checking for error states...');
  
  const errorElements = await page.locator('.error, [class*="error"], text="Error"').all();
  console.log(`Found ${errorElements.length} potential error elements`);
  
  for (let i = 0; i < Math.min(errorElements.length, 3); i++) {
    const errorText = await errorElements[i].textContent();
    console.log(`  Error ${i + 1}: ${errorText}`);
  }

  // Step 8: Try to force trigger TicketsTab by checking props
  console.log('\n🔧 Step 8: Checking component props and state...');
  
  const propsCheck = await page.evaluate(() => {
    // Look for any global variables or state that might indicate what's happening
    const urlParams = new URLSearchParams(window.location.search);
    const pathname = window.location.pathname;
    
    // Check if there are any global React states or props
    const reactElements = document.querySelectorAll('[data-react*]');
    
    return {
      currentURL: window.location.href,
      pathname,
      urlParams: Object.fromEntries(urlParams.entries()),
      reactElementsFound: reactElements.length,
      documentTitle: document.title
    };
  });
  
  console.log('Page state check:', JSON.stringify(propsCheck, null, 2));

  // Step 9: Final diagnosis
  console.log('\n📊 FINAL DIAGNOSIS:');
  console.log('='.repeat(50));
  
  const ticketsTabMessages = consoleMessages.filter(msg => msg.text.includes('TICKETS TAB'));
  const ticketingAccessMessages = consoleMessages.filter(msg => msg.text.includes('TICKETING ACCESS TAB'));
  const eventManagementMessages = consoleMessages.filter(msg => msg.text.includes('EventManagement'));
  
  console.log(`TicketsTab console messages: ${ticketsTabMessages.length}`);
  console.log(`TicketingAccessTab console messages: ${ticketingAccessMessages.length}`);
  console.log(`EventManagement console messages: ${eventManagementMessages.length}`);
  console.log(`Total component messages: ${componentMessages.length}`);
  console.log(`React islands found: ${reactCheck.islandCount}`);
  console.log(`TicketsTab elements visible: ${visibleCount}/${foundElements.length}`);
  
  if (ticketsTabMessages.length === 0 && ticketingAccessMessages.length > 0) {
    console.log('\n🚨 DIAGNOSIS: TicketingAccessTab is rendering but TicketsTab is NOT');
    console.log('This suggests:');
    console.log('  1. TicketingAccessTab component is mounting correctly');
    console.log('  2. The sub-tab system is working');
    console.log('  3. But TicketsTab is not being rendered by TicketingAccessTab');
    console.log('  4. Check if activeSubTab state is set to "tickets"');
    console.log('  5. Check if TicketsTab component has rendering conditions that are failing');
  } else if (ticketsTabMessages.length === 0 && ticketingAccessMessages.length === 0) {
    console.log('\n🚨 DIAGNOSIS: Neither TicketingAccessTab nor TicketsTab are rendering');
    console.log('This suggests:');
    console.log('  1. EventManagement component may not be passing correct props');
    console.log('  2. The tab navigation system is not working');
    console.log('  3. React components are not mounting at all');
    console.log('  4. Check if EventManagement is finding the correct tab configuration');
  }

  // Take screenshot
  await page.screenshot({ 
    path: '/home/tyler/apps/bct-whitelabel/tickets-tab-diagnosis.png', 
    fullPage: true 
  });
  console.log('\n📸 Screenshot saved: tickets-tab-diagnosis.png');
  
  console.log('\n✅ Diagnosis complete!');
  await page.waitForTimeout(5000);
});