upskill-event-manager/wordpress-dev/tests/e2e/certificate-preview-test.test.ts

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

/**
 * Certificate Preview Test
 * 
 * Tests the new certificate preview functionality:
 * - AJAX certificate generation
 * - Preview URL generation with secure tokens  
 * - Modal display of certificate content
 * - Real PDF preview (not blank iframe)
 */
test.describe('Certificate Preview Functionality', () => {
    
    test.beforeEach(async ({ page }) => {
        // Login as test_trainer
        await page.goto(PATHS.login);
        await page.fill('#user_login', 'test_trainer');
        await page.fill('#user_pass', 'Test123!');
        await page.click('#wp-submit');
        
        // Wait for dashboard redirect
        await page.waitForURL('**/hvac-dashboard/**');
        await page.waitForLoadState('networkidle');
    });

    test('should generate certificates with preview functionality', async ({ page }) => {
        console.log('=== Testing Certificate Preview Functionality ===');
        
        // Navigate to Generate Certificates
        await page.goto(PATHS.generateCertificates);
        await page.waitForLoadState('networkidle');
        
        // Verify page loads
        await expect(page.locator('h1')).toContainText('Generate Certificates');
        
        // Select an event that has attendees
        const eventSelect = page.locator('#event_id');
        await expect(eventSelect).toBeVisible();
        
        // Get available events
        const options = await eventSelect.locator('option:not([value=""])').all();
        console.log(`Found ${options.length} events with attendees`);
        
        if (options.length === 0) {
            console.log('No events with attendees found - skipping test');
            return;
        }
        
        // Select the first event
        const firstOption = options[0];
        const eventValue = await firstOption.getAttribute('value');
        const eventText = await firstOption.textContent();
        console.log(`Selecting event: ${eventText} (ID: ${eventValue})`);
        
        await eventSelect.selectOption(eventValue);
        
        // Wait for attendees to load via AJAX
        await page.waitForSelector('#step-select-attendees', { state: 'visible' });
        await page.waitForSelector('.hvac-attendees-table', { state: 'visible' });
        
        // Verify attendees loaded
        const attendeeRows = page.locator('.hvac-attendees-table tbody tr');
        const attendeeCount = await attendeeRows.count();
        console.log(`Found ${attendeeCount} attendees for this event`);
        
        expect(attendeeCount).toBeGreaterThan(0);
        
        // Select the first attendee without an existing certificate
        const firstCheckbox = page.locator('.attendee-checkbox').first();
        await expect(firstCheckbox).toBeVisible();
        await firstCheckbox.check();
        
        // Generate certificates
        console.log('Generating certificates...');
        const generateButton = page.locator('#generate-certificates-form button[type="submit"]');
        await expect(generateButton).toBeVisible();
        await generateButton.click();
        
        // Wait for AJAX response
        await page.waitForSelector('.hvac-success-message, .hvac-errors', { timeout: 10000 });
        
        // Check for success message
        const successMessage = page.locator('.hvac-success-message');
        if (await successMessage.isVisible()) {
            const messageText = await successMessage.textContent();
            console.log('Certificate generation success:', messageText);
            
            // Look for preview buttons
            const previewButtons = page.locator('.hvac-preview-certificate');
            const previewCount = await previewButtons.count();
            console.log(`Found ${previewCount} preview buttons`);
            
            if (previewCount > 0) {
                console.log('Testing certificate preview modal...');
                
                // Click the first preview button
                const firstPreviewButton = previewButtons.first();
                const attendeeName = await firstPreviewButton.getAttribute('data-attendee');
                const previewUrl = await firstPreviewButton.getAttribute('data-url');
                
                console.log(`Preview button for: ${attendeeName}`);
                console.log(`Preview URL: ${previewUrl}`);
                
                expect(previewUrl).toContain('hvac-certificate/');
                expect(previewUrl).toMatch(/hvac-certificate\/[a-zA-Z0-9]{32}$/);
                
                // Click preview button
                await firstPreviewButton.click();
                
                // Wait for modal to appear
                await page.waitForSelector('#hvac-certificate-preview-modal', { state: 'visible' });
                
                // Verify modal structure
                const modal = page.locator('#hvac-certificate-preview-modal');
                await expect(modal).toBeVisible();
                
                const modalTitle = page.locator('#hvac-certificate-preview-modal h3');
                await expect(modalTitle).toContainText(attendeeName);
                
                // Verify iframe is present and has the correct src
                const iframe = page.locator('#hvac-certificate-preview-iframe');
                await expect(iframe).toBeVisible();
                
                const iframeSrc = await iframe.getAttribute('src');
                console.log(`Iframe src: ${iframeSrc}`);
                expect(iframeSrc).toBe(previewUrl);
                
                // Test iframe content loads (not blank)
                await page.waitForTimeout(3000); // Give iframe time to load
                
                // Try to access iframe content to verify it's not blank
                // Note: Cross-origin restrictions may prevent full content verification
                try {
                    await iframe.waitForLoadState('networkidle', { timeout: 5000 });
                    console.log('Certificate preview iframe loaded successfully');
                } catch (error) {
                    console.log('Iframe load check skipped due to cross-origin restrictions');
                }
                
                // Test modal close functionality
                const closeButton = page.locator('.hvac-modal-close');
                await expect(closeButton).toBeVisible();
                await closeButton.click();
                
                // Verify modal closes
                await page.waitForSelector('#hvac-certificate-preview-modal', { state: 'hidden' });
                console.log('Modal closed successfully');
                
                console.log('✅ Certificate preview functionality working correctly');
            } else {
                console.log('⚠️ No preview buttons found - check if certificates were generated');
            }
        } else {
            const errorMessage = page.locator('.hvac-errors');
            if (await errorMessage.isVisible()) {
                const errorText = await errorMessage.textContent();
                console.log('Certificate generation error:', errorText);
                throw new Error(`Certificate generation failed: ${errorText}`);
            }
        }
    });

    test('should verify certificate security URL format', async ({ page }) => {
        console.log('=== Testing Certificate Security URL Format ===');
        
        // Navigate to Certificate Reports to check existing certificates
        await page.goto(PATHS.certificatesReport);
        await page.waitForLoadState('networkidle');
        
        // Check if there are any certificates
        const certificateTable = page.locator('.hvac-certificate-table');
        
        if (await certificateTable.isVisible()) {
            const downloadLinks = page.locator('a[href*="hvac-certificate/"]');
            const linkCount = await downloadLinks.count();
            
            if (linkCount > 0) {
                const firstLink = downloadLinks.first();
                const href = await firstLink.getAttribute('href');
                console.log(`Certificate download URL: ${href}`);
                
                // Verify URL format matches security pattern
                expect(href).toMatch(/\/hvac-certificate\/[a-zA-Z0-9]{32}$/);
                console.log('✅ Certificate security URL format is correct');
            } else {
                console.log('No certificate download links found');
            }
        } else {
            console.log('No certificate table found - may need to generate certificates first');
        }
    });

    test('should test direct certificate URL access', async ({ page }) => {
        console.log('=== Testing Direct Certificate URL Access ===');
        
        // Test with an invalid token
        const invalidToken = 'a'.repeat(32);
        const invalidUrl = `${STAGING_URL}/hvac-certificate/${invalidToken}`;
        
        console.log(`Testing invalid certificate URL: ${invalidUrl}`);
        
        const response = await page.goto(invalidUrl);
        
        // Should get an error page for invalid token
        if (response) {
            const status = response.status();
            console.log(`Response status: ${status}`);
            
            // Could be 404, 403, or a custom error page
            expect([200, 403, 404]).toContain(status);
            
            if (status === 200) {
                // Check for error message in content
                const content = await page.textContent('body');
                expect(content).toMatch(/invalid|expired|not found/i);
            }
        }
        
        console.log('✅ Invalid certificate URL properly handled');
    });
});