#!/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'); }); }