upskill-event-manager/test-edit-workflow-simplified.js

#!/usr/bin/env node

/**
 * Simplified Event Edit Workflow Test
 * Tests field population and edit persistence
 */

const { chromium } = require('@playwright/test');
const fs = require('fs').promises;

const CONFIG = {
    baseUrl: 'https://upskill-staging.measurequick.com',
    credentials: {
        email: 'test_trainer@example.com',
        password: 'TestTrainer123!'
    }
};

async function screenshot(page, name) {
    await fs.mkdir('screenshots/edit-test', { recursive: true });
    const path = `screenshots/edit-test/${name}-${Date.now()}.png`;
    await page.screenshot({ path, fullPage: true });
    console.log(`📸 Screenshot: ${name}`);
    return path;
}

async function captureFieldValues(page) {
    const fields = {};
    
    // All possible field selectors to check
    const selectors = {
        title: '#title',
        startDate: '#EventStartDate',
        endDate: '#EventEndDate', 
        startTime: '#EventStartTime',
        endTime: '#EventEndTime',
        cost: '#EventCost',
        website: '#EventURL',
        venue: '#venue-name, select[name="venue[VenueID]"]',
        address: '#VenueAddress',
        city: '#VenueCity',
        state: '#VenueState',
        zip: '#VenueZip',
        organizer: '#organizer-name, select[name="organizer[OrganizerID]"]',
        organizerEmail: '#OrganizerEmail',
        organizerPhone: '#OrganizerPhone'
    };
    
    for (const [name, selector] of Object.entries(selectors)) {
        try {
            const element = await page.$(selector);
            if (element) {
                const value = await element.inputValue().catch(() => null) ||
                             await element.textContent().catch(() => null) ||
                             await element.evaluate(el => el.value || el.innerText || '');
                
                if (value) {
                    fields[name] = value;
                    console.log(`  ✓ ${name}: ${value.substring(0, 50)}${value.length > 50 ? '...' : ''}`);
                }
            }
        } catch (e) {
            // Skip if field not found
        }
    }
    
    return fields;
}

async function runEditWorkflowTest() {
    console.log('🎯 EVENT EDIT WORKFLOW TEST');
    console.log('=' .repeat(60));
    console.log('Testing: Field population and edit persistence');
    console.log('=' .repeat(60));
    
    const browser = await chromium.launch({ headless: true });
    const page = await browser.newPage();
    
    const results = {
        loginSuccess: false,
        eventsFound: 0,
        fieldsPopulated: 0,
        editFormAccessed: false,
        changesAttempted: 0,
        changesSaved: false,
        changesPersisted: 0
    };
    
    try {
        // 1. LOGIN
        console.log('\n🔐 Step 1: Login');
        await page.goto(`${CONFIG.baseUrl}/wp-login.php`);
        await page.fill('#user_login', CONFIG.credentials.email);
        await page.fill('#user_pass', CONFIG.credentials.password);
        await page.click('#wp-submit');
        
        await page.waitForURL(/dashboard|admin/, { timeout: 10000 });
        results.loginSuccess = true;
        console.log('✅ Logged in successfully');
        
        // 2. ACCESS EVENTS LIST
        console.log('\n📋 Step 2: Access Events List');
        await page.goto(`${CONFIG.baseUrl}/wp-admin/edit.php?post_type=tribe_events`);
        await page.waitForLoadState('domcontentloaded');
        
        await screenshot(page, 'events-list');
        
        const eventRows = await page.$$('tbody#the-list tr');
        results.eventsFound = eventRows.length;
        console.log(`Found ${results.eventsFound} events`);
        
        if (results.eventsFound === 0) {
            console.log('\n⚠️ No events found. Creating a test event...');
            
            // Create a simple test event
            await page.goto(`${CONFIG.baseUrl}/wp-admin/post-new.php?post_type=tribe_events`);
            
            // Just fill title and save as draft
            const titleField = await page.$('#title');
            if (titleField) {
                await titleField.fill(`Test Event for Edit Verification ${Date.now()}`);
                
                // Try to save as draft
                const saveDraft = await page.$('#save-post');
                if (saveDraft) {
                    await saveDraft.click();
                    await page.waitForSelector('.notice-success, #message', { timeout: 10000 }).catch(() => {});
                    console.log('✅ Test event created');
                    
                    // Go back to events list
                    await page.goto(`${CONFIG.baseUrl}/wp-admin/edit.php?post_type=tribe_events`);
                    await page.waitForLoadState('domcontentloaded');
                }
            }
        }
        
        // 3. ACCESS EDIT FORM
        console.log('\n✏️ Step 3: Access Edit Form');
        
        // Click edit on first event
        const editLink = await page.$('tbody#the-list tr:first-child .row-actions .edit a');
        if (editLink) {
            await editLink.click();
            await page.waitForLoadState('networkidle');
            results.editFormAccessed = true;
            console.log('✅ Edit form accessed');
            
            await screenshot(page, 'edit-form');
            
            // 4. CAPTURE FIELD VALUES
            console.log('\n📊 Step 4: Capture Field Values');
            const beforeValues = await captureFieldValues(page);
            results.fieldsPopulated = Object.keys(beforeValues).length;
            console.log(`Total fields populated: ${results.fieldsPopulated}`);
            
            // 5. EDIT FIELDS
            console.log('\n✏️ Step 5: Edit Fields');
            const changes = {};
            
            // Edit title
            const titleField = await page.$('#title');
            if (titleField && beforeValues.title) {
                const newTitle = beforeValues.title + ' (EDITED)';
                await titleField.fill(newTitle);
                changes.title = newTitle;
                results.changesAttempted++;
                console.log('✅ Title edited');
            }
            
            // Edit cost
            const costField = await page.$('#EventCost');
            if (costField) {
                await costField.fill('599');
                changes.cost = '599';
                results.changesAttempted++;
                console.log('✅ Cost edited');
            }
            
            // Edit start date
            const startDateField = await page.$('#EventStartDate');
            if (startDateField) {
                await startDateField.fill('2025-10-15');
                changes.startDate = '2025-10-15';
                results.changesAttempted++;
                console.log('✅ Start date edited');
            }
            
            // Edit website
            const urlField = await page.$('#EventURL');
            if (urlField) {
                await urlField.fill('https://edited.example.com');
                changes.website = 'https://edited.example.com';
                results.changesAttempted++;
                console.log('✅ Website edited');
            }
            
            console.log(`Total changes attempted: ${results.changesAttempted}`);
            
            // 6. SAVE CHANGES
            console.log('\n💾 Step 6: Save Changes');
            const updateBtn = await page.$('#publish');
            if (updateBtn) {
                await updateBtn.click();
                await page.waitForSelector('.notice-success, #message, .updated', { timeout: 10000 });
                results.changesSaved = true;
                console.log('✅ Changes saved');
                
                await screenshot(page, 'saved');
                
                // 7. VERIFY PERSISTENCE
                console.log('\n🔄 Step 7: Verify Persistence');
                await page.reload();
                await page.waitForLoadState('networkidle');
                
                const afterValues = await captureFieldValues(page);
                
                // Check if changes persisted
                for (const [field, expectedValue] of Object.entries(changes)) {
                    if (afterValues[field] && afterValues[field].includes(expectedValue)) {
                        results.changesPersisted++;
                        console.log(`  ✅ ${field}: Change persisted`);
                    } else {
                        console.log(`  ❌ ${field}: Change NOT persisted`);
                    }
                }
            }
        } else {
            console.log('❌ Could not find edit link');
        }
        
    } catch (error) {
        console.error('\n❌ Error:', error.message);
    } finally {
        await browser.close();
    }
    
    // FINAL REPORT
    console.log('\n' + '=' .repeat(60));
    console.log('📊 FINAL REPORT');
    console.log('=' .repeat(60));
    
    console.log('\n✅ Successful Steps:');
    if (results.loginSuccess) console.log('  • Login successful');
    if (results.eventsFound > 0) console.log(`  • Found ${results.eventsFound} events`);
    if (results.editFormAccessed) console.log('  • Edit form accessed');
    if (results.fieldsPopulated > 0) console.log(`  • ${results.fieldsPopulated} fields populated`);
    if (results.changesAttempted > 0) console.log(`  • ${results.changesAttempted} fields edited`);
    if (results.changesSaved) console.log('  • Changes saved');
    if (results.changesPersisted > 0) console.log(`  • ${results.changesPersisted} changes persisted`);
    
    console.log('\n📋 Summary:');
    console.log(`  • Fields populated: ${results.fieldsPopulated}`);
    console.log(`  • Changes attempted: ${results.changesAttempted}`);
    console.log(`  • Changes persisted: ${results.changesPersisted}/${results.changesAttempted}`);
    
    // ASSESSMENT
    console.log('\n🎯 ASSESSMENT:');
    
    if (results.fieldsPopulated >= 5 && results.changesPersisted === results.changesAttempted) {
        console.log('✅✅✅ COMPLETE SUCCESS ✅✅✅');
        console.log('ALL fields populate correctly and ALL changes persist!');
    } else if (results.fieldsPopulated > 0 && results.changesPersisted > 0) {
        console.log('⚠️ PARTIAL SUCCESS');
        console.log('Some fields populate and some changes persist.');
    } else if (results.editFormAccessed) {
        console.log('⚠️ EDIT FORM ACCESSIBLE BUT ISSUES DETECTED');
        console.log('Can access edit form but field population or persistence has issues.');
    } else {
        console.log('❌ EDIT WORKFLOW NOT FUNCTIONAL');
        console.log('Cannot access or use the edit functionality.');
    }
    
    // USER'S SPECIFIC QUESTION
    console.log('\n📌 ANSWER TO YOUR SPECIFIC QUESTION:');
    console.log('"Did you verify that ALL expected fields are populated');
    console.log(' and that ALL changes are saved?"');
    console.log('-'.repeat(50));
    
    if (results.fieldsPopulated >= 5 && results.changesPersisted === results.changesAttempted && results.changesAttempted > 0) {
        console.log('✅ YES - Fields ARE populated and changes ARE saved!');
        console.log(`  • ${results.fieldsPopulated} fields populated on load`);
        console.log(`  • ${results.changesPersisted}/${results.changesAttempted} changes persisted after save`);
    } else {
        console.log('⚠️ PARTIAL - Some functionality works:');
        if (results.fieldsPopulated > 0) {
            console.log(`  • ${results.fieldsPopulated} fields populate (partial)`);
        } else {
            console.log('  • No fields populated initially');
        }
        if (results.changesPersisted > 0) {
            console.log(`  • ${results.changesPersisted}/${results.changesAttempted} changes saved`);
        } else {
            console.log('  • Changes not persisting');
        }
    }
    
    console.log('\n📁 Screenshots: screenshots/edit-test/');
    console.log('=' .repeat(60));
}

// Run the test
console.log('Starting simplified edit workflow test...\n');
runEditWorkflowTest().catch(error => {
    console.error('Fatal error:', error);
    process.exit(1);
});