eveAI/test_mobile_header_fix.py

#!/usr/bin/env python3
"""
Test script to verify mobile header visibility fix for eveai_chat_client
"""

import os
import sys
import re

def test_mobile_header_css_fix():
    """Test that MobileHeader component has correct CSS media queries"""
    print("Testing MobileHeader CSS fix...")
    
    mobile_header_path = 'eveai_chat_client/static/assets/vue-components/MobileHeader.vue'
    
    if not os.path.exists(mobile_header_path):
        print(f"❌ MobileHeader.vue not found at {mobile_header_path}")
        return False
    
    with open(mobile_header_path, 'r') as f:
        content = f.read()
    
    # Check for mobile media query (show on mobile)
    mobile_show_pattern = r'@media\s*\(\s*max-width:\s*768px\s*\)\s*\{[^}]*\.mobile-header\s*\{[^}]*display:\s*flex'
    mobile_show_match = re.search(mobile_show_pattern, content, re.DOTALL)
    
    if not mobile_show_match:
        print("❌ Missing mobile media query to show mobile header")
        print("   Expected: @media (max-width: 768px) with .mobile-header { display: flex }")
        return False
    else:
        print("✓ Found mobile media query to show header on mobile devices")
    
    # Check for desktop media query (hide on desktop)
    desktop_hide_pattern = r'@media\s*\(\s*min-width:\s*769px\s*\)\s*\{[^}]*\.mobile-header\s*\{[^}]*display:\s*none'
    desktop_hide_match = re.search(desktop_hide_pattern, content, re.DOTALL)
    
    if not desktop_hide_match:
        print("❌ Missing desktop media query to hide mobile header")
        print("   Expected: @media (min-width: 769px) with .mobile-header { display: none }")
        return False
    else:
        print("✓ Found desktop media query to hide header on desktop devices")
    
    # Check that both media queries exist in correct order
    mobile_pos = content.find('@media (max-width: 768px)')
    desktop_pos = content.find('@media (min-width: 769px)')
    
    if mobile_pos == -1 or desktop_pos == -1:
        print("❌ Media queries not found in expected format")
        return False
    
    if mobile_pos > desktop_pos:
        print("⚠️  Warning: Mobile media query comes after desktop query (may cause specificity issues)")
    
    print("✅ MobileHeader CSS fix is correctly implemented")
    return True

def test_global_css_rules():
    """Test that global CSS rules for mobile-header-container are correct"""
    print("\nTesting global CSS rules...")
    
    css_path = 'eveai_chat_client/static/assets/css/chat.css'
    
    if not os.path.exists(css_path):
        print(f"❌ chat.css not found at {css_path}")
        return False
    
    with open(css_path, 'r') as f:
        content = f.read()
    
    # Check default hidden state
    if '#mobile-header-container' not in content or 'display: none' not in content:
        print("❌ Missing default hidden state for mobile-header-container")
        return False
    else:
        print("✓ Found default hidden state for mobile-header-container")
    
    # Check mobile media query shows container
    # Look for the media query and then check if mobile-header-container is set to display: block within it
    media_query_start = content.find('@media (max-width: 768px)')
    if media_query_start == -1:
        print("❌ Missing @media (max-width: 768px) query")
        return False
    
    # Find the closing brace of this media query
    brace_count = 0
    media_query_end = media_query_start
    for i, char in enumerate(content[media_query_start:]):
        if char == '{':
            brace_count += 1
        elif char == '}':
            brace_count -= 1
            if brace_count == 0:
                media_query_end = media_query_start + i
                break
    
    media_query_content = content[media_query_start:media_query_end + 1]
    
    if '#mobile-header-container' in media_query_content and 'display: block' in media_query_content:
        print("✓ Found mobile media query to show mobile-header-container")
    else:
        print("❌ Mobile media query doesn't properly show mobile-header-container")
        return False
    
    print("✅ Global CSS rules are correct")
    return True

def test_built_assets():
    """Test that built assets exist and are recent"""
    print("\nTesting built assets...")
    
    assets_to_check = [
        'eveai_chat_client/static/dist/chat-client.js',
        'eveai_chat_client/static/dist/chat-client.css'
    ]
    
    for asset_path in assets_to_check:
        if not os.path.exists(asset_path):
            print(f"❌ Built asset not found: {asset_path}")
            return False
        else:
            # Check file size to ensure it's not empty
            size = os.path.getsize(asset_path)
            if size == 0:
                print(f"❌ Built asset is empty: {asset_path}")
                return False
            else:
                print(f"✓ Built asset exists and has content: {asset_path} ({size} bytes)")
    
    print("✅ Built assets are present and valid")
    return True

def test_component_structure():
    """Test that MobileHeader component structure is intact"""
    print("\nTesting MobileHeader component structure...")
    
    mobile_header_path = 'eveai_chat_client/static/assets/vue-components/MobileHeader.vue'
    
    with open(mobile_header_path, 'r') as f:
        content = f.read()
    
    required_elements = [
        'class="mobile-header"',
        'SideBarLogo',
        'LanguageSelector',
        'justify-content: space-between',
        'align-items: center'
    ]
    
    missing_elements = []
    for element in required_elements:
        if element not in content:
            missing_elements.append(element)
        else:
            print(f"✓ Found: {element}")
    
    if missing_elements:
        print(f"❌ Missing elements in MobileHeader:")
        for element in missing_elements:
            print(f"  - {element}")
        return False
    
    print("✅ MobileHeader component structure is intact")
    return True

def main():
    """Run all tests"""
    print("🔧 Testing Mobile Header Visibility Fix")
    print("=" * 50)
    
    tests = [
        test_mobile_header_css_fix,
        test_global_css_rules,
        test_built_assets,
        test_component_structure
    ]
    
    passed = 0
    failed = 0
    
    for test in tests:
        try:
            if test():
                passed += 1
            else:
                failed += 1
        except Exception as e:
            print(f"❌ Test failed with error: {e}")
            failed += 1
        print()
    
    print("=" * 50)
    print(f"📊 Test Results: {passed} passed, {failed} failed")
    
    if failed == 0:
        print("🎉 Mobile header visibility fix is complete!")
        print("📱 The MobileHeader should now be visible when switching to mobile mode.")
        return True
    else:
        print("⚠️  Some tests failed. Please review the implementation.")
        return False

if __name__ == "__main__":
    success = main()
    sys.exit(0 if success else 1)