I’ve been playing with LiveScript a bit lately and have really been enjoying it! If you haven’t heard of LiveScript, it’s a “…fork of Coco, which is in turn derived from CoffeeScript…” (LiveScript Overview Page). It provides more features than Coco and CoffeeScript including several that assist in writing code in a more functional style.
Here’s a quick example of a test written in LiveScript for Mocha and ExpectThat:
This shows off a couple of the features that help you write in a functional style with LiveScript. The first is the use of pattern matching within the isWeekend function. The second is the use of the pipe-forward operator when calling the isWeekend function.
F# has these same concepts and many more, which makes LiveScript + F# a compelling combination!
There are a number of additional LiveScript features that assist in using a functional style. For more examples of LiveScript with Mocha and ExpectThat visit https://github.com/dmohl/expectThat/tree/master/example/mocha-LiveScript. To learn more about LiveScript, see a number of examples, and/or get setup for use, visit the LiveScript site at http://gkz.github.com/LiveScript/.
Zombie.js is a fast, headless testing framework that provides various functionality to write tests that hit your full technology stack. While I generally prefer to write more fine-grained, isolated tests, it’s important to also have a few smoke tests and/or integration tests to verify end-to-end functionality. Zombie makes these kinds of tests easy, while allowing me to still use ExpectThat and Mocha.
Here’s a simple example that populates two input elements and then verifies that the values of those input fields contain the expected text.
You can find the full example here.
After a few commands such as ” coffee –output lib/ specs/ ” and ” mocha ‘lib/example.spec.js’ –reporter spec “, you should see an output that looks something like this:
To learn more about ExpectThat, visit https://github.com/dmohl/expectThat.
The jQuery plugin
The code that follows is a re-write (in CoffeeScript) of the simple jQuery plugin that Josh provided in his post.
This jQuery plugin provides a basic watermark type of feature for an input box.
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.
Apples to apples
Here’s a quick before and after comparison (with both examples in CoffeeScript):
describe "when calling placeholder plugin", -> it "should show placeholder value", -> expect(input.val()).toEqual("foo")
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 tests 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/” Note: though it doesn’t look like it, there are 2 dashes before compile and output.).
3. Run the tests with a command such as “mocha ‘lib/runspecs.js’ –reporter spec” (note: though it doesn’t look like it, there are 2 dashes before reporter.) 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.