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.