QBPOS-Help/validate_frontend.py

#!/usr/bin/env python3
"""
Comprehensive Frontend Validation for QBPOS Help Website
Checks: Responsive CSS, accessibility, cache versions, file integrity
"""

import os
import re
from pathlib import Path
from collections import defaultdict

def check_responsive_breakpoints(css_file):
    """Validate responsive breakpoints are properly configured"""
    issues = []
    with open(css_file, 'r', encoding='utf-8') as f:
        content = f.read()
    
    # Required breakpoints
    required_breakpoints = [
        (r'@media.*max-width:\s*767px', 'Mobile (≤767px)'),
        (r'@media.*min-width:\s*768px.*max-width:\s*1024px', 'Tablet (768-1024px)'),
        (r'@media.*min-width:\s*1025px', 'Desktop (≥1025px)')
    ]
    
    for pattern, name in required_breakpoints:
        if not re.search(pattern, content, re.IGNORECASE):
            issues.append(f"Missing breakpoint: {name}")
    
    return issues

def check_accessibility_features(css_file):
    """Check for accessibility features"""
    issues = []
    with open(css_file, 'r', encoding='utf-8') as f:
        content = f.read()
    
    # Required accessibility features
    if ':focus' not in content:
        issues.append("Missing focus states for keyboard navigation")
    
    if 'skip-link' not in content:
        issues.append("Missing skip-to-content link for screen readers")
    
    return issues

def check_cache_versions(base_dir):
    """Check that all HTML files reference consistent cache version"""
    versions = defaultdict(int)
    
    for html_file in Path(base_dir).rglob('*.htm*'):
        try:
            with open(html_file, 'r', encoding='utf-8', errors='ignore') as f:
                content = f.read()
                
            # Find all version parameters
            matches = re.findall(r'\?v=(\d+)', content)
            for version in matches:
                versions[version] += 1
        except Exception:
            continue
    
    return versions

def check_text_wrapping(css_file):
    """Ensure text wrapping is enabled for mobile"""
    issues = []
    with open(css_file, 'r', encoding='utf-8') as f:
        content = f.read()
    
    # Check for word-wrap in mobile section
    mobile_section = re.search(r'@media.*max-width:\s*767px.*?(?=@media|$)', content, re.DOTALL)
    if mobile_section:
        mobile_css = mobile_section.group(0)
        if 'word-wrap' not in mobile_css and 'overflow-wrap' not in mobile_css:
            issues.append("Missing word-wrap for mobile devices")
    
    return issues

def validate_frontend():
    """Run all validation checks"""
    base_dir = Path('/home/pts/Documents/QBPOS_Help_Web/QB_Help_Web/POS_Help')
    css_file = base_dir / 'responsive.css'
    
    print("=" * 60)
    print("FRONTEND VALIDATION REPORT")
    print("=" * 60)
    
    all_passed = True
    
    # 1. Responsive Breakpoints
    print("\n1. Responsive Layout Validation:")
    issues = check_responsive_breakpoints(css_file)
    if issues:
        all_passed = False
        for issue in issues:
            print(f"   ❌ {issue}")
    else:
        print("   ✅ All responsive breakpoints configured correctly")
    
    # 2. Accessibility
    print("\n2. Accessibility Features:")
    issues = check_accessibility_features(css_file)
    if issues:
        all_passed = False
        for issue in issues:
            print(f"   ❌ {issue}")
    else:
        print("   ✅ Accessibility features implemented")
    
    # 3. Text Wrapping
    print("\n3. Text Wrapping:")
    issues = check_text_wrapping(css_file)
    if issues:
        all_passed = False
        for issue in issues:
            print(f"   ❌ {issue}")
    else:
        print("   ✅ Text wrapping enabled for mobile")
    
    # 4. Cache Versions
    print("\n4. Cache Version Consistency:")
    versions = check_cache_versions(base_dir)
    if versions:
        latest_version = max(versions.keys())
        print(f"   📦 Latest cache version: v={latest_version}")
        print(f"   📊 Files using latest version: {versions[latest_version]}")
        
        # Show other versions if any
        other_versions = {v: c for v, c in versions.items() if v != latest_version}
        if other_versions:
            all_passed = False
            print("   ⚠️  Files using older versions:")
            for v, count in sorted(other_versions.items()):
                print(f"      v={v}: {count} files")
        else:
            print("   ✅ All files using consistent cache version")
    
    # 5. File Structure
    print("\n5. File Structure:")
    htm_files = list(base_dir.rglob('*.htm'))
    css_files = list(base_dir.rglob('*.css'))
    js_files = list(base_dir.rglob('*.js'))
    
    print(f"   📄 HTML files: {len(htm_files)}")
    print(f"   🎨 CSS files: {len(css_files)}")
    print(f"   ⚡ JavaScript files: {len(js_files)}")
    print("   ✅ File structure intact")
    
    # 6. Mobile Font Sizes
    print("\n6. Mobile Font Configuration:")
    with open(css_file, 'r', encoding='utf-8') as f:
        content = f.read()
    
    mobile_font = re.search(r'@media.*max-width:\s*767px.*?font-size:\s*(\d+)px', content, re.DOTALL)
    desktop_dtree = re.search(r'@media.*min-width:\s*1025px.*?\.dtree.*?font-size:\s*(\d+)px', content, re.DOTALL)
    
    if mobile_font:
        print(f"   📱 Mobile content font: {mobile_font.group(1)}px")
    if desktop_dtree:
        print(f"   🖥️  Desktop navigation font: {desktop_dtree.group(1)}px")
    print("   ✅ Font sizes properly separated by device")
    
    print("\n" + "=" * 60)
    if all_passed:
        print("✅ ALL FRONTEND CHECKS PASSED!")
    else:
        print("⚠️  SOME ISSUES FOUND - See details above")
    print("=" * 60)

if __name__ == '__main__':
    validate_frontend()