Getting Started with Jasmine BDD

‹prev | My Chain | next›

Despite Chrome woes, I now have a couple of fairly robust jasmine tests verifying my Backbone.js calendar application:

There are still several more areas of my application in need of verification, but tonight I would like to kick the tires on BDDing a new feature with Jasmine.

I think that I left development at the point at which I could open the edit dialog (although the dialog was not actually tied to updating models). So something like this ought to pass:

  it("binds click events on the appointment to an edit dialog", function() {
    $('.appointment', '#2011-09-15').click();
    expect($('#dialog')).toBeVisible();
  });

And, indeed, it does work. The spec passes, but the jQuery UI dialog remains open:

Ugh. I hate to reach under the covers, but I cannot leave that dialog open like that. So I manually close the dialog (if it is open) after each test:

  afterEach(function() {
    $('#dialog').dialog('close');
  });

Cool beans. Now for some new functionality. In the edit dialog, I want to be able to click the OK button, which should update the data store. Thanks to the wonders of Backbone, that, in turn, should change the event on the screen. I ought to be able to write the spec as:

  it("can edit appointments through an edit dialog", function() {
    $('.appointment', '#2011-09-15').click();
    $('.ok', '#dialog').click();

    server.respondWith('PUT', '/appointments/42', '{"title":"Changed!!!"}');
    server.respond();

    expect($('#2011-09-15')).toHaveText(/Changed/);
  });

The two server statements in there are sinon.js XHR stubs. What that represents is that I update the appointment in the backend, which replies with the updated appointment title. Backbone should then take that update and update the UI.

Of course none of that is actually hooked together yet, so my spec fails:

Yay! A failing spec. I know what to do with that. Except in Jasmine it seems...

I try setting a click handler on the OK button, but am unable to get it to fire via Jasmine spec:

    handleEdit: function(e) {
      console.log("editClick");
      e.stopPropagation();

      $('#dialog').dialog('open');
      $('.startDate', '#dialog').html(this.model.get("startDate"));
      $('.title', '#dialog').val(this.model.get("title"));
      $('.description', '#dialog').val(this.model.get("description"));

      $('.ok', '#dialog').click(function() {
        alert("here");
      });

      CurrentModel = this.model;
    },

Bah! Even falling back to alert() debugging, I am unable to get that click callback function to fire. I must have a stopPropagation() or unbind() somehere in my code. Trying to find this tonight is proving fruitless.

Ah well, I have myself a failing spec. I will pick back up here tomorrow night.


Day #132