31:T11a9,createSuite = ({ name = "tests" // Set to undefined to turn of tap report link } = {}) => { const id = pseudouuid(); const tests = {}; const results = {}; var filter = ""; const regex = () => new RegExp(filter); function updateUI() { reconcile(document.getElementById(id), generate()); } // from https://spin.atomicobject.com/2020/01/16/timeout-promises-nodejs/ // ORIGINAL: typescript: const promiseWithTimeout = (timeoutMs: number, promise: () => Promise, failureMessage?: string) => const promiseWithTimeout = (timeoutMs, promise, failureMessage) => { var timeoutHandle; const timeoutPromise = new Promise((resolve, reject) => { timeoutHandle = setTimeout(() => reject(new Error(failureMessage), timeoutMs)); } ); return Promise.race([ promise(), timeoutPromise, ]).then((result) => { clearTimeout(timeoutHandle); return result; }); } async function maybeRunTest(name) { if (regex().test(name)) { results[name] = undefined updateUI(); try { // MARKER: LOOKHERE-ASYNC-LENGTH console.log(`tests if is async? check ${name} has ${tests[name].length} length`); // I can't detect the asyn. The "length" hack from https://stackoverflow.com/questions/45149744/how-does-jests-callback-testing-actually-work isn't working. Everything is showing up as zero length. // PSEUDOCODE: // If (not async), just run the old code. // If (async), await promiseWithTimeout(30000, tests[name], "failedTimeout") // question: not sure if tests[name] or tests[name]() is the promise. // check if the return value is "failedTimeout". If so, report failed timeout. await tests[name](); results[name] = "ok" updateUI(); return results[name]; } catch(err) { results[name] = err updateUI(); throw err } } } function filterChange(evt) { if (filter !== evt.target.value) { filter = evt.target.value; updateUI(); } if (evt.keyCode === 13) { Object.keys(tests).map(label => maybeRunTest(label)) } } // Generate a report link for serving a TAP report let report_link; if (name) { report_link = deploy(name, async(req, res) => { res.header('Content-Type', 'text/plain'); res.send(await report({results})); }); } function generate() { return html`

${name}

e.stopPropagation()} onkeyup=${filterChange} value="${filter}" placeholder="test filter regex"> ${Object.keys(results) .filter(label => regex().test(label)) .sort() .map(label => html.fragment` `) }

name	value
${label}	${results[label]}

${report_link ? html`Link to this report`:null}

` } const api = { results: results, test: async (label, fn) => { console.log(`Test scheduled: ${label}`) const run = async () => fn() tests[label] = run; const result = await maybeRunTest(label); const color = result === "ok" ? "green" : "red" return html`

${label}: ${result} goto suite

` } } { // Navigation widget const isLocalLink = a => a instanceof HTMLAnchorElement && a.getAttribute('href').match(/^#/); const scrollTo = e => { let l = e.target, t; if(isLocalLink(l) && (t = document.querySelector(`[name="${l.hash.slice(1)}"]`))) { e.preventDefault(); t.scrollIntoView(); } }; document.addEventListener('click', scrollTo); invalidation.then(() => document.removeEventListener('click', scrollTo)); } const view = html`${generate()}` view.value = api; return view; }32:[{"id":"b85565d2b6f001a2db39bdbeafbf5aa687188a77a6f65088a3da275743064af6ec763f97d4575207873165a49b07b65e492987b100b4a0d6bbe3df1f74efda1e","href":"https://static.observableusercontent.com/files/b85565d2b6f001a2db39bdbeafbf5aa687188a77a6f65088a3da275743064af6ec763f97d4575207873165a49b07b65e492987b100b4a0d6bbe3df1f74efda1e","name":"noun_test_2404407.svg","type":"image/svg+xml","lastModified":1613016705239.577,"size":2988}] 2f:{"title":"Reactive Unit Testing and Reporting Framework","cells":[{"id":0,"value":"md`# Reactive Unit Testing and Reporting Framework\n\n\n

\n\n\nA test suite that updates as you fix bugs in realtime.\n\n - filter tests by __regex__\n - rerun tests by pressing enter.\n\nOnly matched tests are run, allowing you to focus on executing individual tests precisely. \n\nImport the suite\n~~~js\n import {createSuite, expect} from '@tomlarkworthy/testing'\n~~~\n\nCreate the UI\n~~~js\n viewof suite = createSuite()\n~~~\n\nCreate named tests using [jest expect](https://jestjs.io/docs/en/expect).\n~~~js\n suite.test(\"A passing test\", () => {expect(true).toBe(true)})\n~~~\n\nSee the [example here](https://observablehq.com/@tomlarkworthy/testing-example).\n\nFurthermore, each test suite generates a TAP reporting endpoint, so you can fetch the current state of the test suite remotely.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"function report(suite, {timeout = 10000} = {}) {\n function tap (suite) {\n return `TAP version 13\n1..${Object.keys(suite.results).length}\n${Object.keys(suite.results).sort().map((name, index) => {\n let status = 'not ok'\n if (suite.results[name] === 'ok') status = 'ok'\n return `${status} ${index + 1} - ${name}` \n}).join('\\n')}\n`\n }\n // This is a bit of a crappy poll loop\n // but its only intended for http handler use\n // https://stackoverflow.com/questions/30505960/use-promise-to-wait-until-polled-condition-is-satisfied\n return new Promise(function (resolve, reject) {\n (function waitForFoo(){\n if (!Object.values(suite.results).includes(undefined)) return resolve(tap(suite));\n setTimeout(waitForFoo, 30);\n })();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`## Test Suite UI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof suite = createSuite()","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`## Some Tests`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"suite.test(\"sync pass\", () => expect(true).toBe(true))","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"suite.test(\"sync fail\", () => expect(true).toBe(false))","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"suite.test(\"throw exception\", () => {\n console.log(\"Run: Throws exception\")\n expect(() => {\n throw new Error(\"Expected exception\");\n }).toThrow();\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"suite.test(\"asyncORIG - original function\", async () => {\n console.log(\"Run: async function\")\n await new Promise(resolve => setTimeout(resolve, 1000));\n return \"foo2\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"md`### Some more async function tests\n\nadded by @chonghorizons, Feb2021`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"suite.test(\"async0 - should fail, no resolve\", async () => {\n console.log(\"Run: async function\")\n// await new Promise(resolve => setTimeout(resolve, 1000));\n await new Promise( resolve => setTimeout( () => { }, 1000));\n console.log(\"not reached? NOPE!\");\n return \"foo2\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"suite.test(\"async1 check returned data\", async () => {\n await new Promise(resolve => setTimeout(()=>resolve(\"foo\"), 1000))\n .then(data => {\n expect(data).toBe(\"foo\");\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"anchor=md`#### This example should not pass. `","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"suite.test(\"async2 function hanging example, should fail\", done => {\n function callback(data) {\n try {\n console.log(\"is this reached? NOPE!\");\n expect(data).toBe('peanut butter'); // never reached\n done(); // see https://jestjs.io/docs/en/asynchronous\n } catch (error) {\n done(error);\n }\n }\n \n let goodFetchData = milliseconds => new Promise( resolve => setTimeout( resolve, milliseconds ));\n let hangingFetchData = milliseconds => new Promise( resolve => setTimeout( ()=>{}, milliseconds ));\n hangingFetchData(1000).then(callback);\n \n \n});\n\n// based on \"unresolved\" example at https://jestjs.io/docs/en/asynchronous\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"suite.test(\"async3 fail returned data: wrong output\", async () => {\n await new Promise(resolve => setTimeout(()=>resolve(\"foo\"), 1000))\n .then(data => {\n expect(data).toBe(\"not foo\");\n })\n console.log(\"done, I am reached\");\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"suite.test('async4: the data is peanut butter', () => {\n const fetchData = () => new Promise(resolve => resolve('peanut butter'));\n return fetchData().then(data => {\n expect(data).toBe('peanut butter');\n });\n});\n\n// adapted example from https://jestjs.io/docs/en/asynchronous\n// not using await","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {reconcile, html} from '@tomlarkworthy/reconcile-nanomorph'","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {pseudouuid} from '@severo/import-uuid-and-nanoid'","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"import {deploy} from '@tomlarkworthy/serverless-cells'","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"expect = {\n console.log(\"loding expect\");\n if (window.expect) return window.expect;\n return require(`jest-expect-standalone@${JEST_EXPECT_STANDALONE_VERSION}/dist/expect.min.js`).catch(() => {\n console.log(\"catch returning window.expect\", window.expect)\n return window.expect;\n }).then(() => {\n console.log(\"then returning window.expect\", window.expect)\n return window.expect;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"JEST_EXPECT_STANDALONE_VERSION = \"24.0.2\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}