Jasmine Headless Webkit backbone and Handlebars

Question

I am using the sht_rails gem to render handlebars templates in my Rails 3.2/Backbone App.

I'm hoping to use this .handlebars template in both the backbone and rails portion of the app, but so far I just have it working in the backbone.

I'm using it like so:

class MyApp.views.MyView extends MyApp.views.BaseView

  template: SHT['templates/feed_item']

  render: ->
    data = {}
    @$el.html @template(data)
    @

This works great in app, no problems at all, my handlebars template is looking sweet.

However, this is no good for my js testing (I'm using Jasmine with jasmine-headless-webkit)

This is what happens:

$ jasmine-headless-webkit
ReferenceError: Can't find variable: SHT

This makes total sense, as it seems that the sht_rails gem registers the SHT variable, however, it doesn't seem to do this in when I test.

Is there a good way to register the SHT variable when running jhw? or jasmine by itself? I don't even need the template to render for my test, just knowing that the template is called would be enough for me. But for now, all my jasmine tests are broken until I figure out how to register this SHT.

Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 10:25

We faced the same problem when using jade templates in our Rails 3.2/Backbone/Marionette app via the tilt-jade gem (hence the JST variable in the code samples below). Our solution was to create a template abstraction and then use Jasmine spies to fake a response during spec execution. This approach also allows us to test template usage, construction, etc.

Spies In General

In case you're unfamiliar with Jasmine spies:

Jasmine integrates 'spies' that permit many spying, mocking, and faking behaviors. A 'spy' replaces the function it is spying on.

Abstraction

Create the abstraction:

YourApp.tpl = function(key, data) {
  var path = "templates";
  path += key.charAt(0) === "/" ? key : "/" + key;

  var templateFn = JST[path];
  if(!templateFn) {
    throw new Error('Template "' + path + '" not found');
  }
  if(typeof templateFn !== "function") {
    throw new Error('Template "' + path + '" was a ' + typeof(templateFn) + '. Type "function" expected');
  }
  return templateFn(data);
};

and the requisite monkeypatch:

// MONKEYPATCH - Overriding Renderer to use YourApp template function
Marionette.Renderer = {
  render: function(template, model){
    return YourApp.tpl(template, model);
  }
};

Template Abstraction Spy (spec_helper.js)

Now we can spy as follows:

spyOn(YourApp, 'tpl').andCallFake(function(key, data) {
  return function() {
    return key;
  };
});

Bonus

Since we are spying on the YourApp.tpl function, we can also test against it:

expect(YourApp.tpl).toHaveBeenCalledWith("your_template", { model: model, property: value });

Addendum

If you don't already know about the jasmine-headless-webkit --runner-out flag and are debugging your Jasmine specs in the wilderness, check out this post to see how to generate a runner output report with a full backtrace for any failures.