Unit Testing / senritsu

it('does the thing', () => {

expect('the thing').toBe('the thing')

})

it('should do the thing', async () => {

await Promises.delay(300)

expect('not the thing').toBe('the thing')

})

describe('a complex gizmo', () => {

it('does thing 1', () => {

expect(1).toBe(1)

})

it('has property 2 that takes long to compute', async () => {

await Promises.delay(750)

expect(2).toBe(2)

})

it('has property 3 that takes long to compute', async () => {

await Promises.delay(1500)

expect(2).toBe(2)

})

it('has property 4 that takes long to compute', async () => {

await Promises.delay(2500)

expect(2).toBe(2)

})

describe('another very complex system', () => {

describe('the larger subsystem', () => {

it('does thing 5', async () => {

expect(null).toBeNull()

})

it('should be able to do thing 6', async () => {

await Promises.delay(1000)

expect('could not do it 😥').toBe('did it 👍')

})

describe('the smaller subsystem', () => {

it('is pretty solid', async () => {

await Promises.delay(2000)

expect(true).toBeTruthy()

})

it('has another unrelated feature', () => {

})

renderLabel = (type, name) => htl.html.fragment`<span>

<span style=${{opacity: 0.4}}>${type}</span> ${name}

</strong>

${type === 'describe' ? htl.html.fragment`<span style=${{opacity: 0.4}}>with</span>` : undefined}

</span>`

renderDuration = (duration) => htl.html.fragment`

<span>

<span style=${{opacity: 0.4, /*color: '#6a9eff'*/}}>${durationFormat.format(duration)}ms</span>

</span>

`

renderPassingStatistics = ({passingTests, totalTests}) => htl.html.fragment`

${passingTests === undefined ? `${totalTests.length} running` : undefined}

${passingTests && `${passingTests?.length ?? '?'} of ${totalTests.length} passing`}

</span>

`

renderMessage = message => message

? htl.html.fragment`

<code>${message}</code>

</pre>

`

: undefined

renderTest = (task, {noFragment} = {}) => {

const {name, promise} = task

const render = ({pass, message, expected, actual, duration} = {}) => (noFragment ? htl.html : htl.html.fragment)`<div style=${{

display: 'grid',

gridTemplateColumns: 'auto 1fr',

gap: '0.25em',

border: '1px solid #ddd',

borderRadius: '0.15em',

padding: '0.2em',

paddingBottom: '0.05em'

}}>

<span style=${{width: '24px', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>${pass === undefined ? spinnerIcon(19)/*'🔁'*/ : pass ? '✅' : '❌'}</span>

<span>

${renderLabel('it', name)}

${duration && renderDuration(duration)}

</span>

${message && renderMessage(message)}

</div>`

const parent = document.createElement('div')

const element = render()

parent.appendChild(element)

promise.then((result) => {

parent.replaceChildren(render(result))

})

return parent

}

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`<span class="describe-header-${guid}" style=${{gridArea: '1 / 2 / 2 / 3', paddingTop: '0.1em'}}>

${renderLabel('describe', name)}

${renderPassingStatistics({passingTests, totalTests})}

${duration && renderDuration(duration)}

</span>`

}

const renderSuiteInternal = (task, guid, {noFragment} = {}) => {

const {tasks, isNested} = task

return (noFragment ? htl.html : htl.html.fragment)`

${isNested ? undefined : htl.html.fragment`<style>

.icon-spinning-${hash} {

animation: spinning-${hash} 1.5s infinite linear;

}

@keyframes spinning-${hash} {

0% {transform: rotate(0deg)}

100% {transform: rotate(360deg)}

}

</style>`}

${true ? undefined : isNested ? '🔹' : '🔷'}${systemIcon(20)}

</span>

${renderHeader(task, guid)}

<div style=${{

alignSelf: 'stretch',

gridArea: '1 / 1 / 2 / span 3',

border: '1px solid #ddd',

borderRadius: '0.15em',

padding: '0.2em',

paddingBottom: '0.05em'

}}></div>

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

</div>

`

}

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

}

systemIcon = (pixelSize) => htl.svg`<svg width="${pixelSize}px" height="${pixelSize}px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;stroke: none;fill: currentColor;">

</g>

</g>

</g>

</g>

</svg>`

spinnerIcon = (pixelSize = 19, color = 'gray') => htl.svg`<svg width="${pixelSize}px" height="${pixelSize}px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:5;transform-origin: ${(pixelSize - 1) / 2}px ${(pixelSize - 1) / 2}px;stroke:${color}" class="icon-spinning-${hash}">

</svg>`

hash = crypto.randomUUID()

durationFormat = new Intl.NumberFormat({ maximumSignificantDigits: 2 })

flattenResults = {

const flattenResultsRecursive = (acc, result) => acc.concat(result.results ? result.results.reduce(flattenResultsRecursive, []) : result)

return flattenResultsRecursive

}

flattenTasks = {

const flattenTasksRecursive = (acc, task) => acc.concat(task.tasks?.reduce(flattenTasksRecursive, []) ?? task)

return flattenTasksRecursive

}

it = {

const it = (testName, testFunction) => {

const scope = describe.getCurrentScope()

const start = performance.now()

const promise = new Promise(async (resolve) => {

let result

try {

await testFunction()

result = {pass: true}

} catch(error) {

if (error.matcherResult) {

result = error.matcherResult

} else {

result = {message: error.message, pass: false}

}

const end = performance.now()

result.duration = end - start

resolve(result)

})

const task = {name: testName, promise}

scope?.register(task)

if (scope) {

return task

} else {

return renderTest(task, {noFragment: true})

}

return it

}

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

}

expect = import('https://cdn.skypack.dev/@storybook/expect@28.1.3-5?min').then(x => x.default)

Purpose-built for displays of data