How do I integrate a browser-based JavaScript unit testing framework into my workflow?

Question

I'm wondering how I seamlessly include a JavaScript unit testing framework into my workflow.

The context is, we have an existing data processing algorithm + webapp to display it, with no automated testing or continuous integration.

We use Eclipse as our IDE.

For the webapp JavaScript modification, it would be nice to add some unit tests, and qUnit looks straightforward, plenty of community support etc.

Here's how I'm currently thinking the workflow would go:

• Branch the JavaScript code, check it out, modify it. Refactor it to make it more testable if needed.
• Write qUnit unit tests in accordance to the above tutorial.
• Start Tomcat in eclipse, run the qUnit test page.
• Open the browser, check that all the tests have passed.
• Commit the code back to the branch.
• Merge the branch back into to trunk.
• At this point there might have been a merge conflict, and so unit tests would need to be run again for the trunk to check that they're still working.

The issue here, it still seems a little cumbersome to be running the unit tests, several clicks involved to run and check the results.

Now with the merge back to trunk issue, clearly a continuous integration solution like Jenkins would be good here, but given that that's out of the question for now, let's just focus on how we can make it easy to run the tests as a developer.

Do you think I'm missing something here, or is what I'm proposing reasonable sensible?

Answer 1

Ideally, the workflow should be fully automated end-to-end

Use a tool like Karma. Run them minimally in PhantomJS to catch the logic errors, and ideally with every supported browser. Integrate it directly in your build. All you should need to test your app should be something like

mvn verify

(in this case if you use maven. If you use say Ant, it should be integrated in your Ant build, if you use Grunt... you get the point).

Nothing more (and I mean it). If running the test is even slightly an hassle, you will stop running them, which is bad. If you need to click, you can't run them with your CI server, which is bad. If its not part of your build, you can forget running them, which is bad.

I highly recommend that you have a IDE agnostic build system. If not, it's time you check that out, before anything else. Then integrate the testing in your build. Failing test should fail the build in an automatic matter, without any intervention. In a perfect world, it should be impossible to forget to run the test.

So in conclusion : check karma and phantomjs. This is what will help you the most. But I insist on going the extra mile : add a complete build script that check the validity of the code in one single command. And while we're at it, do you validate your javascript with a tools like JSHint? If not, check that out too (and put it in your build :) ). It can catch many mistakes.

Answer 2

There are various ways that this can be integrated better into your workflow.

I have used qunit for various projects that I have worked on and find it to be a very capable javascript testing framework. However integrating it into the workflow was a little trickier. I'm using Visual Studio and there's a plugin which does quite a lot of the integration work for me, but I've also experimented with various different ways of running qunit unit tests.

First thing I found useful was the ability to run the javascript unit tests from a HTML page. This allowed me to quickly work out which tests succeed and which tests fail. The qunit website gives details of how to run the unit tests in a HTML page. This would at least stop the need for running tomcat and would save a couple of clicks.

The next thing that's possible is to use phantomjs and some scripting to be able to run the tests from the command line. This means that you can run all the tests quickly (both before and after the merge). Here's something that might be useful. Although it refers to ant, everything before that point is useful information about getting the tests running through phantomjs (phantomjs is cross platform so this should work pretty with any OS you're using).

Finally it might be worth checking out some of the QUnit plugins here: http://qunitjs.com/plugins/. Looks like they have plugins to run your qunit tests via phantomjs (I've not used it so I can't vouch for how useful it actually is), and a plugin to format the output (again I've not used it so I can't really tell you how good the result is).