notytex/static/js/class-dashboard-test.js

/**
 * NOTYTEX - Class Dashboard Test Script
 * Test des fonctionnalités responsive et animations avancées
 */

// Tests de performance et compatibilité
document.addEventListener('DOMContentLoaded', () => {
    console.group('🧪 Class Dashboard - Tests de fonctionnalités');

    // Test 1: Détection des capacités du navigateur
    const capabilities = {
        intersectionObserver: 'IntersectionObserver' in window,
        resizeObserver: 'ResizeObserver' in window,
        performanceObserver: 'PerformanceObserver' in window,
        touchEvents: 'ontouchstart' in window,
        vibration: 'vibrate' in navigator,
        connectionAPI: 'connection' in navigator
    };

    console.log('✅ Capacités du navigateur:', capabilities);

    // Test 2: Détection de device
    if (window.ClassDashboard) {
        const testDashboard = new window.ClassDashboard('test');
        const deviceInfo = testDashboard.detectDevice();
        console.log('📱 Informations device:', deviceInfo);
        testDashboard.destroy();
    }

    // Test 3: Performance Timing
    if (performance && performance.timing) {
        const perfData = {
            domReady: performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart,
            pageLoad: performance.timing.loadEventEnd - performance.timing.navigationStart
        };
        console.log('⚡ Performance:', perfData);
    }

    // Test 4: Détection des animations CSS
    const testElement = document.createElement('div');
    testElement.style.cssText = 'animation-duration: 0.001s; animation-name: test-animation;';
    document.body.appendChild(testElement);
    
    const hasAnimationSupport = window.getComputedStyle(testElement).animationDuration === '0.001s';
    console.log('🎨 Support animations CSS:', hasAnimationSupport);
    
    document.body.removeChild(testElement);

    // Test 5: Vérification des classes CSS chargées
    const testClasses = [
        'class-dashboard',
        'stats-card',
        'trimester-nav',
        'ripple-container'
    ];

    const cssLoaded = testClasses.every(className => {
        const testEl = document.createElement('div');
        testEl.className = className;
        document.body.appendChild(testEl);
        const styles = window.getComputedStyle(testEl);
        const hasStyles = styles.position !== 'static' || styles.display !== 'block' || styles.backgroundColor !== 'rgba(0, 0, 0, 0)';
        document.body.removeChild(testEl);
        return hasStyles;
    });

    console.log('🎨 Classes CSS chargées:', cssLoaded);

    // Test 6: Test de performance des animations
    function testAnimationPerformance() {
        const startTime = performance.now();
        const testDiv = document.createElement('div');
        testDiv.style.cssText = `
            position: absolute;
            top: -100px;
            left: 0;
            width: 100px;
            height: 100px;
            background: red;
            transition: transform 0.3s ease;
        `;
        
        document.body.appendChild(testDiv);
        
        requestAnimationFrame(() => {
            testDiv.style.transform = 'translateX(100px)';
            
            setTimeout(() => {
                const endTime = performance.now();
                console.log('🎭 Test animation (ms):', endTime - startTime);
                document.body.removeChild(testDiv);
            }, 350);
        });
    }

    if (performance && performance.now) {
        testAnimationPerformance();
    }

    // Test 7: Test de la mémoire (approximatif)
    if (performance && performance.memory) {
        console.log('🧠 Mémoire utilisée (MB):', {
            used: Math.round(performance.memory.usedJSHeapSize / 1048576),
            total: Math.round(performance.memory.totalJSHeapSize / 1048576),
            limit: Math.round(performance.memory.jsHeapSizeLimit / 1048576)
        });
    }

    console.groupEnd();

    // Affichage des recommandations
    console.group('💡 Recommandations d\'optimisation');
    
    if (!capabilities.intersectionObserver) {
        console.warn('⚠️  IntersectionObserver non supporté - lazy loading désactivé');
    }
    
    if (!capabilities.touchEvents) {
        console.info('ℹ️  Device non-tactile - gestes tactiles désactivés');
    }
    
    if (deviceInfo && deviceInfo.isSlowNetwork) {
        console.warn('🐌 Réseau lent détecté - mode économie activé');
    }
    
    if (deviceInfo && deviceInfo.reducedMotion) {
        console.info('♿ Mode accessibilité détecté - animations réduites');
    }

    console.groupEnd();
});

// Export pour tests unitaires si nécessaire
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        testCapabilities: () => capabilities,
        testPerformance: () => perfData
    };
}