Psst! I'm no longer blogging here, and instead focusing my energies on the Coping with Creativity newsletter. Go subscribe!

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!

  1. Add the CDN to your external scripts
  2. Put <div id="tao"></div> at the bottom of your HTML
  3. 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

Add the tao.js CDN url to your JavaScript external scripts.
Add the tao.js CDN url to your JavaScript 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:

<div id="tao"></div>

Add a div with id=”tao” to the bottom of your HTML editor. This is where the tests will appear.

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!

Leave a comment

Your email address will not be published. Required fields are marked *