export interface TestResult { success: boolean; logs: string[]; } // ============================================================================= // Reporting export interface Reporter { // While we could simply call a function with a tree representing all // results, which would indeed greatly simplify implementation of reporters, // simply registering a path and allowing the reporter to—either implicitly // or explicitly—construct a tree themselves allows for results to be // *incrementally reported*, instead of a great deal of silence until all // tests finish. update(path: string[], result: TestResult): void; // With just update(), the reporter never knows when all tests have // completed. The simplest possible use for this is to notify the user, but // its intent is actually more tailored to the StreamReporter scenario: // while destructively updated report rendering (as with a tree of DOM nodes // which are mutated) always displays the results in a structured manner // matching that of the tests, “rerendering” or otherwise destructively // updating the rendered output might be infeasible in some paradigms, such // as command-line applications—all existing implementations of such // rendering both mess up the scrollback position and necessarily crop out // some of the data at the bottom (since the top of the tree is forced to be // at the top of the screen, as one cannot unscroll portably). Explicitly // signaling to the reporter that no more results will be received permits // it to simply display live test progress linearly, while building up // a tree and displaying it once it's known the tree is complete. finalize(): void; } export interface Stream { writeln(s: string): void; } const SEP = " ❯ "; // A simple reporter that outputs to some stream; suitable for CLIs. 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(SEP); if (result.success) { this.counts.successes++; // NOTE: emojis are used instead of colored Unicode symbols as // coloring isn't possible through all streams, which would make // this terminal-specific, and even in terminals and emulators // thereof, it's very tedious to correctly detect whether one should // use colors (https://no-color.org, https://bixense.com/clicolors, // https://force-color.org), ensure reasonable contrast is retained // on every possible theme (using reverse video is often the only // way), and be immediately noticeable. Emojis have an upper hand in // that they're more common than obscure Unicode characters—which // also means you're more likely to have an emoji font but not // a font with those symbols—and that they're double-width. 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"] }. NOTE: intermediate nodes are collapsed as // excessive nesting is difficult to convey clearly in a text-only // environment. let pathMap = new Map(); for (const f of this.#failures) { if (f.path.length === 0) throw new RangeError("path is empty"); const key = f.path.slice(0, -1).join(SEP); 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) { this.#writeOutput(tests[0], path ? `${path}${SEP}` : "", false); } else { this.stream.writeln(path); for (const t of tests) this.#writeOutput(t, " - ", true); } } this.stream.writeln(""); 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.logs.length) { // Individual logs might span multiple lines, so join them together // then split it again. const logStr = test.logs.join("\n"); const lines = logStr.split("\n"); if (lines.length <= 1) { output = `: ${logStr}`; } else { const padding = nested ? " " : " "; output = ":\n" + lines.map((line) => padding + line).join("\n"); } } this.stream.writeln(`${prefix}${test.name}${output}`); } } 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: [] }); r.update(["Tetromino", "generate", "tessellates"], { success: false, logs: ["assertion failed: 1 != 2"] }); r.update(["Tetromino", "solve", "works"], { success: true, logs: [] }); r.update(["discombobulate", "english"], { success: false, logs: ["hippopotomonstrosesquipedaliophobia\npneumonoultramicroscopicsilicovolcanoconiosis", "supercalifragilisticexpialidocious"] }); r.update(["discombobulate", "geography"], { success: false, logs: ["Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu"] }); r.update(["recombobulate"], { success: true, logs: [] }); r.finalize();