CoffeeScript, Jasmine tests with Cassette and Mindscape Web Workbench Visual Studio Extension

Wow that’s one hell of a title, I couldn’t make it any shorter, but that’s everything we’re dealing with in this post.

Some Background

We’ve got an ASP.NET MVC 4 web application and we’re using Cassette to bundle and minify the JavaScript and CSS files, the reason is that the new Beta 2 MVC 4 bundlers didn’t work right away, and we already had Cassette all configured.

Cassette further solidified its place as a tool of choice for us when it introduced Jasmine bundling. We can just point a Cassette bundler at a location in the project that contains the spec files (jasmine tests) and be done, not have to worry about wiring up any spec helper files with paths, etc. The current version (1.2.0) which is great, but does not handle CoffeeScript compilation in an efficient way, yet…

Only have to remember to do the standard approach of using

/// <reference path="your-js-file.js"> 

Wanting to use CoffeeScript

Now we’re also jumping on the CoffeeScript bandwagon *because it’s just JavaScript*(^TM), and we want our code to be neat, elegant and tested, and CoffeeScript looks like it will help out. The last thing that was holding me back on going all in on CoffeeScript was getting it smoothly into the Visual Studio or our build process (if also necessary).

Turns out that is very easy if you just use Web Workbench from Mindscape. It’s a free extension for Visual Studio. Go here for their getting started guide.

How we’re using Web Workbench

Our primary desire is just to have the CoffeeScript compiled for use without fuss. Including speed. So Web Workbench helps in this department, also the creation of the .js files nested under the CoffeeScript files. We are just writing our client side code in CoffeeScript and want the process as simple as possible.

The highlighting will be helpful if still in Visual Studio, and will be helpful to us when it’s working in the Visual Studio 11. We’re spending a reasonable amount of time in VS11 already.

As I mentioned earlier Cassette takes care of “packaging up” all our JavaScript files already, so to combine our newly automatically compiled CoffeeScript logic it was as simple as setting up a Cassette bundle pointing to the location of the Jasmine spec files.

Download the Web Workbench here.

The Cassette side of the story
The most basic configuration to get the Jasmine tests bundling and set up to run with the least effort is to just tell Cassette where they are wit this line:

   bundles.Add("JavaScript/Specs");

That snippet lives inside the CassetteConfiguration.cs file installed by its NuGet package.

public class CassetteConfiguration : ICassetteConfiguration
{
   public void Configure(BundleCollection bundles, CassetteSettings settings)
   {
      //all the other cassette configuration code
   }
   bundles.Add("JavaScript/Specs");
}

Putting it all together

So here’s what the CoffeeScript code looks like inside Visual Studio (v11).

The actual function we’ll be testing:

The test:

Here’s how Web Workbench presents the CoffeeScript files with their compiled JS:

The test runner, and the url path, this is what Cassette helps make simple:

Summary

That’s it. So we’ve written some logic in CoffeeScript, and then unit test it with a Jasmine spec also written in CoffeeScript, Web Workbench handles the compilation as we type, and Cassette puts it all together to display and run in the browser via the bundle url.

If you want to see the Jasmine side of things in action (the repository doesn’t have the CoffeeScript changes finalised yet), check out the sample code up on this GitHub project.