Approval testing with Jasmine

jasmine-approve.js an implementation of in browser Approvaltests for JavaScript

I have been writing quite a lot of javascript lately it started of as a hobby thing where i wanted to learn the language while doing something useful. My project TFS Kanban Buddy is growing and from being just crude hacks the need for serious testing grew. I was familiar with Llewellyn Falco’s Approval testing from before and in my mind it is a perfect fit for JavaScript where turning whole data structures into text is built into the language itself. There was however no implementation of approval testing for javascript that worked in the browser (only node) so i decided to build one myself. jasmine-approve.js

As of now this implementation is quite rough but it has served me well already so im sharing.

For you who don´t know what Approval testing is. Approval testing is a powerful way to cover functionality with unit tests. Instead of asserting on specific values you build up a text string containing the things you want to assert. The string is passed to a verify function and if the string is identical to the approved output the test will pass. If there is no approved output the test will fail and you will be asked if you want to approve the given output. If the output is not identical to the approved output the approved version and the new version is shown in a diff tool so that it is easy to see what the differences are. If the differences is to your liking you approve them and if not you go back and fix your code. This way you can cover a lot of code with very few tests and still have the ability to easily get the granularity on where the test fails.

a normal jasmine test look like this

in this case it is not so bad as the json structure is quite small but with a longer json string this gets old very quick. especially when the output from the failing test looks like this but 10 times longer.

Expected { id: 100, name: ‘testObject’, href: ‘http://url.com/test.txt' } to be { id: 101, name: ‘testObject’, href: ‘http://url.com/test.txt' }.

Written in jasmine-approve.js the same test looks like this

and the failure looks like this

to me this makes a lot more se sense even with a small data structure to compare. Directly below the output you have the option to approve the received output so no need to copy paste json into the source code.

So how does this work?

The source can be found at Github

I have wrapped the jasmine it function and approveIt takes a description and a function with one argument through which the approvals object is passed in. The approvals object contains the done parameter from jasmine and the approved output so the test can be asynchronous. The done() call will be made directly after the assertion in approvals.verify(“output”)

To serve the approved outputs to jasmine you need to serve your project with a local web server. I use http-server for this and start it from the project root.

Approved versions is saved to a subfolder of the folder containing SpecRunner.html called approvals/ with a name description_of_test.approved.txt . At this time this is done with normal download so you have to save it to the right folder and make sure that the browser has not added a number to the filename.

I hope you find this useful if you want to help out making this implementation better it is appreciated.