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
<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:
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:
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!
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!<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-40419287-327-5d335ef0d9140' data-src='https://widgets.wp.com/likes/#blog_id=40419287&post_id=327&origin=lawsonry.com&obj_id=40419287-327-5d335ef0d9140' data-name='like-post-frame-40419287-327-5d335ef0d9140'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>