refactor: Still trying to reorganize edit mode to be more robust

test_message_system_enhanced.js

@@ -0,0 +1,250 @@
+#!/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;