Test-Driven Development with Jasmine: How to

Build Status Coverage Status

Test-Driven Development with Jasmine: How to

A code kata is an exercise in programming which helps a programmer hone their skills through practice and repetition.

The term was probably first coined by Dave Thomas, co-author of the book The Pragmatic Programmer, in a bow to the Japanese concept of kata in the martial arts.

 Katas

  • Sound Player
  • Hello World
  • FizzBuzz
  • Rock Paper Scissors
  • Primes

 Setup

There are two ways to execute tests.

 Output on HTML

Install Node.js and then execute:

npm install -g grunt-cli
npm install
npm start

Alternatively you can use Yarn.

yarn global add grunt-cli
yarn
yarn start

Open you favorite browser and link to http://127.0.0.1:8000/.

 Output on Console

Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager.

In order to get started, you'll want to install Grunt's command line interface (CLI) globally.

You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this.

npm install -g grunt-cli
npm install
npm test

Alternatively you can use Yarn.

yarn global add grunt-cli
yarn
yarn test

Continuous Integration with travis-ci.org

Travis CI is a hosted, distributed continuous integration service used to build and test software projects hosted at GitHub.

In order to use Travis CI with your JavaScript projects you must use output on console instead of the html.

  • Click on + sign to add new repository.
  • Login with your Github credentials.
  • Select the repository.
  • Update your package.json adding:
"scripts": {
  "test": "grunt test"
},
  • Add a .travis.yml file to your repository to tell Travis CI what to build:
language: node_js
node_js:
  - "6"
before_script:
  - npm install -g grunt-cli

  • note: npm install and npm test are automatically executed by Travis CI.
  • Commit and push your changes.

That's it!

Test-driven development

Test-driven development (TDD) is a software development process that relies on the repetition of a very short development cycle:

  • first the developer writes an (initially failing) automated test case that defines a desired improvement or new function.
  • then produces the minimum amount of code to pass that test.
  • finally refactors the new code to acceptable standards.

 Jasmine

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

jasmine-jquery provides two extensions for Jasmine JavaScript Testing Framework:

  • a set of custom matchers for jQuery framework
  • an API for handling HTML, CSS, and JSON fixtures in your specs

 Example

The standalone distribution contains everything you need to start running Jasmine.

After downloading a particular version and unzipping, opening SpecRunner.html will run the included specs. You’ll note that both the source files and their respective specs are linked in the head tag of the SpecRunner.html. To start using Jasmine, replace the source/spec files with your own.

Following an example of Test-Driven Development using Jasmine for the most famous application: Hello World!

First of all we should create a new file HelloWorldSpec.js inside the folder spec of our project and add the script tag to the SpecRunner.html.

<script type="text/javascript" src="spec/HelloWorldSpec.js"></script>

Now we can start writing our first test.

//- spec/HelloWorldSpec.js

describe('HelloWorld', function() {
  it('should exist.', function() {
    // given
    var helloWorld = new HelloWorld();
  });
});

RED - Try running test and it will fail.


Create a new file HelloWorld.js inside the folder src of our project and add the script tag to the SpecRunner.html.

<script type="text/javascript" src="src/HelloWorld.js"></script>

The next step is writing some code that would cause the test to pass.

//- src/HelloWorld.js

function HelloWorld() {
}

GREEN - Try running test and it will pass.


Need for refactoring?


We have a green bar! Now we can write a new test.

//- spec/HelloWorldSpec.js

...

  it('should greet() correcly.', function()
  {
    // given
    var helloWorld = new HelloWorld();

    // then
    expect(helloWorld.greet()).toEqual('Hello world');
  });

...

RED - Try running test and it will fail.


Now we can write some code that would cause the test to pass.

//- src/HelloWorld.js

...

HelloWorld.prototype.greet = function() {
  return 'Hello world';
};

GREEN - Try running test and it will pass.


Need for refactoring?


Done


SPEC - HelloWorldSpec.js

describe('HelloWorld', function()
{
  it('should exist.', function()
  {
    // given
    var helloWorld = new HelloWorld();
  });

  it('should greet() correcly.', function()
  {
    // given
    var helloWorld = new HelloWorld();

    // then
    expect(helloWorld.greet()).toEqual('Hello world');
  });
});

SRC - HelloWorld.js

function HelloWorld() {
}
HelloWorld.prototype.greet = function() {
  return 'Hello world';
};

 Further readings