testado
Simple test runner, with async and icons.
Meaning of "testado"
"testado" is Esperanto and translated to English means testing.
Usage
browser
Create an HTML document and insert this <script> tag:
<script src="https://unpkg.com/testado"></script>
<script>
/* Your tests here */
</script>nodejs
npm install --save-dev testado
const test = require('testado')
/* Your tests here */or with esm
import test from 'testado'
/* Your tests here */Tests syntax
General syntax
testado works heavily on template strings and tag functions, so obvioulsy it should run in an environment supporting this...
Even if you can "fake" template calls by providing 2 arrays (see non template string calls).
tag `string` ( ...content... )Each tag function returns a function (exception are noticed), so you have to give arguments in parenthesis.
The string provided is a full template and can use substitutions, but these substitution are transformed into the C-like syntax ('foo %s bar %o qwe') and given to the console's corresponding method (see Using string substitutions).
This means that you have to give the type letter after each template string substitutions:
Notice the type letter in ${}s, ${}d, ${}f or ${}o, this indicates the console how to render the given subsituted thing:
log `show a string: ${'foo'}s ...`
log `show a string as object: ${'foo'}o ...`
log `show an integer: ${42.5}i ...`
log `show an integer formatted: ${42.5}.5d ...` // 📣 Note: Precision formatting doesn't work in Chrome
log `show an integer as object: ${42}o ...`
log `show a float: ${Math.PI}f ...`
log `show a float: ${Math.PI}.2f ...` // 📣 Note: Precision formatting doesn't work in Chrome
log `show a float as object: ${Math.PI}o ...`
log `show an object: ${{foo:'bar',qwe: 42}}o ...`
log `show an object: ${document.head}o ...`
log `show an object with dirxml: ${document.head}O ...`Console CSS can be used with ${}c containing a CSS string. Insert a CSS substitution with an empty string to reset styles:
test `${'font-size:1.3em;text-shadow:0 1px 2px white; color:cyan'}cCustom styles` ( ({log})=> {
log `show style with CSS: ${'border:1px dashed; background:rebeccapurple'}c Hello ${''}c ...`
})This will give you in the console:
test
The 1st and only tag accessible from your script root is test:
test `description of tests group` ( Function )The function given to test can be async (it's treated async by default), and will receive an object you can destructure to get the subsequent tag functions.
test `description of tests group` ( async ({ok,ko,log,error})=> {
log `just log a message with console.log's % substitutions
like showing an object: ${document}o or a string: ${"foo"}s`
ok `this test is passed` ( true )
ko `this test is passed when falsy` ( false )
ok `it's ok to use await as the group's function is async` ( await true )
ok `% substitution works also for ${ok}o ${ko}o ${error}o or ${test}o` ( true )
error `just show an error like log (red flashy) but continue tests`
// if real Error is throw during tests, it's collected and shown in the result, but
// subsequent tests are not played
throw new Error('during test')
ok `not played test` ( false )
})
Nesting test groups
You can nest test in test by destructuring a fresh new tag function for this level of nesting.
To preserve the nesting hierachy of the resulting groups you MUST use a test tag from nested function's arguments:
test `description of tests group` ( async ({test})=> {
^
____________________________/
/
v
await test `nested tests group 1` ( async ({test})=> {
^
__________________________/
/
v
await test `nested tests group 2` ( async ({ok})=> {
ok `test leaf` ( true )
})
})
})