用茉莉花測試骨幹視圖

我想用茉莉花測試我的骨幹視圖。我使用下劃線庫爲骨幹視圖生成模板。用茉莉花測試骨幹視圖

出於測試目的，我使用茉莉花茉莉的jQuery

我不能因爲觀點已經內嵌紅寶石加載燈具在茉莉測試。這裏是我的代碼

骨幹視圖

AlbumView = Backbone.View.extend({ 
    template: _.template($('#album-template').html()), 
    render: function() { 
     $('#albums').append(this.template(this.model.attributes)); 
    } 
});

該視圖使用下面的模板

相冊樣板album_template.html.erb

<script type="text/html" id="album-template"> 
    <a href="<%%= url %>" class="album <%%= is_owner %>"> 
     <%% if (viewable) { %> 
      <span class="album-cover"> 
       <span class="photo" style="background-image:url('<%%= small_thumbnail_url %>'); width: 160px; height: 160px;"> 
        <span class="glossy-overlay"></span> 
       </span> 
      </span> 
      <%% } %> 
      <h3><%%= name %></h3> 
      <p> 
       <%%= number_of_photos %> 
      </p> 
    </a> 
</script>

骨幹模型

var Album = Backbone.Model.extend({ 
    initialize: function() { 
     this.view = new AlbumView({model: this}); 
    }, 
    render: function() { 
     this.view.render(); 
    } 
});

茉莉花測試 - album_spec.js

describe('Album view', function(){ 

    beforeEach(function() { 

     var album = new Album({ 
      "name": "Photo Stream", 
      "url": "/albums/1", 
      "id": "2", 
      "number_of_photos": "172 Photos", 
      "small_thumbnail_url": "/assets/sections/albums/covers/auto.png", 
      "viewable": true, 
      "is_owner": "owner" 
     }); 

     loadFixtures('albums_fixture.html'); 

     this.view = new AlbumView(); 
     this.view.model = album; 
     // loadFixtures('albums_fixture.html'); 

    }); 

    describe("Rendering", function() { 

     it ("produces the correct HTML", function() { 

      this.view.render(); 

      expect($("#albums")).toExist(); 
      expect(this.view.template).toBeDefined(); 

     }); 

    }); 

});

該規範加載以下夾具 - album_fixture.html

<div id="albums"> </div> 

<script type="text/html" id="album-template"> 
    <a href="<%%= url %>" class="album <%%= is_owner %>"> 
     <%% if (viewable) { %> 
      <span class="album-cover"> 
       <span class="photo" style="background-image:url('<%%= small_thumbnail_url %>'); width: 160px; height: 160px;"> 
        <span class="glossy-overlay"></span> 
       </span> 
      </span> 
      <%% } %> 
      <h3><%%= name %></h3> 
      <p> 
       <%%= number_of_photos %> 
      </p> 
    </a> 
</script>

這個測試失敗在

預期（this.view.template）.toBeDefined （）;

夾具正在加載，因爲此測試通過期望（$（「＃albums」））.toExist（）;

我的問題是我如何加載與嵌入式紅寶石意見的燈具？我能夠成功地測試模型和集合，但是我在測試視圖時遇到了問題。

來源

2012-10-04 vishal

這條線：

template: _.template($('#album-template').html())

在AlbumView將要被執行時該腳本文件加載到頁面中。由於在規範開始執行之前，燈具不會被添加到頁面中，所以album-template腳本標記尚未添加到DOM中。

如果您將template屬性重寫爲返回調用_.template的結果的方法，那麼在您實際嘗試調用該模板之前，它不會查找腳本標記。這可能看起來像這樣：

AlbumView = Backbone.View.extend({ 
    template: function() { 
     return _.template($('#album-template').html()); 
    }, 
    render: function() { 
     $('#albums').append(this.template()(this.model.attributes)); 
    } 
});

當然，這有點兒毛病。另一種選擇是將下劃線模板設置爲資產管道提供的資產，並在加載視圖之前將jasmine-gem包含在頁面中。

來源

2014-01-25 22:25:16 Gregg

用茉莉花測試骨幹視圖

回答

相關問題