`public/test-adaptive.html`

97 lines
<!DOCTYPE html>
<html>
<head>
    <title>Adaptive Loading Test</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .test-result { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .pass { background: #d4edda; color: #155724; }
        .fail { background: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <h1>Adaptive Loading Test Results</h1>
    <div id="results"></div>
    
    <script>
        const results = [];
        
        // Test 1: ConnectionSpeedDetector exists
        if (typeof ConnectionSpeedDetector !== 'undefined') {
            results.push({ name: 'ConnectionSpeedDetector class exists', pass: true });
        } else {
            results.push({ name: 'ConnectionSpeedDetector class exists', pass: false });
        }
        
        // Test 2: window.connectionSpeed initialized
        if (window.connectionSpeed) {
            results.push({ name: 'ConnectionSpeedDetector instance initialized', pass: true });
        } else {
            results.push({ name: 'ConnectionSpeedDetector instance initialized', pass: false });
        }
        
        // Test 3: AdaptiveLoadingManager exists
        if (typeof AdaptiveLoadingManager !== 'undefined') {
            results.push({ name: 'AdaptiveLoadingManager class exists', pass: true });
        } else {
            results.push({ name: 'AdaptiveLoadingManager class exists', pass: false });
        }
        
        // Test 4: window.adaptiveLoading initialized
        if (window.adaptiveLoading) {
            results.push({ name: 'AdaptiveLoadingManager instance initialized', pass: true });
        } else {
            results.push({ name: 'AdaptiveLoadingManager instance initialized', pass: false });
        }
        
        // Test 5: Connection speed detected
        if (window.connectionSpeed && window.connectionSpeed.speedCategory) {
            results.push({ 
                name: `Connection speed detected: ${window.connectionSpeed.speedCategory}`, 
                pass: true 
            });
        } else {
            results.push({ name: 'Connection speed detected', pass: false });
        }
        
        // Test 6: Image quality method exists
        if (window.connectionSpeed && typeof window.connectionSpeed.getImageQuality === 'function') {
            const quality = window.connectionSpeed.getImageQuality();
            results.push({ 
                name: `Image quality determined: ${quality}`, 
                pass: true 
            });
        } else {
            results.push({ name: 'Image quality method exists', pass: false });
        }
        
        // Test 7: Video quality method exists
        if (window.connectionSpeed && typeof window.connectionSpeed.getVideoQuality === 'function') {
            const quality = window.connectionSpeed.getVideoQuality();
            results.push({ 
                name: `Video quality determined: ${quality}`, 
                pass: true 
            });
        } else {
            results.push({ name: 'Video quality method exists', pass: false });
        }
        
        // Display results
        const resultsDiv = document.getElementById('results');
        results.forEach(result => {
            const div = document.createElement('div');
            div.className = `test-result ${result.pass ? 'pass' : 'fail'}`;
            div.textContent = `${result.pass ? '✓' : '✗'} ${result.name}`;
            resultsDiv.appendChild(div);
        });
        
        const summary = document.createElement('h2');
        const passed = results.filter(r => r.pass).length;
        const total = results.length;
        summary.textContent = `Summary: ${passed}/${total} tests passed`;
        summary.style.color = passed === total ? '#155724' : '#721c24';
        resultsDiv.appendChild(summary);
    </script>
</body>
</html>