Using Karma in Webstorm

Introduction

Karma (Testacular) is a powerful tool test runner and very easy to use, even more straightforward if we use Webstorm as IDE, the current article will explain how to use and configure Karma and improve your workflow.

The first we need is a Karma project, this article is not intended to how set up a Karma project and previously I created one, you just need to clone the next Git repository and navigate to the example1.

Add the folder into your current or new Webstorm project.

Create a Karma configuration

Open the “Run/Debug Configuration” and create a a Karma custom configuration, just click in the “add” symbol and you will see the next:

karma conf

 

The node interpreter should be there by default. In the Karma node package should be in the node_modules folder, search it and set the path in this input field.

The karma configuration file, maybe the most importan file which define where are your sources, test sources and in which browser environments you will run your tests.

As I defined in the config file, we will run our test in 2 browsers and 1 headless browser.

Running Test

running

WebStorm has a pretty karma console ready to use, the image of above show you how it will look the test console after execute your test the first time. For each environment will have a section with all results, if one of the test fails for example in Firefox 28, the green circle will be orange with the ‘fail’ as status only for this environment.

Now click in the Karma server tab and you will look:

terminal_server_karma

The karma server is triggered once you execute your test and it will running there until you stop manually, there are a interesting option, is the Toggle auto-test, if you enable this option all test will be triggered if you change something in your test, not even is necessary save it.

enviroments

Once you starts your test Karma will open the required environments (browsers) and will keep a connection between the karma server and each browser while it’s running the test cases.

config_karma

If you have noticed before we’ve enabled “coverage” as reporter, WebStorm has 3 options to execute your test, “run”, “debug” and “coverage”, click in the coverage button and WebStorm automatically will add coverage stats for each source in your files navigation panel.

coverage

The integration with Karma and WebStorm is awesome, maybe the best is the debugging part. You can put breakpoints directly in WebStorm and run your test as “debug” and the experience is very similar to what we have using Google Chrome Dev Tools.