cmd/pkgserver/ui_test: add DOM reporter

cmd/pkgserver/main.go

@@ -82,6 +82,7 @@ func main() {
 		}()
 		var mux http.ServeMux
 		uiRoutes(&mux)
+		testUiRoutes(&mux)
 		index.registerAPI(&mux)
 		server := http.Server{
 			Addr:    flagAddr,

cmd/pkgserver/test_ui.go

@@ -2,4 +2,65 @@
 
 package main
 
+import (
+	"embed"
+	"net/http"
+	"path"
+	"strings"
+)
+
 //go:generate tsc -p ui_test
+//go:generate sass ui_test/lib/ui.scss ui_test/lib/ui.css
+//go:embed ui_test/*
+var test_content embed.FS
+
+func serveTestWebUI(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("X-Content-Type-Options", "nosniff")
+	w.Header().Set("X-XSS-Protection", "1")
+	w.Header().Set("X-Frame-Options", "DENY")
+
+	http.ServeFileFS(w, r, test_content, "ui_test/lib/ui.html")
+}
+
+func serveTestWebUIStaticContent(w http.ResponseWriter, r *http.Request) {
+	switch r.URL.Path {
+	case "/testui/style.css":
+		http.ServeFileFS(w, r, test_content, "ui_test/lib/ui.css")
+	default:
+		http.NotFound(w, r)
+	}
+}
+
+func serveTestLibrary(w http.ResponseWriter, r *http.Request) {
+	switch r.URL.Path {
+	case "/test/lib/test.js":
+		http.ServeFileFS(w, r, test_content, "ui_test/lib/test.js")
+	default:
+		http.NotFound(w, r)
+	}
+}
+
+func redirectUI(w http.ResponseWriter, r *http.Request) {
+	// The base path should not redirect to the root.
+	if r.URL.Path == "/ui/" {
+		http.NotFound(w, r)
+		return
+	}
+	if path.Ext(r.URL.Path) != ".js" {
+		http.Error(w, "403 forbidden", http.StatusForbidden)
+		return
+	}
+
+	w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
+	w.Header().Set("Pragma", "no-cache")
+	w.Header().Set("Expires", "0")
+
+	http.Redirect(w, r, strings.TrimPrefix(r.URL.Path, "/ui"), http.StatusFound)
+}
+
+func testUiRoutes(mux *http.ServeMux) {
+	mux.HandleFunc("GET /test.html", serveTestWebUI)
+	mux.HandleFunc("GET /testui/", serveTestWebUIStaticContent)
+	mux.HandleFunc("GET /test/lib/", serveTestLibrary)
+	mux.HandleFunc("GET /ui/", redirectUI)
+}

cmd/pkgserver/test_ui_stub.go

@@ -0,0 +1,7 @@
+//go:build !(frontend && frontend_test)
+
+package main
+
+import "net/http"
+
+func testUiRoutes(mux *http.ServeMux) {}

cmd/pkgserver/ui_test/lib/test.ts

@@ -90,7 +90,63 @@ 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";
+                child.ariaRoleDescription = "test";
+                const summary = document.createElement("summary");
+                summary.appendChild(document.createTextNode(node));
+                summary.ariaRoleDescription = "test name";
+                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.logs.length) {
+            const pre = document.createElement("pre");
+            pre.appendChild(document.createTextNode(result.logs.join("\n")));
+            p.appendChild(pre);
+        } else {
+            p.classList.add("italic");
+            p.appendChild(document.createTextNode("No output."));
+        }
+        parent.appendChild(p);
+    }
+
+    finalize() {}
+}
+
+let r = globalThis.document ? new DOMReporter() : new StreamReporter({ writeln: console.log });
 r.update(["alien", "can walk"], { success: false, logs: ["assertion failed"] });
 r.update(["alien", "can speak"], { success: false, logs: ["Uncaught ReferenceError: larynx is not defined"] });
 r.update(["alien", "sleep"], { success: true, logs: [] });

cmd/pkgserver/ui_test/lib/ui.html

@@ -0,0 +1,30 @@
+<!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="/testui/style.css">
+    <title>PkgServer Tests</title>
+</head>
+<body>
+<noscript>
+    I hate JavaScript as much as you, but this page runs tests written in
+    JavaScript to test the functionality of code written in JavaScript, so it
+    wouldn't make sense for it to work without JavaScript. <strong>Please turn
+    JavaScript on!</strong>
+</noscript>
+
+<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="/test/lib/test.js"></script>
+</main>
+</body>
+</html>

cmd/pkgserver/ui_test/lib/ui.scss

@@ -0,0 +1,52 @@
+:root {
+    --bg: #d3d3d3;
+    --fg: black;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #2c2c2c;
+        --fg: ghostwhite;
+    }
+}
+
+html {
+    background-color: var(--bg);
+    color: var(--fg);
+}
+
+h1, p, summary, noscript {
+    font-family: sans-serif;
+}
+
+noscript {
+    font-size: 16pt;
+}
+
+.root {
+    margin: 1rem 0;
+}
+
+details.test-node {
+    margin-left: 1rem;
+    padding: 0.2rem 0.5rem;
+    border-left: 2px dashed var(--fg);
+    > 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;
+}