markitect-main/testdrive-jsui/static/js/tests/test-debugpanel-extraction.js

#!/usr/bin/env node

/**
 * TDD Test for Debug Panel Component Extraction
 *
 * Tests the extraction of DebugPanel from the monolithic editor.js
 * DebugPanel handles debug message display and management.
 */

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

const runner = new RefactorTestRunner();

// Define expected DebugPanel API
const EXPECTED_DEBUGPANEL_API = [
    'constructor',
    'toggle',
    'update',
    'clear',
    'addMessage',
    'show',
    'hide',
    'getMessageCount',
    'getRecentMessages'
];

runner.describe('DebugPanel Component Extraction', () => {

    runner.it('should define expected API methods', () => {
        const expectedMethods = EXPECTED_DEBUGPANEL_API;
        runner.expect(expectedMethods.length).toBe(9);
        runner.expect(expectedMethods).toContain('toggle');
        runner.expect(expectedMethods).toContain('update');
        runner.expect(expectedMethods).toContain('addMessage');
    });

    runner.it('should load extracted DebugPanel component', () => {
        // Load the extracted component
        delete require.cache[require.resolve('../components/debug-panel.js')];

        try {
            const module = require('../components/debug-panel.js');
            runner.expect(module.DebugPanel).toBeTruthy();

            // Set global for other tests
            global.ExtractedDebugPanel = module.DebugPanel;
        } catch (error) {
            throw new Error(`Failed to load extracted DebugPanel: ${error.message}`);
        }
    });

    runner.it('should preserve constructor functionality', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        const debugPanel = new DebugPanel();
        runner.expect(debugPanel).toBeInstanceOf(DebugPanel);
        runner.expect(debugPanel.messages).toBeInstanceOf(Array);
        runner.expect(debugPanel.isActive).toBeFalsy();
    });

    runner.it('should preserve message handling functionality', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        const debugPanel = new DebugPanel();

        // Test adding messages
        debugPanel.addMessage('Test message', 'INFO');
        runner.expect(debugPanel.getMessageCount()).toBe(1);

        const recentMessages = debugPanel.getRecentMessages(1);
        runner.expect(recentMessages.length).toBe(1);
        runner.expect(recentMessages[0].message).toBe('Test message');
        runner.expect(recentMessages[0].category).toBe('INFO');
    });

    runner.it('should preserve toggle functionality', () => {
        const DebugPanel = global.ExtractedDebugPanel;

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

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

        const debugPanel = new DebugPanel();

        // Test toggle on
        debugPanel.toggle();
        runner.expect(debugPanel.isActive).toBeTruthy();

        // Test toggle off
        debugPanel.toggle();
        runner.expect(debugPanel.isActive).toBeFalsy();

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

    runner.it('should preserve update functionality', () => {
        const DebugPanel = global.ExtractedDebugPanel;

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

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

        const debugPanel = new DebugPanel();
        debugPanel.show();

        debugPanel.addMessage('Test message 1', 'INFO');
        debugPanel.addMessage('Test message 2', 'ERROR');
        debugPanel.update();

        runner.expect(container.innerHTML.length > 100).toBeTruthy();
        runner.expect(container.innerHTML).toContain('Test message 1');
        runner.expect(container.innerHTML).toContain('Test message 2');

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

    runner.it('should preserve clear functionality', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        const debugPanel = new DebugPanel();

        debugPanel.addMessage('Test message 1', 'INFO');
        debugPanel.addMessage('Test message 2', 'ERROR');
        runner.expect(debugPanel.getMessageCount()).toBe(2);

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

    runner.it('should have core debug panel methods', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        const debugPanel = new DebugPanel();

        // Should have core methods
        runner.expect(typeof debugPanel.toggle === 'function').toBeTruthy();
        runner.expect(typeof debugPanel.update === 'function').toBeTruthy();
        runner.expect(typeof debugPanel.addMessage === 'function').toBeTruthy();
        runner.expect(typeof debugPanel.clear === 'function').toBeTruthy();
    });

    runner.it('should handle message categories properly', () => {
        const DebugPanel = global.ExtractedDebugPanel;

        const debugPanel = new DebugPanel();

        // Test different message categories
        debugPanel.addMessage('Info message', 'INFO');
        debugPanel.addMessage('Warning message', 'WARNING');
        debugPanel.addMessage('Error message', 'ERROR');
        debugPanel.addMessage('Success message', 'SUCCESS');

        const messages = debugPanel.getRecentMessages(4);
        runner.expect(messages.length).toBe(4);

        const categories = messages.map(m => m.category);
        runner.expect(categories).toContain('INFO');
        runner.expect(categories).toContain('WARNING');
        runner.expect(categories).toContain('ERROR');
        runner.expect(categories).toContain('SUCCESS');
    });
});

module.exports = {
    runner,
    EXPECTED_DEBUGPANEL_API
};

// Run tests if called directly
if (require.main === module) {
    console.log('🧪 Testing DebugPanel Component Extraction');
    runner.run().then(() => {
        console.log('✅ DebugPanel extraction tests completed');
    });
}