Sunday, October 6, 2013

Basics of Jasmine Framework

Hey folks today we will look into some basics of jasmine. Jasmine is a behavior-driven testing framework for JavaScript programming language. It’s a bunch of tools that you can use to test JavaScript code. you can test your code against specifications that you write. If your code should work in a certain way, Jasmine helps you express
that intention in code.




Getting Started
1. Start by downloading the latest standalone release of Jasmine (https://github.com/pivotal/jasmine/downloads). Unzip it.

2. In your html include scripts in following order:

<script type="text/javascript" src="jasmine/lib/jasmine-core/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-core/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-core/boot.js"></script>

3. Now include you spec file. This is a normal js file in which your test cases are written. So in our case it will be

<!-- Spec files-->
<script type="text/javascript" src="spec/calculatorSpec.js"></script>

Please not that always include spec file before actual code file.

4. Now we include the code file

<!-- Src files-->
<script type="text/javascript" src="src/calculator.js"></script>

Which will contain our logic

Now here are few things you need to know before we look into the code of spec file

* A describe("some name"...) is called a suite. This name of suite would usually be a component of your application.
* Inside of suite is the it() block. This is called specification. Its is a Js function that says what a small  peice of your component must do.

* Matchers: This basically takes the arguement to the expect function and checks to see if it satisfies some criterion in the matcher. for example: toEqual()

Now lets take a look at the spec

You can view the example here: http://designmantra.x10.mx/jasmine/

We are carrying out five tests here:
1. Storing current value
2. Addition yields correct results. 
3. Substraction yields correct results.
4. Multiplication yields correct results.
5. Division yields correct results.

Here is the code for spec file:

describe("Calculator",function(){
it("Should have current value stored",function(){
expect(calculator.currentValue).toBeDefined();
});
beforeEach(function(){
calculator.currentValue = 0
});
describe("Addition module",function(){
it("Should add two numbers",function(){
expect(calculator.add(5)).toEqual(5);
expect(calculator.add(5)).toEqual(10);
})
});
describe("Substraction module",function(){
it("Should substract two numbers",function(){
expect(calculator.substract(5)).toEqual(-5);
})
})
describe("Multiplication module",function(){
it("Should multiply two numbers",function(){
calculator.currentValue = 5;
expect(calculator.multiply(5)).toEqual(25);
})
})
describe("Division module",function(){
it("Should divide two numbers",function(){
expect(calculator.divide(5)).toEqual(5);
})
})
})

Here is the corresponding code for calculator.js code

var calculator = {
currentValue : 0,
add: function(num){
return this.currentValue += num;
},
substract:function(num){
return this.currentValue -= num;
},
multiply:function(num){
return this.currentValue *= num;
},
divide:function(num){
return 25/num;
}
}

Hope this article was useful. For any queries write me at prabhu.anirudh@live.in.