0b854a8c5b
- Added missing template_include filter to HVAC_Custom_Event_Edit class - Added loadTemplate method to handle template loading for rewrite rules - Added support for hierarchical URL /trainer/event/edit in load_custom_templates - Created WordPress page at /trainer/event/edit/ for custom form - Assigned page-edit-event-custom.php template to the page This ensures the custom event edit form loads correctly without JavaScript dependencies
266 lines
No EOL
10 KiB
JavaScript
266 lines
No EOL
10 KiB
JavaScript
/**
|
||
* Test Custom Event Edit Form
|
||
*
|
||
* Verifies that the new PHP-based event edit form:
|
||
* 1. Loads without JavaScript dependencies
|
||
* 2. Populates all fields from database
|
||
* 3. Saves changes properly
|
||
* 4. No longer relies on TEC shortcode
|
||
*/
|
||
|
||
const { chromium } = require('playwright');
|
||
|
||
async function testCustomEventEdit() {
|
||
console.log('🔄 Starting Custom Event Edit Form Test...\n');
|
||
|
||
// Configure browser
|
||
const browser = await chromium.launch({
|
||
headless: false,
|
||
args: ['--disable-dev-shm-usage', '--no-sandbox']
|
||
});
|
||
|
||
const context = await browser.newContext({
|
||
viewport: { width: 1280, height: 720 }
|
||
});
|
||
|
||
const page = await context.newPage();
|
||
const baseUrl = process.env.UPSKILL_STAGING_URL || 'https://upskill-staging.measurequick.com';
|
||
|
||
try {
|
||
// Step 1: Login
|
||
console.log('1️⃣ Logging in as test_admin...');
|
||
await page.goto(`${baseUrl}/training-login/`);
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
// Try both possible login forms
|
||
const loginForm = await page.$('#loginform') || await page.$('.hvac-login-form');
|
||
if (!loginForm) {
|
||
// Fallback to wp-login
|
||
await page.goto(`${baseUrl}/wp-login.php`);
|
||
}
|
||
|
||
await page.fill('input[name="log"], #user_login', 'test_admin');
|
||
await page.fill('input[name="pwd"], #user_pass', 'TestAdmin123!');
|
||
await page.click('input[type="submit"], #wp-submit');
|
||
|
||
// Wait for redirect
|
||
await page.waitForLoadState('networkidle');
|
||
console.log('✅ Logged in successfully\n');
|
||
|
||
// Step 2: Navigate to trainer dashboard
|
||
console.log('2️⃣ Navigating to trainer dashboard...');
|
||
await page.goto(`${baseUrl}/trainer/dashboard/`);
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
// Debug: Check what's on the page
|
||
const pageTitle = await page.title();
|
||
console.log(` Page title: ${pageTitle}`);
|
||
|
||
// Check if we need to wait for dynamic content
|
||
await page.waitForTimeout(2000);
|
||
|
||
// Verify events table is visible (try multiple selectors)
|
||
const eventsTable = await page.$('.hvac-events-table') ||
|
||
await page.$('table.events-table') ||
|
||
await page.$('[class*="events"]');
|
||
|
||
if (!eventsTable) {
|
||
// Take a screenshot to see what's happening
|
||
await page.screenshot({ path: 'dashboard-debug.png', fullPage: true });
|
||
console.log(' 📸 Dashboard screenshot saved as dashboard-debug.png');
|
||
|
||
// Get page content for debugging
|
||
const content = await page.content();
|
||
if (content.includes('No events found')) {
|
||
console.log(' ⚠️ No events found - need to seed test data first');
|
||
} else if (content.includes('Access Denied') || content.includes('not authorized')) {
|
||
console.log(' ⚠️ Access denied - user may not have proper role');
|
||
}
|
||
|
||
throw new Error('Events table not found on dashboard');
|
||
}
|
||
console.log('✅ Dashboard loaded with events table\n');
|
||
|
||
// Step 3: Click edit link for first event
|
||
console.log('3️⃣ Looking for Edit link...');
|
||
|
||
// Try both old and new URL patterns
|
||
let editLink = await page.$('a[href*="/trainer/event/edit/"]') ||
|
||
await page.$('a[href*="/trainer/event/manage/"]');
|
||
|
||
if (!editLink) {
|
||
// Look for any Edit link text
|
||
editLink = await page.getByText('Edit').first();
|
||
}
|
||
|
||
if (!editLink) {
|
||
// Debug: list all links on page
|
||
const allLinks = await page.$$eval('a', links =>
|
||
links.map(l => ({ text: l.textContent, href: l.href }))
|
||
);
|
||
console.log(' Available links:', allLinks.filter(l => l.text && l.text.includes('Edit')));
|
||
|
||
throw new Error('No edit links found - verify events exist');
|
||
}
|
||
|
||
const editUrl = await editLink.getAttribute('href');
|
||
console.log(` Edit URL: ${editUrl}`);
|
||
await editLink.click();
|
||
await page.waitForLoadState('networkidle');
|
||
console.log('✅ Navigated to custom edit form\n');
|
||
|
||
// Step 4: Verify we're on the custom form (not TEC shortcode)
|
||
console.log('4️⃣ Verifying custom form loaded...');
|
||
|
||
// Check for our custom form class
|
||
const customForm = await page.$('.hvac-event-edit-wrapper form.hvac-event-form');
|
||
if (!customForm) {
|
||
throw new Error('Custom form not found - may still be using TEC shortcode');
|
||
}
|
||
|
||
// Verify NO TEC community events elements
|
||
const tecForm = await page.$('.tribe-community-events');
|
||
if (tecForm) {
|
||
console.warn('⚠️ WARNING: TEC form elements still present');
|
||
}
|
||
|
||
console.log('✅ Custom form loaded (no TEC dependencies)\n');
|
||
|
||
// Step 5: Check field population
|
||
console.log('5️⃣ Checking field population...');
|
||
|
||
const fields = [
|
||
{ name: 'Title', selector: '#post_title', type: 'input' },
|
||
{ name: 'Start Date', selector: '#EventStartDate', type: 'input' },
|
||
{ name: 'End Date', selector: '#EventEndDate', type: 'input' },
|
||
{ name: 'Start Time', selector: '#EventStartTime', type: 'input' },
|
||
{ name: 'End Time', selector: '#EventEndTime', type: 'input' },
|
||
{ name: 'Event Cost', selector: '#EventCost', type: 'input' },
|
||
{ name: 'Event URL', selector: '#EventURL', type: 'input' },
|
||
{ name: 'Venue Name', selector: '#venue_name', type: 'input' },
|
||
{ name: 'Venue Address', selector: '#venue_address', type: 'input' },
|
||
{ name: 'Venue City', selector: '#venue_city', type: 'input' },
|
||
{ name: 'Organizer Name', selector: '#organizer_name', type: 'input' },
|
||
{ name: 'Organizer Email', selector: '#organizer_email', type: 'input' },
|
||
{ name: 'Status', selector: '#post_status', type: 'select' }
|
||
];
|
||
|
||
let populatedCount = 0;
|
||
let emptyCount = 0;
|
||
|
||
for (const field of fields) {
|
||
const element = await page.$(field.selector);
|
||
if (!element) {
|
||
console.log(` ❌ ${field.name}: Field not found`);
|
||
continue;
|
||
}
|
||
|
||
let value;
|
||
if (field.type === 'select') {
|
||
value = await page.$eval(field.selector, el => el.value);
|
||
} else {
|
||
value = await page.$eval(field.selector, el => el.value);
|
||
}
|
||
|
||
if (value && value.trim() !== '') {
|
||
console.log(` ✅ ${field.name}: "${value}"`);
|
||
populatedCount++;
|
||
} else {
|
||
console.log(` ⚠️ ${field.name}: Empty`);
|
||
emptyCount++;
|
||
}
|
||
}
|
||
|
||
console.log(`\n Summary: ${populatedCount} populated, ${emptyCount} empty\n`);
|
||
|
||
// Step 6: Test field editing
|
||
console.log('6️⃣ Testing field editing...');
|
||
|
||
// Update title
|
||
const originalTitle = await page.$eval('#post_title', el => el.value);
|
||
const testTitle = `${originalTitle} - Edited ${Date.now()}`;
|
||
await page.fill('#post_title', testTitle);
|
||
|
||
// Update cost
|
||
await page.fill('#EventCost', '599');
|
||
|
||
// Update URL
|
||
await page.fill('#EventURL', 'https://example.com/test-event');
|
||
|
||
console.log('✅ Fields updated\n');
|
||
|
||
// Step 7: Save changes
|
||
console.log('7️⃣ Saving changes...');
|
||
|
||
const saveButton = await page.$('button[type="submit"]');
|
||
if (!saveButton) {
|
||
throw new Error('Save button not found');
|
||
}
|
||
|
||
await saveButton.click();
|
||
|
||
// Wait for redirect or success message
|
||
await Promise.race([
|
||
page.waitForURL(/updated=true/, { timeout: 10000 }),
|
||
page.waitForSelector('.hvac-notice-success', { timeout: 10000 })
|
||
]);
|
||
|
||
console.log('✅ Changes saved successfully\n');
|
||
|
||
// Step 8: Verify persistence
|
||
console.log('8️⃣ Verifying changes persisted...');
|
||
|
||
// Check if we're back on the edit page with success message
|
||
const successMessage = await page.$('.hvac-notice-success');
|
||
if (successMessage) {
|
||
console.log(' ✅ Success message displayed');
|
||
}
|
||
|
||
// Verify title was saved
|
||
const savedTitle = await page.$eval('#post_title', el => el.value);
|
||
if (savedTitle === testTitle) {
|
||
console.log(` ✅ Title persisted: "${savedTitle}"`);
|
||
} else {
|
||
console.log(` ❌ Title not saved. Expected: "${testTitle}", Got: "${savedTitle}"`);
|
||
}
|
||
|
||
// Verify cost was saved
|
||
const savedCost = await page.$eval('#EventCost', el => el.value);
|
||
if (savedCost === '599') {
|
||
console.log(` ✅ Cost persisted: $${savedCost}`);
|
||
} else {
|
||
console.log(` ❌ Cost not saved. Expected: "599", Got: "${savedCost}"`);
|
||
}
|
||
|
||
console.log('\n✅ Custom Event Edit Form Test Complete!');
|
||
console.log(' - Form loads without JavaScript dependencies');
|
||
console.log(' - Fields populate from database');
|
||
console.log(' - Changes save and persist');
|
||
console.log(' - No longer relies on TEC shortcode\n');
|
||
|
||
} catch (error) {
|
||
console.error('❌ Test failed:', error.message);
|
||
|
||
// Take screenshot for debugging
|
||
await page.screenshot({
|
||
path: `test-error-${Date.now()}.png`,
|
||
fullPage: true
|
||
});
|
||
console.log('📸 Screenshot saved for debugging');
|
||
|
||
throw error;
|
||
} finally {
|
||
await browser.close();
|
||
}
|
||
}
|
||
|
||
// Run the test
|
||
testCustomEventEdit()
|
||
.then(() => {
|
||
console.log('🎉 All tests passed!');
|
||
process.exit(0);
|
||
})
|
||
.catch(error => {
|
||
console.error('💥 Test suite failed:', error);
|
||
process.exit(1);
|
||
}); |