Testing a jQuery Plugin with ExpectThat and Mocha

A couple of weeks ago, I announced a CoffeeScript/JavaScript assertion library called ExpectThat. In this post, I'll provide a more real-world example of how ExpectThat can be used. For this example, I'll be using the jQuery plugin and tests from one of Josh Bush's posts entitled "Testing jQuery Plugins with Node.js and Jasmine".

The jQuery plugin

The code that follows is a re-write (in CoffeeScript) of the simple jQuery plugin that Josh provided in his post.

	# Ported from Josh Bush's example at http://digitalbush.com/2011/03/29/testing-jquery-plugins-with-node-js-and-jasmine/
	$ = jQuery
	$.fn.placeholder = (description) ->
	@.each ->
	input = $(@)
	# Note: We should use "on" instead of "bind" with the latest version of jQuery, but
	# we'll leave this just like the original for now.
	input.bind("blur.placeholder", -> input.val(input.val() or description))
	.bind("focus.placeholder", -> if input.val() is description then input.val(''))
	.trigger "blur.placeholder"

view raw placeholder.coffee hosted with ❤ by GitHub

This jQuery plugin provides a basic watermark type of feature for an input box.

The specs

Since Josh has already done the work of writing the specs for this jQuery plugin, all that I need to do is port this to CoffeeScript and add in ExpectThat. To mix things up a bit, I've chosen to use Mocha instead of Jasmine (though ExpectThat works just as well for Jasmine). For simplicity, I've combined the spec files from Josh's post.

	# Ported from Josh Bush's example at http://digitalbush.com/2011/03/29/testing-jquery-plugins-with-node-js-and-jasmine/
	describe "Given a jquery.placeholder with", ->
	input = undefined
	describe "no value", ->
	before -> input = $("<input />").appendTo("body").placeholder "foo"
	describe "when calling placeholder plugin", ->
	expectThat -> input.val().should equal "foo"
	describe "when focusing input without user value", ->
	before -> input.focus()
	expectThat -> input.val().should equal ""
	describe "when leaving input without user value", ->
	before -> input.focus().blur()
	expectThat -> input.val().should equal "foo"
	describe "a user supplied value", ->
	before -> input = $("<input />").appendTo("body").val("bacon").placeholder "foo"
	describe "when calling placeholder plugin", ->
	expectThat -> input.val().should equal "bacon"
	describe "when focusing input with user value", ->
	before -> input.focus()
	expectThat -> input.val().should equal "bacon"
	describe "when leaving input without user value", ->
	before -> input.focus().blur()
	expectThat -> input.val().should equal "bacon"

view raw placeholder.spec.coffee hosted with ❤ by GitHub

Apples to apples 

Here's a quick before and after comparison (with both examples in CoffeeScript):

Before ExpectThat:

    describe "when calling placeholder plugin", ->
      it "should show placeholder value", ->
        expect(input.val()).toEqual("foo")

After ExpectThat:

    describe "when calling placeholder plugin", ->
      expectThat -> input.val().should equal "foo"

Josh's tests are already very readable, but by adding ExpectThat, I'm able to eliminate 1 line from every test and allow each to be self-documenting.

An example of the result of running the specs in the browser is shown below:

Wait, what about Node?

"So", you say, "this is great, but Josh's post was all about using the same code and specs from the browser in Node.js". Ah, yes, thanks for reminding me. It's pretty simple to run these same specs in Node.

Here are the steps:

1. Use NPM to install mocha at a global level (i.e. npm install mocha -g) then install jsdom, jquery, and expectThat.mocha at the local level (i.e. npm install <package name>).

2. Create a file called runspecs.coffee with the code shown below and compile it however you choose (i.e. "coffee --compile --output lib/ specs/").

	window = require("jsdom").jsdom().createWindow()
	jQuery = require("jquery")
	require("expectThat.mocha")
	require("./jquery.placeholder.js")
	require("./jquery.placeholder.spec.js")

view raw runspecs.coffee hosted with ❤ by GitHub

3. Run the tests with a command such as "mocha 'lib/runspecs.js' --reporter spec" and you should see something like the following:

In future posts, I'll show how to do similar testing with other tools such as Jasmine-Node and Zombie.js. To learn more about ExpectThat, get involved, and/or keep an eye on its progress, go to https://github.com/dmohl/expectThat.