Unit testing your Browserify code (Part 2)

Browserify Unit Testing

Time for the second part of the small unit testing guide that started with this post. In the first part, we’ve introduced a very basic function that calculated the age of a person based on a parameter that represented the year of birth. Before making the calculation, the parameter was checked to make sure it’s a number and if it wasn’t the function threw an error. Both use cases are small and perfect to have some test written for them so let’s begin.

Karma introduction

No matter what library you’ll use to write your test, you’ll need a tool to start running them with a specific configuration that fits your needs. This tool in our case is Karma. It’s build by the Angular.js team and it integrates easily with Jasmine (more about that in a while). We’ll use Karma to set our basic configuration, for example where our tests and code are located, but we’re not going to install it directly since we want to integrate it with Grunt. To start working with it let’s install the Grunt plugin through npm just like the rest of the dependencies we use.

After that, we’ll also install three more dependencies which we’ll need in the next steps.

 

The Karma plugin to launch our tests in PhantomJS instead of the browser.

 

The Karma plugin to have it working with browserify code.

 

The Karma plugin to run Jasmine tests.

The Grunt plugin for Karma enables you to configure the test options inside your Gruntfile if you want but the cleaner you Gruntfile is, the easier it is for you to understand what’s happening in a big project. Therefore we’ll add the configuration in a separate file (located in the project’s root directory) and set this as the configuration file. We’ll call the new file karma.conf.js and make it look like this :

Most of the options set above are not something special if you’ve worked with Karma before. What makes it run with browserified code is the inclusion of the frameworkspreprocessors, browserify and plugins options.

  • The frameworks option tells Karma that it should look for these two specific plugins (Jasmine and Browserify) when it runs the tests.
  • The preprocessors  option defines what will happen to the files of this specific path before the actual tests run.
  • The browserify option simply configures how the code should be bundled.
  • And finally the plugins option tells karma which plugins it should load using the names of the npm packages.

A key thing to notice here is the addition of PhantomJS as the browser. This will enable Karma to run the tests inside your console without opening a browser and running them there. Considering that unit tests are commonly executed in continuous integration servers automatically, this is crucial to automate the process.

 

Back to Grunt

Now that Karma is configured, all we have to do is define a Grunt task and tell it to look for the karma.config.js. So the Gruntfile will look like this :

 

Jasmine and browserify magic

After all of this configuration it’s time to write some tests (finally!). Based on our configuration, Karma expects to find some Jasmine tests inside a directory called tests located in the src directory. If you’re not familiar with how a Jasmine test looks like, the developers have some awesome documentation waiting for you.

Did you read it? Cool. Let’s continue.

We’ll create a new file called methods-test.js inside our tests directory and add the following test cases to demonstrate how Jasmine will work.

Although you can add a lot more test cases in there to make sure that the method does what you want, these two test its basic functionality. The actual file is required at the top of the file, to make it available for all the tests, and browserify will find the requirement and bundle it before the test runs.

The first test is straight forward since it just calls the method and evaluates the result it returns. When it comes to errors, Jasmine provides the toThrow helper method. You can set what error you expect to be thrown and then you need to modify your method call a little bit to make sure that Jasmine does not evaluate what the method returns but evaluates what’s happening when you call it. Passing “Mumbo-Jumbo” as the parameter should make our method throw the error.

 How to run it

To run the tests through Grunt you simply call grunt from your console and provide it with the task you want to run (just like the way you browserify your code), in our case Karma.

 

Let’s wrap it up

If you have ever worked with Grunt, Jasmine and Karma, the only new concept introduced here is Browserify. If this is the first time you try to unit test Javascript code it may be an overdose of information but when you get how it works you will have an automated way of testing your code.

The setup is only happening once and then you create your Jasmine tests, you require your actual code in the test and the rest should happen without any input from you as long as your code is separated in modules that can be parsed by Browserify.

The project is up on Github. Go check it out and use it however you want.