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