TechHui

Hawaiʻi's Technology and New Media Community

Javascript Testing with Mocha and Chai

It has been more than 6 months since I launched RedeemHi5.com, which I wrote about in one of my first blog posts. The launch hasn't been perfect; the most major issue is that the connection to the database gets lost and it doesn't reconnect, thus leaving people with a loading screen. The first thing to do, of course, is to fix it. In addition, though, I wanted to add tests to document these issues and maintain some peace of mind as I refactor and add new features.

The Node.js community still feels a little like the wild west at times. It took a while for NPM to emerge as the main package manager over others like Kiwi. There are still a few test frameworks to choose from, including QUnit (created by the jQuery team) and Jasmine (created by Pivotal Labs). I chose to use Mocha, a framework created by TJ Holowaychuk, who has authored a ton of Node.js packages including ExpressJade, and Stylus. Since RedeemHi5 already uses Express and Jade, using Mocha seems almost natural. Since BDD is all the rage, I added the Chai assertion library as well. I was initially going to stick to the TJ Holowaychuk love train and use shouldjs, but it doesn't seem to work as well in the browser. Plus, adding Chai to Mocha and Coffeescript makes my tech stack sound like a Starbucks.

With just Mocha, I could test the server, but it would probably take a lot more effort than I'd like, especially because of Node's Asynchronous I/O. That's where SuperTest comes in (yet another TJ Holowaychuk/Visionmedia module). SuperTest provides an abstraction on HTTP requests and supports any test framework. Each Mocha specification I make is passed a function called "done". When a request is made, the framework will wait until the "done" function is called.

Mocha also allows me the ability to create tests on the client side. To set this up, I created a new /tests URL in Express. This route is only created when NODE_ENV environment variable is unset or set to "development". In the Jade view file, I include a few dependencies (jQuery, underscore, and backbone) before including mocha.js and chai.js. Both of these files are tucked away in the top level of their respective packages in node_modules, so I also had to configure Express to link to those folders when in development. One gotcha is that you'll have to call "mocha.setup" and initialize Chai before including your tests. Otherwise, you're likely to find errors like "cannot call x of undefined" when your tests are imported. After that, to run the tests, call mocha.run. The image on the left is the result of running the client-side tests.

I've been away from it for a few months, but I'm continuing to update RedeemHi5. With these tests in place, I'm looking to implement at least one more feature for 1.0. After that, I have a few other things I might want to implement. It might also be time to move on to another project. If you have any ideas or feature requests, do let me know in the comments or my Twitter account (@keokilee).

Views: 1666

Tags: javascript, testing

Comment

You need to be a member of TechHui to add comments!

Join TechHui

Comment by George Lee on April 10, 2013 at 3:57pm

Thanks Mike! I also am pursuing higher Javascript proficiency. Before, my Javascript was basically "wrap everything in document.ready" and call it a day. It created this huge mental block because not only is all that code enclosed and inaccessible, but they also handled events or used AJAX. I'm still working on it. The SearchView is tricky because I want to test the function callbacks for HTML5 geolocation and make sure the code handles errors correctly. Seems like I'll probably have to mock or stub the navigator object to get that to be tested.

Comment by Mike King on April 10, 2013 at 3:31pm

Nice post! In my current pursuit of increased javascript proficiency, testing seems to be a really great way to think about edge-cases and to solidify my code. I could definitely use some pointers from you on writing tests.

I recently stumbled upon Mocha.js as well, while looking at the Javascript Skill Assessment test by Rebecca Murphey. It's an interesting approach; testing a potential JS applicants skill using tests :P

Sponsors

web design, web development, localization

© 2014   Created by Daniel Leuck.

Badges  |  Report an Issue  |  Terms of Service