also looking at this
Implement the web UI server with Zig I/O
#26
8 files
+513
-114
| @@ -84,6 +84,7 @@ | ||
| 84 | 84 | |
| 85 | 85 | .stat.total .stat-value { color: #58a6ff; } |
| 86 | 86 | .stat.passed .stat-value { color: #3fb950; } |
| 87 | .stat.flaky .stat-value { color: #dbab09; } | |
| 87 | 88 | .stat.failed .stat-value { color: #f85149; } |
| 88 | 89 | .stat.skipped .stat-value { color: #d29922; } |
| 89 | 90 | |
| @@ -148,6 +149,11 @@ | ||
| 148 | 149 | background: #1c2128; |
| 149 | 150 | } |
| 150 | 151 | |
| 152 | .test.flaky { | |
| 153 | border-left-color: #dbab09; | |
| 154 | background: #1c2128; | |
| 155 | } | |
| 156 | ||
| 151 | 157 | .test.skipped { |
| 152 | 158 | border-left-color: #d29922; |
| 153 | 159 | opacity: 0.6; |
| @@ -181,6 +187,11 @@ | ||
| 181 | 187 | color: #fff; |
| 182 | 188 | } |
| 183 | 189 | |
| 190 | .test-status.flaky { | |
| 191 | background: #9e6a03; | |
| 192 | color: #fff; | |
| 193 | } | |
| 194 | ||
| 184 | 195 | .test-status.skipped { |
| 185 | 196 | background: #9e6a03; |
| 186 | 197 | color: #fff; |
| @@ -263,6 +274,10 @@ | ||
| 263 | 274 | <div class="stat-value" id="passed-tests">0</div> |
| 264 | 275 | <div class="stat-label">Passed</div> |
| 265 | 276 | </div> |
| 277 | <div class="flaky stat"> | |
| 278 | <div class="stat-value" id="flaky-tests">0</div> | |
| 279 | <div class="stat-label">Flaky</div> | |
| 280 | </div> | |
| 266 | 281 | <div class="failed stat"> |
| 267 | 282 | <div class="stat-value" id="failed-tests">0</div> |
| 268 | 283 | <div class="stat-label">Failed</div> |
| @@ -290,6 +305,7 @@ | ||
| 290 | 305 | const state = { |
| 291 | 306 | total: 0, |
| 292 | 307 | passed: 0, |
| 308 | flaky: 0, | |
| 293 | 309 | failed: 0, |
| 294 | 310 | skipped: 0, |
| 295 | 311 | suites: new Map(), |
| @@ -300,6 +316,7 @@ | ||
| 300 | 316 | connectionStatus: document.getElementById('connection-status'), |
| 301 | 317 | totalTests: document.getElementById('total-tests'), |
| 302 | 318 | passedTests: document.getElementById('passed-tests'), |
| 319 | flakyTests: document.getElementById('flaky-tests'), | |
| 303 | 320 | failedTests: document.getElementById('failed-tests'), |
| 304 | 321 | skippedTests: document.getElementById('skipped-tests'), |
| 305 | 322 | progress: document.getElementById('progress'), |
formatting only · 10 hidden lines
| @@ -316,9 +333,9 @@ formatting only | ||
| 316 | 333 | |
| 317 | 334 | eventSource.addEventListener('run_start', (e) => { |
| 318 | 335 | const data = JSON.parse(e.data); |
| 336 | clearTests(); | |
| 319 | 337 | state.total = data.total; |
| 320 | 338 | updateStats(); |
| 321 | clearTests(); | |
| 322 | 339 | }); |
| 323 | 340 | |
| 324 | 341 | eventSource.addEventListener('suite_start', (e) => { |
| @@ -337,6 +354,7 @@ | ||
| 337 | 354 | updateTest(state.currentSuite, data.name, data.status, data.execution_time_ns, data.error_message); |
| 338 | 355 | |
| 339 | 356 | if (data.status === 'passed') state.passed++; |
| 357 | else if (data.status === 'flaky') state.flaky++; | |
| 340 | 358 | else if (data.status === 'failed') state.failed++; |
| 341 | 359 | else if (data.status === 'skipped') state.skipped++; |
| 342 | 360 | |
| @@ -347,6 +365,7 @@ | ||
| 347 | 365 | const data = JSON.parse(e.data); |
| 348 | 366 | state.total = data.total; |
| 349 | 367 | state.passed = data.passed; |
| 368 | state.flaky = data.flaky; | |
| 350 | 369 | state.failed = data.failed; |
| 351 | 370 | state.skipped = data.skipped; |
| 352 | 371 | updateStats(); |
| @@ -364,10 +383,11 @@ | ||
| 364 | 383 | function updateStats() { |
| 365 | 384 | elements.totalTests.textContent = state.total; |
| 366 | 385 | elements.passedTests.textContent = state.passed; |
| 386 | elements.flakyTests.textContent = state.flaky; | |
| 367 | 387 | elements.failedTests.textContent = state.failed; |
| 368 | 388 | elements.skippedTests.textContent = state.skipped; |
| 369 | 389 | |
| 370 | const completed = state.passed + state.failed + state.skipped; | |
| 390 | const completed = state.passed + state.flaky + state.failed + state.skipped; | |
| 371 | 391 | const progress = state.total > 0 ? (completed / state.total) * 100 : 0; |
| 372 | 392 | elements.progress.style.width = `${progress}%`; |
| 373 | 393 | } |
| @@ -375,6 +395,7 @@ | ||
| 375 | 395 | function clearTests() { |
| 376 | 396 | state.suites.clear(); |
| 377 | 397 | state.passed = 0; |
| 398 | state.flaky = 0; | |
| 378 | 399 | state.failed = 0; |
| 379 | 400 | state.skipped = 0; |
| 380 | 401 | elements.tests.innerHTML = ''; |