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:

describe "When testing for the weekend", ->
    weekend   = <[ sat sun ]>

    isWeekend = (dayOfWeek) ->
        | dayOfWeek in weekend => true
        | otherwise => false

    expectThat -> ('sun' |> isWeekend).should equal true

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.

The pattern matching syntax gives you a concise way of defining a basic switch statement in JavaScript. The pipe-forward operator allows you to compose things together. In the example above, the string ‘sun’ (which also could have been written in LiveScript as \sun) is being passed into the isWeekend function. This becomes even more powerful when the value to be passed into the next function is coming from another function, as shown in this example:

describe "When testing for the weekend", ->
    weekend   = <[ sat sun ]>

    isWeekend = (dayOfWeek) ->
        | dayOfWeek in weekend => true
        | otherwise => false

    getDayOfWeek = -> 'sun'

    expectThat -> (getDayOfWeek() |> isWeekend).should equal true

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/.

Tagged with:  

A few posts ago, I showed how to use ExpectThat with Mocha and Node.js. Today, I’ll show a simple example of using ExpectThat with Zombie.js–a full-stack testing framework.

Zombie.js

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.

The Example

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.

Tagged with:  

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"

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"

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 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.).

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

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.

Tagged with: