upskill-event-manager/wordpress-dev/tests/e2e/event-creation-tinymce.test.ts

import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
import { test, expect } from '@playwright/test';

// STAGING_URL is now imported from config

test.describe('Event Creation with TinyMCE', () => {
  test('should create event handling TinyMCE editor', async ({ page }) => {
    // Login
    await page.goto(PATHS.login);
    await page.fill('#user_login', 'test_trainer');
    await page.fill('#user_pass', 'Test123!');
    await page.click('#wp-submit');
    await page.waitForURL('**/hvac-dashboard/');
    
    // Navigate to create event
    const createEventBtn = page.locator('a:has-text("CREATE EVENT")').first();
    await createEventBtn.click();
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000); // Give TinyMCE time to load
    
    // Fill title
    const eventTitle = `HVAC Training ${Date.now()}`;
    await page.fill('input[name="post_title"]', eventTitle);
    console.log('Filled title:', eventTitle);
    
    // Handle TinyMCE description with multiple approaches
    const description = `This is a comprehensive HVAC training session covering installation and maintenance. Created on ${new Date().toLocaleString()}`;
    
    // Approach 1: Try to switch to text mode first
    const switchToText = async () => {
      const textTab = page.locator('#content-text, #content-html, [aria-label="Text"], button:has-text("Text")').first();
      if (await textTab.isVisible()) {
        await textTab.click();
        await page.waitForTimeout(500);
        return true;
      }
      return false;
    };
    
    let descriptionFilled = false;
    
    // Try switching to text mode
    if (await switchToText()) {
      console.log('Switched to text mode');
      // Now try to fill the textarea
      const textarea = page.locator('textarea#content, textarea[name="post_content"]').first();
      if (await textarea.isVisible()) {
        await textarea.fill(description);
        descriptionFilled = true;
        console.log('Filled description in text mode');
      }
    }
    
    // Approach 2: If text mode didn't work, try iframe
    if (!descriptionFilled) {
      console.log('Trying iframe approach');
      try {
        // Wait for iframe to be available
        await page.waitForSelector('iframe[id*="content_ifr"], iframe[title*="editor"]', { timeout: 5000 });
        
        // Get the iframe
        const iframe = page.frameLocator('iframe[id*="content_ifr"], iframe[title*="editor"]').first();
        const iframeBody = iframe.locator('body');
        
        // Clear and fill the iframe body
        await iframeBody.click();
        await iframeBody.clear();
        await iframeBody.type(description);
        descriptionFilled = true;
        console.log('Filled description in iframe');
      } catch (e) {
        console.log('Iframe approach failed:', e.message);
      }
    }
    
    // Approach 3: Direct JavaScript injection
    if (!descriptionFilled) {
      console.log('Trying JavaScript injection');
      try {
        await page.evaluate((desc) => {
          // Try TinyMCE API
          if (typeof tinymce !== 'undefined' && tinymce.activeEditor) {
            tinymce.activeEditor.setContent(desc);
            return true;
          }
          
          // Try jQuery
          if (typeof jQuery !== 'undefined') {
            jQuery('#content').val(desc);
            return true;
          }
          
          // Direct DOM manipulation
          const textarea = document.querySelector('textarea#content, textarea[name="post_content"]');
          if (textarea) {
            (textarea as HTMLTextAreaElement).value = desc;
            return true;
          }
          
          return false;
        }, description);
        descriptionFilled = true;
        console.log('Filled description via JavaScript');
      } catch (e) {
        console.log('JavaScript injection failed:', e.message);
      }
    }
    
    // Fill dates
    const today = new Date();
    const dateStr = `${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getDate().toString().padStart(2, '0')}/${today.getFullYear()}`;
    
    await page.fill('input#EventStartDate', dateStr);
    await page.fill('input#EventEndDate', dateStr);
    
    // Fill times
    await page.fill('input#EventStartTime', '10:00');
    await page.fill('input#EventEndTime', '12:00');
    
    console.log('Filled dates and times');
    
    // Handle venue/organizer if present
    const venueField = page.locator('select[name="venue"], input[name="venue_name"]').first();
    if (await venueField.isVisible()) {
      if (await venueField.evaluate(el => el.tagName === 'SELECT')) {
        await venueField.selectOption({ index: 1 });
      } else {
        await venueField.fill('Training Center');
      }
      console.log('Set venue');
    }
    
    const organizerField = page.locator('select[name="organizer"], input[name="organizer_name"]').first();
    if (await organizerField.isVisible()) {
      if (await organizerField.evaluate(el => el.tagName === 'SELECT')) {
        await organizerField.selectOption({ index: 1 });
      } else {
        await organizerField.fill('HVAC Institute');
      }
      console.log('Set organizer');
    }
    
    // Before submitting, verify description is set
    const descriptionCheck = await page.evaluate(() => {
      // Check TinyMCE
      if (typeof tinymce !== 'undefined' && tinymce.activeEditor) {
        return tinymce.activeEditor.getContent();
      }
      // Check textarea
      const textarea = document.querySelector('textarea#content, textarea[name="post_content"]');
      if (textarea) {
        return (textarea as HTMLTextAreaElement).value;
      }
      return '';
    });
    console.log('Description before submit:', descriptionCheck.substring(0, 50) + '...');
    
    // Scroll to and click submit
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(1000);
    
    const submitButton = page.locator('input[type="submit"][value="Submit Event"], button:has-text("Submit Event")').first();
    
    // Take pre-submit screenshot
    await page.screenshot({ path: 'test-results/before-submit-tinymce.png', fullPage: true });
    
    // Listen for navigation or stay on page
    const navigationPromise = page.waitForNavigation({ 
      timeout: 10000,
      waitUntil: 'domcontentloaded' 
    }).catch(() => null);
    
    await submitButton.click();
    console.log('Clicked submit');
    
    const navigated = await navigationPromise;
    await page.waitForTimeout(3000);
    
    // Take post-submit screenshot
    await page.screenshot({ path: 'test-results/after-submit-tinymce.png', fullPage: true });
    
    const currentUrl = page.url();
    console.log('Current URL:', currentUrl);
    
    // Check for errors
    const errors = await page.locator('.error, .notice-error, .tribe-error').all();
    if (errors.length > 0) {
      for (const error of errors) {
        const text = await error.textContent();
        console.log('Error found:', text);
      }
    }
    
    // Check for success
    const success = await page.locator('.updated, .notice-success, .tribe-success').count() > 0;
    const urlChanged = !currentUrl.includes('/manage-event/');
    
    console.log('Success message found:', success);
    console.log('URL changed:', urlChanged);
    
    // Either should indicate success
    expect(success || urlChanged).toBeTruthy();
  });
});