- Start met Mobiele versie van de chat client.
This commit is contained in:
Josako
206
test_mobile_header_fix.py
Normal file
206
test_mobile_header_fix.py
Normal file
@@ -0,0 +1,206 @@
|
||||
#!/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)
|
||||
Reference in New Issue
Block a user