markitect-main/history/2025/251114-javascript-dev-tests/test_image_editor_debug.js

#!/usr/bin/env node

/**
 * Debug Image Editor Issues
 *
 * Tests to identify why the image editor is not working
 */

const { TestRunner } = require('./test_runner.js');
const runner = new TestRunner();

runner.describe('Image Editor Debug Tests', () => {

    runner.it('should successfully call showImageEditor method', 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);

            // Create image section
            const imageMarkdown = '![Test Image](https://via.placeholder.com/400x200)';
            const sections = manager.createSectionsFromMarkdown(imageMarkdown);
            const imageSection = sections[0];

            runner.expect(imageSection.isImage()).toBeTruthy();

            const mockElement = document.createElement('div');
            mockElement.setAttribute('data-section-id', imageSection.id);
            Object.defineProperties(mockElement, {
                getBoundingClientRect: {
                    value: () => ({ top: 100, right: 400, bottom: 200, left: 50, width: 350, height: 100 })
                }
            });

            renderer.findSectionElement = () => mockElement;

            // Try to show image editor
            try {
                renderer.showImageEditor(imageSection.id, imageSection);

                // Check if floating menu was created
                const floatingMenu = document.querySelector('.ui-edit-floating-menu[data-edit-type="image"]');
                runner.expect(floatingMenu).toBeTruthy();

                // Check if it has image-specific content
                const imagePreview = floatingMenu.querySelector('.ui-edit-image-preview');
                const altTextInput = floatingMenu.querySelector('input[type="text"]');

                runner.expect(imagePreview).toBeTruthy();
                runner.expect(altTextInput).toBeTruthy();
                runner.expect(altTextInput.value).toBe('Test Image');

                // Cleanup
                floatingMenu.remove();
            } catch (error) {
                console.error('Error in showImageEditor:', error);
                runner.expect(false).toBeTruthy(); // Fail the test
            }

            // Cleanup
            document.body.removeChild(container);
        }
    });

    runner.it('should detect image sections correctly', async () => {
        if (global.SectionManager) {
            const manager = new global.SectionManager();

            // Test various image formats
            const imageMarkdowns = [
                '![Alt text](image.jpg)',
                '![](image.png)',
                '![Long alt text description](https://example.com/image.gif)',
                '![Test](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA)'
            ];

            imageMarkdowns.forEach((markdown, index) => {
                const sections = manager.createSectionsFromMarkdown(markdown);
                const section = sections[0];

                console.log(`Testing markdown ${index}: ${markdown}`);
                console.log(`Section type: ${section.constructor.name}`);
                console.log(`isImage(): ${section.isImage()}`);

                runner.expect(section.isImage()).toBeTruthy();
            });
        }
    });

    runner.it('should handle image editor button creation without errors', 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);

            // Test button creation methods
            try {
                const testBtn1 = renderer.createButton('Test', 'test-class', () => {});
                runner.expect(testBtn1).toBeTruthy();
                runner.expect(testBtn1.tagName).toBe('BUTTON');

                const testBtn2 = renderer.createButton('✓ Accept', 'ui-edit-accept', () => {});
                runner.expect(testBtn2).toBeTruthy();
                runner.expect(testBtn2.textContent).toBe('✓ Accept');

            } catch (error) {
                console.error('Error creating buttons:', error);
                runner.expect(false).toBeTruthy();
            }

            // Cleanup
            document.body.removeChild(container);
        }
    });

    runner.it('should check for syntax errors in image editor 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);

            // Verify method exists and is callable
            runner.expect(typeof renderer.showImageEditor).toBe('function');

            const imageMarkdown = '![Test](test.jpg)';
            const sections = manager.createSectionsFromMarkdown(imageMarkdown);
            const imageSection = sections[0];

            const mockElement = document.createElement('div');
            mockElement.setAttribute('data-section-id', imageSection.id);
            Object.defineProperties(mockElement, {
                getBoundingClientRect: {
                    value: () => ({ top: 100, right: 400, bottom: 200, left: 50, width: 350, height: 100 })
                }
            });

            renderer.findSectionElement = () => mockElement;

            // Check if we can at least start the method without throwing
            let methodStarted = false;
            try {
                // Mock createFloatingMenu to see if we get that far
                const originalCreateFloatingMenu = renderer.createFloatingMenu;
                renderer.createFloatingMenu = function() {
                    methodStarted = true;
                    return originalCreateFloatingMenu.apply(this, arguments);
                };

                renderer.showImageEditor(imageSection.id, imageSection);
                runner.expect(methodStarted).toBeTruthy();

            } catch (error) {
                console.error('Method failed before reaching createFloatingMenu:', error);
                console.error('Stack trace:', error.stack);
                runner.expect(false).toBeTruthy();
            }

            // Cleanup
            document.body.removeChild(container);
            const floatingMenu = document.querySelector('.ui-edit-floating-menu');
            if (floatingMenu) floatingMenu.remove();
        }
    });
});

// Run the tests
if (require.main === module) {
    console.log('🔍 Running Image Editor 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 - image editor has issues`);
            results.forEach(result => {
                if (result.status === 'FAIL') {
                    console.log(`\nFailed test: ${result.name}`);
                    if (result.error) {
                        console.log(`Error: ${result.error}`);
                    }
                }
            });
        } else {
            console.log('✅ All image editor debug tests passed!');
        }
    });
}

module.exports = runner;