How I Test Backbone.Marionette with Jasmine

With the proliferation of client side apps and frameworks, testing strategies for writing client side code has become a major necessity. However, unlike most of the ruby community, effort in this department had been lacking…

Working on apps with zero client side tests, creates a series of unnecessary hurdles. It limits the developers ability to perfect the code, transfer knowledge to other developers, even pinpoint needed improvements.

Over the last few years though, I’ve developed a few techniques to counteract this lack of testing; by creating custom unit tests for Backbone.Marionette applications.

Notes on Backbone.Marionette testing:

  • Coffeescript will be utilized for the backbone code and tests.
  • Tests will be written using the Jasmine testing library
  • Backend for this app is a simple rails app
  • Jasminerice gem will compile coffeescript jasmine tests to javascript for browser.

    The Application:

    Alright, so you’ve got your requirements to build a very exciting to-do list application:

  • Ability to add new to-do items
  • Ability to mark to-do items as done
  • Ability to delete to-do items
  • For the sake of brevity, I will assume you have the basic setup and boot strap of a backbone application and are ready to render the view to your root route /.

    To quickly illustrate this, see index.html.erb file below. Notice it bootstraps my Todo items from the server into the ToDoApp backbone application.

    Also, below is the main file for my ToDoApp backbone application:

    As you can see, I am simply bootstrapping Todo objects from the server and rendering a TodosCollectionView into the #todos div.

    Test-Driving Functionality:

    Now to test drive our TodoCollectionView

    Starting with the tests, the functionality of this view enables you to create a new Todo item as well as render it. Thus, we can write tests assuming there will be some sort of text field and add button to create the item.

    Here’s a test file below:

    When we run these tests (on the command line, for ease of copy + paste) we get:

    We got one hundred perecent failure because we haven’t created our TodoCollectionView yet. Let’s do that:

    Quick note: The backbone model and collection (Todo and TodosCollection) were pre-made. Thus, since there is no functionality outside of backbone, and therefore no tests, I’ll illustrate here…

    Now re-run the tests.

    At this stage, while all failed, we are getting better errors. Let’s try giving it a template to render (JST was utilized for template):

    and the template file:

    As you can see, I skipped ahead and put in the text field, add button, and container for the Todo items. Now, let’s rerun the tests.

    Nice! Looks like a couple of our tests passed this time; namely the tests about rendering the view with a collection. However, our add button clicking tests still failed.

    One at a time, let’s make them pass. First priority, making sure clicking the add button adds a model to the collection:

    Re-run the tests.

    Cool, only one failure left, and it looks like simply clearing the input field, after creation of a new Todo item, should do the trick. Here’s the code for that:

    Re-run our tests.

    Hoorah, all green!

    Alright, only one more housekeeping task. If you were following along, you may have noticed the application doesn’t work as expected in browser view. This is because we have not declared what the ItemView for this collection is supposed to be…

    Let’s write a test that drives this functionality out:

    Re-run the tests that fail.

    Next, lets make sure we set the ItemView property of our collection view (as well as the itemViewContainer property for good measure):

    Re-run our tests.

    Oh no! We get the same failure, what happened? Well, we never made our TodoView view. Let’s do that now (see below):



    Cool, now let’s re-run our tests.

    Ta-da! 100% success! We now have a small backbone app, fully tested and fully functioning, that allows you to create and list todo items.

    Want to learn more about client-side testing? Let us know! We’d love to hear from you.