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:  

I’m a big fan of automated testing. In fact, on the rare occasions that I don’t write tests, I find that I can’t shake the thought that something has been missed.

As with all aspects of my coding efforts, I am constantly looking for ways to improve the process, make tests more readable, and reduce room for error. With these goals in mind, I’d like to introduce ExpectThat.

What is ExpectThat?

ExpectThat is an expressive, self-documenting, assertion library for CoffeeScript, that seeks to improve testing efforts with your favorite testing framework. It does this by providing a syntax similar to FsUnit (a library for F#) that makes assertions more readable and then automatically translates that readable code into descriptive test output. This ensures that your test names always stay in sync with your tests and allows your code to speak for itself. ExpectThat currently supports Pavlov, QUnit, and Jasmine. Overtime, support for additional testing frameworks will be added.

Let’s See it in Action

The following example shows how to write tests with ExpectThat for Pavlov in CoffeeScript:

pavlov.specify "Example Specifications", ->
    foo = "bar"
    describe "When testing 'should equal'", ->
        expectThat -> foo.should equal "bar"
    describe "When testing 'shouldnt equal'", ->
        expectThat -> foo.shouldnt equal "baz"
    describe "When testing for 'true'", ->
        expectThat -> (foo is "bar").should be true
        expectThat -> (foo is "baz").shouldnt be true
    describe "When testing for 'false'", ->
        expectThat -> (foo is "baz").should be false
        expectThat -> (foo is "bar").shouldnt be false
    describe "When testing 'greater than'", ->
        expectThat -> (9.1).should be greaterThan 9
        expectThat -> (9.1).shouldnt be greaterThan 10
        expectThat -> 10.shouldnt be greaterThan 10

Here’s a screenshot of the result:

Other Testing Frameworks

As I mentioned, ExpectThat currently supports QUnit and Jasmine in addition to Pavlov. The following are examples for each of these.

QUnit:

module "Example QUnit Specifications"

foo = "bar"

module "When testing should equal"

expectThat -> foo.should equal "bar"

module "When testing shouldnt equal"

expectThat -> foo.shouldnt equal "baz"

module "When testing for true"

expectThat -> (foo is "bar").should be true
expectThat -> (foo is "baz").shouldnt be true

module "When testing for false"

expectThat -> (foo is "baz").should be false
expectThat -> (foo is "bar").shouldnt be false

Jasmine:

describe "Example Jasmine Specifications", ->
    foo = "bar"
    describe "When testing should equal", ->
        expectThat -> foo.should equal "bar"
    describe "When testing shouldnt equal", ->
        expectThat -> foo.shouldnt equal "baz"
    describe "When testing for throw", ->
        expectThat -> (-> throw "test exception").should throwException
        expectThat -> (-> throw "test exception").should throwException "test exception"
    describe "When testing for less than", ->
        expectThat -> 10.should be lessThan 11
        expectThat -> (10.1).shouldnt be lessThan 10

Getting Started with ExpectThat

There are a couple of ways to get started with ExpectThat. First, head over to the ExpectThat GitHub site and browse through the documentation. You can then clone the repo and grab any of the examples from the example folder. If you are writing an ASP.NET app in Visual Studio, another option is to install one of the available NuGet packages.

Available Assertions

ExpectThat currently provides the following assertions:

- equal
- stictlyEqual
- false
- true
- greaterThan
- greaterThanOrEqual
- lessThan
- lessThanOrEqual
- throwException
- ‘to’ and ‘be’ can be used in most cases to make tests more readable.

In addition to the out-of-the-box assertions, ExpectThat allows for the creation of custom assertions. Examples of this for each of the supported testing frameworks are available in the example folder on GitHub.

ExpectThat in JavaScript

While the syntax of ExpectThat works best with CoffeeScript, you can certainly use it in JavaScript as well. Simply add in the missing braces, parens, semi-colons, function keywords, etc. The following provides a simple example for Pavlov:

pavlov.specify("expectThat Specifications", function() {
    describe("When testing should equal", function() {
        var foo = "bar";
        expectThat(function() {
            foo.should(equal("bar"));
        });
        expectThat(function() {
            (foo + "test").should(equal("bartest"));
        });
    });
});

Getting Involved

There are a lot of things left to do for ExpectThat and I’d love to hear your thoughts on direction, enhancements, etc. as well as have any help that anyone would like to offer. If you want to get involved, fork me on GitHub.

Tagged with:  

I’ve talked about testing CoffeeScript with Pavlov in a previous post. Today, I’m going to talk about a couple of ways to quickly get started with Pavlov–a BDD API that sits on top of QUnit–in an ASP.NET web app.

In the past, whenever I wanted to start creating Pavlov specs, I would go out to the Pavlov GitHub site, grab the appropriate files, and add them to my web app. While this process isn’t all that time consuming, there is now a better way. Now I can simply install the Pavlov NuGet package using the NuGet Visual Studio Extension. This package adds a folder named Specs under the Scripts folder that includes a barebones html file and pavlov.js.

An example of what the file structure looks like after this package is installed is shown below:

 

If I prefer to have a simple example to start with, I can alternatively install the Pavlov.Sample package. This adds the same files as the Pavlov package, but also includes an example.specs.js file with the code from the example on the Pavlov GitHub site.

Lastly, I’ve been writing a fair amount of CoffeeScript lately, so I may prefer to have the sample specs written in CoffeeScript. All that is needed for this is to make sure that Mindscape Web WorkBench Visual Studio Extension is installed (this is a onetime install) and then install the Pavlov.Coffee NuGet package. The files are then added to the project including a example.specs.coffee file that looks like this:

pavlov.specify "Pavlov Example", ->
  describe "A feature that is being described", ->
    foo = undefined
    before ->
      foo = "bar"
    after ->
      foo = "baz"
    it "can be specified like so", ->
      assert(foo).equals('bar')
Tagged with: