markitect-main/markitect/static/js/tests/test-debugpanel-integration.js

#!/usr/bin/env node

/**
 * DebugPanel Integration Test
 *
 * Tests that the extracted DebugPanel component integrates properly
 * with the existing SectionManager and DOMRenderer components.
 */

const RefactorTestRunner = require('./refactor-test-runner.js');

const runner = new RefactorTestRunner();

runner.describe('DebugPanel Integration Tests', () => {

    runner.it('should load all extracted components including DebugPanel', () => {
        try {
            // Load extracted components
            const sectionModule = require('../core/section-manager.js');
            const domModule = require('../components/dom-renderer.js');
            const debugModule = require('../components/debug-panel.js');

            runner.expect(sectionModule.SectionManager).toBeTruthy();
            runner.expect(domModule.DOMRenderer).toBeTruthy();
            runner.expect(debugModule.DebugPanel).toBeTruthy();

            // Set globals for other tests
            global.ExtractedSectionManager = sectionModule.SectionManager;
            global.ExtractedDOMRenderer = domModule.DOMRenderer;
            global.ExtractedDebugPanel = debugModule.DebugPanel;

        } catch (error) {
            throw new Error(`Failed to load extracted components: ${error.message}`);
        }
    });

    runner.it('should support debug panel with section editing workflow', () => {
        const SectionManager = global.ExtractedSectionManager;
        const DOMRenderer = global.ExtractedDOMRenderer;
        const DebugPanel = global.ExtractedDebugPanel;

        // Setup DOM elements
        const container = document.createElement('div');
        container.innerHTML = '<div id="markdown-content"></div>';
        document.body.appendChild(container);

        const debugContainer = document.createElement('div');
        debugContainer.id = 'debug-messages-container';
        debugContainer.style.display = 'none';
        document.body.appendChild(debugContainer);

        const debugButton = document.createElement('button');
        debugButton.id = 'toggle-debug';
        debugButton.textContent = '🔍 Debug';
        document.body.appendChild(debugButton);

        // Create components
        const sectionManager = new SectionManager();
        const domRenderer = new DOMRenderer(sectionManager, container);
        const debugPanel = new DebugPanel();

        // Test workflow: Create sections and debug them
        const testMarkdown = '# Test Heading\nTest content for debugging';
        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
        domRenderer.renderAllSections(sections);

        // Add debug messages
        debugPanel.addMessage('Section created: ' + sections[0].id, 'INFO');
        debugPanel.addMessage('DOM rendered successfully', 'SUCCESS');

        runner.expect(debugPanel.getMessageCount()).toBe(2);

        // Test showing debug panel
        debugPanel.show();
        runner.expect(debugPanel.isActive).toBeTruthy();

        // Test debug panel content
        const messages = debugPanel.getRecentMessages(2);
        runner.expect(messages[0].message).toContain('Section created');
        runner.expect(messages[1].message).toContain('DOM rendered');

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

    runner.it('should support debug panel clearing and message management', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        const debugPanel = new DebugPanel();

        // Add multiple messages
        for (let i = 0; i < 10; i++) {
            debugPanel.addMessage(`Test message ${i}`, i % 2 === 0 ? 'INFO' : 'WARNING');
        }

        runner.expect(debugPanel.getMessageCount()).toBe(10);

        // Test getting recent messages
        const recentFive = debugPanel.getRecentMessages(5);
        runner.expect(recentFive.length).toBe(5);
        runner.expect(recentFive[4].message).toContain('Test message 9');

        // Test clearing
        debugPanel.clear();
        runner.expect(debugPanel.getMessageCount()).toBe(0);
    });

    runner.it('should handle debug panel DOM integration properly', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        // Setup DOM
        const debugContainer = document.createElement('div');
        debugContainer.id = 'debug-messages-container';
        debugContainer.style.display = 'none';
        document.body.appendChild(debugContainer);

        const debugButton = document.createElement('button');
        debugButton.id = 'toggle-debug';
        debugButton.textContent = '🔍 Debug';
        debugButton.style.background = '#6c757d';
        document.body.appendChild(debugButton);

        const debugPanel = new DebugPanel();

        // Test initial state
        runner.expect(debugPanel.isActive).toBeFalsy();
        runner.expect(debugContainer.style.display).toBe('none');

        // Test toggle on
        debugPanel.toggle();
        runner.expect(debugPanel.isActive).toBeTruthy();
        runner.expect(debugContainer.style.display).toBe('block');
        runner.expect(debugButton.textContent).toContain('Debug (ON)');

        // Test toggle off
        debugPanel.toggle();
        runner.expect(debugPanel.isActive).toBeFalsy();
        runner.expect(debugContainer.style.display).toBe('none');
        runner.expect(debugButton.textContent).toBe('🔍 Debug');

        // Cleanup
        document.body.removeChild(debugContainer);
        document.body.removeChild(debugButton);
    });

    runner.it('should handle missing DOM elements gracefully', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        const debugPanel = new DebugPanel();

        // Try to toggle without DOM elements (should not throw)
        try {
            debugPanel.toggle();
            debugPanel.show();
            debugPanel.hide();
            debugPanel.update();
            runner.expect(true).toBeTruthy(); // If we get here, no errors were thrown
        } catch (error) {
            throw new Error(`DebugPanel should handle missing DOM gracefully: ${error.message}`);
        }
    });

    runner.it('should support event-driven debug message addition', () => {
        const SectionManager = global.ExtractedSectionManager;
        const DebugPanel = global.ExtractedDebugPanel;

        const sectionManager = new SectionManager();
        const debugPanel = new DebugPanel();

        // Listen to section manager events and add debug messages
        let eventCount = 0;

        sectionManager.on('sections-created', (data) => {
            debugPanel.addMessage(`Sections created: ${data.count} sections`, 'INFO');
            eventCount++;
        });

        sectionManager.on('edit-started', (data) => {
            debugPanel.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG');
            eventCount++;
        });

        // Create sections
        const testMarkdown = '# Test\nContent';
        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);

        // Start editing
        sectionManager.startEditing(sections[0].id);

        // Verify debug messages were added
        runner.expect(eventCount).toBe(2);
        runner.expect(debugPanel.getMessageCount()).toBe(2);

        const messages = debugPanel.getRecentMessages(2);
        runner.expect(messages[0].message).toContain('Sections created');
        runner.expect(messages[1].message).toContain('Edit started');
    });
});

module.exports = runner;

// Run tests if called directly
if (require.main === module) {
    console.log('🧪 Running DebugPanel Integration Tests');
    runner.run().then(() => {
        console.log('✅ DebugPanel integration tests completed');
    });
}