forked from rosa/hakurei
cmd/mbf: jstest: add DOM reporter
This commit is contained in:
30
cmd/mbf/internal/pkgserver/ui/jstest/index.html
Normal file
30
cmd/mbf/internal/pkgserver/ui/jstest/index.html
Normal file
@@ -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="./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="./jstest.js"></script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -131,7 +131,66 @@ 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;
|
||||
}
|
||||
|
||||
// A reporter that directly translates a tree of results into a tree of
|
||||
// collapsible elements in the DOM.
|
||||
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) {
|
||||
// Minimize successes by default, by only expanding failures.
|
||||
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: [] });
|
||||
|
||||
52
cmd/mbf/internal/pkgserver/ui/jstest/style.css
Normal file
52
cmd/mbf/internal/pkgserver/ui/jstest/style.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import "embed"
|
||||
|
||||
//go:generate tsc -p tsconfig.test.json
|
||||
//go:generate cp index.html style.css favicon.ico static
|
||||
//go:generate cp jstest/index.html jstest/style.css static/jstest
|
||||
//go:embed static
|
||||
var _static embed.FS
|
||||
var static = staticFS(_static)
|
||||
|
||||
Reference in New Issue
Block a user