markitect-main/test_reopen_issue.js

#!/usr/bin/env node

/**
 * Test Reopen Issue
 *
 * Test to reproduce and verify the fix for the issue where
 * edit menus cannot be reopened after being closed
 */

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

runner.describe('Edit Menu Reopen Tests', () => {

    runner.it('should allow reopening text editor after X button close', 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 && global.FloatingMenu) {
            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 test section
            const textMarkdown = 'Test section for reopen testing';
            const sections = manager.createSectionsFromMarkdown(textMarkdown);
            const textSection = sections[0];

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

            renderer.findSectionElement = () => mockElement;

            // First open
            renderer.showEditor(textSection.id, textSection.currentMarkdown);

            // Verify menu exists
            runner.expect(renderer.currentFloatingMenu).toBeTruthy();
            runner.expect(renderer.currentFloatingMenu.isVisible).toBeTruthy();

            const firstMenu = document.querySelector('.ui-edit-floating-menu');
            runner.expect(firstMenu).toBeTruthy();

            // Close with X button
            const closeButton = firstMenu.querySelector('.ui-edit-close-button');
            runner.expect(closeButton).toBeTruthy();
            closeButton.click();

            // Verify menu is closed
            runner.expect(renderer.currentFloatingMenu).toBeFalsy();
            const menuAfterClose = document.querySelector('.ui-edit-floating-menu');
            runner.expect(menuAfterClose).toBeFalsy();

            // Try to reopen - this should work
            renderer.showEditor(textSection.id, textSection.currentMarkdown);

            // Verify menu can be reopened
            runner.expect(renderer.currentFloatingMenu).toBeTruthy();
            runner.expect(renderer.currentFloatingMenu.isVisible).toBeTruthy();

            const reopenedMenu = document.querySelector('.ui-edit-floating-menu');
            runner.expect(reopenedMenu).toBeTruthy();

            // Cleanup
            if (renderer.currentFloatingMenu) {
                renderer.currentFloatingMenu.hide();
            }
            document.body.removeChild(container);
        }
    });

    runner.it('should allow reopening image editor after X button close', async () => {
        if (global.DOMRenderer && global.SectionManager && global.FloatingMenu) {
            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](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: 150, left: 50, width: 350, height: 50 })
                }
            });

            renderer.findSectionElement = () => mockElement;

            // First open image editor
            renderer.showImageEditor(imageSection.id, imageSection);

            // Verify menu exists
            runner.expect(renderer.currentFloatingMenu).toBeTruthy();
            runner.expect(renderer.currentFloatingMenu.isVisible).toBeTruthy();

            const firstMenu = document.querySelector('.ui-edit-floating-menu');
            runner.expect(firstMenu).toBeTruthy();

            // Close with X button
            const closeButton = firstMenu.querySelector('.ui-edit-close-button');
            runner.expect(closeButton).toBeTruthy();
            closeButton.click();

            // Verify menu is closed
            runner.expect(renderer.currentFloatingMenu).toBeFalsy();
            const menuAfterClose = document.querySelector('.ui-edit-floating-menu');
            runner.expect(menuAfterClose).toBeFalsy();

            // Try to reopen image editor - this should work
            renderer.showImageEditor(imageSection.id, imageSection);

            // Verify menu can be reopened
            runner.expect(renderer.currentFloatingMenu).toBeTruthy();
            runner.expect(renderer.currentFloatingMenu.isVisible).toBeTruthy();

            const reopenedMenu = document.querySelector('.ui-edit-floating-menu');
            runner.expect(reopenedMenu).toBeTruthy();
            runner.expect(reopenedMenu.dataset.editType).toBe('image');

            // Cleanup
            if (renderer.currentFloatingMenu) {
                renderer.currentFloatingMenu.hide();
            }
            document.body.removeChild(container);
        }
    });

    runner.it('should clean up properly when hiding current editor', async () => {
        if (global.DOMRenderer && global.SectionManager && global.FloatingMenu) {
            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 section for cleanup testing';
            const sections = manager.createSectionsFromMarkdown(textMarkdown);
            const textSection = sections[0];

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

            renderer.findSectionElement = () => mockElement;

            // Open editor
            renderer.showEditor(textSection.id, textSection.currentMarkdown);

            // Verify menu exists
            runner.expect(renderer.currentFloatingMenu).toBeTruthy();
            const menuBeforeHide = document.querySelector('.ui-edit-floating-menu');
            runner.expect(menuBeforeHide).toBeTruthy();

            // Call hideCurrentEditor
            renderer.hideCurrentEditor();

            // Verify proper cleanup
            runner.expect(renderer.currentFloatingMenu).toBeFalsy();
            const menuAfterHide = document.querySelector('.ui-edit-floating-menu');
            runner.expect(menuAfterHide).toBeFalsy();

            // Test that we can open again
            renderer.showEditor(textSection.id, textSection.currentMarkdown);
            runner.expect(renderer.currentFloatingMenu).toBeTruthy();
            const reopenedMenu = document.querySelector('.ui-edit-floating-menu');
            runner.expect(reopenedMenu).toBeTruthy();

            // Cleanup
            if (renderer.currentFloatingMenu) {
                renderer.currentFloatingMenu.hide();
            }
            document.body.removeChild(container);
        }
    });
});

// Run the tests
if (require.main === module) {
    console.log('🔄 Running Edit Menu Reopen 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 - reopen issue needs fixing`);
            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 reopen tests passed!');
        }
    });
}

module.exports = runner;