2e:null 2f:["$","title",null,{"children":"Unit Testing | senritsu | Observable"}] 34:T9f9,renderSuite = { const renderHeader = (task, guid, result = {}, results) => { const {name, promise, tasks, isNested} = task const {duration} = result const totalTests = tasks.reduce(flattenTasks, []) const passingTests = results?.filter(x => x.pass) const success = results?.every(x => x.pass) const aggregatedColor = success === undefined ? 'gray' : success ? 'green' : 'red' return htl.html.fragment` ${renderLabel('describe', name)} ${renderPassingStatistics({passingTests, totalTests})} ${duration && renderDuration(duration)} ` } const renderSuiteInternal = (task, guid, {noFragment} = {}) => { const {tasks, isNested} = task return (noFragment ? htl.html : htl.html.fragment)`

${isNested ? undefined : htl.html.fragment``} ${true ? undefined : isNested ? '🔹' : '🔷'}${systemIcon(20)} ${renderHeader(task, guid)}

${tasks.map(task => renderTestOrSuite(task))}

` } const renderSuiteTask = (task, {noFragment} = {}) => { const guid = crypto.randomUUID() const parent = document.createElement('div') parent.appendChild(renderSuiteInternal(task, guid, {noFragment})) const resultsPromise = Promise.all(task.tasks.reduce(flattenTasks, []).map(task => task.promise)) Promise.all([task.promise, resultsPromise]).then(async ([result, results]) => { const currentHeader = parent.querySelector(`.describe-header-${guid}`) currentHeader.replaceWith(renderHeader(task, guid, result, results)) }) return parent } const renderTestOrSuite = task => task.tasks ? renderSuiteTask(task) : renderTest(task) return renderSuiteTask }35:T6d2,systemIcon = (pixelSize) => htl.svg``36:T415,spinnerIcon = (pixelSize = 19, color = 'gray') => htl.svg``37:T414,describe = { const scopes = [] const describe = async (suiteName, testFunction) => { const scope = describe.getCurrentScope() const start = performance.now() const tasks = [] scopes.push({ registerNestedScope: (suiteName, promise) => tasks.push({suiteName, promise}), registerTest: (testName, promise) => tasks.push({testName, promise}), register: task => tasks.push(task) }) const promise = new Promise(async (resolve) => { testFunction() scopes.pop() const results = await Promise.all(tasks.map(task => task.promise)) const end = performance.now() const result = {duration: end - start} resolve(result) }) const task = {name: suiteName, promise, tasks, isNested: !!scope} scope?.register(task) if (scope) { return task } else { return renderSuite(task, {noFragment: true}) } } describe.getCurrentScope = () => scopes[scopes.length - 1] return describe }38:[] 32:{"id":"5b6f88aa8372dcee","slug":"unit-testing","title":"Unit Testing","thumbnail":"86e93f0609fd6ea8e811a5cf22bdea92c8099478bee87509ca1007cec79492a9","access_level":"public","create_time":"$D2022-12-11T09:35:53.929Z","update_time":"$D2023-10-09T18:15:31.155Z","view_time":null,"first_public_time":"$D2022-12-11T09:35:53.929Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c62aba2ac21021cb","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":"starter_2024"},"version":791,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null}],"members":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"83e62ed18587ec1b","slug":"library","title":"Library","owner":{"id":"c62aba2ac21021cb","login":"senritsu","name":""}},"type":"notebook","body":{"title":"Unit Testing","cells":[{"id":0,"value":"# Unit Testing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This notebook started as an exploration into running unit tests inside Observable notebooks, with nice-looking output.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"## Usage\n\nYou can import all required functions from this notebook:\n\n```js\nimport {it, describe, expect} from '@senritsu/unit-testing'\n```\n\nWith those, you can write tests pretty much like in [Jest](https://jestjs.io/) or other similar testing frameworks, demonstrated in the examples below. Nested and `async` suites and tests are supported. Docs for `expect` can be found [here](https://jestjs.io/docs/expect).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"it('does the thing', () => {\n expect('the thing').toBe('the thing')\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"it('should do the thing', async () => {\n await Promises.delay(300)\n expect('not the thing').toBe('the thing')\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"describe('a complex gizmo', () => {\n it('does thing 1', () => {\n expect(1).toBe(1)\n })\n\n it('has property 2 that takes long to compute', async () => {\n await Promises.delay(750)\n expect(2).toBe(2)\n })\n\n it('has property 3 that takes long to compute', async () => {\n await Promises.delay(1500)\n expect(2).toBe(2)\n })\n\n it('has property 4 that takes long to compute', async () => {\n await Promises.delay(2500)\n expect(2).toBe(2)\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"describe('another very complex system', () => {\n describe('the larger subsystem', () => {\n it('does thing 5', async () => {\n expect(null).toBeNull()\n })\n \n it('should be able to do thing 6', async () => {\n await Promises.delay(1000)\n expect('could not do it 😥').toBe('did it 👍')\n })\n })\n\n describe('the smaller subsystem', () => {\n it('is pretty solid', async () => {\n await Promises.delay(2000)\n expect(true).toBeTruthy()\n })\n })\n\n it('has another unrelated feature', () => {\n \n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## UI Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"renderLabel = (type, name) => htl.html.fragment`\n \n ${type} ${name}\n \n ${type === 'describe' ? htl.html.fragment`with` : undefined}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"renderDuration = (duration) => htl.html.fragment`\n\n in\n ${durationFormat.format(duration)}ms\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"renderPassingStatistics = ({passingTests, totalTests}) => htl.html.fragment`\n\n ${passingTests === undefined ? `${totalTests.length} running` : undefined}\n ${passingTests && `${passingTests?.length ?? '?'} of ${totalTests.length} passing`}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"renderMessage = message => message\n ? htl.html.fragment`\n

\n  ${message}\n

\n`\n : undefined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"renderTest = (task, {noFragment} = {}) => {\n const {name, promise} = task\n \n const render = ({pass, message, expected, actual, duration} = {}) => (noFragment ? htl.html : htl.html.fragment)`

\n ${pass === undefined ? spinnerIcon(19)/*'🔁'*/ : pass ? '✅' : '❌'}\n \n ${renderLabel('it', name)}\n ${duration && renderDuration(duration)} \n \n ${message && renderMessage(message)}\n

`\n\n const parent = document.createElement('div')\n const element = render()\n parent.appendChild(element)\n\n promise.then((result) => {\n parent.replaceChildren(render(result))\n })\n\n return parent\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"## Assorted bits and bobs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"hash = crypto.randomUUID()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"durationFormat = new Intl.NumberFormat({ maximumSignificantDigits: 2 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"flattenResults = {\n const flattenResultsRecursive = (acc, result) => acc.concat(result.results ? result.results.reduce(flattenResultsRecursive, []) : result)\n\n return flattenResultsRecursive\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"flattenTasks = {\n const flattenTasksRecursive = (acc, task) => acc.concat(task.tasks?.reduce(flattenTasksRecursive, []) ?? task)\n\n return flattenTasksRecursive\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"## Exports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"it = {\n const it = (testName, testFunction) => {\n const scope = describe.getCurrentScope()\n \n const start = performance.now()\n\n const promise = new Promise(async (resolve) => {\n let result\n try {\n await testFunction()\n \n result = {pass: true}\n } catch(error) {\n if (error.matcherResult) {\n result = error.matcherResult\n } else {\n result = {message: error.message, pass: false}\n }\n }\n\n const end = performance.now()\n\n result.duration = end - start\n\n resolve(result)\n })\n\n const task = {name: testName, promise}\n\n scope?.register(task)\n\n if (scope) {\n return task\n } else {\n return renderTest(task, {noFragment: true})\n }\n }\n\n return it\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"expect = import('https://cdn.skypack.dev/@storybook/expect@28.1.3-5?min').then(x => x.default)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"