My code at work is different from the code I write on CodePen. At work I try to write maintainable code that is easy to read, is modular and since I am a believer in TDD I write a lot of unit tests. For JavaScript I use Jasmine.

On CodePen, on the other hand, I focus on being creative and the end result. Not so much about the quality and structure of the code. My Pens often consist of a number of global variables and some global functions.

One of my recent Pens is different though. All strict and boring, no sound, no canvas.

I was reading about circular buffers on Wikipedia and when I decided to try and write one here on CodePen I found myself missing the ability to test my code. I missed Jasmine! It turns out that it is very easy to get it up and running. Add these three JavaScript references under Pen settings (the order matters):

  • https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.js
  • https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.js
  • https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.js

Also add this as external CSS:

  • https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.css

Voila!

With CodePen's "Auto Update Preview" you can see the test results while you code. I usually turn it off though, it gets in my way.

The module pattern used is described by Elijah Manor in his blog post "How Good C# Habits can Encourage Bad JavaScript Habits: Part 1". The original blog seems to be shut down but I found this. Not sure about it's authenticity.


3,724 0 24