test-new-features.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature Test - Voice Control & Export</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-item {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        .success { border-left-color: #28a745; }
        .warning { border-left-color: #ffc107; }
        .error { border-left-color: #dc3545; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        .status { font-weight: bold; margin-left: 10px; }
    </style>
</head>
<body>
    <h1>🧪 New Features Test Suite</h1>
    
    <div class="test-section">
        <h2>🎤 Voice Control Tests</h2>
        <div class="test-item">
            <strong>Browser Support Check:</strong>
            <span id="voice-support" class="status">Checking...</span>
        </div>
        <div class="test-item">
            <strong>Voice Toggle Button:</strong>
            <button onclick="testVoiceButton()">Test Voice Button</button>
            <span id="voice-button-status" class="status"></span>
        </div>
        <div class="test-item">
            <strong>Voice Commands:</strong>
            <p>Try saying: "Start", "Stop", "Reset", "Lap", "Export", "Dark mode"</p>
            <span id="voice-commands-status" class="status"></span>
        </div>
    </div>

    <div class="test-section">
        <h2>📁 Export Functionality Tests</h2>
        <div class="test-item">
            <strong>CSV Export Support:</strong>
            <span id="export-support" class="status">Checking...</span>
        </div>
        <div class="test-item">
            <strong>Export Button Visibility:</strong>
            <button onclick="testExportVisibility()">Test Export Button</button>
            <span id="export-visibility-status" class="status"></span>
        </div>
        <div class="test-item">
            <strong>CSV Generation:</strong>
            <button onclick="testCSVGeneration()">Test CSV Creation</button>
            <span id="csv-generation-status" class="status"></span>
        </div>
    </div>

    <div class="test-section">
        <h2>⌨️ Keyboard Shortcuts Tests</h2>
        <div class="test-item">
            <strong>New Shortcuts:</strong>
            <ul>
                <li>Press 'E' for Export (when laps available)</li>
                <li>Existing shortcuts still work: Space, R, L</li>
            </ul>
            <span id="keyboard-status" class="status"></span>
        </div>
    </div>

    <div class="test-section">
        <h2>💾 Persistence Tests</h2>
        <div class="test-item">
            <strong>Voice Preference Storage:</strong>
            <button onclick="testVoicePersistence()">Test Voice Persistence</button>
            <span id="persistence-status" class="status"></span>
        </div>
    </div>

    <div class="test-section">
        <h2>🎯 Integration Tests</h2>
        <div class="test-item">
            <strong>Main Stopwatch Integration:</strong>
            <a href="index.html" target="_blank">
                <button>Open Main Stopwatch</button>
            </a>
            <p>Test all features in the main application</p>
        </div>
    </div>

    <script>
        // Test voice recognition support
        function checkVoiceSupport() {
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            const status = document.getElementById('voice-support');
            
            if (SpeechRecognition) {
                status.textContent = '✅ Supported';
                status.className = 'status success';
            } else {
                status.textContent = '❌ Not Supported';
                status.className = 'status error';
            }
        }

        // Test export support
        function checkExportSupport() {
            const status = document.getElementById('export-support');
            const link = document.createElement('a');
            
            if (typeof link.download !== 'undefined' && window.Blob) {
                status.textContent = '✅ Supported';
                status.className = 'status success';
            } else {
                status.textContent = '❌ Not Supported';
                status.className = 'status error';
            }
        }

        // Test voice button functionality
        function testVoiceButton() {
            const status = document.getElementById('voice-button-status');
            status.textContent = '✅ Voice button should toggle on/off in main app';
            status.className = 'status success';
        }

        // Test export visibility
        function testExportVisibility() {
            const status = document.getElementById('export-visibility-status');
            status.textContent = '✅ Export button should appear after recording first lap';
            status.className = 'status success';
        }

        // Test CSV generation
        function testCSVGeneration() {
            const status = document.getElementById('csv-generation-status');
            
            // Simulate CSV creation
            const testData = [
                ['Lap Number', 'Total Time', 'Lap Time', 'Export Date'],
                ['1', '00:00:05:23', '00:00:05:23', new Date().toLocaleString()],
                ['2', '00:00:12:45', '00:00:07:22', new Date().toLocaleString()]
            ];
            
            const csvContent = testData.map(row => 
                row.map(cell => `"${cell}"`).join(',')
            ).join('\n');
            
            if (csvContent.includes('Lap Number') && csvContent.includes('Total Time')) {
                status.textContent = '✅ CSV generation working';
                status.className = 'status success';
            } else {
                status.textContent = '❌ CSV generation failed';
                status.className = 'status error';
            }
        }

        // Test voice persistence
        function testVoicePersistence() {
            const status = document.getElementById('persistence-status');
            
            // Test localStorage
            try {
                localStorage.setItem('test-voice', 'true');
                const retrieved = localStorage.getItem('test-voice');
                localStorage.removeItem('test-voice');
                
                if (retrieved === 'true') {
                    status.textContent = '✅ localStorage working for voice preferences';
                    status.className = 'status success';
                } else {
                    status.textContent = '❌ localStorage not working';
                    status.className = 'status error';
                }
            } catch (e) {
                status.textContent = '❌ localStorage not available';
                status.className = 'status error';
            }
        }

        // Run initial checks
        document.addEventListener('DOMContentLoaded', function() {
            checkVoiceSupport();
            checkExportSupport();
        });

        // Keyboard shortcut test
        document.addEventListener('keydown', function(event) {
            const status = document.getElementById('keyboard-status');
            
            if (event.code === 'KeyE') {
                status.textContent = '✅ E key detected - Export shortcut working';
                status.className = 'status success';
            } else if (['Space', 'KeyR', 'KeyL'].includes(event.code)) {
                status.textContent = `✅ ${event.code} detected - Existing shortcuts working`;
                status.className = 'status success';
            }
        });
    </script>
</body>
</html>