chore: cleanup of history file

history/2025/251114-javascript-dev-tests/test_cancel_button_debug.js

@@ -0,0 +1,177 @@
+#!/usr/bin/env node
+
+/**
+ * Debug Cancel Button Issues
+ *
+ * Detailed testing of cancel button functionality to identify issues
+ */
+
+const { TestRunner } = require('./test_runner.js');
+const runner = new TestRunner();
+
+runner.describe('Cancel Button Debug Tests', () => {
+
+    runner.it('should properly restore original content on cancel', async () => {
+        // Load editor
+        delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')];
+        require('/home/worsch/markitect_project/markitect/static/editor.js');
+
+        if (global.DOMRenderer && global.SectionManager) {
+            const container = document.createElement('div');
+            container.innerHTML = '<div id="markdown-content"></div>';
+            document.body.appendChild(container);
+
+            const manager = new global.SectionManager();
+            const renderer = new global.DOMRenderer(manager, container);
+
+            const originalMarkdown = '# Original Content\n\nThis is the original text.';
+            const sections = manager.createSectionsFromMarkdown(originalMarkdown);
+            const textSection = sections[0];
+
+            const mockElement = document.createElement('div');
+            mockElement.setAttribute('data-section-id', textSection.id);
+            mockElement.innerHTML = '<h1>Original Content</h1><p>This is the original text.</p>';
+            const originalHTML = mockElement.innerHTML;
+
+            renderer.findSectionElement = () => mockElement;
+
+            // Start editing and modify content
+            manager.startEditing(textSection.id);
+            manager.updateContent(textSection.id, '# Modified Content\n\nThis text was changed.');
+
+            console.log('Before editing - section content:', textSection.currentMarkdown);
+            console.log('Before editing - element HTML:', mockElement.innerHTML);
+
+            // Show editor
+            renderer.showEditor(textSection.id, textSection.currentMarkdown);
+
+            // Verify overlay is created
+            const overlayContainer = mockElement.querySelector('.ui-edit-overlay-container');
+            runner.expect(overlayContainer).toBeTruthy();
+
+            // Verify original content is stored
+            console.log('Original content stored:', overlayContainer.dataset.originalContent);
+
+            // Click cancel button
+            const cancelBtn = mockElement.querySelector('.ui-edit-button-cancel');
+            runner.expect(cancelBtn).toBeTruthy();
+
+            console.log('About to click cancel button...');
+            cancelBtn.click();
+
+            console.log('After cancel - section content:', textSection.currentMarkdown);
+            console.log('After cancel - element HTML:', mockElement.innerHTML);
+
+            // Verify changes were cancelled
+            runner.expect(textSection.currentMarkdown).toBe(originalMarkdown);
+
+            // Verify overlay is removed
+            const overlayAfterCancel = mockElement.querySelector('.ui-edit-overlay-container');
+            runner.expect(overlayAfterCancel).toBeFalsy();
+
+            // Verify original HTML is restored
+            runner.expect(mockElement.innerHTML).toBe(originalHTML);
+
+            // Cleanup
+            document.body.removeChild(container);
+        }
+    });
+
+    runner.it('should handle cancel with no updateSectionContent method', async () => {
+        if (global.DOMRenderer && global.SectionManager) {
+            const container = document.createElement('div');
+            container.innerHTML = '<div id="markdown-content"></div>';
+            document.body.appendChild(container);
+
+            const manager = new global.SectionManager();
+            const renderer = new global.DOMRenderer(manager, container);
+
+            const originalMarkdown = '# Test Content';
+            const sections = manager.createSectionsFromMarkdown(originalMarkdown);
+            const textSection = sections[0];
+
+            const mockElement = document.createElement('div');
+            mockElement.setAttribute('data-section-id', textSection.id);
+            mockElement.innerHTML = '<h1>Test Content</h1>';
+
+            renderer.findSectionElement = () => mockElement;
+
+            // Don't mock updateSectionContent - test without it
+
+            manager.startEditing(textSection.id);
+            manager.updateContent(textSection.id, '# Modified');
+
+            renderer.showEditor(textSection.id, textSection.currentMarkdown);
+
+            const cancelBtn = mockElement.querySelector('.ui-edit-button-cancel');
+
+            // This should not throw an error
+            try {
+                cancelBtn.click();
+                runner.expect(true).toBeTruthy(); // Test passes if no error
+            } catch (error) {
+                console.error('Cancel button error:', error);
+                runner.expect(false).toBeTruthy(); // Fail test if error thrown
+            }
+
+            // Cleanup
+            document.body.removeChild(container);
+        }
+    });
+
+    runner.it('should call getCurrentEditingSectionId correctly', async () => {
+        if (global.DOMRenderer && global.SectionManager) {
+            const container = document.createElement('div');
+            container.innerHTML = '<div id="markdown-content"></div>';
+            document.body.appendChild(container);
+
+            const manager = new global.SectionManager();
+            const renderer = new global.DOMRenderer(manager, container);
+
+            const textMarkdown = '# Test';
+            const sections = manager.createSectionsFromMarkdown(textMarkdown);
+            const textSection = sections[0];
+
+            const mockElement = document.createElement('div');
+            mockElement.setAttribute('data-section-id', textSection.id);
+            renderer.findSectionElement = () => mockElement;
+
+            renderer.showEditor(textSection.id, textSection.currentMarkdown);
+
+            const cancelBtn = mockElement.querySelector('.ui-edit-button-cancel');
+
+            // Test the method directly
+            const sectionId = renderer.getCurrentEditingSectionId(cancelBtn);
+            console.log('getCurrentEditingSectionId result:', sectionId);
+            console.log('Expected section ID:', textSection.id);
+
+            runner.expect(sectionId).toBe(textSection.id);
+
+            // Cleanup
+            document.body.removeChild(container);
+        }
+    });
+});
+
+// Run the tests
+if (require.main === module) {
+    console.log('🐛 Running Cancel Button Debug Tests');
+    runner.run().then(() => {
+        const results = runner.results;
+        const failed = results.filter(r => r.status === 'FAIL').length;
+
+        if (failed > 0) {
+            console.log(`❌ ${failed} test(s) failed - cancel button has issues`);
+            results.forEach(result => {
+                if (result.status === 'FAIL') {
+                    console.log(`Failed test: ${result.name}`);
+                    console.log(`Error: ${result.error}`);
+                }
+            });
+        } else {
+            console.log('✅ All cancel button debug tests passed!');
+        }
+    });
+}
+
+module.exports = runner;