Easy JavaScript testing for CodePen
Looking to do test-driven development in CodePen? Consider TaoJS!
Tao is a very tiny testing tool that's perfect for places like CodePen. Using it is as easy as 1-2-3!
- Add the CDN to your external scripts
- Put
<div id="tao"></div>Â at the bottom of your HTML - Write your tests in your JS editor!
Add the CDN to your scripts #
Click on the gear icon next to the JS editor and add the following CDN link to your external scripts:
https://gitcdn.link/repo/lawsonry/taos/master/tests/tao.js
[caption id="attachment_329" align="aligncenter"
width="1446"]
Add the tao.js CDN url to your JavaScript external scripts.[/caption]
Add the Tao placeholder in your HTML #
Go to your HTML editor at put the following at the end of any code you're writing:
<div id="tao"></div>
[caption id="attachment_328" align="aligncenter"
width="2486"]
Add a
div with id="tao" to the bottom of your HTML editor. This is where the tests
will appear.[/caption]
Write your Tao Tests #
Go to your JS editor and start writing your tests. Whenever you update your CodePen's preview, your tests will run and update. Neat!
Tao follows a very simple paradigm that you can learn about from the repo or this Medium article.
In a nutshell, you'll create a tests object and then pass it to the almighty
tao()Â function at the end.
What you get (if you see the above screenshot) is your codepen work and then a nice, neat little set of tests.
Imagine the Future #
Now imagine a future where when you use an online editor, your tests are right there for all to see, to be improved on, reflected on, and learned from.
If you're like me and you like to create Pens on CodePen to share some fun ideas you have, consider integrating Tao testing right there inside your pen. It's fast, it's easy, and it's semantic.
It's Tao!