cmd/pkgserver: move StreamReporter display() to Reporter interface

cmd/pkgserver/ui.go

@@ -25,14 +25,22 @@ 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")
 	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/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

@@ -0,0 +1,133 @@
+export interface TestResult {
+    success: boolean;
+    output: string;
+}
+
+// =============================================================================
+// Reporting
+
+export interface Reporter {
+    update(path: string[], result: TestResult): void;
+    finalize(): void;
+}
+
+export interface Stream {
+    writeln(s: string): void;
+}
+
+export class StreamReporter implements Reporter {
+    stream: Stream;
+    verbose: boolean;
+    failures: ({ path: string[] } & TestResult)[];
+    counts: { successes: number, failures: number };
+
+    constructor(stream: Stream, verbose: boolean = false) {
+        this.stream = stream;
+        this.verbose = verbose;
+        this.failures = [];
+        this.counts = { successes: 0, failures: 0 };
+    }
+
+    update(path: string[], result: TestResult) {
+        if (path.length === 0) throw new RangeError("path is empty");
+        const pathStr = path.join(' ❯ ');
+        if (result.success) {
+            this.counts.successes++;
+            if (this.verbose) this.stream.writeln(`✅️ ${pathStr}`);
+        } else {
+            this.counts.failures++;
+            this.stream.writeln(`⚠️ ${pathStr}`);
+            this.failures.push({ path, ...result });
+        }
+    }
+
+    finalize() {
+        // Transform [{ path: ['a', 'b', 'c'] }, { path: ['a', 'b', 'd'] }]
+        // into { 'a ❯ b': ['c', 'd'] }.
+        let pathMap = new Map<string, ({ name: string } & TestResult)[]>();
+        for (const f of this.failures) {
+            const key = f.path.slice(0, -1).join(' ❯ ');
+            if (!pathMap.has(key)) pathMap.set(key, []);
+            pathMap.get(key).push({ name: f.path.at(-1), ...f });
+        }
+
+        this.stream.writeln('');
+        this.stream.writeln('FAILURES');
+        this.stream.writeln('========');
+
+        for (const [path, tests] of pathMap) {
+            if (tests.length === 1) {
+                const t = tests[0];
+                const pathStr = path ? `${path} ❯ ` : '';
+                const output = t.output ? `: ${t.output}` : '';
+                this.stream.writeln(`${pathStr}${t.name}${output}`);
+            } else {
+                this.stream.writeln(path);
+                for (const t of tests) {
+                    const output = t.output ? `: ${t.output}` : '';
+                    this.stream.writeln(`  - ${t.name}${output}`);
+                }
+            }
+        }
+
+        this.stream.writeln('');
+        const { successes, failures } = this.counts;
+        this.stream.writeln(`${successes} succeeded, ${failures} failed`);
+    }
+}
+
+export class DOMReporter implements Reporter {
+    update(path: string[], result: TestResult) {
+        if (path.length === 0) throw new RangeError("path is empty");
+        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);
+    }
+
+    finalize() {}
+}
+
+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: '' });
+r.update(['Tetromino', 'generate', 'tessellates'], { success: false, output: 'assertion failed: 1 != 2' });
+r.update(['Tetromino', 'solve', 'works'], { success: true, output: '' });
+r.update(['discombobulate'], { success: false, output: 'hippopotamonstrosesquippedaliophobia' });
+r.update(['recombobulate'], { success: true, output: '' });
+r.finalize();

cmd/pkgserver/ui/test.html

@@ -0,0 +1,24 @@
+<!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>
+<div id="counters">
+    <span id="successes">0</span> succeeded, <span id="failures">0</span> failed.
+</div>
+
+<div id="root">
+</div>
+
+<script type="module" src="./static/test.js"></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