markitect-main/history/javascript-dev-tests/test_image_functionality_fix.js

#!/usr/bin/env node

/**
 * Test Image Functionality Fix
 *
 * Tests to verify image editing functionality works correctly
 */

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

runner.describe('Image Functionality Fix Tests', () => {

    runner.it('should load editor with image handling methods', 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) {
            const container = document.createElement('div');
            const manager = new global.SectionManager();
            const renderer = new global.DOMRenderer(manager, container);

            // Check that image methods exist
            runner.expect(typeof renderer.showImageEditor).toBe('function');
            runner.expect(typeof renderer.replaceImage).toBe('function');
            runner.expect(typeof renderer.resizeImage).toBe('function');
            runner.expect(typeof renderer.addImageCaption).toBe('function');
            runner.expect(typeof renderer.removeImage).toBe('function');
        }
    });

    runner.it('should handle image section creation and editing', async () => {
        if (global.DOMRenderer && global.SectionManager) {
            const container = document.createElement('div');
            const manager = new global.SectionManager();
            const renderer = new global.DOMRenderer(manager, container);

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

            // Verify image is detected in content
            runner.expect(imageSection.currentMarkdown.includes('![Test Image]')).toBeTruthy();
            runner.expect(imageSection.currentMarkdown.includes('placeholder')).toBeTruthy();

            // Test that resizeImage method can be called without error
            try {
                // Mock prompt to avoid user interaction
                const originalPrompt = global.prompt;
                global.prompt = () => '300px';

                renderer.resizeImage(imageSection.id);

                global.prompt = originalPrompt;
                runner.expect(true).toBeTruthy(); // If we get here, no error occurred
            } catch (error) {
                runner.expect(false).toBeTruthy(); // Method should not throw
            }
        }
    });

    runner.it('should handle image replacement flow without errors', async () => {
        if (global.DOMRenderer && global.SectionManager) {
            const container = document.createElement('div');
            const manager = new global.SectionManager();
            const renderer = new global.DOMRenderer(manager, container);

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

            // Verify updateSectionContent method exists (needed for image replacement)
            runner.expect(typeof renderer.updateSectionContent).toBe('function');

            // Verify the image section has proper structure
            runner.expect(imageSection.currentMarkdown.match(/!\[(.*?)\]\((.*?)\)/)).toBeTruthy();
        }
    });

    runner.it('should handle image alt text updates correctly', async () => {
        if (global.DOMRenderer && global.SectionManager) {
            const container = document.createElement('div');
            const manager = new global.SectionManager();
            const renderer = new global.DOMRenderer(manager, container);

            // Create section with image
            const originalMarkdown = '![Original Alt](https://via.placeholder.com/400x200)';
            const sections = manager.createSectionsFromMarkdown(originalMarkdown);
            const imageSection = sections[0];

            // Test manual alt text update (simulating what showImageEditor does)
            const newMarkdown = imageSection.currentMarkdown.replace(
                /!\[(.*?)\]/,
                '![Updated Alt]'
            );

            manager.updateContent(imageSection.id, newMarkdown);

            runner.expect(imageSection.currentMarkdown.includes('Updated Alt')).toBeTruthy();
            runner.expect(imageSection.currentMarkdown.includes('Original Alt')).toBeFalsy();
        }
    });

    runner.it('should handle createButton method calls for image controls', async () => {
        if (global.DOMRenderer && global.SectionManager) {
            const container = document.createElement('div');
            const manager = new global.SectionManager();
            const renderer = new global.DOMRenderer(manager, container);

            // Test createButton method
            runner.expect(typeof renderer.createButton).toBe('function');

            // Test button creation with mock action
            const testAction = () => console.log('test action');
            const button = renderer.createButton('Test', 'test-class', testAction);

            runner.expect(button.tagName).toBe('BUTTON');
            runner.expect(button.textContent).toBe('Test');
            runner.expect(button.className).toBe('test-class');
        }
    });
});

// Run the tests
if (require.main === module) {
    console.log('🖼️ Running Image Functionality Fix 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 functionality needs attention`);
        } else {
            console.log('✅ All image functionality tests passed!');
        }
    });
}

module.exports = runner;