Mocha and Handlebars are two great things i use. Mocha is a testing library which can be used for backend (node.js) and fronend testing. On frontend its only dependency is jQuery. Handlebars is templating language that can be used for frontend javascript partials or even for backend (node.js) layouts. What ever you want! :).

Mocha

When i started working with express.js sinatra like framework i took a peek at other projects that people from Vision Media do. One of them was mocha and at that time i needed something to test my backend code. It is good to use such a tool while learning new thing. This was you can document your failures :). As i found it is also great tool to test front end code.

Chai.js / Should.js

Because Mocha is not shipped with everything i like i decided to use should.js https://github.com/visionmedia/should.js on backend (node.js) and chai.js on frontend to make my tests suits more rspec like. This way we will be able to write our specs like this.

1
2
3
4
5
6
7
8
9
10

(function() {

  describe('Application', function() {
    it('should exists', function() {
       var app = new Application();
       app.should.be.an.instanceof(Application);
    });
  });

}).call(this);

I really like this app.should.be.an.instanceof(Application); syntax. But if you don’t like it you can use more jasmine like syntax all info can be found here http://visionmedia.github.com/mocha/.

Handlebars

Second very useful thing that i never skip in my project is Handlebars, easy to use and clean language to build templates in javascript. Simply it is mustache on steroids. But lets dive straight into some example.

1
2
3
4
5
6
7

 <script id="list-entry" type="text/x-handlebars-template">
    <li  class= >
        <span></span> -> 
      <strong></strong>:&nbsp;
      <span></span>
  </li>
 </script>

This sample show how to in easy way embed handlebars into your html code. Important thing is that only code in is getting interpolated. so in this example ` class= ` mans that if in rendering context we have class variable render `class=value_of_class_variable_in_context` as part of li element. will render contents of this var from context. If there is no variable with this name or it is undefined it will not be rendered. thats the important bit that can make some debugging harder. Eg. underscore.js templates explode if you don’t have any param that you use inside of them.

Both tools in action

Ok so lets try it out and write some code in bdd style using handlebars. I have prepared initial setup for this, it contains lib directory with our javascripts, spec directory with out specs and support directory with our mocha.js, chai.js etc. Our test runner is single index.html file we can open in browser. All the code can be downloaded here https://github.com/JakubOboza/handlebars-and-mocha

Step one

Lets write a spec that makes checks if out app loads

1
2
3
4
5
6
7
8
9
10

(function() {

  describe('Application', function() {
    it('should exists', function() {
       var app = new Application();
       app.should.be.an.instanceof(Application);
    });
  });

}).call(this);

Obviously we have here a failing spec. Lets write some implementation to satisfy out spec.

1
2
3

function Application(template_id){

}

Bang everything works fine :). Lets make it do something useful, render some templates! First lets write a spec for it –>

1
2
3
4

it('should render handlebars template', function(){
  var app = new Application("#test-template");
  app.render({name: "kuba"}).should.equal("<p>kuba</p>");
});

Now lets implement this, our template will look like this

1
2
3

 <script id="test-template" type="text/x-handlebars-template">
    <p></p>
 </script>

It is very basic, hard to make mistake ;). And javascript code

1
2
3
4
5
6
7
8

function Application(template_id){
  var source = $(template_id);
  this.template = Handlebars.compile(source.html());
}

Application.prototype.render = function(params){
  return this.template(params);
};

Works! Like a charm! I really enjoy writing tests for javascript this way. It is much more like rspec. At least for me it is much more useful then jasmine

Why not jasmine

I prefer syntax of Mocha. On this few examples i think i show how to start using it and how fun it is. For people with rspec background this should be very easy tool to pick up. More about Mocha can be found on official project page http://visionmedia.github.com/mocha/.

Example code for this post

Can be found here https://github.com/JakubOboza/handlebars-and-mocha just open index.html :)

Cheers!