BDDing New Backbone.js Views with Jasmine

‹prev | My Chain | next›

I believe that I have more or less finished exploring testing Backbone.js with jasmine. Ready to tackle something new, I think I will try adding a different view to my calendar application. And what better way to add a new feature that driving it with BDD?

And lo! I know just the tool to BDD that feature. Looks like I am not quite done with Jasmine after all…

For my month view, I have just been stubbing (with sinon.js) server lookups to return a single appointment. For the list view, I think I ought to start by returning three appointments:

  describe("list view", function() {
    var couch_doc1 = {
          "_id": "1",
          "_rev": "1-1111",
          "title": "Appt 001",
          "startDate": "2011-10-01"
          // ...
        }
      , couch_doc2 = { "_id": "2", /* ... */, "startDate": "2011-11-25" }
      , couch_doc3 = { "_id": "3", /* ... */, "startDate": "2011-12-31" }
      , doc_list = {
          "total_rows": 3,
          "rows": [
            {"value": couch_doc2},
            {"value": couch_doc1},
            {"value": couch_doc3} ]
        };

My backend is, of course, CouchDB—hence the structure of the document list that will be returned. I am intentionally mucking with the order of the documents because I am anticipating sorting them in the front-end.

With the appointment documents ready, I write my spec setup, which does the usual of creating a new instance of my Backbone Cal application. It also stubs out server calls to return the document list from the main describe("list view", ...) block:

  describe("list view", function() {
    var couch_doc1 = { "_id": "1", /* ... */, "startDate": "2011-10-01" }
      , couch_doc2 = { "_id": "2", /* ... */, "startDate": "2011-11-25" }
      , couch_doc3 = { "_id": "3", /* ... */, "startDate": "2011-12-31" }
      , doc_list = { /* rows: couch_doc2, couch_doc1, couch_doc3 */ }

    beforeEach(function() {
      window.calendar = new Cal($('#calendar'));
      Backbone.history.navigate('#list', true);

      // populate appointments for this month
      server.respondWith('GET', /\/appointments/,
        [200, { "Content-Type": "application/json" }, JSON.stringify(doc_list)]);
      server.respond();
    });
  });

The only real difference between this setup and the setup for my month view is that I am navigating to '#list' rather than '#month'.

On that list page, I expect to see 3 appointments. Or, in jasmine-ese:

  describe("list view", function() {
    var couch_doc1 = { "_id": "1", /* ... */, "startDate": "2011-10-01" }
      , couch_doc2 = { "_id": "2", /* ... */, "startDate": "2011-11-25" }
      , couch_doc3 = { "_id": "3", /* ... */, "startDate": "2011-12-31" }
      , doc_list = { /* rows: couch_doc2, couch_doc1, couch_doc3 */ }

    beforeEach(function() { /* ... */ });

    it("lists all appointments", function() {
      expect($("li", "#appointment-list").length).toEqual(3);
    });
  });

When I load the new "list view" specs in the browser, I get the expected failure:

So my next question is, what do I need to do to change the failure message or make it pass? Simply asking the question makes me realize I have gotten ahead of myself. To do any of this, I am going to need a "list view". I do not even have a route that responds to such a thing, let alone a view.

So, I take a step back and mark this test pending (for now) and write a more appropriate first step:

  describe("list view", function() {
    var /* couch_doc1, couch_doc2, couch_doc3, doc_list */
    beforeEach(function() { /* ... */ });

    it("routes to the list view", function() {
      expect($('h1')).toHaveText(/Appointment List/);
    });

    xit("lists all appointments", function() {
      expect($("li", "#appointment-list").length).toEqual(3);
    });
  });

With that, I have a smaller failure:

To be sure, I could make an even smaller first failure by testing the routing itself. I am jumping ahead of myself a little—hopefully I will not get burned. It turns out to require quite a few changes simply to get the new view to render. I have to add a new route, which calls a new method on my application view, which creates a new view type:

  var Application = Backbone.View.extend({
    // ...
    setListView: function() {
      this.view = 'list';
      return this.render();
    },
    render: function() {
      var view;

      if (this.view == 'list') {
        view = new CalendarList();
      }
      else {
        var date = this.collection.getDate();
        view = new CalendarMonth({date: date});
      }

      $(this.el).html(view.render().el);
    },
    // ...
  });

  var CalendarList = Backbone.View.extend({
    render: function() {
      $(this.el).html("<h2>Appointment List</h2>");
      return this;
    }
  });

After all of that, I have my first passing test:

That took a bit more effort than anticipated. I am pretty sure I have introduced a memory leak in there. I know that I am violating at least one Recipes with Backbone recipe ("Evented Routers"). But none of that matters: (1) get it done, (2) do it right, (3) optimize. I have reached #1 and that is good enough for now. I will worry about #2 and #3 another day if needed (and with the benefit of more tests).

For now, I would like to get my original test passing:

    it("lists all appointments", function() {
      expect($("li", "#appointment-list").length).toEqual(3);
    });

In the spirit of "get it done", I pull out an Underscore.js reduce():

    var CalendarList = Backbone.View.extend({
      initialize: function(options) {
        options.collection.bind('reset', this.render, this);
      },
      render: function() {
        $(this.el).html(
          '<h2>Appointment List</h2>' +
          '<ol id="appointment-list">' +
          this.collection.reduce(function(memo, appointment) {
            return memo + '<li>' + appointment.title + '</li>';
          }, "") +
          '<ol>'

        );
        return this;
      }
    });

To be sure, this is a very rudimentary listing of appointments. In the final version, I will certainly need to show more than a list of static titles. But it does enough to make my test pass:

Since it works, that will serve as a stopping point tonight.


Day #116