Test Driven Development with Javascript

Why should I write Test before Source Code?

Writing Tests is not only a technique to validate your code. Tests give you the specifications of how the code should behave. Writing tests before source code implies that you must know exactly the detailed behavior of your code, as observed from outside the code itself. This is the basic idea of Test Driven Development.

Wikipedia gives us this definition:

Test driven development is a software development process that relies on the repetition of a very short development cycle: first the developer writes an (initial failing) automated test case that defines a desired improvement or new function, then produces the minimum amount of code to pass that test, and finally refactors the new code to acceptable standards.

In test driven development you have to write unit tests. Therefore you have to breaking down the logic of your application in small piece of testable software called “units“. Each unit should behave as you expect.

A Unit test is a white box test and:

  • initially fail
  • be othogonal (independent) to all the others
  • don’t test configuration settings
  • be not about finding bugs. this is done manually by QA

You are not allowed:

  • To write code unless is to make pass a failing unit test.
  • To write any more of a unit test than is sufficient to fail.
  • To write any more production code than is sufficient to pass the one failing unit test.

As shown on the picture hereafter, the basic steps to follow in the Test Driven Development are:

  1. First, create a new test that fails
  2. Check that this test fails! It must fail!
  3. Once the test fails, start coding until the test does not fail.
  4. Once the code works, clean up, eliminate redudancy, refactor all necessary

Test Development Driven with Javascript and Angular.js

On the picture I mentioned two framework, Jasmine and Karma, let’s see how they are linked with Javascript and AngularJS.

AngularJS and TDD

TDD is an AGILE methodology and for an uncompiled, dynamic language like Javascript writing unit tests will reduce issues in the future. Thanks to the dependency injection‘s functionality available on AngularJS, it’s easier to write test for your code.

How to write Unit Test in AngularJS?
The answer is with Jasmine.

How to run Unit Tests?
The answer is with Karma.

Karma

The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don’t have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative.

Visit Karma Web Site to know more.

Jasmine

Jasmine is a behaviour-driven development framework for testing Javascript code. It does not depend on any other Javascript frameworks. It doess not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Visit Jasmine Web Site to know more.

Jasmine is what we call a behavior-driven development framework, which allows you to write specifications that denote how your code should behave.

The basic structure of a test done with Jasmine is:


describe("define a suite here", function() {
    // define here the spec
	it("it should work correctly", function() {
		// define here what you expect with the help of a matcher
		expect(a).toBe(b);
	});
});


  1. The first step to start to write a Test in Jasmine is to create a suite using the global function “describe“,throught that we tell what is being tested.
  2. Inside a suit we put a spec via the it() global function. It’s a JavaScript function that says what some piece of your program should do. It says it in plain English (“says hello”) and in code.
  3. Inside the spec we can describe our expextations by using the expect function chained to a matcher function

Thanks the built-in function beforeEach and afterEach, we can run code before and after each spec in a suite block.

describe("define a suite here", function() {
	beforeEach(function() { //execute before each spec });
	
    // define here the spec
	it("it should work correctly", function() {
		// define here what you expect with the help of a matcher
		expect(a).toBe(b);
	});
	
	afterEach(function() { // execute after each spec });
});

Jasmine is also a special detective. She uses spies to track calls to a function with all it’s arguments.

describe("define a suite here", function() {
	// spy on the method addReview of review object
	spyOn(review, 'addReview');

	it("contains spec with an expectation", function() {
		expect(review.addReview).toHaveBeenCalled();
	});
});

Book & References

JavaScript Testing with Jasmine – JavaScript Behavior-Driven Development

http://shop.oreilly.com/product/0636920028277.do

https://egghead.io/lessons/angularjs-testing-a-controller

http://evanhahn.com/how-do-i-jasmine/

Leave a Reply