#!/usr/bin/env node /** * Enhanced TDD Tests for Professional Message System - Advanced Features */ const { TestRunner } = require('./test_runner.js'); const runner = new TestRunner(); // Test enhanced professional message system functionality runner.describe('Enhanced Professional Message System Features', () => { runner.it('should support all 7 positioning options', async () => { delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')]; require('/home/worsch/markitect_project/markitect/static/editor.js'); if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); const positions = [ 'top-left', 'top-center', 'top-right', 'center', 'bottom-left', 'bottom-center', 'bottom-right' ]; for (const position of positions) { try { const messageEl = editor.showMessage(`Test ${position}`, 'info', { position }); runner.expect(messageEl).toBeTruthy(); runner.expect(messageEl.style.position).toBe('fixed'); // Clean up if (messageEl.parentNode) { messageEl.parentNode.removeChild(messageEl); } } catch (error) { runner.expect(false).toBeTruthy(); } } } }); runner.it('should support configurable options (duration, dismissible, icon, animation)', async () => { if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); // Test with custom options const options = { duration: 5000, dismissible: false, icon: false, animation: false, position: 'bottom-right' }; try { const messageEl = editor.showMessage('Custom options test', 'warning', options); runner.expect(messageEl).toBeTruthy(); runner.expect(messageEl.className.includes('markitect-message')).toBeTruthy(); runner.expect(messageEl.className.includes('markitect-message-warning')).toBeTruthy(); // Clean up if (messageEl.parentNode) { messageEl.parentNode.removeChild(messageEl); } } catch (error) { runner.expect(false).toBeTruthy(); } } }); runner.it('should have stackMessages method for proper message stacking', async () => { if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); // Check stackMessages method exists const hasStackMessages = typeof editor.stackMessages === 'function'; runner.expect(hasStackMessages).toBeTruthy(); if (hasStackMessages) { // Test stacking functionality const msg1 = editor.showMessage('Message 1', 'info'); const msg2 = editor.showMessage('Message 2', 'success'); const msg3 = editor.showMessage('Message 3', 'error'); // Call stackMessages manually editor.stackMessages(); // All messages should exist const messageElements = Array.from(document.querySelectorAll('.markitect-message')); runner.expect(messageElements.length).toBeGreaterThanOrEqual(3); // Clean up messageElements.forEach(el => { if (el.parentNode) { el.parentNode.removeChild(el); } }); } } }); runner.it('should support all 5 message types with proper color schemes', async () => { if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); const types = ['success', 'error', 'warning', 'info', 'debug']; for (const type of types) { try { const messageEl = editor.showMessage(`Test ${type} message`, type); runner.expect(messageEl).toBeTruthy(); runner.expect(messageEl.className.includes(`markitect-message-${type}`)).toBeTruthy(); // Check that it has proper styling runner.expect(messageEl.style.background).toBeTruthy(); runner.expect(messageEl.style.color).toBeTruthy(); runner.expect(messageEl.style.border).toBeTruthy(); // Clean up if (messageEl.parentNode) { messageEl.parentNode.removeChild(messageEl); } } catch (error) { runner.expect(false).toBeTruthy(); } } } }); runner.it('should have enhanced professional styling with backdrop blur and animations', async () => { if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); const messageEl = editor.showMessage('Styled message', 'info', { animation: true }); if (messageEl) { // Check for backdrop filter runner.expect(messageEl.style.backdropFilter).toBeTruthy(); // Check for transition runner.expect(messageEl.style.transition).toBeTruthy(); // Check for enhanced box shadow runner.expect(messageEl.style.boxShadow.includes('rgba')).toBeTruthy(); // Check for border styling runner.expect(messageEl.style.borderLeft).toBeTruthy(); // Clean up if (messageEl.parentNode) { messageEl.parentNode.removeChild(messageEl); } } } }); runner.it('should include appropriate icons for each message type', async () => { if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); const iconTests = [ { type: 'success', expectedIcon: '✓' }, { type: 'error', expectedIcon: '✕' }, { type: 'warning', expectedIcon: '⚠' }, { type: 'info', expectedIcon: 'ℹ' }, { type: 'debug', expectedIcon: '🐛' } ]; for (const { type, expectedIcon } of iconTests) { const messageEl = editor.showMessage(`Test ${type}`, type, { icon: true }); if (messageEl) { // Should contain the expected icon runner.expect(messageEl.innerHTML.includes(expectedIcon)).toBeTruthy(); // Clean up if (messageEl.parentNode) { messageEl.parentNode.removeChild(messageEl); } } } } }); runner.it('should support click-to-dismiss functionality', async () => { if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); const messageEl = editor.showMessage('Click to dismiss', 'info', { dismissible: true, duration: 0 // Disable auto-dismiss }); if (messageEl) { // Should have click cursor runner.expect(messageEl.style.cursor).toBe('pointer'); // Should contain close button (×) runner.expect(messageEl.innerHTML.includes('×')).toBeTruthy(); // Clean up if (messageEl.parentNode) { messageEl.parentNode.removeChild(messageEl); } } } }); runner.it('should handle rapid message creation without conflicts', async () => { if (global.MarkitectCleanEditor) { const container = document.createElement('div'); const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container); // Create many messages rapidly const messages = []; for (let i = 0; i < 10; i++) { const messageEl = editor.showMessage(`Rapid message ${i}`, 'info', { duration: 0 }); messages.push(messageEl); } // All should be created successfully runner.expect(messages.length).toBe(10); runner.expect(messages.every(msg => msg && msg.parentNode)).toBeTruthy(); // Clean up messages.forEach(msg => { if (msg && msg.parentNode) { msg.parentNode.removeChild(msg); } }); } }); }); // Run the tests if (require.main === module) { console.log('🚀 Running Enhanced Professional Message System Tests'); runner.run().then(() => { console.log('✅ Enhanced test run complete!'); }); } module.exports = runner;