Corp/backend/templates/test_message_renderer.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Test MessageRenderer</title>
    <style>
        body { font-family: system-ui; padding: 20px; max-width: 900px; margin: 0 auto; }
        .test { border: 1px solid #ddd; padding: 15px; margin: 15px 0; }
        pre { background: #f5f5f5; padding: 10px; overflow-x: auto; font-size: 12px; }
        .result { border: 2px solid #4CAF50; padding: 10px; margin: 10px 0; }
        button { padding: 8px 16px; margin: 5px; }
    </style>
</head>
<body>
    <h1>🧪 Test MessageRenderer.buildMessageHtml()</h1>
    
    <div class="test">
        <h3>Test 1: Message with Attachments</h3>
        <button onclick="testAttachments()">Run Test</button>
        <div id="result1"></div>
    </div>

    <div class="test">
        <h3>Test 2: Message with Reply</h3>
        <button onclick="testReply()">Run Test</button>
        <div id="result2"></div>
    </div>

    <div class="test">
        <h3>Test 3: Message with Forwarded Info</h3>
        <button onclick="testForwarded()">Run Test</button>
        <div id="result3"></div>
    </div>

    <script type="module">
        import { MessageRenderer } from '/static/js/components/messageRenderer.js';
        
        window.testAttachments = function() {
            console.log('TEST 1: Message with attachments');
            
            const renderer = new MessageRenderer({
                currentUserId: 123
            });
            
            const message = {
                id: 1,
                author_id: 123,
                author_name: 'Test User',
                content: 'Message with files',
                created_ts: Date.now(),
                has_attachments: true,
                attachments: [
                    {
                        id: 1,
                        file_name: 'document.pdf',
                        file_type: 'file',
                        file_url: '/media/files/document.pdf',
                        file_size: 1024000
                    },
                    {
                        id: 2,
                        file_name: 'photo.jpg',
                        file_type: 'image',
                        file_url: '/media/images/photo.jpg'
                    }
                ],
                reactions_summary: {}
            };
            
            const html = renderer.buildMessageHtml(message, true);
            
            console.log('Generated HTML length:', html.length);
            console.log('Contains "attachment":', html.includes('attachment'));
            console.log('Contains "document.pdf":', html.includes('document.pdf'));
            console.log('Contains "photo.jpg":', html.includes('photo.jpg'));
            
            document.getElementById('result1').innerHTML = `
                <div class="result">
                    <strong>Generated HTML:</strong>
                    <pre>${escapeHtml(html)}</pre>
                    <strong>Rendered:</strong>
                    ${html}
                    <strong>Checks:</strong>
                    <ul>
                        <li>HTML length: ${html.length} chars</li>
                        <li>Contains "attachment": ${html.includes('attachment') ? '✅' : '❌'}</li>
                        <li>Contains "document.pdf": ${html.includes('document.pdf') ? '✅' : '❌'}</li>
                        <li>Contains "photo.jpg": ${html.includes('photo.jpg') ? '✅' : '❌'}</li>
                    </ul>
                </div>
            `;
        };

        window.testReply = function() {
            console.log('TEST 2: Message with reply');
            
            const renderer = new MessageRenderer({
                currentUserId: 456
            });
            
            const message = {
                id: 2,
                author_id: 456,
                author_name: 'User 2',
                content: 'This is a reply',
                created_ts: Date.now(),
                reply_to: {
                    id: 999,
                    author_name: 'Original Author',
                    content: 'Original message text here'
                },
                reactions_summary: {}
            };
            
            const html = renderer.buildMessageHtml(message, true);
            
            console.log('Generated HTML length:', html.length);
            console.log('Contains "reply-reference":', html.includes('reply-reference'));
            console.log('Contains "Original Author":', html.includes('Original Author'));
            
            document.getElementById('result2').innerHTML = `
                <div class="result">
                    <strong>Generated HTML:</strong>
                    <pre>${escapeHtml(html)}</pre>
                    <strong>Rendered:</strong>
                    ${html}
                    <strong>Checks:</strong>
                    <ul>
                        <li>Contains "reply-reference": ${html.includes('reply-reference') ? '✅' : '❌'}</li>
                        <li>Contains "Original Author": ${html.includes('Original Author') ? '✅' : '❌'}</li>
                        <li>Contains "Original message text": ${html.includes('Original message text') ? '✅' : '❌'}</li>
                    </ul>
                </div>
            `;
        };

        window.testForwarded = function() {
            console.log('TEST 3: Message with forwarded info');
            
            const renderer = new MessageRenderer({
                currentUserId: 789
            });
            
            const message = {
                id: 3,
                author_id: 789,
                author_name: 'User 3',
                content: 'Forwarded content',
                created_ts: Date.now(),
                is_forwarded: true,
                forwarded_from: {
                    author_name: 'Original Sender',
                    chat_name: 'Some Chat',
                    created_at: '01.12.2025 10:30'
                },
                reactions_summary: {}
            };
            
            const html = renderer.buildMessageHtml(message, false);
            
            console.log('Generated HTML length:', html.length);
            console.log('Contains "forwarded-indicator":', html.includes('forwarded-indicator'));
            console.log('Contains "Переслано":', html.includes('Переслано'));
            
            document.getElementById('result3').innerHTML = `
                <div class="result">
                    <strong>Generated HTML:</strong>
                    <pre>${escapeHtml(html.substring(0, 1000))}...</pre>
                    <strong>Rendered:</strong>
                    ${html}
                    <strong>Checks:</strong>
                    <ul>
                        <li>Contains "forwarded-indicator": ${html.includes('forwarded-indicator') ? '✅' : '❌'}</li>
                        <li>Contains "Переслано": ${html.includes('Переслано') ? '✅' : '❌'}</li>
                        <li>Contains "Original Sender": ${html.includes('Original Sender') ? '✅' : '❌'}</li>
                    </ul>
                </div>
            `;
        };

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        console.log('✓ Test page ready. Click buttons to run tests.');
    </script>
</body>
</html>