Your quick guide to better JavaScript testing

Testing JavaScript code without tools is a slog, but choosing the right tools is complicated -- unless you use this handy tutorial to get you started

Page 2 of 2

You say you want to test a Samsung TV browser? As long as a device has a browser and access over the network, local or otherwise, you can connect manually and run the tests there, too. Just navigate to the host computer's IP address at the specified port and it will do the rest, including rerunning your tests automatically.

After you've chosen your browsers, tell Karma where to find your files. If order is important, you can list the files one by one -- although I don't recommend setting up a project in such a manner. Instead, use a tool like RequireJS to manage dependencies for you. That way, all you'll need to include is something like src/**/*.js and test/**/*Spec.js and you're set. Add files and remove files at your leisure and never touch the configuration file. If you need a smaller hammer than **/*.js, Karma understands JavaScript regular expressions, so dust them off and get going.

For basic projects, that's about it! Tell Karma to watch your file system changes for local development, run karma start, and begin writing tests.

More tools for the job

I have a handful of configuration tweaks I use when testing backbone applications (particularly regarding templates), as well as extra plug-ins and tools you might find helpful. You'll find them all in the full walkthrough, but I'll outline a few here.

I use Jasmine as my test framework. The BDD style reads nicely to me and helps keep track of tests from a higher level. Jasmine is DOM-free, so if you need to test anything with HTML, you will likely want to use jasmine-jquery. It extends Jasmine to include a wide variety of DOM-specific assertions and adds support for loading HTML and JSON fixtures.

Speaking of assertions, if you're writing code for Node.js or only targeting modern browsers, take a serious look at should.js. It's an assertion library that plays nicely with Jasmine and reads clearly. The only problem is that it uses ECMAScript accessor properties (getters and setters), which certain browsers -- particularly IE8 and earlier -- don't support.

While Jasmine provides many testing stalwarts, like mocks and spies, it only recently started supporting the ability to fake XHR requests. The new support has some maturing to do, so I'll stick with my former ally, sinon.js, to stand in for the server. Sinon.js doubles a lot of Jasmine's functionality, but has had the desired ability to fake a server for some time now. It's also easy to set up and use.

All of the testing I do is to ensure my code is covered. I use the Karma plug-in for the istanbul code coverage tool. Built on the shoulders of esprima and escodegen, istanbul works well with Karma. By itself, it outputs reports in HTML and LCOV, but the Karma plug-in adds support for text output and Cobertura XML, so Jenkins can understand it. Yes, Karma has plug-ins for continuous integration tools, too.

Your quick guide to better JavaScript testing

Together, these tools have saved me tons of time and headache. If you're interested in unit-testing your JavaScript or upgrading your current testing workflow, spend a day or two playing around with them to see if they're right for you, too. If you run into any problems or have any other questions or suggestions, feel free to comment here or reach out via Twitter (@freethejazz).

This article, "Your quick guide to better JavaScript testing," was originally published at Keep up on the latest news in application development and read more of Andrew Oliver's Strategic Developer blog at For the latest business technology news, follow on Twitter.

| 1 2 Page 2
From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies