2b:null 2c:["$","title",null,{"children":"Literate Tests | Bob Kerns | Observable"}] 31:Tf6e,class Test extends DisplayManager { constructor({ id, name, ...options }) { super(); this.id = id || clsIdGen(name || 'Test'); this.name = name || this.id; this.options = {}; Object.assign(this, options); this._status = 'initialized'; this.startTime = this.endTime = Date.now(); } get formats() { return TEST_FORMATS; } get [Symbol.toStringTag]() { return "Test"; } get testName() { return this.id === this.name ? this.id : `${this.name} (${this.id})`; } set result(result) { this._status = result.status; switch (result.status) { case 'errored': case 'failed': this._failMessage = this.makeFailMessage(result); break; case 'ok': this.value = result.value; default: this._failMessage = ''; } this.endTime = Date.now(); this.dispatchEvent(new CustomEvent("update", { detail: this.result })); } get status() { return this._status; } get elapsedSeconds() { return ((this.endTime - this.startTime) / 1000).toFixed(3); } get endTime() { return this._endTime; } set endTime(time) { this._endTime = time; } get failMessage1() { return this._failMessage === undefined ? undefined : this._failMessage.split(/\n/)[0]; } makeFailMessage(result) { return ( result && result.error && result.error.message && result.error.message .replace(/https:\/static\.observableusercontent\.com\/worker\//g, '') .replace(/worker\.[0-9a-f]{56}/g, '...') .replace(/&/g, '&') .replace(/ { throw e; }), e ); this.result = { status: 'ok', value: e }; } catch (e2) { this.result = { status: 'errored', error: e2 }; } } this.endTime = Date.now(); this.dispatchEvent(new CustomEvent("update", { detail: this.result })); return this.formatResult(); } // Unless overridden. async expect(expect, val) { expect.toThrow(); } // Unless overridden. async expectError(expect, e) { expect.not.toThrow(); } fillFormat(fmt) { const elt = this.formats[fmt]; if (!elt) { throw new Error(`No format named ${fmt}`); } const result = elt.cloneNode(true); const time = ((this.endTime - this.startTime) / 1000).toFixed(3) + " s"; d3.select(result) .classed(this.id, true) .call(e => STATUS_NAMES.forEach(s => e.classed(s, false))) .classed(this.status, true) .call(e => e.selectAll(".fill.testName").text(this.name)) .call(e => e.selectAll(".fill.status").text(this.status)) .call(e => e .selectAll(".fail .fill.failMessage") .text(this.status in ['failed', 'errored'] ? this.failMessage : '') ) .call(e => e.selectAll(".fill.time").text(time)); result.value = this; return result; } formatResult() { return this.fillFormat('detail'); } }32:T14da,class TestSuite extends DisplayManager { constructor({ name, id = clsIdGen(name || 'Suite') }) { super(); const updateRows = () => (this.elements[Symbol.for("Suite")] || []).forEach(e => e.dispatchEvent(new CustomEvent("update")) ); this.addEventListener("add", ev => { const test = ev.detail; this.tests[test.id] = test; updateRows(); }); this.addEventListener("remove", ev => { const test = ev.detail; delete this.tests[test.id]; this.removeTestElements(test.id); updateRows(); }); this.addEventListener("update", ev => { const test = ev.detail; this.tests[test.id] = test; (this.elements[test.id] || []).forEach(e => e.dispatchEvent(new CustomEvent("update", { detail: test })) ); updateRows(); }); this.tests = {}; this.id = id; } get [Symbol.toStringTag]() { return "TestSuite"; } getTestElements(testId) { return (this.elements[testId] = this.elements[testId] || new Set()); } addTestElement(testId, elt) { d3.select(elt).classed('registered', true); this.getTestElements(testId).add(elt); return elt; } // When an individual element is removed from the DOM removeTestElement(testId, elt) { this.getTestElements(testId).remove(elt); } // When a test is deleted. removeTestElements(testId) { const remove = this.elements[testId]; this.elements[testId] = []; remove.forEach(e => e.remove()); } // This is how a test is normally run: = by passing a test spec to TestSuite.add. add(specOrTest) { const doAdd = t => { if (t instanceof Test) { const test = t; this.tests[test.id] = test.result; const propagate = ev => { this.dispatchEvent(new CustomEvent(ev.type, { detail: ev.detail })); }; this.addListener("update", test, propagate); this.addListener("remove", test, propagate); this.dispatchEvent(new CustomEvent("add", { detail: test.result })); if (!test.noRun) { return test.run(); } return test; } else { return this.add(new Test(t)); } }; if (Array.isArray(specOrTest)) { const results = specOrTest.map(doAdd); return Promise.all(results).then(results => html`

${results}

`); } else { return doAdd(specOrTest); } } updateTest(testId, node) { const addItem = val => s => { s.selectAll('*').remove(); s.text(); val instanceof Element ? s.insert(() => val) : s.text(val); return s; }; const test = this.tests[testId]; this.addTestElement(testId, node); const tr = d3 .select(node) .call(s => this.onUpdate(testId, s, (s, t) => s.attr('class', `test ${t.testName} ${t.status}`) ) ) .call(tr => [ 'testName', 'status', 'elapsedTime', 'endTime', 'failMessage1' ].forEach(k => tr .selectAll(`td.${k}`) .data([k], k => k) .join('td') .attr('class', k) .call(s => this.onUpdate(testId, s, (s, test) => addItem(test[k])(s)) // .call(addItem(test[k])) ) ) ); } addListener(type, target, action) { target.addEventListener(type, action); target.disposable = Generators.disposable(target, () => { target.removeEventListener(type, action); }); } updateTests(node) { d3.select(node) .select(`tbody`) .call(s => this.onUpdate(Symbol.for("Suite"), s, s => s .call(s => s .selectAll('tr') .data(Object.values(this.sortedTests), t => t.id) .call(s => s .join('tr') .each((test, i, g) => this.updateTest(test.id, g[i])) ) ) .selectAll('tr') .data(Object.values(this.sortedTests), t => t.id) .sort(this.sortCmp()) ) ); } sortCmp() { const cmpStatus = (a, b) => a.status === b.status ? 0 : STATUS_NAMES.indexOf(a.status) < STATUS_NAMES.indexOf(b.status) ? -1 : 1; const cmpEnd = (a, b) => a.endTime === b.endTime ? 0 : a.endTime < b.endTime ? -1 : 1; const cmpName = (a, b) => a.name === b.name ? 0 : a.name < b.name ? -1 : 1; return (a, b) => cmpStatus(a, b) == 0 ? cmpName(a, b) === 0 ? cmpEnd(a, b) : cmpName(a, b) : cmpStatus(a, b); } get sortedTests() { return Object.values(this.tests).sort(this.sortCmp()); } summary() { const tests = this.sortedTests; return d3 .select(TEST_FORMATS.table) .clone(true) .attr("id", this.id) .call(c => { const node = c.node(); const removals = new Set(); node.addEventListener("DOMNodeRemovedFromDocument", () => d3 .select(node) .selectAll('.registered') .each((d, i, g) => removals.add(g[i])) .call(c => this.removeNodes(removals)) ); }) .call(c => this.updateTests(c.node())) .node(); } }33:T47f,viewof TEST_FORMATS = def`TEST_FORMATS = ... >You could tweak these, but I'd go with altering the CSS instead. The \`fill\` class marks the fields to be filled in, together with a class to mark what should go there. `( (() => { const nameField = html``; const fail = html`

`; const status = html``; const time = html``; const use = n => n.cloneNode(true); return { detail: html`

Test ${use(nameField)}: ${use(status)}${use(fail)}

`, status, fail, row: html` ${use(nameField)} ${use(status)} ${use(fail)} ${use(time)} `, table: html`

Test	Status	Seconds	Completed	Message

` }; })() )34:[] 2f:{"id":"f2408fa0859ed114","slug":"literate-tests","title":"Literate Tests","thumbnail":"19c646b5acaf74522611969cfdf89bedcc14cb241016bcb0603418ef4bde820c","access_level":"public","create_time":"$D2019-12-04T22:06:55.319Z","update_time":"$D2020-08-18T12:09:23.064Z","view_time":null,"first_public_time":"$D2019-12-10T20:51:29.415Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a2a391e81ef70f60","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":"starter_2024"},"version":1067,"publish_version":1067,"role":null,"authored":false,"authors":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null}],"members":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Literate Tests","cells":[{"id":0,"value":"md`# Literate Tests`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"md`Not quite feature-complete, but getting there...\n\nThe idea is, along with literate programming, we need literate testing, where we can see the results of testing our work with immediate feedback.\n\nLike this, in a cell right next to where we are working. Or even (as here) right in the documentation.\n\n${T.cloneNode(true)}\n\nNeeds:\n1. Some work on the live display of individual tests.\n2. More simplification (and performance gain) from using \\`liveData\\` elements\n3. Documentation!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"md`## Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"viewof T = def`T = TESTS.add({}) // A bad test.\nVALUE`(await TESTS.add({}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"F = {\n const d = async v =>\n md`_\\[Launch 10 tests with random results and delays. Edit to see the code.]_\n${await v}`;\n\n const ds = [...Generators.range(0, 10)].map(i =>\n d(\n TESTS.add({\n id: `MyTest ${i}`,\n options: {\n text: 'This is a test.'\n },\n async test(options) {\n await Promises.delay(15000 * Math.random());\n if (Math.random() < 0.3) throw new Error(\"Too random\");\n return Math.random() < 0.5 ? options.text : \"wrong trousers\";\n },\n expect(ex) {\n ex.toEqual(this.options.text);\n }\n })\n )\n );\n for await (const v of raceAll(ds)) {\n yield v;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"TESTS.summary()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof test_styles = def`**test_styles** = CSS support for test displays to import and use.\nVALUE`(\n html``\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"STATUS_NAMES = ['inititialized ', 'running', 'errored', 'failed', 'ok']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"class DisplayManager {\n constructor() {\n const target = document.createTextNode(null);\n this.addEventListener = target.addEventListener.bind(target);\n this.removeEventListener = target.removeEventListener.bind(target);\n this.dispatchEvent = target.dispatchEvent.bind(target);\n\n this.elements = {};\n }\n\n removeNodes(removals) {\n Object.keys(this.elements).forEach(k => {\n const nodes = (this.elements[k] || []).filter(n => !removals.has(n));\n this.elements[k] = nodes;\n });\n }\n\n onUpdate(testId, sel, fn) {\n const node = sel.node();\n return sel\n .on(\"update\", () => fn(d3.select(node), testId && this.tests[testId]))\n .call(s => this.addTestElement(testId, node))\n .call(s => fn(d3.select(node), this.tests[testId]));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"TESTS = new TestSuite({ name: \"TestTest\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"S = new Set(TESTS.elements['Test-5'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import { ago, liveData, clsIdGen, raceAll } from '@bobkerns/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"import { def } from '@bobkerns/def'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"expect = ['expect@25.5.0', 'jest-extended@0.11.5', 'jest-chain@1.1.5'].map(l =>\n require(l)\n)[0] // Enforce load order.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"