markitect-main/test_message_system.js

#!/usr/bin/env node

/**
 * TDD Tests for Professional Message System Recovery
 */

const { TestRunner } = require('./test_runner.js');
const runner = new TestRunner();

// Test professional message system functionality
runner.describe('Professional Message System with Color-coded Positioning', () => {

    runner.it('should have showMessage method in MarkitectCleanEditor', async () => {
        // Load editor
        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 hasShowMessage = typeof editor.showMessage === 'function';
            runner.expect(hasShowMessage).toBeTruthy();
        }
    });

    runner.it('should support different message types (success, error, info, warning)', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            // Test that method can be called with different types
            try {
                editor.showMessage('Success message', 'success');
                editor.showMessage('Error message', 'error');
                editor.showMessage('Info message', 'info');
                editor.showMessage('Warning message', 'warning');
                runner.expect(true).toBeTruthy();
            } catch (error) {
                runner.expect(false).toBeTruthy();
            }
        }
    });

    runner.it('should create properly positioned message elements', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            // Show a message and check if it creates the right DOM element
            editor.showMessage('Test message', 'info');

            // Find the message element
            const messageElements = Array.from(document.querySelectorAll('div')).filter(div =>
                div.textContent === 'Test message' &&
                div.style.position === 'fixed'
            );

            runner.expect(messageElements.length).toBeGreaterThan(0);

            if (messageElements.length > 0) {
                const messageDiv = messageElements[0];
                runner.expect(messageDiv.style.position).toBe('fixed');
                runner.expect(messageDiv.style.zIndex).toBeTruthy();
            }
        }
    });

    runner.it('should have proper color coding for different message types', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            // Test success message colors
            editor.showMessage('Success', 'success');
            let successElement = Array.from(document.querySelectorAll('div')).find(div =>
                div.textContent === 'Success'
            );
            if (successElement) {
                // Should have green-ish background
                runner.expect(successElement.style.background.includes('#d4edda') ||
                            successElement.style.backgroundColor.includes('green') ||
                            successElement.style.background.includes('green')).toBeTruthy();
            }

            // Test error message colors
            editor.showMessage('Error', 'error');
            let errorElement = Array.from(document.querySelectorAll('div')).find(div =>
                div.textContent === 'Error'
            );
            if (errorElement) {
                // Should have red-ish background
                runner.expect(errorElement.style.background.includes('#f8d7da') ||
                            errorElement.style.backgroundColor.includes('red') ||
                            errorElement.style.background.includes('red')).toBeTruthy();
            }
        }
    });

    runner.it('should auto-dismiss messages after timeout', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            // Show a message
            editor.showMessage('Auto dismiss test', 'info');

            // Check message exists
            let messageElement = Array.from(document.querySelectorAll('div')).find(div =>
                div.textContent === 'Auto dismiss test'
            );
            runner.expect(messageElement).toBeTruthy();

            // Wait a short time and message should still be there
            setTimeout(() => {
                let stillThere = Array.from(document.querySelectorAll('div')).find(div =>
                    div.textContent === 'Auto dismiss test'
                );
                runner.expect(stillThere).toBeTruthy();
            }, 1000);
        }
    });

    runner.it('should have professional styling with shadows and typography', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            editor.showMessage('Styled message', 'info');

            let messageElement = Array.from(document.querySelectorAll('div')).find(div =>
                div.textContent === 'Styled message'
            );

            if (messageElement) {
                // Should have box shadow
                runner.expect(messageElement.style.boxShadow).toBeTruthy();

                // Should have border radius
                runner.expect(messageElement.style.borderRadius).toBeTruthy();

                // Should have proper font family
                runner.expect(messageElement.style.fontFamily.includes('system') ||
                            messageElement.style.fontFamily.includes('sans-serif')).toBeTruthy();

                // Should have padding
                runner.expect(messageElement.style.padding).toBeTruthy();
            }
        }
    });

    runner.it('should support advanced message types (warning, debug)', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            // Test warning and debug types
            try {
                editor.showMessage('Warning message', 'warning');
                editor.showMessage('Debug message', 'debug');
                runner.expect(true).toBeTruthy();
            } catch (error) {
                runner.expect(false).toBeTruthy();
            }
        }
    });

    runner.it('should handle multiple simultaneous messages gracefully', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            // Show multiple messages
            editor.showMessage('Message 1', 'info');
            editor.showMessage('Message 2', 'success');
            editor.showMessage('Message 3', 'error');

            // All messages should exist
            const messageElements = Array.from(document.querySelectorAll('div')).filter(div =>
                div.textContent.startsWith('Message ') && div.style.position === 'fixed'
            );

            runner.expect(messageElements.length).toBe(3);
        }
    });

    runner.it('should have proper stacking order for multiple messages', async () => {
        if (global.MarkitectCleanEditor) {
            const container = document.createElement('div');
            const editor = new global.MarkitectCleanEditor('# Test\n\nContent', container);

            // Check if editor has stackMessages method for advanced positioning
            const hasStackMessages = typeof editor.stackMessages === 'function';

            // This is optional - if it doesn't exist, that's okay for basic functionality
            // but we'll test it if it's implemented
            if (hasStackMessages) {
                runner.expect(hasStackMessages).toBeTruthy();
            } else {
                // Basic functionality is acceptable
                runner.expect(true).toBeTruthy();
            }
        }
    });
});

// Run the tests
if (require.main === module) {
    console.log('💬 Running TDD Tests for Professional Message System Recovery');
    runner.run().then(() => {
        console.log('✅ Test run complete - now enhance message system!');
    });
}

module.exports = runner;