Sorry for not blogging for a while, have been busy with joining a new company. I wanted to finish up the blog post series with Running Grunt to test your JavaScript application.

In this post I will cover using Jasmine and Phantom.js. I have been a big fan of phantomjs a headless browser to test your web, its super fast and lightweight. In fact I did a local (Ottawa) JavaScript talk on it in 2012.

Jasmine

Jasmine is a BDD test framework for Javascript, we will be using to to test our app. Let’s get started and install jasmine to use in our express 4 application, again we will use npm or visual studio npm installer to install it.

npmjasmine

Jasmine npm install

Next we will write a simple JavaScript client code, let’s call it client.js script that we will perform the test on.

We will now add an spec file for it to test the JavaScript client.js file we just created.

The spec file is where we define our test, now that we have created the spec we can add our grunt task

We can now run our grunt task using Task Runner or by command line

The output would be something like

grunt jasmine output

grunt jasmine output

Now that we have Jasmine and grunt working, lets create a JQuery plugin so that we can test Jasmine with JQuery.
In order to do so we need to use bower. If you need a tutorial on bower you can look at my old post.
But first lets install bower using npm or by the npm tool in Visual Studio

Bower NPM Install

Bower NPM Install

Let’s now use bower to install jquery, jasmine-jquery plugin and we will save it to our dev environment.

I will reuse one of my plugin for jquery that I created that does locale sorting. The code base is small enough for us to test, since it sorts elements based on locale of the text. Lets place the file in our javascript folder so that Grunt can pick it up, lets call it localeSort.js

We also need to let our Gruntfile to know about our “vendor” jasmine and jquery plugin, in order to run the task.

We will also create a spec file and created a folder called fixtures and placed a html file sampleSort.html in there which contains a unordered list with fruit names, please look at jsfiddle for input

The result of our jasmine test would show.

Jamine Jquery Test

Jasmine Jquery Test

Summary

So this concludes our Grunt series, we have gone through the journey of using Grunt with Visual Studio, here were all the topics that were covered. Hope you enjoyed it.

  1. Using Grunt – The Javascript task runner
  2. Using Grunt – Visual Studio Grunt Launcher
  3. Using Grunt – Visual Studio 2013 Task Runner Explorer
  4. Using Grunt – Basic Tutorial
  5. Using Grunt – Copying Files
  6. Using Grunt – less and css minifcation
  7. Using Grunt – Javascript Uglify and Concat