cmd/pkgserver: add DOM reporter for JS tests

cmd/pkgserver/ui/static/test.ts

@@ -78,7 +78,59 @@ export class StreamReporter implements Reporter {
     }
 }
 
-const r = new StreamReporter({ writeln: console.log }, true);
+function assertGetElementById(id: string): HTMLElement {
+    let elem = document.getElementById(id);
+    if (elem == null) throw new ReferenceError(`element with ID '${id}' missing from DOM`);
+    return elem;
+}
+
+export class DOMReporter implements Reporter {
+    update(path: string[], result: TestResult) {
+        if (path.length === 0) throw new RangeError("path is empty");
+        const counter = assertGetElementById(result.success ? "successes" : "failures");
+        counter.innerText = (Number(counter.innerText) + 1).toString();
+        let parent = assertGetElementById("root");
+        for (const node of path) {
+            let child: HTMLDetailsElement | null = null;
+            let d: Element;
+            outer: for (d of parent.children) {
+                if (!(d instanceof HTMLDetailsElement)) continue;
+                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) {
+                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: "" });
@@ -86,4 +138,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();