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

Question

我尝试使用茉莉花测试正确的模板分配到骨干视图。

这是我的测试：

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变量填充在渲染功能：

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包含逻辑事情的原始模板代码一样<％，如果（...）％>包括在内。

当我运行代码，我得到一个例外，这两个元素是不相等的，因为在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构造，假设模板视图实例的生命周期内不会改变：

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)考验你也想考什么 - 正确的模板已被分配。

Btw。我不太明白这行代码的作用：

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