Question

I try to test the correct template assignment to a backbone view with jasmine.

This is my test:

describe("Backbone views", function() {

// Runs before every View spec
beforeEach(function() {

    // Instantiates a new View instance
    this.view = new Index();

});
it("should contain the appropriate template", function() {

    expect(this.view.template).toEqual(IndexViewTemplate);

});

}

The view.template variable is filled in the render function:

  initialize: () ->
    super()

    @render()

  # Renders the view's template to the UI
  render: () ->

      # Setting the view's template property using the Underscore template method
    @template = _.template template, 
      {}

      # Dynamically updates the UI with the view's template
    @$el.html @template

      # Maintains chainability
    return @

The variable IndexViewTemplate contains the raw template code with logic things like <% if (…) %> included.

When I run that code I get an exception that these two elements are not equal, because in this.view.template the logic parts are … rendered away… ;):

should contain the appropriate template

Expected 

'<!-- HTML Template --> <div class="page"> <header class="navbar navbar-inner navbar-fixed-top"> <div class="nav pull-left"> <a href="#" class="btn" type="submit">Back</a> </div> <div> <a class="brand">Backbone-Require-Boilerplate (BRB)</a > </div> <div class="nav pull-right"> <a href="#next" class="btn" type="submit">Next</a> </div> </header> <!-- /header --> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="content"> </div> </div> </div> </div> <footer class="footer navbar navbar-fixed-bottom"> <div class="navbar-inner"> <p>Written by <a href="https://github.com/hijolan" target="_blank">Constantin Lebrecht</a></p> </div> </footer><!-- /footer --> </div> <!-- /page --> ' 

to equal 

'<!-- HTML Template --> <div class="page"> <header class="navbar navbar-inner navbar-fixed-top"> <div class="nav pull-left"> <% if (titleBar.backButton.title.length > 0) {%> <a href="<%= titleBar.backButton.href %>" class="btn" type="submit"><%= titleBar.backButton.title %></a> <% } %> </div> <div> <a class="brand"><%= titleBar.title %></a > </div> <div class="nav pull-right"> <% if (titleBar.actionButton.title.length > 0) {%> <a href="<%= titleBar.actionButton.href %>" class="btn" type="submit"><%= titleBar.actionButton.title %></a> <% } %> </div> </header> <!-- /header --> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="content"> <%= content.text %> </div> </div> </div> </div> <footer class="footer navbar navbar-fixed-bottom"> <div class="navbar-inner"> <p>Written by <a href="https://github.com/hijolan" target="_blank">Constantin Lebrecht</a></p> </div> </footer><!-- /footer --> </div> <!-- /page --> '.

What is the best aproach to test the assignment?

Best regards, hijolan

Answer 1

The way you render your template is a bit non-idiomatic. Typically there is no need to hold on to the “rendered” template string, as you do in the @template property here:

@template = _.template template, 
  viewConfig
@$el.html @template

I personally would assign the unrendered template to the @template property in the initialize constructor, assuming the template doesn’t change during the lifetime of the view instance:

initialize: () ->
  super()
  @template = template 
  @render()

# Renders the view's template to the UI
render: () ->
  viewConfig = _.merge {}, @config.template, {}
  @$el.html _.template(@template, viewConfig) 
  return @

After that your test expect(this.view.template).toEqual(IndexViewTemplate) tests what you want it to test – that the correct template has been assigned.

Btw. I don’t really understand what this line of code does:

viewConfig = _.merge {}, @config.template, {}