测试骨干茉莉意见 [英] Testing backbone views with jasmine

问题描述

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

I am trying to test my backbone views with jasmine. I use underscore library to generate templates for the backbone views.

为了测试我使用
茉莉
茉莉的jQuery

For testing purposes I use jasmine jasmine-jquery

我不能因为观点已经内嵌红宝石加载装置中的茉莉测试。这里是我的code

I am unable to load the fixtures in the jasmine tests as the views have embeded ruby. Here is my code

骨干视图

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

此视图使用下面的模板

相册样板album_template.html.erb

Album template 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

Jasmine test - 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

This spec loads the following fixture - 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(this.view.template).toBeDefined();

该装置加载，因为这测试通过预期（$（＃张专辑））toExist（）;

The fixtures is loading as this test passes expect($("#albums")).toExist();

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

My question is how can I load fixtures that have views with embedded ruby? I was able to successfully test the models and collections but I am having trouble testing the views.

推荐答案

这行：

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

在 AlbumView 会当该脚本文件加载到页面中被执行。由于直到规范开始执行，夹具不会被添加到网页的专辑模板 script标签还没有被添加到DOM呢。

in your AlbumView is going to be executed when that script file is loaded into the page. Since the fixture doesn't get added to the page until the spec starts to execute, the album-template script tag hasn't been added to the DOM yet.

如果你改写了你的模板属性是返回调用 _的结果的方法。模板则看都不看的脚本标记，直到你真正想调用的模板。这可能看起来像：

If you rewrote your template attribute to be a method that returned the result of calling _.template then it wouldn't look for the script tag until you actually tried to invoke the template. This could look something like:

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

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

Granted, this is kinda gross. The other option would be to set up the underscore template as an asset served by the asset pipeline and have jasmine-gem include it into the page before you load your views.

这篇关于测试骨干茉莉意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！