Add a 'test' button to each test in Puter.js's test suite

Author: jelveh

src/puter-js/test/run.html

@@ -38,6 +38,10 @@
         .test-container{
             font-family: monospace;
         }
+        .test-checkbox-container{
+            display: flex;
+            align-items: center;
+        }
         .test-container:hover{
             background-color: #f0f0f0;
         }
@@ -47,6 +51,35 @@
         .test-container input{
             float: left;
         }
+        .test-run-button {
+            margin-left: 10px;
+            background-color: #4c84af;
+            border: none;
+            color: white;
+            padding: 5px 10px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 12px;
+            cursor: pointer;
+            border-radius: 3px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+        .test-container:hover .test-run-button {
+            opacity: 1;
+        }
+        .test-run-button:hover {
+            background-color: #3a6a8a;
+        }
+        .test-run-button:disabled {
+            background-color: #999;
+            cursor: not-allowed;
+            opacity: 1;
+        }
+        .test-run-button:disabled:hover {
+            background-color: #999;
+        }
     </style>
     <script>
     document.addEventListener("DOMContentLoaded", () => {
@@ -77,24 +110,33 @@
         $('#tests').append('<h2>File System Tests</h2>');
         for (let i = 0; i < fsTests.length; i++) {
             $('#tests').append(`<div class="test-container" id="fsTests-container-${i}">
-                <input type="checkbox" class="test-checkbox" id="fsTests${i}" checked>
-                <label for="fsTests${i}">${fsTests[i].name}</label><br>
+                <div class="test-checkbox-container">
+                    <input type="checkbox" class="test-checkbox" id="fsTests${i}" checked>
+                    <label for="fsTests${i}">${fsTests[i].name}</label><br>
+                    <button class="test-run-button" onclick="runSingleTest('fs', ${i})">Run Test</button>
+                </div>
             </div>`);
         }
 
         $('#tests').append('<h2>Key Value Tests</h2>');
         for (let i = 0; i < kvTests.length; i++) {
             $('#tests').append(`<div class="test-container" id="kvTests-container-${i}">
-                <input type="checkbox" class="test-checkbox" id="kvTests${i}" checked>
-                <label for="kvTests${i}">${kvTests[i].name}</label><br>
+                <div class="test-checkbox-container">
+                    <input type="checkbox" class="test-checkbox" id="kvTests${i}" checked>
+                    <label for="kvTests${i}">${kvTests[i].name}</label><br>
+                    <button class="test-run-button" onclick="runSingleTest('kv', ${i})">Run Test</button>
+                </div>
             </div>`);
         }
 
         $('#tests').append('<h2>AI Tests</h2>');
         for (let i = 0; i < aiTests.length; i++) {
             $('#tests').append(`<div class="test-container" id="aiTests-container-${i}">
-                <input type="checkbox" class="test-checkbox" id="aiTests${i}" checked>
-                <label for="aiTests${i}">${aiTests[i].name}</label><br>
+                <div class="test-checkbox-container">
+                    <input type="checkbox" class="test-checkbox" id="aiTests${i}" checked>
+                    <label for="aiTests${i}">${aiTests[i].name}</label><br>
+                    <button class="test-run-button" onclick="runSingleTest('ai', ${i})">Run Test</button>
+                </div>
             </div>`);
         }
 
@@ -104,6 +146,46 @@
             }
         }
 
+        async function runSingleTest(testType, index) {
+            const testSuites = {
+                'fs': fsTests,
+                'kv': kvTests,
+                'ai': aiTests
+            };
+            
+            const tests = testSuites[testType];
+            const containerId = `${testType}Tests-container-${index}`;
+            const buttonSelector = `#${containerId} .test-run-button`;
+            
+            // Disable the button and show it while running
+            $(buttonSelector).prop('disabled', true).text('Running...');
+            
+            // Clear previous results
+            $(`#${containerId}`).css('background-color', '');
+            $(`#${containerId} pre`).remove();
+            
+            try {
+                await tests[index]();
+                // make this test's container green
+                $(`#${containerId}`).css('background-color', '#85e085');
+            } catch (e) {
+                console.error(`${testType.toUpperCase()} Test failed:`, tests[index].name, e);
+                // make this test's container red
+                $(`#${containerId}`).css('background-color', '#ffbfbf');
+                // message - show full error information including JSON details
+                let errorMessage = e.message || e.toString();
+                if (e.originalError) {
+                    errorMessage += '\n\nOriginal Error:\n' + JSON.stringify(e.originalError, null, 2);
+                }
+                $(`#${containerId}`).append(`<pre style="color:#c00000; white-space: pre-wrap; font-size: 12px; margin: 5px 0; padding: 10px; background-color: #f8f8f8; border-radius: 3px;">${errorMessage}</pre>`);
+            } finally {
+                // Re-enable the button
+                $(buttonSelector).prop('disabled', false).text('Run Test');
+            }
+        }
+
+        window.runSingleTest = runSingleTest;
+
         async function runTests() {
             // go through fsTests and run each test
             for (let i = 0; i < fsTests.length; i++) {