测试骨干茉莉意见(Testing backbone views with jasmine)

我想用茉莉花来测试我的骨干看法。我用下划线库生成骨干的意见模板。

出于测试目的，我使用茉莉茉莉花的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（）;

该灯具被加载，因为这测试通过预期（$（“＃张专辑”））toExist（）。

我的问题是我怎么能加载有嵌入的Ruby意见灯具？我是能够成功地测试模型和收藏，但我无法测试的意见。

这条线：

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

当然，这是有点恶心。另一种选择是设置了下划线模板由资产管线送达的资产，并有茉莉宝石包含到页面加载你的意见了。