Question

我尝试使用jasmine测试骨干视图的正确模板分配。

这是我的测试：

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);

});

}

view.template变量在render函数中填充：

  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 @

变量IndexViewTemplate包含原始模板代码，其逻辑内容如＆lt;％if（...）％＆gt;包括在内。

当我运行该代码时，我得到一个异常，即这两个元素不相等，因为在this.view.template中，逻辑部分被...渲染了......;）：

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 --> '.

测试作业的最佳方法是什么？

最好的问候，hijolan

Answer 1

渲染模板的方式有点不恰当。通常，不需要像在@template属性中那样保留“呈现”模板字符串：

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

我个人会将未呈现的模板分配给@template构造函数中的initialize属性，假设模板在视图实例的生命周期内没有更改：< / p>

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

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

之后，您的测试expect(this.view.template).toEqual(IndexViewTemplate)会测试您希望测试的内容 - 是否已分配了正确的模板。

顺便说一下。我真的不明白这行代码的作用：

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

如何使用Jasmine忽略包含逻辑部分来测试Backbone视图？

1 个答案: