markitect-main/test_image_reset_debug.js

#!/usr/bin/env node

/**
 * Debug the image reset button functionality with detailed logging
 */

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

// Load the generated HTML file
const htmlContent = fs.readFileSync('/tmp/test_image_reset_debug.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('🔍 Debugging Image Reset Button...\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`);

        // Find the 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.error('❌ No image section found');
            return;
        }

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

        console.log('📝 Image Section Details:');
        console.log(`  Section ID: ${sectionId}`);
        console.log(`  Current markdown: "${sectionObj.currentMarkdown}"`);
        console.log(`  Original markdown: "${sectionObj.originalMarkdown}"`);

        // Click image section to open editor
        console.log('\n🖱️  Clicking image section...');
        imageSection.click();

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

            if (floatingMenu) {
                console.log('✅ Image editor opened');

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

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

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

                    // Wait for staging state to update
                    setTimeout(() => {
                        console.log('\n🔄 Clicking reset button...');
                        resetButton.click();

                        setTimeout(() => {
                            const finalAltText = altTextInput.value;
                            console.log(`\n📝 Final alt text: "${finalAltText}"`);

                            if (finalAltText === originalAltText) {
                                console.log('✅ Image reset worked correctly!');
                            } else {
                                console.log('❌ Image reset failed!');
                                console.log(`  Expected: "${originalAltText}"`);
                                console.log(`  Got: "${finalAltText}"`);
                            }

                        }, 200);
                    }, 200);

                } else {
                    console.log(`❌ Missing elements - Alt Input: ${!!altTextInput}, Reset Button: ${!!resetButton}`);
                }
            } else {
                console.log('❌ Image editor failed to open');
            }
        }, 300);

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