markitect-main/test_reset_functionality.js

#!/usr/bin/env node

/**
 * Test the reset button functionality for both text and image sections
 */

const fs = require('fs');
const { JSDOM } = require('jsdom');

// Load the generated HTML file
const htmlContent = fs.readFileSync('/tmp/test_reset_buttons.html', 'utf8');

// Create JSDOM environment
const dom = new JSDOM(htmlContent, {
    runScripts: "dangerously",
    resources: "usable",
    pretendToBeVisual: true
});

const { window } = dom;
const { document } = window;

// Add console methods to window for debugging
window.console = console;

// Mock viewport dimensions
window.innerWidth = 1200;
window.innerHeight = 800;

// Wait for DOM to load and components to initialize
setTimeout(() => {
    try {
        console.log('🔄 Testing Reset Button Functionality...\n');

        const components = window.markitectComponents;
        if (!components) {
            console.error('❌ Components not initialized');
            return;
        }

        const sections = document.querySelectorAll('.ui-edit-section');
        console.log(`Found ${sections.length} sections to test`);

        let testCount = 0;
        let passedTests = 0;

        // Test text section reset functionality
        const testTextSectionReset = (sectionIndex) => {
            if (sectionIndex >= sections.length) {
                // Test image section after all text sections
                testImageSectionReset();
                return;
            }

            const section = sections[sectionIndex];
            const sectionId = section.getAttribute('data-section-id');
            const sectionObj = components.sectionManager.sections.get(sectionId);

            // Skip image sections for this test
            if (sectionObj && sectionObj.isImage()) {
                testTextSectionReset(sectionIndex + 1);
                return;
            }

            testCount++;
            console.log(`\nTEST ${testCount}: Text Reset - Section ${sectionId}`);

            // Click section to open editor
            section.click();

            setTimeout(() => {
                const floatingMenu = document.querySelector('.ui-edit-floating-menu');

                if (floatingMenu) {
                    const textarea = floatingMenu.querySelector('textarea');
                    const resetButton = Array.from(floatingMenu.querySelectorAll('button'))
                        .find(btn => btn.textContent.includes('Reset'));

                    if (textarea && resetButton) {
                        // Get original content
                        const originalContent = textarea.value;
                        console.log(`  📝 Original content length: ${originalContent.length} chars`);

                        // Modify content
                        textarea.value = "MODIFIED CONTENT FOR TESTING";
                        console.log(`  ✏️  Modified content: "${textarea.value}"`);

                        // Click reset button
                        resetButton.click();

                        setTimeout(() => {
                            const resetContent = textarea.value;
                            console.log(`  🔄 Reset content length: ${resetContent.length} chars`);

                            if (resetContent === originalContent) {
                                passedTests++;
                                console.log(`  ✅ Reset button works correctly`);
                            } else {
                                console.log(`  ❌ Reset button failed`);
                                console.log(`  Expected: "${originalContent.substring(0, 50)}..."`);
                                console.log(`  Got: "${resetContent.substring(0, 50)}..."`);
                            }

                            // Close editor and move to next
                            const cancelBtn = Array.from(floatingMenu.querySelectorAll('button'))
                                .find(btn => btn.textContent.includes('Cancel'));
                            if (cancelBtn) {
                                cancelBtn.click();
                            }

                            setTimeout(() => {
                                testTextSectionReset(sectionIndex + 1);
                            }, 100);
                        }, 100);

                    } else {
                        console.log(`  ❌ Missing elements - Textarea: ${!!textarea}, Reset Button: ${!!resetButton}`);
                        testTextSectionReset(sectionIndex + 1);
                    }
                } else {
                    console.log(`  ❌ Failed to open editor`);
                    testTextSectionReset(sectionIndex + 1);
                }
            }, 200);
        };

        // Test image section reset functionality
        const testImageSectionReset = () => {
            // Find image section
            const imageSection = Array.from(sections).find(section => {
                const sectionId = section.getAttribute('data-section-id');
                const sectionObj = components.sectionManager.sections.get(sectionId);
                return sectionObj && sectionObj.isImage();
            });

            if (!imageSection) {
                console.log('\n⚠️  No image section found for testing');
                showFinalResults();
                return;
            }

            testCount++;
            const sectionId = imageSection.getAttribute('data-section-id');
            console.log(`\nTEST ${testCount}: Image Reset - Section ${sectionId}`);

            // Click image section to open editor
            imageSection.click();

            setTimeout(() => {
                const floatingMenu = document.querySelector('.ui-edit-floating-menu');

                if (floatingMenu) {
                    const altTextInput = floatingMenu.querySelector('input[type="text"]');
                    const resetButton = Array.from(floatingMenu.querySelectorAll('button'))
                        .find(btn => btn.textContent.includes('Reset'));

                    if (altTextInput && resetButton) {
                        // Get original alt text
                        const originalAltText = altTextInput.value;
                        console.log(`  📝 Original alt text: "${originalAltText}"`);

                        // Modify alt text
                        altTextInput.value = "MODIFIED ALT TEXT FOR TESTING";
                        altTextInput.dispatchEvent(new window.Event('input'));
                        console.log(`  ✏️  Modified alt text: "${altTextInput.value}"`);

                        // Wait a moment for staging state to update
                        setTimeout(() => {
                            // Click reset button
                            resetButton.click();

                            setTimeout(() => {
                                const resetAltText = altTextInput.value;
                                console.log(`  🔄 Reset alt text: "${resetAltText}"`);

                                if (resetAltText === originalAltText) {
                                    passedTests++;
                                    console.log(`  ✅ Image reset button works correctly`);
                                } else {
                                    console.log(`  ❌ Image reset button failed`);
                                    console.log(`  Expected: "${originalAltText}"`);
                                    console.log(`  Got: "${resetAltText}"`);
                                }

                                // Close editor
                                const cancelBtn = Array.from(floatingMenu.querySelectorAll('button'))
                                    .find(btn => btn.textContent.includes('Cancel'));
                                if (cancelBtn) {
                                    cancelBtn.click();
                                }

                                setTimeout(() => {
                                    showFinalResults();
                                }, 100);

                            }, 100);
                        }, 100);

                    } else {
                        console.log(`  ❌ Missing elements - Alt Text Input: ${!!altTextInput}, Reset Button: ${!!resetButton}`);
                        showFinalResults();
                    }
                } else {
                    console.log(`  ❌ Failed to open image editor`);
                    showFinalResults();
                }
            }, 200);
        };

        const showFinalResults = () => {
            console.log('\n📊 RESET BUTTON TEST SUMMARY:');
            console.log(`  Total tests: ${testCount}`);
            console.log(`  Passed tests: ${passedTests}`);
            console.log(`  Success rate: ${Math.round((passedTests / testCount) * 100)}%`);

            if (passedTests === testCount) {
                console.log('\n🎉 All reset buttons working correctly!');
            } else {
                console.log('\n⚠️  Some reset buttons need fixes');
            }
        };

        // Start testing with text sections
        testTextSectionReset(0);

    } catch (error) {
        console.error('❌ Test failed:', error.message);
        console.error(error.stack);
    }
}, 1000);