Configure Webstorm for Karma

Create folder structure:

test

test/lib

test/spec

Download Jasmine (v1.3.1)

Copy jasmine-1.3.1 into test/lib.

You now have test/lib/jasmine-1.3.1 with these files in there:

jasmine.css, jasmine.js, jasmine-html.js & MIT.LICENSE

Install Karma

npm install -g karma

cd test/  

To create the config file for karma run:

karma init

Follow instructions on-screen and you will end up with karma.conf.js file in test/.

Open up WebStorm

To configure karma so it runs in the background, detecting files changes follow these instructions

Click Edit Configurations... dropdown (center toolbar) Add new Node.js config with these values:

Name:

Karma Server

Path to Node (to get this value go to cmd line and type which node):

C:\Program Files\nodejs\node.exe

Working Directory (root of test):

C:\Users\garrard.kitchen.MARVIN\Documents\My Web Sites\altitude-player\test

Path to Node App JS File (to get this value go to cmd line and type in 'which karma' then replace /karma with node_modules\karma\bin\karma):

C:\Users\garrard.kitchen.MARVIN\AppData\Roaming\npm\node_modules\karma\bin\karma

Application Parameters:

start karma.config.js

To configure karma to run as a one off follow these instructions:

Click Edit Configurations... dropdown (center toolbar) Add new Node.js config with these values:

Name:

Karma Run

Path to Node (to get this value go to cmd line and type which node):

C:\Program Files\nodejs\node.exe

Working Directory (root of test):

C:\Users\garrard.kitchen.MARVIN\Documents\My Web Sites\altitude-player\test

Path to Node App JS File (to get this value go to cmd line and type in 'which karma' then replace /karma with node_modules\karma\bin\karma):

C:\Users\garrard.kitchen.MARVIN\AppData\Roaming\npm\node_modules\karma\bin\karma

Application Parameters:

run karma.config.js

Our first test

Let's now create our first test. I use coffeescript for testing. I use coffeescript as it reads better than JavaScript

Create a coffeescript file e.g. playerSpec.coffee

WebStorm will prompt you with a request to add a file watcher. Their coffeescript file watcher doesn't work so use this configuration (navigate to settings > File Watchers and edit the CoffeeScript file watcher:

Program (to get this value go to cmd line and type which coffee then add '.cmd'):

C:\Users\garrard.kitchen.MARVIN\AppData\Roaming\npm\coffee.cmd

Arguments (I put quotes around the $FileDir$ and $FileName$ as it will fail if your path has spaces):

--output "$FileDir$" --map --compile  "$FileName$"

Working directory:

$FileDir$

Output paths (I put quotes around this as it will fail if your path has spaces):

"$FileDir$\$FileNameWithoutExtension$.js"

Now enter a simple test:

describe "A suite", ->
   it "contains spec with an expectation", ->
      expect(true).toBe(true)

Select the Karma Run config from dropdown and press the run icon. You'll see output similar to this:

"C:\Program Files\nodejs\node.exe" C:\Users\garrard.kitchen.MARVIN\AppData\Roaming\npm\node_modules\karma\bin\karma run karma.conf.js
[2013-08-19 09:14:37.372] [DEBUG] config - Loading config C:\Users\garrard.kitchen.MARVIN\Documents\My Web Sites\altitude-player\test\karma.conf.js
Chrome 28.0.1500 (Windows 7): Executed 1 of 1
e 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (3.602 secs / 0.269 secs)

Process finished with exit code 0

We can see from this output it confirms our test works