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>
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.
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>
<!-- 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.
No comments:
Post a Comment