test: add browser-based unit tests for helpers, i18n, router

2026-02-05 15:30:58 +01:00
parent bd7a259d72
commit 0b0185deb1
7 changed files with 658 additions and 1 deletions
--- a/tests/index.html
+++ b/tests/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>dgray.io - Tests</title>
+    <style>
+        :root {
+            --color-bg: #1a1a1a;
+            --color-text: #f0f0f0;
+            --color-passed: #4ade80;
+            --color-failed: #f87171;
+            --color-border: #333;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--color-bg);
+            color: var(--color-text);
+            padding: 2rem;
+            line-height: 1.6;
+        }
+
+        h1 {
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+
+        h2 {
+            font-size: 1.2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .test-summary {
+            background: #222;
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+
+        .test-summary .passed {
+            color: var(--color-passed);
+        }
+
+        .test-summary .failed {
+            color: var(--color-failed);
+        }
+
+        .test-list {
+            list-style: none;
+        }
+
+        .test-list li {
+            padding: 0.5rem 1rem;
+            border-bottom: 1px solid var(--color-border);
+        }
+
+        .test-list li.passed {
+            color: var(--color-passed);
+        }
+
+        .test-list li.failed {
+            color: var(--color-failed);
+        }
+
+        .test-list li small {
+            display: block;
+            color: #888;
+            font-family: monospace;
+            margin-top: 0.25rem;
+        }
+
+        #results {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .loading {
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+    <div id="results">
+        <h1>🧪 dgray.io Test Suite</h1>
+        <p class="loading">Running tests...</p>
+    </div>
+
+    <script type="module">
+        import { renderResults } from './test-runner.js'
+
+        const container = document.getElementById('results')
+
+        // Run all test files
+        async function runTests() {
+            try {
+                await import('./helpers.test.js')
+                await import('./i18n.test.js')
+                await import('./router.test.js')
+
+                // Clear loading message and render results
+                container.querySelector('.loading').remove()
+                renderResults(container)
+            } catch (error) {
+                container.innerHTML = `
+                    <h1>🧪 dgray.io Test Suite</h1>
+                    <p style="color: var(--color-failed)">
+                        Error loading tests: ${error.message}
+                    </p>
+                    <pre style="color: #888; font-size: 0.8rem; margin-top: 1rem;">${error.stack}</pre>
+                `
+            }
+        }
+
+        runTests()
+    </script>
+</body>
+</html>