How to unit test your handlebars helper with jasmine

Published February 11, 2013 by Toran Billups

Over the last few months I've been playing around with the handlebars javascript templating library. One thing I like about handlebars is the pure simplicity of the library. At it's core, each handlebars template is a javascript function that takes an object and returns a string.

I recently finished a small handlebars project and found that despite the logicless approach, you might need to write your own helper to accomplish something the library does not offer by default.

For example, out of the box the if statement allows you to say if something is defined or undefined. Beyond this you can't directly compare attributes on the object being passed in.

Lets assume for the moment you need this feature (for better or worse). You can extend handlebars by writing your own helper.

In the javascript snippet above I implemented a simple if / equal helper that lets you compare attributes in the current templates context.

Before this moment I didn't have much of a need to unit test my templates directly because they were essentially logicless. But this if /equal template is a clear violation of that idea and should have some testing around it to understand how it works / verify it still works when we change it / etc.

I decided to write a simple jasmine unit test that would prove the conditional works as expected. I have verified this unit test works with both the jasmine-node and jasmine-phantom-node test runners. If you want a full blown example of the jasmine-phantom-node version you can find it in the examples directory.

Hopefully the example above will get someone else unit testing their handlebars templates!

Buy Me a Coffee

Twitter / Github / Email