markitect-main/history/javascript-dev-tests/test_message_system_enhanced.js

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