Jasmine, you have to write javascript unit tests!

Some time ago I wrote about how important is to write unit tests for our code, you can read it here.

Today, I have seen a lot of developers talking about unit tests, but the majority of these efforts are focused to backend. My team is a example, we have a good coverage on our backend code but we leave the javascript code to be tested by the browser tests. Is it wrong ?

IMO, YES ! First of all, browser tests are slow, and they don’t fail beautiful, we have less fail information in a acceptance tests than we would have in a unit test, and second, javascript is the language of the moment, jQuery, became interactive applications creation easier, and a lot of javascript frameworks have been created in the recent years, e.g. node.js, backbone.js, angular.js, ember.js and so on. It’s not a surprise that javascript is the most used language in GitHub.

With these informations, I googled for some unit test frameworks for javascript. The most used are:

QUnit, framework created in 2009 by the jQuery Team.
Mocha, bdd framework integrated with node.js.
Jasmine, as Mocha, is a bdd framework and we will use this one in this post.

Jasmine

Jasmine was created due the dissatisfaction from the creators with existing framworks, between these dissatisfactions are the fact what most of them don’t support async tests and others have a ugly syntax, hard to understand. Jasmine was born with the following ideas:

  • RSpec based, from Ruby/li>
  • Should encourage good tests practice
  • Easily integrated with build systems
  • And of course, easy to use

How Jasmine works

Describe

A Jasmine test suite starts with a describe declaration that is a function that receive two parameters, the test suite name, and another function that will implement the tests.

describe("My test suite", function() {});



It

The tests are implemented by the It function, that as describe, receive two parameters, the test name, and the function that represents the test.

describe("My test suite", function() {
  
  it("testing a positive case", function() {
  });

  it("testing a negative case", function() {
  });

});



Expect/Matchers

The expects in jasmine are made by the matchers, that will compare the actual value with the expected value. The matchers can execute a negative assert using the not operator.

describe("My test suite", function() {
  
  it("testing a positive case", function() {
     expect(true).toBe(true);
  });
  
  it("testing a negative case", function() {
     expect(true).not.toBe(false);
  });

});


The Jasmine by default has a lot of matchers, but it’s extensible, new matchers can be added to framework.


beforeEach(function() {
  this.addMatchers({
    shouldBeLessThan: function(expected) {
      return this.actual < expected;
    }
  });
});



Setup/Teardown

Jasmine has support to Setup (functions that will be executed before each test) and to the Teardown (functions that will be executed after each test).


describe("My test suite", function() {
  var foo;

  beforeEach(function() {
     // Function that will be executed BEFORE each test
  });

  afterEach(function() {
     // Function that will be executed AFTER each test
  });

});



Spies

Jasmine has support to Mocks using Spies, and also provide some custom matchers to make asserts using spies.

toHaveBeenCalled, will return true if the spy was called


describe("My suite test", function() {
  var student, grade;

  beforeEach(function() {
    student = {
      setGrade: function(value) {
        grade = value;
      }
    };

    spyOn(student, 'setGrade');

    student.setGrade(9);
  });

  it("verify if setGrade was called", function() {
    expect(student.setGrade).toHaveBeenCalled();
  });
});



andReturn, will mock a object, and all calls will return the same value


describe("A spy, when faking a return value", function() {
  var student, grade;

  beforeEach(function() {
    student = {
      setGrade: function(value) {
        grade = value;
      },
      getGrade: function() {
        return grade;
      }
    };

    spyOn(student, 'getGrade').andReturn(8);
  });

  it("verify if it is the mocked grade", function() {
    expect(student.getGrade()).toEqual(8);
  });
});



In the next post, I will show how to use Jasmine in practice, creating a Code Kata using BDD and Jasmine :)

For more info, I recommend the Jasmine page:

Jasmine

3 Comments

  1. Ping from code-kata-javascript-jasmine:

    [...] my last post, we saw how jasmine works, how we can create tests, make asserts and so on. In this post, i propose [...]

  2. Comment by moncler:

    thanks for share

  3. Ping from Resources to learn javascript:

    [...] technologies. In this post, the subject is Javascript. I already made two posts covering Javascript here, and [...]

Leave a Reply

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