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

test_real_functionality.js

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