PU$]-[KAR's

… Every drop has ability to survive .


Leave a comment

Jasmine unit test for ‘controllers’

Welcome back guys,

As we have seen integration of ‘Jasmine’ and ‘karma’ with webstorm.Today, we will continue with the writing a JS unit test for a controller using ‘Jasmine’ & ‘karma’.
We will have an example of a simple. This controller is just a responsible for addition of the two numbers.
app.controller('addCtrl', function($scope, $location) {
console.log('add operation');
$scope.add=function(num1,num2)
{
$scope.result=parseInt(num1)+parseInt(num2);}});

In short controller ‘addCtrl’ contains a function ‘add’ which is returning a result of addition on two numbers: num1 & num2.Now we are going to write a JS test for the function.
Before begin with this first we need to add those dependent files in ‘karam.conf.js’ file under the ‘files’ section. Remember we have configured this file while initiating karma with few wizard steps. For reference click here. So as you can see below I have added few files along with ‘addCtrlSpec.js’. This file is going to contain tests for this controller.
files: [
'app/lib/angular.js',
'app/lib/angular-mocks.js',
'app/Controllers/additionController.js',
'TestFiles/addCtrlSpec.js',
],

Now following code snippet shows the actual code fore writing a spec.
describe('Test Addition', function ()
{ beforeEach(module('myApp'));
describe('myAppAddCtrlTest', function ()
{ it('Check Addtion test', inject(function ($controller)
{ var scope = {},
ctrl = $controller('addCtrl', {$scope: scope});
scope.add(4,5);
expect(scope.result).toBe(9); })); });

Explanation:

In this spec ‘describe’ is representing a test suit which can have multiple tests inside it. Whereas ‘beforeEach’ is the block which gets executed before ‘inner describe’. We can have ‘beforeEach’ even inside ‘inner describe’ or even inside ‘it’ as well but scope of that will be limited to that particular section only. Basically ‘beforeEach’ is used for injecting few modules or dependencies, mocking the data,carrying out specific action or initiating few variables etc. ‘it’ represents actual test. ‘it’ may contains more than one ‘expect’ statements. These expect statements are to check the result like checking the values of variable or method has been called or not. There are lots of options are available for these ‘expect’ statements.
So while looking at the code you can sense that,

  1. ‘Test Addition’ is my main test suit.
  2. Inside ‘beforeEach’ I have injected ‘myApp’ which is my main module of my application which contains all the controllers of my application. This ‘beforeEach’ will get executed every ‘inner descibe’ say ‘myAppAddCtrlTest’.
  3. it: ‘check addition test’ is the actual test. You can see that inside this ‘it’ I have injected a controller ‘addCtrl’ (along with the scope) which needs to be tested. And finally I called ‘add’ method using ‘scope’ and passed 4 & 5 as a dummy data to check weather this method is returning correct value or not.

Now this test is ready to run. In ‘karma’ we can’t run the individual test so to run the tests we need to start ‘karma’ first & then need to run tests. So to run that we can go to file ‘karma.conf.js’ file in project structure and write click in that and say run and will see the ‘karma’ has been stared in default browser and test is running green.

So in further posts we will discuss with directives and services too.

Till then bye!!!

Advertisements


2 Comments

Integration of ‘Jasmine’ with ‘Webstorm’

Hey guys,

It’s time to have some hands-on with unit testing !!!

Unit testing is one of the key features while developing any application weather it would be a server side code or client side and ‘Jasmine’ is one of the leading framework to test an angularJS application.So today we will walk through integrating ‘Jasmine’ with ‘WebStorm’.Of course, we should have ‘node.js’ installed on our machine that’s the prerequisite thing for this as you know. So basically to run specs(i.e. jasmine tests) we are going to use ‘karma’ as ‘test runner’ & ‘jasmine’ as test framework.

So majorly this integration will fall in two steps:

  1. Initialization of ‘karma’.
  2. Adding ‘jasmine’ intellisense.

Initializing ‘karma ’ with ‘jasmine’ framework.

  • Install ‘karma’ inside webstorm project with command on terminal ‘npm install –g karma’ which installs the ‘karma’ for our application even we might go for installing karma globally using command prompt.
  • To initialize ‘karma’ enter command ‘karma init’ on terminal. This command will initialize the karma and will be followed with certain questions to configure ‘karma.conf.js’. basically this file will be set through the option which we are going to set while initializing ‘karma’.
  • So using this configuration option we can adopt different Test frameworks like ‘Jasmine’, ‘mocha’ etc. so we are going through ‘Jasmine’ configuration. As I said earlier ‘karma ’ is a test runner & ‘Jasmine’ is a test framework.
  • So to configure this we will chose ‘jasmine’ framework. Then ‘no’ to Rquire.js. Then chose the suitable browser say ‘firefox’ then As we want that ‘ webstorm’ has to look after change in any tests so select ‘no’ to the question ‘Do you want Karma to watch all the files and run the tests on change ?’

So this will set our basic configuration.

And now it’s time to add few things in favor of developer’s favor – Intellisense.

‘Jasmine’ framework intellisense:

As with default options ‘webstorm ’ is not going to provide any auto complete facility for jasmine so we do some settings to make it possible. For that we need to add java script library to have that through settings of webstorm and need to include in current project.

To that please follow following steps:

  • In WebStorm, open the Settings dialog (File > Settings).
  • Under language & settings, navigate to JavaScript > Libraries.
  • Click the Download button on the right side. This opens the Download Library dialog.
  • Select “TypeScript community stubs” from the combo box.
  • Find the library ‘jasmine’, select it and click Download and Install.
  • After installing it makes sure that check box should be selected.

And now we are ready to go on writing specs……..

In next post even I will be going to share one easy sample for creating specs.