tilbudgivern/_temp/test_material_search.py

#!/usr/bin/env python3
"""
Test Material Search Table Styling
Verificerer at materiale søgning har Excel-stil tabel
"""

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
import time
import os

def test_material_search_table():
    """Test material search table Excel styling"""
    
    chrome_options = Options()
    chrome_options.add_argument('--headless')
    chrome_options.add_argument('--no-sandbox')
    chrome_options.add_argument('--disable-dev-shm-usage')
    chrome_options.add_argument('--window-size=1920,1080')
    
    driver = webdriver.Chrome(options=chrome_options)
    
    try:
        print("🔍 Testing Material Search Table...")
        
        # Naviger til material search siden (MaterialsList component)
        # Dette er typisk på en route som /materials eller lignende
        driver.get('http://localhost:3000')
        time.sleep(3)
        
        # Find navigation eller link til materials list
        # Prøv forskellige selectors
        try:
            # Prøv at finde et link eller knap der går til materials
            materials_link = driver.find_element(By.XPATH, "//a[contains(text(), 'Material') or contains(text(), 'material')]")
            materials_link.click()
            time.sleep(2)
        except:
            print("⚠️  Kunne ikke finde materials navigation link")
            # Prøv direkte URL
            try:
                driver.get('http://localhost:3000/materials')
                time.sleep(2)
            except:
                print("⚠️  Kunne ikke navigere til /materials route")
        
        # Tag screenshot af current page
        screenshot_path = '/mnt/HC_Volume_103713257/tilbudgivern/screenshots/material_search_table.png'
        os.makedirs(os.path.dirname(screenshot_path), exist_ok=True)
        driver.save_screenshot(screenshot_path)
        print(f"📸 Screenshot gemt: {screenshot_path}")
        
        # Find table headers
        headers = driver.find_elements(By.CSS_SELECTOR, '.material-search-table th, .materials-table th')
        print(f"\n📋 Fundet {len(headers)} table headers")
        
        for i, header in enumerate(headers, 1):
            text = header.text.strip()
            bg_color = driver.execute_script(
                "return window.getComputedStyle(arguments[0]).backgroundColor;", 
                header
            )
            font_weight = driver.execute_script(
                "return window.getComputedStyle(arguments[0]).fontWeight;", 
                header
            )
            border = driver.execute_script(
                "return window.getComputedStyle(arguments[0]).border;", 
                header
            )
            print(f"  Header {i}: '{text}'")
            print(f"    - Background: {bg_color}")
            print(f"    - Font weight: {font_weight}")
            print(f"    - Border: {border}")
        
        # Find table rows
        rows = driver.find_elements(By.CSS_SELECTOR, '.material-search-table tbody tr, .materials-table tbody tr')
        print(f"\n📊 Fundet {len(rows)} table rows")
        
        if len(rows) > 0:
            first_row = rows[0]
            cells = first_row.find_elements(By.TAG_NAME, 'td')
            print(f"\n🔍 Første række har {len(cells)} celler:")
            
            for i, cell in enumerate(cells, 1):
                text = cell.text.strip()[:50]
                bg_color = driver.execute_script(
                    "return window.getComputedStyle(arguments[0]).backgroundColor;", 
                    cell
                )
                text_align = driver.execute_script(
                    "return window.getComputedStyle(arguments[0]).textAlign;", 
                    cell
                )
                border = driver.execute_script(
                    "return window.getComputedStyle(arguments[0]).border;", 
                    cell
                )
                print(f"  Cell {i}: '{text}'")
                print(f"    - Background: {bg_color}")
                print(f"    - Text align: {text_align}")
                print(f"    - Border: {border}")
        
        # Check for yellow highlighting (problematisk)
        yellow_elements = driver.execute_script("""
            const elements = document.querySelectorAll('*');
            const yellowElements = [];
            elements.forEach(el => {
                const bg = window.getComputedStyle(el).backgroundColor;
                if (bg.includes('255, 255') && (bg.includes('224') || bg.includes('240'))) {
                    yellowElements.push({
                        tag: el.tagName,
                        class: el.className,
                        bg: bg
                    });
                }
            });
            return yellowElements;
        """)
        
        if len(yellow_elements) > 0:
            print(f"\n⚠️  PROBLEM: Fundet {len(yellow_elements)} elementer med gul highlighting!")
            for el in yellow_elements[:5]:
                print(f"  - {el['tag']}.{el['class']}: {el['bg']}")
        else:
            print("\n✅ Ingen gul highlighting fundet")
        
        # Check table styling
        table = driver.find_element(By.CSS_SELECTOR, '.materials-table, .material-search-table')
        table_layout = driver.execute_script(
            "return window.getComputedStyle(arguments[0]).tableLayout;", 
            table
        )
        border_collapse = driver.execute_script(
            "return window.getComputedStyle(arguments[0]).borderCollapse;", 
            table
        )
        font_family = driver.execute_script(
            "return window.getComputedStyle(arguments[0]).fontFamily;", 
            table
        )
        
        print(f"\n📐 Table Styling:")
        print(f"  - table-layout: {table_layout}")
        print(f"  - border-collapse: {border_collapse}")
        print(f"  - font-family: {font_family}")
        
        # Verification
        print("\n" + "="*60)
        print("VERIFICATION RESULTS:")
        print("="*60)
        
        issues = []
        
        if table_layout != 'fixed':
            issues.append(f"❌ table-layout should be 'fixed', got '{table_layout}'")
        else:
            print("✅ table-layout: fixed")
        
        if border_collapse != 'collapse':
            issues.append(f"❌ border-collapse should be 'collapse', got '{border_collapse}'")
        else:
            print("✅ border-collapse: collapse")
        
        if 'Calibri' not in font_family and 'Segoe UI' not in font_family:
            issues.append(f"❌ font-family should include Calibri or Segoe UI, got '{font_family}'")
        else:
            print("✅ font-family: Excel-style")
        
        if len(yellow_elements) > 0:
            issues.append(f"❌ Found {len(yellow_elements)} elements with yellow highlighting")
        else:
            print("✅ No yellow highlighting")
        
        if len(issues) > 0:
            print("\n⚠️  ISSUES FOUND:")
            for issue in issues:
                print(f"  {issue}")
            return False
        else:
            print("\n🎉 All checks passed!")
            return True
        
    except Exception as e:
        print(f"❌ Error: {str(e)}")
        import traceback
        traceback.print_exc()
        return False
    
    finally:
        driver.quit()

if __name__ == '__main__':
    print("="*60)
    print("Material Search Table Excel Style Test")
    print("="*60)
    
    # Check if frontend is running
    import requests
    try:
        requests.get('http://localhost:3000', timeout=2)
        print("✅ Frontend is running on http://localhost:3000\n")
    except:
        print("❌ Frontend is NOT running!")
        print("   Start it with: cd frontend && npm start\n")
        exit(1)
    
    success = test_material_search_table()
    
    if success:
        print("\n✅ TEST PASSED")
        exit(0)
    else:
        print("\n❌ TEST FAILED")
        exit(1)