upskill-event-manager/wordpress-dev/tests/e2e/test-hierarchical-pages.test.ts

import { test, expect } from '@playwright/test';

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

test.describe('Hierarchical Pages Tests', () => {
  test.beforeEach(async ({ page }) => {
    // Set a longer timeout for these tests
    test.setTimeout(60000);
  });

  test('verify hierarchical page structure exists', async ({ page }) => {
    console.log('Testing hierarchical page structure...');
    
    // Test trainer pages
    const trainerPages = [
      { url: '/trainer/', title: 'Trainer' },
      { url: '/trainer/dashboard/', title: 'Dashboard' },
      { url: '/trainer/registration/', title: 'Registration' },
      { url: '/trainer/my-profile/', title: 'My Profile' },
      { url: '/trainer/event/', title: 'Event' },
      { url: '/trainer/event/manage/', title: 'Manage Event' },
      { url: '/trainer/event/summary/', title: 'Event Summary' },
      { url: '/trainer/email-attendees/', title: 'Email Attendees' },
      { url: '/trainer/certificate-reports/', title: 'Certificate Reports' },
      { url: '/trainer/generate-certificates/', title: 'Generate Certificates' },
      { url: '/trainer/communication-templates/', title: 'Communication Templates' },
      { url: '/trainer/communication-schedules/', title: 'Communication Schedules' },
    ];

    // Test master trainer pages
    const masterTrainerPages = [
      { url: '/master-trainer/', title: 'Master Trainer' },
      { url: '/master-trainer/dashboard/', title: 'Master Dashboard' },
      { url: '/master-trainer/certificate-fix/', title: 'Certificate System Diagnostics' },
      { url: '/master-trainer/google-sheets/', title: 'Google Sheets Integration' },
    ];

    // Test root pages
    const rootPages = [
      { url: '/training-login/', title: 'Trainer Login' },
    ];

    const allPages = [...trainerPages, ...masterTrainerPages, ...rootPages];
    const results = [];

    for (const pageInfo of allPages) {
      try {
        const response = await page.goto(`${BASE_URL}${pageInfo.url}`, {
          waitUntil: 'networkidle',
          timeout: 30000
        });
        
        const status = response?.status() || 0;
        const actualTitle = await page.title();
        
        results.push({
          url: pageInfo.url,
          expectedTitle: pageInfo.title,
          actualTitle: actualTitle,
          status: status,
          success: status === 200
        });
        
        console.log(`✓ ${pageInfo.url} - Status: ${status}, Title: ${actualTitle}`);
      } catch (error) {
        results.push({
          url: pageInfo.url,
          expectedTitle: pageInfo.title,
          actualTitle: 'Error',
          status: 0,
          success: false,
          error: error.message
        });
        console.log(`✗ ${pageInfo.url} - Error: ${error.message}`);
      }
    }

    // Summary
    console.log('\n=== Page Structure Test Summary ===');
    console.log(`Total pages tested: ${results.length}`);
    console.log(`Successful: ${results.filter(r => r.success).length}`);
    console.log(`Failed: ${results.filter(r => !r.success).length}`);
    
    // At least some pages should be working
    expect(results.filter(r => r.success).length).toBeGreaterThan(0);
  });

  test('verify CSS loading on hierarchical pages', async ({ page }) => {
    console.log('Testing CSS loading on hierarchical pages...');
    
    // Enable console logging
    page.on('console', msg => {
      if (msg.text().includes('HVAC CSS Debug')) {
        console.log('Browser:', msg.text());
      }
    });

    // Test CSS loading on key pages
    const testPages = [
      '/trainer/dashboard/',
      '/trainer/registration/',
      '/master-trainer/dashboard/',
      '/training-login/'
    ];

    for (const pageUrl of testPages) {
      console.log(`\nTesting CSS on ${pageUrl}...`);
      
      try {
        await page.goto(`${BASE_URL}${pageUrl}`, {
          waitUntil: 'networkidle',
          timeout: 30000
        });

        // Check for HVAC CSS files
        const stylesheets = await page.evaluate(() => {
          const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
          return links.map(link => link.href).filter(href => href.includes('hvac'));
        });

        console.log(`Found ${stylesheets.length} HVAC stylesheets:`);
        stylesheets.forEach(css => console.log(`  - ${css}`));

        // Check for specific CSS files
        const requiredCSS = [
          'hvac-harmonized.css',
          'hvac-common.css'
        ];

        for (const cssFile of requiredCSS) {
          const hasCSS = stylesheets.some(href => href.includes(cssFile));
          console.log(`  ${cssFile}: ${hasCSS ? '✓ Loaded' : '✗ Missing'}`);
        }

        // Take screenshot for visual verification
        await page.screenshot({ 
          path: `test-results/css-${pageUrl.replace(/\//g, '-')}.png`,
          fullPage: true 
        });

        // Check if any styles are actually applied
        const hasStyles = await page.evaluate(() => {
          const testElement = document.createElement('div');
          testElement.className = 'hvac-dashboard';
          document.body.appendChild(testElement);
          const computed = window.getComputedStyle(testElement);
          document.body.removeChild(testElement);
          
          // Check if any custom styles are applied (not just browser defaults)
          return computed.maxWidth !== 'none' || 
                 computed.margin !== '0px' || 
                 computed.padding !== '0px';
        });

        console.log(`  Styles applied: ${hasStyles ? '✓ Yes' : '✗ No'}`);
        
      } catch (error) {
        console.log(`  Error testing ${pageUrl}: ${error.message}`);
      }
    }
  });

  test('verify navigation between hierarchical pages', async ({ page }) => {
    console.log('Testing navigation between hierarchical pages...');
    
    // Start at trainer dashboard
    await page.goto(`${BASE_URL}/trainer/dashboard/`, {
      waitUntil: 'networkidle',
      timeout: 30000
    });

    // Look for navigation links
    const navLinks = await page.evaluate(() => {
      const links = Array.from(document.querySelectorAll('a'));
      return links
        .filter(link => link.href.includes('/trainer/') || link.href.includes('/master-trainer/'))
        .map(link => ({
          text: link.textContent.trim(),
          href: link.href
        }));
    });

    console.log(`Found ${navLinks.length} navigation links:`);
    navLinks.forEach(link => console.log(`  - ${link.text}: ${link.href}`));

    // Test clicking a few links
    if (navLinks.length > 0) {
      const testLink = navLinks[0];
      console.log(`\nTesting navigation to: ${testLink.text}`);
      
      await page.click(`a[href="${testLink.href}"]`);
      await page.waitForLoadState('networkidle');
      
      const newUrl = page.url();
      console.log(`  Navigated to: ${newUrl}`);
      
      expect(newUrl).toContain(testLink.href.split('.com')[1]);
    }
  });

  test('verify shortcodes work on hierarchical pages', async ({ page }) => {
    console.log('Testing shortcodes on hierarchical pages...');
    
    const shortcodePages = [
      { url: '/trainer/dashboard/', shortcode: 'hvac_dashboard' },
      { url: '/master-trainer/dashboard/', shortcode: 'hvac_master_dashboard' },
      { url: '/training-login/', shortcode: 'hvac_community_login' },
      { url: '/master-trainer/google-sheets/', shortcode: 'hvac_google_sheets' }
    ];

    for (const pageInfo of shortcodePages) {
      console.log(`\nTesting ${pageInfo.shortcode} on ${pageInfo.url}...`);
      
      try {
        await page.goto(`https://staging.upskillhvac.com${pageInfo.url}`, {
          waitUntil: 'networkidle',
          timeout: 30000
        });

        // Check if shortcode rendered content
        const hasContent = await page.evaluate((shortcode) => {
          const body = document.body.innerHTML;
          // Look for common HVAC class names or IDs that indicate shortcode rendered
          return body.includes('hvac-') || body.includes('class="hvac') || body.includes('id="hvac');
        }, pageInfo.shortcode);

        console.log(`  Shortcode rendered: ${hasContent ? '✓ Yes' : '✗ No'}`);

        // Check page source for shortcode
        const pageContent = await page.content();
        const hasShortcode = pageContent.includes(`[${pageInfo.shortcode}]`) || 
                           pageContent.includes(`<!-- wp:shortcode -->[${pageInfo.shortcode}]`);
        
        console.log(`  Shortcode in source: ${hasShortcode ? '✓ Yes' : '✗ No'}`);
        
        // Take screenshot
        await page.screenshot({ 
          path: `test-results/shortcode-${pageInfo.url.replace(/\//g, '-')}.png`,
          fullPage: true 
        });
        
      } catch (error) {
        console.log(`  Error: ${error.message}`);
      }
    }
  });

  test('verify Google Sheets page functionality', async ({ page }) => {
    console.log('Testing Google Sheets page specifically...');
    
    // Navigate to Google Sheets page
    const response = await page.goto(`${BASE_URL}/master-trainer/google-sheets/`, {
      waitUntil: 'networkidle',
      timeout: 30000
    });

    console.log(`Page status: ${response?.status()}`);
    
    // Check for redirect loop
    const finalUrl = page.url();
    console.log(`Final URL: ${finalUrl}`);
    
    if (finalUrl !== `${BASE_URL}/master-trainer/google-sheets/`) {
      console.log('⚠️  Possible redirect detected');
    }

    // Check page content
    const pageTitle = await page.title();
    const hasGoogleSheetsContent = await page.evaluate(() => {
      const body = document.body.textContent;
      return body.includes('Google Sheets') || 
             body.includes('google-sheets') ||
             body.includes('Google Drive');
    });

    console.log(`Page title: ${pageTitle}`);
    console.log(`Has Google Sheets content: ${hasGoogleSheetsContent ? '✓ Yes' : '✗ No'}`);

    // Take screenshot
    await page.screenshot({ 
      path: 'test-results/google-sheets-page.png',
      fullPage: true 
    });

    // Check for any error messages
    const errorMessages = await page.evaluate(() => {
      const errors = Array.from(document.querySelectorAll('.error, .notice-error, .wp-die-message'));
      return errors.map(el => el.textContent.trim());
    });

    if (errorMessages.length > 0) {
      console.log('Error messages found:');
      errorMessages.forEach(msg => console.log(`  - ${msg}`));
    }
  });

  test('verify page hierarchy in WordPress admin', async ({ page }) => {
    console.log('Testing page hierarchy in WordPress admin...');
    
    // Login to admin
    await page.goto(`${BASE_URL}/wp-login.php`);
    await page.fill('#user_login', 'devadmin');
    await page.fill('#user_pass', 'bRp3@6AqJnJJYU2guEPMMfGw');
    await page.click('#wp-submit');
    await page.waitForURL('**/wp-admin/**');

    // Navigate to Pages
    await page.goto(`${BASE_URL}/wp-admin/edit.php?post_type=page`);
    
    // Look for hierarchical structure
    const pageStructure = await page.evaluate(() => {
      const rows = Array.from(document.querySelectorAll('.wp-list-table tbody tr'));
      return rows.map(row => {
        const titleCell = row.querySelector('.page-title');
        const level = Array.from(titleCell.classList)
          .find(c => c.startsWith('level-'))
          ?.replace('level-', '') || '0';
        
        return {
          title: titleCell.textContent.trim().replace(/—/g, '').trim(),
          level: parseInt(level),
          status: row.querySelector('.post-state')?.textContent.trim() || 'published'
        };
      });
    });

    console.log('Page hierarchy:');
    pageStructure.forEach(page => {
      const indent = '  '.repeat(page.level);
      console.log(`${indent}${page.title} (${page.status})`);
    });

    // Take screenshot
    await page.screenshot({ 
      path: 'test-results/admin-pages-hierarchy.png',
      fullPage: true 
    });
  });
});