markitect-main/test_cancel_button_debug.js

#!/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;