cmd/pkgserver: add DOM reporter for JS tests

cmd/pkgserver/ui/static/test.scss

@@ -0,0 +1,24 @@
+.root {
+    margin: 1rem 0;
+}
+
+details.test-node {
+    margin-left: 1rem;
+    padding: 0.2rem 0.5rem;
+    border-left: 2px dashed black;
+    > summary {
+        cursor: pointer;
+    }
+    &.failure > summary::marker {
+        color: red;
+    }
+}
+
+p.test-desc {
+    margin: 0 0 0 1rem;
+    padding: 2px 0;
+}
+
+.italic {
+    font-style: italic;
+}

cmd/pkgserver/ui/static/test.ts

@@ -74,7 +74,50 @@ export class StreamReporter implements Reporter {
     }
 }
 
-const r = new StreamReporter({ writeln: console.log }, true);
+export class DOMReporter implements Reporter {
+    update(path: string[], result: TestResult) {
+        const counter = document.getElementById(result.success ? 'successes' : 'failures');
+        counter.innerText = (Number(counter.innerText) + 1).toString();
+        let parent = document.getElementById('root');
+        for (const node of path) {
+            let child = null;
+            outer: for (const d of parent.children) {
+                for (const s of d.children) {
+                    if (!(s instanceof HTMLElement)) continue;
+                    if (s.tagName !== 'SUMMARY' || s.innerText !== node) continue;
+                    child = d;
+                    break outer;
+                }
+            }
+            if (child === null) {
+                child = document.createElement('details');
+                child.className = 'test-node';
+                const summary = document.createElement('summary');
+                summary.appendChild(document.createTextNode(node));
+                child.appendChild(summary);
+                parent.appendChild(child);
+            }
+            if (!result.success) {
+                child.open = true;
+                child.classList.add('failure');
+            }
+            parent = child;
+        }
+        const p = document.createElement('p');
+        p.classList.add('test-desc');
+        if (result.output) {
+            const code = document.createElement('code');
+            code.appendChild(document.createTextNode(result.output));
+            p.appendChild(code);
+        } else {
+            p.classList.add('italic');
+            p.appendChild(document.createTextNode('No output.'));
+        }
+        parent.appendChild(p);
+    }
+}
+
+let r = typeof document !== 'undefined' ? new DOMReporter() : new StreamReporter({ writeln: console.log });
 r.update(['alien', 'can walk'], { success: false, output: 'assertion failed' });
 r.update(['alien', 'can speak'], { success: false, output: 'Uncaught ReferenceError: larynx is not defined' });
 r.update(['alien', 'sleep'], { success: true, output: '' });
@@ -82,4 +125,4 @@ r.update(['Tetromino', 'generate', 'tessellates'], { success: false, output: 'as
 r.update(['Tetromino', 'solve', 'works'], { success: true, output: '' });
 r.update(['discombobulate'], { success: false, output: 'hippopotamonstrosesquippedaliophobia' });
 r.update(['recombobulate'], { success: true, output: '' });
-r.display();
+if (r instanceof StreamReporter) r.display();