Using Mocha

Teaspoon makes it pretty easy to use Mocha for your tests, and includes some nice support libraries that you might find handy.

To get setup for Mocha just configure your suites to use Mocha instead of Jasmine. Here's an example of changing the default suite to use Mocha.

spec/teaspoon_env.rb

Teaspoon.configure do |config|
  config.suite do |suite|
    suite.use_framework :mocha
    suite.javascripts += ["support/expect", "support/sinon"]
  end
end

You'll notice that we also included expect.js and sinon.js in our base -- these are useful libraries that we like, but you're free to use others like should.js. You should technically require support libraries from within your spec helper -- which is advised, but to simplify this article we did it in one step.

If you're into Chai, we include it as a support library as well. And you should check out the konacha-chai-matchers project -- there's some good stuff in there and you can easily utilize the features there within Teaspoon.

Example Spec

//= require jquery
describe("My great feature", function() {

  it("will change the world", function() {
    expect(true).to.be(true);
    expect(jQuery).to.not.be(undefined);
  });

});

Example Fixture Usage

fixture.preload("fixture.html", "fixture.json"); // make the actual requests for the files

describe("Using fixtures", function() {
  fixture.set("<h2>Another Title</h2>"); // create some markup manually (will be in a beforeEach)

  beforeEach(function() {
    this.fixtures = fixture.load("fixture.html", "fixture.json", true); // append these fixtures which were already cached
  });

  it("loads fixtures", function() {
    expect(document.getElementById("fixture_view").tagName).to.be("DIV");
    expect(this.fixtures[0]).to.be(fixture.el); // the element is available as a return value and through fixture.el
    expect(this.fixtures[1]).to.eql(fixture.json[0]); // the json for json fixtures is returned, and available in fixture.json
  });
});

Setting Mocha's interface

To set a Mocha interface other than the default bdd, call window.env.ui in your spec_helper file. Example:

// spec/javascripts/spec_helper.js
window.env.ui('tdd')