1

我尝试用茉莉花测试对主干视图的正确模板分配。

这是我的测试：

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

});

}

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

  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 包含原始模板代码，其中包含 <% if (...) %> 之类的逻辑内容。

当我运行该代码时，我得到一个异常，这两个元素不相等，因为在 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

4

1 回答 1

1

渲染模板的方式有点不习惯。通常不需要保留“渲染的”模板字符串，就像您在@template此处的属性中所做的那样：

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

我个人会将未渲染的模板分配给构造函数中的@template属性initialize，假设模板在视图实例的生命周期内不会更改：

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, {}
于 2013-01-06T15:30:00.660 回答