CakePHP unit testing for your JavaScript

Posted in CakePHP on 06.10.2010.

In a modern world, on a modern website, more and more features are being "AJAXed". If only there is some way you could make some unit tests for your JavaScript/client-side code. Wait, there is!

Well that intro was cheesy. Here's some more.

Recently, while assisting on a somewhat large project at work, we had to cooperate with our newly-established test team. In order to make some things easier, for the first time in our company (AFAIK, sad but true), we managed to push some "real" unit tests into the project.

The part I'm assisting with is obviously web-related. It is a web interface (hear this!) which connects to a desktop interface, which in turn connects to the so-called "main application", which tells the interface what to do, which parts of the UI to show and which to hide. MVC, right?

Anyway, the web part is virtually all in HTML+JavaScript, with only a few PHP files to handle things like work around XSS restrictions etc. Obviously, we had to find a way to test this JavaScript code, as it turned out to be the "core" of our web interface.

I began my research about JavaScript unit testing, and found out two splendid things.

First, there are JS test frameworks, and jQuery project has one, called QUnit. Which is just awesome. And it seems like it's not even dependent on jQuery, which might be useful for those still resisting the progress (hint hint nudge nudge).

Second, there is even a way to get code coverage for JS. The path I chose was JSCoverage. My reasons are unclear even to me, but I assume all the other project were either to much of a hassle, or platform specific. I may be wrong though. JSCoverage does a good job, it's simple to use and doesn't get in my way. It also doesn't seem to be dead. What more could I wish?

In any case, I was so delighted to see these tests in action, I've decided to make a CakePHP plugin for JavaScript unit testing in my spare time. Although I'm not going to use it now, I most definitely will some time in the future.

Additionally, I'm hoping some of the bright geniuses out there will find a way to improve the plugin, or perhaps make it more simple to understand and use.

If you made this far, you're a persistent bastard. So I'll just reward you with a link to the plugin itself and a screenshot of the interface. It's not fancy, but it's not george bush either (sorry, no caps for him).

Fork it, share it, patch it, comment it. I'd like some feedback on this ladies and germs.

Oh and, here's the screenshot as well.

The source includes a "nice" readme which should be enough to get you started, but if you have any questions or ideas, feel free to contact me, either on GitHub or by sending me spam to <neutrinocms[ZEMONKEY]>. But do read how to ask a question like a pro before you spam me or I'll kick your posterior.

Happy baking!

Article comments — View · Add

No comments!