cmd/pkgserver: fix multi-line JS test output display

cmd/pkgserver/ui.go

@@ -25,14 +25,24 @@ func serveStaticContent(w http.ResponseWriter, r *http.Request) {
 		http.ServeFileFS(w, r, content, "ui/static/favicon.ico")
 	case "/static/index.js":
 		http.ServeFileFS(w, r, content, "ui/static/index.js")
+	case "/static/test.js":
+		http.ServeFileFS(w, r, content, "ui/static/test.js")
+	case "/static/test.css":
+		http.ServeFileFS(w, r, content, "ui/static/test.css")
+	case "/static/test_tests.js":
+		http.ServeFileFS(w, r, content, "ui/static/test_tests.js")
 	default:
 		http.NotFound(w, r)
 
 	}
 }
+func serveTester(w http.ResponseWriter, r *http.Request) {
+	http.ServeFileFS(w, r, content, "ui/test.html")
+}
 
 func uiRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("GET /{$}", serveWebUI)
 	mux.HandleFunc("GET /favicon.ico", serveStaticContent)
 	mux.HandleFunc("GET /static/", serveStaticContent)
+	mux.HandleFunc("GET /test.html", serveTester)
 }

cmd/pkgserver/ui/static/run_tests.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+// Many editors have terminal emulators built in, so running tests with NodeJS
+// provides faster iteration, especially for those acclimated to test-driven
+// development.
+import "./test_tests.js";
+import { run, StreamReporter } from "./test.js";
+run(new StreamReporter({ writeln: console.log }));

cmd/pkgserver/ui/static/test.scss

@@ -0,0 +1,31 @@
+h1, p, summary {
+    font-family: sans-serif;
+}
+
+.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;
+    > pre {
+        margin: 0;
+    }
+}
+
+.italic {
+    font-style: italic;
+}

cmd/pkgserver/ui/static/test.ts

@@ -1,13 +1,133 @@
+// =============================================================================
+// DSL
+
+type TestTree = { name: string } & (TestGroup | Test);
+type TestGroup = { children: TestTree[] };
+type Test = { test: (TestController) => void };
+
+let TESTS: ({ name: string } & TestGroup)[] = [];
+
+export function suite(name: string, children: TestTree[]) {
+    checkDuplicates(name, children)
+    TESTS.push({ name, children });
+}
+
+export function context(name: string, children: TestTree[]): TestTree {
+    checkDuplicates(name, children)
+    return { name, children };
+}
+export const group = context;
+
+export function test(name: string, test: (TestController) => void): TestTree {
+    return { name, test };
+}
+
+function checkDuplicates(parent: string, names: { name: string }[]) {
+    let seen = new Set<string>();
+    for (const { name } of names) {
+        if (seen.has(name)) {
+            throw new RangeError(`duplicate name '${name}' in '${parent}'`);
+        }
+        seen.add(name);
+    }
+}
+
+class FailNowSentinel {}
+
+class TestController {
+    #logBuf: string[];
+    #failed: boolean;
+
+    constructor() {
+        this.#logBuf = [];
+        this.#failed = false;
+    }
+
+    fail() {
+        this.#failed = true;
+    }
+
+    failed(): boolean {
+        return this.#failed;
+    }
+
+    failNow(): never {
+        this.fail();
+        throw new FailNowSentinel();
+    }
+
+    log(message: string) {
+        this.#logBuf.push(message);
+    }
+
+    error(message: string) {
+        this.log(message);
+        this.fail();
+    }
+
+    fatal(message: string): never {
+        this.log(message);
+        this.failNow();
+    }
+
+    getLog(): string {
+        return this.#logBuf.join("\n");
+    }
+}
+
+// =============================================================================
+// Execution
+
 export interface TestResult {
     success: boolean;
     output: string;
 }
 
+function runTests(reporter: Reporter, parents: string[], tree: TestTree) {
+    const path = [...parents, tree.name];
+    if ("children" in tree) {
+        for (const c of tree.children) runTests(reporter, path, c);
+        return;
+    }
+    let controller = new TestController();
+    let excStr: string;
+    try {
+        tree.test(controller);
+    } catch (e) {
+        if (!(e instanceof FailNowSentinel)) {
+            controller.fail();
+            excStr = extractExceptionString(e);
+        }
+    }
+    const log = controller.getLog();
+    const output = (log && excStr) ? `${log}\n${excStr}` : `${log}${excStr ?? ''}`;
+    reporter.update(path, { success: !controller.failed(), output });
+}
+
+export function run(reporter: Reporter) {
+    for (const suite of TESTS) {
+        for (const c of suite.children) runTests(reporter, [suite.name], c);
+    }
+    reporter.finalize();
+}
+
+function extractExceptionString(e: any): string {
+    // String() instead of .toString() as null and undefined don't have
+    // properties.
+    const s = String(e);
+    if (!(e instanceof Error && "stack" in e)) return s;
+    // v8 (Chromium, NodeJS) include the error message, while Firefox and WebKit
+    // do not.
+    if (e.stack.startsWith(s)) return e.stack;
+    return `${s}\n${e.stack}`;
+}
+
 // =============================================================================
 // Reporting
 
 export interface Reporter {
     update(path: string[], result: TestResult): void;
+    finalize(): void;
 }
 
 export interface Stream {
@@ -42,7 +162,7 @@ export class StreamReporter implements Reporter {
         }
     }
 
-    display() {
+    finalize() {
         // Transform [{ path: ["a", "b", "c"] }, { path: ["a", "b", "d"] }]
         // into { "a ❯ b": ["c", "d"] }.
         let pathMap = new Map<string, ({ name: string } & TestResult)[]>();
@@ -58,16 +178,10 @@ export class StreamReporter implements Reporter {
 
         for (const [path, tests] of pathMap) {
             if (tests.length === 1) {
-                const t = tests[0];
+                this.#writeOutput(tests[0], path ? `${path}${SEP}` : "", false);
-                const pathStr = path ? `${path}${SEP}` : "";
-                const output = t.output ? `: ${t.output}` : "";
-                this.stream.writeln(`${pathStr}${t.name}${output}`);
             } else {
                 this.stream.writeln(path);
-                for (const t of tests) {
+                for (const t of tests) this.#writeOutput(t, "  - ", true);
-                    const output = t.output ? `: ${t.output}` : "";
-                    this.stream.writeln(`  - ${t.name}${output}`);
-                }
             }
         }
 
@@ -75,14 +189,64 @@ export class StreamReporter implements Reporter {
         const { successes, failures } = this.counts;
         this.stream.writeln(`${successes} succeeded, ${failures} failed`);
     }
+
+    #writeOutput(test: { name: string } & TestResult, prefix: string, nested: boolean) {
+        let output = "";
+        if (test.output) {
+            const lines = test.output.split("\n");
+            if (lines.length <= 1) {
+                output = `: ${test.output}`;
+            } else {
+                const padding = nested ? "      " : "  ";
+                output = ":\n" + lines.map((line) => padding + line).join("\n");
+            }
+        }
+        this.stream.writeln(`${prefix}${test.name}${output}`);
+    }
 }
 
-const r = new StreamReporter({ writeln: console.log }, true);
+export class DOMReporter implements Reporter {
-r.update(["alien", "can walk"], { success: false, output: "assertion failed" });
+    update(path: string[], result: TestResult) {
-r.update(["alien", "can speak"], { success: false, output: "Uncaught ReferenceError: larynx is not defined" });
+        if (path.length === 0) throw new RangeError("path is empty");
-r.update(["alien", "sleep"], { success: true, output: "" });
+        const counter = document.getElementById(result.success ? "successes" : "failures");
-r.update(["Tetromino", "generate", "tessellates"], { success: false, output: "assertion failed: 1 != 2" });
+        counter.innerText = (Number(counter.innerText) + 1).toString();
-r.update(["Tetromino", "solve", "works"], { success: true, output: "" });
+        let parent = document.getElementById("root");
-r.update(["discombobulate"], { success: false, output: "hippopotamonstrosesquippedaliophobia" });
+        for (const node of path) {
-r.update(["recombobulate"], { success: true, output: "" });
+            let child = null;
-r.display();
+            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 pre = document.createElement("pre");
+            pre.appendChild(document.createTextNode(result.output));
+            p.appendChild(pre);
+        } else {
+            p.classList.add("italic");
+            p.appendChild(document.createTextNode("No output."));
+        }
+        parent.appendChild(p);
+    }
+
+    finalize() {}
+}

cmd/pkgserver/ui/static/test_tests.ts

@@ -0,0 +1,40 @@
+import { context, group, suite, test } from "./test.js";
+
+suite("dog", [
+    group("tail", [
+        test("wags when happy", (t) => {
+            if (0 / 0 !== Infinity / Infinity) {
+                t.fatal("undefined must not be defined");
+            }
+        }),
+        test("idle when down", (t) => {
+            t.log("test test");
+            t.error("dog whining noises go here");
+        }),
+    ]),
+    test("likes headpats", (t) => {
+        if (2 !== 2) {
+            t.error("IEEE 754 violated: 2 is NaN");
+        }
+    }),
+    context("near cat", [
+        test("is ecstatic", (t) => {
+            if (("b" + "a" + + "a" + "a").toLowerCase() === "banana") {
+                t.error("🍌🍌🍌");
+                t.error("🍌🍌🍌");
+                t.error("🍌🍌🍌");
+                t.failNow();
+            }
+        }),
+        test("playfully bites cats' tails", (t) => {
+            t.log("arf!");
+            throw new Error("nom");
+        }),
+    ]),
+]);
+
+suite("cat", [
+    test("likes headpats", (t) => {
+        t.log("meow");
+    }),
+]);

cmd/pkgserver/ui/test.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="static/style.css">
+    <link rel="stylesheet" href="static/test.css">
+    <title>PkgServer Tests</title>
+</head>
+<body>
+<h1>PkgServer Tests</h1>
+
+<main>
+<p id="counters">
+    <span id="successes">0</span> succeeded, <span id="failures">0</span> failed.
+</p>
+
+<div id="root">
+</div>
+
+<script type="module" src="./static/test_tests.js"></script>
+<script type="module">
+    import { DOMReporter, run } from "./static/test.js";
+    run(new DOMReporter());
+</script>
+</main>
+</body>
+</html>

cmd/pkgserver/ui_full.go

@@ -4,6 +4,6 @@ package main
 
 import "embed"
 
-//go:generate sh -c "sass ui/static/dark.scss ui/static/dark.css && sass ui/static/light.scss ui/static/light.css && tsc -p ui/static"
+//go:generate sh -c "sass ui/static/dark.scss ui/static/dark.css && sass ui/static/light.scss ui/static/light.css && sass ui/static/test.scss ui/static/test.css && tsc -p ui/static"
 //go:embed ui/*
 var content embed.FS