Question

我正在尝试用茉莉花来测试我的骨干视图。我使用下划线库为骨干视图生成模板。

出于测试目的，我使用茉莉茉莉的jquery

由于视图嵌入了ruby，我无法在茉莉花测试中加载灯具。这是我的代码

骨干视图

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

Jasmine测试 - 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（）;

在此测试通过expect时加载灯具（$（“＃album”））。toExist（）;

我的问题是如何加载具有嵌入式ruby视图的灯具？我能够成功测试模型和集合，但我无法测试视图。

Answer 1

这一行：

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包含在页面中。

使用jasmine测试骨干视图

1 个答案: