upskill-event-manager/test-trainer-card-click.js

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

console.log('🎯 TRAINER CARD CLICK TEST');
console.log('=========================');

const BASE_URL = process.env.BASE_URL || 'https://upskill-staging.measurequick.com';

(async () => {
  let browser;

  try {
    browser = await chromium.launch({ 
      headless: process.env.HEADLESS !== 'false',
      timeout: 30000
    });
    
    const page = await browser.newPage();
    
    console.log('🌐 Loading Find a Trainer page...');
    await page.goto(`${BASE_URL}/find-a-trainer/`);
    await page.waitForLoadState('networkidle', { timeout: 20000 });
    
    // Check for trainer cards with the hvac-open-profile class
    console.log('\n🃏 Checking trainer cards...');
    const clickableCards = await page.locator('.hvac-trainer-card.hvac-open-profile').count();
    console.log(`Clickable trainer cards found: ${clickableCards}`);
    
    if (clickableCards > 0) {
      // Test clicking on the first card
      console.log('\n🖱️ Testing card click functionality...');
      
      // Get the first card's data
      const firstCard = page.locator('.hvac-trainer-card.hvac-open-profile').first();
      const cardData = await firstCard.evaluate(el => ({
        profileId: el.getAttribute('data-profile-id'),
        hasHoverCursor: window.getComputedStyle(el).cursor === 'pointer'
      }));
      
      console.log(`First card profile ID: ${cardData.profileId}`);
      console.log(`Card has pointer cursor: ${cardData.hasHoverCursor}`);
      
      // Check if modal exists
      const modalExists = await page.locator('#hvac-trainer-modal').count();
      console.log(`Trainer modal container exists: ${modalExists > 0}`);
      
      // Click the card (not just the name)
      await firstCard.click();
      
      // Wait for modal to potentially open
      await page.waitForTimeout(2000);
      
      // Check if modal opened
      const modalVisible = await page.locator('#hvac-trainer-modal').isVisible();
      console.log(`Modal opened after card click: ${modalVisible}`);
      
      if (modalVisible) {
        console.log('✅ SUCCESS: Entire card is clickable and opens profile modal');
        
        // Check modal content
        const modalTitle = await page.locator('.hvac-modal-title').textContent();
        console.log(`Modal title: "${modalTitle}"`);
        
        // Close modal for cleanup
        const closeBtn = page.locator('.hvac-modal-close');
        if (await closeBtn.count() > 0) {
          await closeBtn.click();
        }
      } else {
        console.log('❌ FAILED: Card click did not open modal');
        
        // Check if there were any console errors
        page.on('console', msg => {
          if (msg.type() === 'error') {
            console.log(`   JS Error: ${msg.text()}`);
          }
        });
      }
      
      // Test hover effects
      console.log('\n🎨 Testing hover effects...');
      await firstCard.hover();
      await page.waitForTimeout(500);
      
      const hoverStyles = await firstCard.evaluate(el => {
        const computed = window.getComputedStyle(el);
        return {
          transform: computed.transform,
          boxShadow: computed.boxShadow
        };
      });
      
      console.log(`Hover transform applied: ${hoverStyles.transform !== 'none'}`);
      console.log(`Hover shadow applied: ${hoverStyles.boxShadow !== 'none'}`);
      
    } else {
      console.log('❌ No clickable trainer cards found on page');
    }
    
    // Check champion cards (should not be clickable)
    const championCards = await page.locator('.hvac-trainer-card.hvac-champion-card:not(.hvac-open-profile)').count();
    console.log(`\n👑 Champion cards (non-clickable): ${championCards}`);
    
    // Final results
    console.log('\n📊 TEST RESULTS');
    console.log('===============');
    
    const success = clickableCards > 0;
    console.log(`Clickable Cards: ${clickableCards}`);
    console.log(`Implementation: ${success ? '✅ SUCCESS' : '❌ FAILED'}`);

  } catch (error) {
    console.error('\n💥 Error:', error.message);
  } finally {
    if (browser) {
      await browser.close();
    }
  }
})();