upskill-event-manager/wordpress-dev/tests/e2e/trainer-journey-extended.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('Extended Trainer Journey with Test Data', () => {
    test('Setup test data and verify full trainer functionality', async ({ page }) => {
        console.log('Starting extended trainer journey test...');
        
        // Step 1: Login as test_trainer
        console.log('Step 1: Logging in...');
        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.waitForLoadState('networkidle');
        await expect(page).toHaveURL(/hvac-dashboard/);
        console.log('Login successful');
        
        // Step 2: Verify dashboard shows test events
        console.log('Step 2: Verifying dashboard content...');
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        // Take a screenshot to see what's on the page
        await page.screenshot({ path: 'dashboard-content.png', fullPage: true });
        
        // Check for various possible event containers
        const eventSelectors = [
            '.hvac-event-item',
            '.tribe-events-community-list',
            '.type-tribe_events',
            '.event-item',
            '.upcoming-events',
            '.tribe-events'
        ];
        
        let eventCount = 0;
        for (const selector of eventSelectors) {
            const elements = page.locator(selector);
            const count = await elements.count();
            console.log(`Selector ${selector}: found ${count} elements`);
            if (count > 0) {
                eventCount = count;
                break;
            }
        }
        
        if (eventCount === 0) {
            console.log('No events found with standard selectors, checking page content...');
            const pageContent = await page.content();
            console.log('Page contains:', pageContent.substring(0, 500) + '...');
        } else {
            console.log(`Found ${eventCount} events on dashboard`);
        }
        
        // Step 3: Navigate to My Events page
        console.log('Step 3: Navigating to My Events...');
        await page.goto(`${STAGING_URL}/my-events/`);
        await page.waitForLoadState('networkidle');
        
        // Verify events are listed
        const myEventsList = page.locator('.tribe-events-community-list .type-tribe_events');
        const myEventsCount = await myEventsList.count();
        console.log(`Found ${myEventsCount} events in My Events`);
        expect(myEventsCount).toBeGreaterThan(0);
        
        // Step 4: Edit an event
        console.log('Step 4: Testing event editing...');
        
        // Click edit on the first event
        const firstEditButton = page.locator('.tribe-events-community-list .edit-event a').first();
        await firstEditButton.click();
        await page.waitForLoadState('networkidle');
        
        // Verify we're on the edit page
        const editTitle = page.locator('#post_title, input[name="post_title"]');
        await expect(editTitle).toBeVisible();
        
        // Modify the event title
        const currentTitle = await editTitle.inputValue();
        const newTitle = currentTitle + ' - Updated';
        await editTitle.fill(newTitle);
        
        // Update the description
        const descriptionFrame = page.frameLocator('iframe[id*="_ifr"]');
        const descriptionBody = descriptionFrame.locator('body');
        await descriptionBody.click();
        await descriptionBody.fill('Updated description for this event.');
        
        // Save the changes
        const updateButton = page.locator('input[value="Update Event"], button:has-text("Update Event")');
        await updateButton.click();
        await page.waitForLoadState('networkidle');
        
        console.log('Event updated successfully');
        
        // Step 5: Verify ticket sales and attendees
        console.log('Step 5: Checking ticket sales and attendees...');
        
        // Go to event summary page (custom page)
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        // Click on an event to view details
        const eventLink = page.locator('a:has-text("Advanced HVAC Diagnostics Training")').first();
        await eventLink.click();
        await page.waitForLoadState('networkidle');
        
        // Check for ticket information
        const ticketInfo = page.locator('.ticket-sales-info, .tribe-tickets-attendees');
        const hasTicketInfo = await ticketInfo.count() > 0;
        
        if (hasTicketInfo) {
            console.log('Found ticket sales information');
            
            // Look for attendee count
            const attendeeCount = page.locator('text=/\\d+ tickets? sold/i');
            if (await attendeeCount.count() > 0) {
                const attendeeText = await attendeeCount.textContent();
                console.log(`Attendee information: ${attendeeText}`);
            }
        }
        
        // Step 6: Create a new event to test full workflow
        console.log('Step 6: Creating a new event...');
        
        await page.goto(`${STAGING_URL}/manage-event/`);
        await page.waitForLoadState('networkidle');
        
        // Fill in event details
        await page.fill('#post_title, input[name="post_title"]', 'New Test Event - Automated');
        
        // Add description
        const newEventFrame = page.frameLocator('iframe[id*="_ifr"]');
        const newEventBody = newEventFrame.locator('body');
        await newEventBody.fill('This is a test event created by automated testing.');
        
        // Set dates
        await page.fill('input[name="EventStartDate"]', '01/30/2025');
        await page.fill('input[name="EventStartTime"]', '10:00 AM');
        await page.fill('input[name="EventEndDate"]', '01/30/2025');
        await page.fill('input[name="EventEndTime"]', '04:00 PM');
        
        // Submit the event
        const submitButton = page.locator('input[value="Submit Event"], button:has-text("Submit Event")');
        await submitButton.click();
        await page.waitForLoadState('networkidle');
        
        // Verify submission success
        const successMessage = page.locator('text=/success|submitted/i');
        await expect(successMessage.first()).toBeVisible({ timeout: 10000 });
        
        console.log('New event created successfully');
        
        // Step 7: Verify the complete trainer journey
        console.log('Step 7: Final verification...');
        
        // Return to My Events
        await page.goto(`${STAGING_URL}/my-events/`);
        await page.waitForLoadState('networkidle');
        
        // Check for the newly created event
        const newEvent = page.locator('text="New Test Event - Automated"');
        await expect(newEvent).toBeVisible({ timeout: 10000 });
        
        // Take a final screenshot
        await page.screenshot({ path: 'trainer-journey-complete.png', fullPage: true });
        
        console.log('Extended trainer journey test completed successfully!');
    });
});

// Additional test for event summary and order summary pages
test.describe('Event and Order Summary Pages', () => {
    test('Verify custom summary pages display correctly', async ({ page }) => {
        console.log('Testing summary pages...');
        
        // 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.waitForLoadState('networkidle');
        
        // Navigate to event summary page
        console.log('Testing event summary page...');
        
        // First, get an event ID from My Events
        await page.goto(`${STAGING_URL}/my-events/`);
        await page.waitForLoadState('networkidle');
        
        // Click on view details for the first event
        const viewDetailsButton = page.locator('a:has-text("View Details")').first();
        
        if (await viewDetailsButton.count() > 0) {
            await viewDetailsButton.click();
            await page.waitForLoadState('networkidle');
            
            // Verify we're on the event summary page
            const summaryTitle = page.locator('h1, .event-title');
            await expect(summaryTitle).toBeVisible();
            
            // Check for key summary elements
            const elements = [
                '.event-date, .tribe-events-schedule',
                '.event-venue, .tribe-events-venue',
                '.ticket-sales, .attendee-count',
                '.event-description, .tribe-events-content'
            ];
            
            for (const selector of elements) {
                const element = page.locator(selector);
                if (await element.count() > 0) {
                    console.log(`Found element: ${selector}`);
                }
            }
        }
        
        // Test order summary page if available
        console.log('Testing order summary page...');
        
        // This would depend on your specific implementation
        // Navigate to order summary if you have a specific URL pattern
        const orderSummaryUrl = `${STAGING_URL}/order-summary/`;
        
        try {
            await page.goto(orderSummaryUrl);
            await page.waitForLoadState('networkidle');
            
            // Check for order details
            const orderInfo = page.locator('.order-details, .order-summary');
            if (await orderInfo.count() > 0) {
                console.log('Found order summary information');
            }
        } catch (error) {
            console.log('Order summary page not available or different URL');
        }
        
        console.log('Summary pages test completed');
    });
});