markitect-main/test_real_functionality.js

#!/usr/bin/env node

/**
 * Test the ACTUAL functionality that users care about:
 * 1. Content changes are written back to DOM
 * 2. Reset button works
 * 3. Visual changes are actually visible
 */

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

// Load the generated HTML file
const htmlContent = fs.readFileSync('/tmp/test_reset_and_content_update.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;

// Wait for DOM to load and components to initialize
setTimeout(() => {
    try {
        console.log('🧪 Testing REAL functionality that users experience...\n');

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

        const { sectionManager, domRenderer, documentControls } = components;

        // Test 1: Content changes are written back to DOM
        console.log('TEST 1: Content changes written back to DOM');
        const sections = document.querySelectorAll('.ui-edit-section');
        if (sections.length > 0) {
            const firstSection = sections[0];
            const sectionId = firstSection.getAttribute('data-section-id');
            const originalHTML = firstSection.innerHTML;

            console.log(`  Original content: ${originalHTML.substring(0, 50)}...`);

            // Click to edit
            firstSection.click();

            setTimeout(() => {
                const floatingMenu = document.querySelector('.ui-edit-floating-menu');
                if (floatingMenu) {
                    const textarea = floatingMenu.querySelector('textarea');
                    const acceptButton = Array.from(floatingMenu.querySelectorAll('button')).find(btn => btn.textContent.includes('Accept'));

                    if (textarea && acceptButton) {
                        const newContent = '# CHANGED TITLE\nThis content has been completely changed by the test.';
                        textarea.value = newContent;

                        console.log(`  Updated textarea to: ${newContent.substring(0, 50)}...`);

                        // Accept changes
                        acceptButton.click();

                        setTimeout(() => {
                            // Check if DOM was updated
                            const updatedSection = document.querySelector(`[data-section-id="${sectionId}"]`);
                            const updatedHTML = updatedSection ? updatedSection.innerHTML : '';

                            console.log(`  Updated DOM content: ${updatedHTML.substring(0, 50)}...`);

                            if (updatedHTML !== originalHTML && updatedHTML.includes('CHANGED TITLE')) {
                                console.log('  ✅ PASS: Content was written back to DOM');
                            } else {
                                console.log('  ❌ FAIL: Content was NOT written back to DOM');
                                console.log(`     Original: ${originalHTML}`);
                                console.log(`     Updated:  ${updatedHTML}`);
                            }

                            // Test 2: Reset button functionality
                            setTimeout(() => {
                                console.log('\nTEST 2: Reset button functionality');

                                const resetButton = documentControls.getButton('reset-all');
                                if (resetButton) {
                                    console.log('  Found reset button, clicking...');
                                    resetButton.click();

                                    setTimeout(() => {
                                        // Check if content was reset
                                        const resetSection = document.querySelector(`[data-section-id="${sectionId}"]`);
                                        const resetHTML = resetSection ? resetSection.innerHTML : '';

                                        console.log(`  Reset content: ${resetHTML.substring(0, 50)}...`);

                                        if (resetHTML !== updatedHTML && !resetHTML.includes('CHANGED TITLE')) {
                                            console.log('  ✅ PASS: Reset button restored original content');
                                        } else {
                                            console.log('  ❌ FAIL: Reset button did not work');
                                        }

                                        // Test 3: Verify section state management
                                        console.log('\nTEST 3: Section state management');
                                        const section = sectionManager.sections.get(sectionId);
                                        if (section) {
                                            console.log(`  Section editing state: ${section.isEditing()}`);
                                            console.log(`  Section has changes: ${section.hasChanges()}`);
                                            console.log(`  Section state: ${section.editState}`);

                                            if (!section.isEditing() && !section.hasChanges()) {
                                                console.log('  ✅ PASS: Section state properly reset');
                                            } else {
                                                console.log('  ❌ FAIL: Section state not properly reset');
                                            }
                                        }

                                        console.log('\n📊 SUMMARY:');
                                        console.log('This test validates the core user experience:');
                                        console.log('- Users can see their changes reflected in the page');
                                        console.log('- Users can reset all changes with one button');
                                        console.log('- The system properly manages editing states');

                                    }, 200);
                                } else {
                                    console.log('  ❌ FAIL: Reset button not found');
                                }
                            }, 200);

                        }, 200);
                    } else {
                        console.log('  ❌ FAIL: Could not find textarea or accept button');
                    }
                } else {
                    console.log('  ❌ FAIL: Floating menu did not appear');
                }
            }, 200);
        } else {
            console.log('❌ No sections found to test');
        }

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