Tag Archives: jasmine

Testing AngularJS apps in IntelliJ IDEA with jsTestDriver

Now that’s a messy title… Let’s take a look what are we going to weld together:

  • AngularJS 1.1.1
  • Jasmine 1.3.1
  • IntelliJ IDEA 12.0.3 + jsTestDriver plugin 132.2

This tutorial is based on a pet project: Minesweeper Kata game. Sources are available on Github, following article concerns state from commit 0bd5e5fbbb. All instructions are given assuming your project has some Jasmine tests for AngularJS controllers running smoothly, just not from the IDE.

IntelliJ Plugin

First of all, install the jsTestDriver plugin for IDEA. Next, download Jasmine Adapter. It’s a single file called jasmineAdapter.js, available here. Now put the adapter code in your project structure where you keep jasmine.js.

Configuration

Create a configuration file called jsTestDriver.conf. I guess the name is not very important but that’s the convention. You can keep this file with your code in repository and put it in root unit testing directory. In my case it was src/test/unit, whereas src/test/unit/specs contains all the necessary test code. Here’s a screenshot of actual structure:

 config-location

Don’t worry about the test.dependencies.js file. It’s required for separate execution in SBT. Here’s an example of our configuration file content:

server: http://localhost:9876

load:
– ../lib/jasmine-1.3.1/*.js
– ../../main/webapp/assets/js/angular-1.1.1.js
– ../../main/webapp/assets/js/angular-resource-1.1.1.js
– ../lib/angular/angular-mocks-1.1.1.js
– ../../main/webapp/js/*.js

test:
– specs/*.js

Make sure that the “load” section contains references to jasmine, angular and your application code. The “test” section should list all your unit test files within this configuration context. Be careful and keep correct order according to the dependencies.  Most of my time wasted with cryptic errors was caused by this kind of mistake (loading angular-resource before angular).

Executing tests

Your .js file with unit tests should be now decorated with special icon, as you can see above next to gameController-spec.js. Select it and press Ctrl+Shift+F10 or select “Run ….” from context menu. You should see a configuration window similar to this one:

config-execution

Select your jsTestDriver.conf file and fire the test. An error message should appear saying, that no test execution server is running. Click on ‘start a local server’ link in the message popup. In the “jsTestDriver Server” view select desired browser(s) on which your test should be executed:

server-conf

Well, that’s it. Go ahead and run your tests. Experiment a little with passing, failing and debugging with breakpoints. I had some crazy issues with Chrome (Linux Mint Debian 201204; Chrome 23), fortunately it’s all fine on Firefox.

Now the only thing to wish for is having a tool like Mighty Moose to keep the wheel turning continuously. Enjoy insanely productive coding 🙂

Advertisements