如何用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, {}