markitect-main/test_button_functionality.js

#!/usr/bin/env node

/**
 * Test script to verify accept/cancel button functionality
 * in the new modular architecture
 */

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

// Load the generated HTML file
const htmlContent = fs.readFileSync('/tmp/test_modular_integration.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 modular architecture button functionality...');

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

        console.log('✅ Components initialized:', Object.keys(components));

        const { sectionManager, domRenderer, debugPanel, documentControls } = components;

        // Test section creation and rendering
        const testMarkdown = `# Test Section\nThis is test content for button functionality.`;
        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
        console.log(`✅ Created ${sections.length} sections`);

        // Render sections
        domRenderer.renderAllSections(sections);
        const renderedSections = document.querySelectorAll('.ui-edit-section');
        console.log(`✅ Rendered ${renderedSections.length} section elements`);

        if (renderedSections.length > 0) {
            const firstSection = sections[0];
            console.log(`🔍 Testing section: ${firstSection.id}`);

            // Start editing
            sectionManager.startEditing(firstSection.id);
            console.log('✅ Started editing');

            // Check if floating menu is created
            setTimeout(() => {
                const floatingMenu = document.querySelector('.ui-edit-floating-menu');
                if (floatingMenu) {
                    console.log('✅ Floating menu created');

                    // Check for accept and cancel buttons
                    const acceptButton = floatingMenu.querySelector('button[style*="background: #28a745"]');
                    const cancelButton = floatingMenu.querySelector('button[style*="background: #dc3545"]');

                    if (acceptButton && cancelButton) {
                        console.log('✅ Accept and Cancel buttons found');

                        // Test accept button
                        const originalContent = firstSection.currentMarkdown;
                        const newContent = '# Updated Test Section\nUpdated content';

                        // Update content
                        const textarea = floatingMenu.querySelector('textarea');
                        if (textarea) {
                            textarea.value = newContent;
                            console.log('✅ Updated textarea content');

                            // Click accept button
                            acceptButton.click();
                            console.log('✅ Clicked accept button');

                            // Verify content was accepted
                            setTimeout(() => {
                                if (firstSection.currentMarkdown === newContent) {
                                    console.log('✅ Accept button functionality verified - content updated');
                                } else {
                                    console.log('❌ Accept button failed - content not updated');
                                }

                                // Test cancel functionality
                                sectionManager.startEditing(firstSection.id);
                                setTimeout(() => {
                                    const newFloatingMenu = document.querySelector('.ui-edit-floating-menu');
                                    const newCancelButton = newFloatingMenu?.querySelector('button[style*="background: #dc3545"]');
                                    const newTextarea = newFloatingMenu?.querySelector('textarea');

                                    if (newTextarea && newCancelButton) {
                                        const beforeCancel = firstSection.currentMarkdown;
                                        newTextarea.value = 'This should be cancelled';

                                        // Click cancel button
                                        newCancelButton.click();
                                        console.log('✅ Clicked cancel button');

                                        setTimeout(() => {
                                            if (firstSection.currentMarkdown === beforeCancel) {
                                                console.log('✅ Cancel button functionality verified - content unchanged');
                                                console.log('🎉 All button functionality tests passed!');
                                            } else {
                                                console.log('❌ Cancel button failed - content was changed');
                                            }
                                        }, 100);
                                    }
                                }, 100);
                            }, 100);
                        } else {
                            console.log('❌ Textarea not found in floating menu');
                        }
                    } else {
                        console.log('❌ Accept/Cancel buttons not found');
                        console.log('Available buttons:', floatingMenu.querySelectorAll('button').length);
                    }
                } else {
                    console.log('❌ Floating menu not created');
                }
            }, 200);
        } else {
            console.log('❌ No sections rendered');
        }
    } catch (error) {
        console.error('❌ Test failed:', error.message);
    }
}, 1000);