upskill-event-manager/wordpress-dev/tests/e2e/page-rendering-verification.test.ts

import { test, expect } from '@playwright/test';
import { loginAsTrainer } from './utils/login-helpers';

/**
 * Page Rendering Verification Tests
 * @group @page-rendering
 * 
 * This test suite checks that all plugin pages render properly
 * instead of showing raw shortcodes.
 */
test.describe('Page Rendering Verification', () => {
  // Store event ID for pages that need it
  let testEventId: string;

  test.beforeAll(async ({ browser }) => {
    // Create a test event to use for event-specific pages
    const context = await browser.newContext();
    const page = await context.newPage();
    
    await loginAsTrainer(page);
    
    // Navigate to My Events page to find an existing event
    await page.goto('/my-events/');
    
    // Try to get an existing event ID
    const eventLinkSelector = 'a[href*="event_id="]';
    const hasEvents = await page.locator(eventLinkSelector).count() > 0;
    
    if (hasEvents) {
      const eventUrl = await page.locator(eventLinkSelector).first().getAttribute('href') || '';
      const match = eventUrl.match(/event_id=(\d+)/);
      if (match && match[1]) {
        testEventId = match[1];
        console.log(`Using existing event ID: ${testEventId}`);
      }
    } else {
      // No events found, we'll deal with event-specific pages in the tests
      console.log('No existing events found. Event-specific pages will be skipped.');
    }
    
    await context.close();
  });

  test('Login page renders properly', async ({ page }) => {
    await page.goto('/community-login/');
    
    // Check that the login form is rendered instead of shortcode
    await expect(page.locator('form#hvac-login-form')).toBeVisible();
    await expect(page.locator('input[name="log"]')).toBeVisible();
    await expect(page.locator('input[name="pwd"]')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[hvac_community_login]');
  });

  test('Registration page renders properly', async ({ page }) => {
    await page.goto('/trainer-registration/');
    
    // Check that the registration form is rendered instead of shortcode
    await expect(page.locator('form#hvac-registration-form')).toBeVisible();
    await expect(page.locator('input[name="user_login"]')).toBeVisible();
    await expect(page.locator('input[name="user_email"]')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[hvac_trainer_registration]');
  });

  test('Dashboard page renders properly', async ({ page }) => {
    await loginAsTrainer(page);
    await page.goto('/hvac-dashboard/');
    
    // Check that the dashboard is rendered instead of shortcode
    await expect(page.locator('.hvac-dashboard-header')).toBeVisible();
    await expect(page.locator('.hvac-dashboard-content')).toBeVisible();
    
    // Look for dashboard elements like create event button
    await expect(page.locator('a:text("Create Event")')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[hvac_trainer_dashboard]');
    await expect(page.locator('body')).not.toContainText('[hvac_dashboard]');
  });

  test('My Events page renders properly', async ({ page }) => {
    await loginAsTrainer(page);
    await page.goto('/my-events/');
    
    // Check that the events list is rendered instead of shortcode
    await expect(page.locator('.tribe-community-events-list')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[tribe_community_events view="my_events"]');
  });

  test('Trainer Profile page renders properly', async ({ page }) => {
    await loginAsTrainer(page);
    await page.goto('/trainer-profile/');
    
    // Check that the profile is rendered instead of shortcode
    await expect(page.locator('.hvac-trainer-profile')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[hvac_trainer_profile]');
  });

  test('Edit Profile page renders properly', async ({ page }) => {
    await loginAsTrainer(page);
    await page.goto('/edit-profile/');
    
    // Check that the profile edit form is rendered instead of shortcode
    await expect(page.locator('form#hvac-profile-form')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[hvac_edit_profile]');
  });

  test('Event Summary page renders properly', async ({ page }) => {
    test.skip(!testEventId, 'Skipping test because no event ID is available');
    
    await loginAsTrainer(page);
    await page.goto(`/event-summary/?event_id=${testEventId}`);
    
    // Check that the event summary is rendered instead of shortcode
    await expect(page.locator('.hvac-event-summary-section')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[hvac_event_summary]');
  });

  test('Email Attendees page renders properly', async ({ page }) => {
    test.skip(!testEventId, 'Skipping test because no event ID is available');
    
    await loginAsTrainer(page);
    await page.goto(`/email-attendees/?event_id=${testEventId}`);
    
    // Check that the email form is rendered instead of shortcode
    await expect(page.locator('.hvac-email-attendees-wrapper')).toBeVisible();
    await expect(page.locator('.hvac-email-form')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[hvac_email_attendees]');
  });

  test('Manage Event page renders properly', async ({ page }) => {
    test.skip(!testEventId, 'Skipping test because no event ID is available');
    
    await loginAsTrainer(page);
    await page.goto(`/manage-event/?event_id=${testEventId}`);
    
    // Check that the event form is rendered instead of shortcode
    await expect(page.locator('#tribe-community-events')).toBeVisible();
    
    // Make sure the raw shortcode isn't visible
    await expect(page.locator('body')).not.toContainText('[tribe_community_events view="submission_form"]');
  });
});