1

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

出于测试目的，我使用 jasmine jasmine-jquery

由于视图已嵌入 ruby​​，因此我无法在 jasmine 测试中加载固定装置。这是我的代码

主干视图

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（）；

当此测试通过时，夹具正在加载 expect($("#albums")).toExist();

我的问题是如何加载具有嵌入式 ruby​​ 视图的固定装置？我能够成功测试模型和集合，但在测试视图时遇到了麻烦。

4

1 回答 1

0

这一行：

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

in yourAlbumView将在该脚本文件加载到页面中时执行。由于在规范开始执行之前，fixture 不会被添加到页面中，因此album-templatescript 标签还没有被添加到 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-25T22:25:16.607 回答