refactor: Still trying to reorganize edit mode to be more robust

test_button_functionality.js

@@ -0,0 +1,139 @@
+#!/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);