1

バックボーン ビューをジャスミンでテストしようとしています。アンダースコア ライブラリを使用して、バックボーン ビューのテンプレートを生成します。

テスト目的で、jasmine 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();
    }
});

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

このテストがパスすると、フィクスチャがロードされます。

私の質問は、ルビが埋め込まれたビューを持つフィクスチャをどのようにロードできますか? モデルとコレクションのテストは成功しましたが、ビューのテストに問題があります。

4

1 に答える 1

0

この行：

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

AlbumViewそのスクリプトファイルがページに読み込まれると、あなたのスクリプトが実行されます。spec の実行が開始されるまでフィクスチャはページに追加されないため、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));
    }
});

確かに、これはちょっとひどいです。もう 1 つのオプションは、アセット パイプラインによって提供されるアセットとしてアンダースコア テンプレートを設定し、ビューをロードする前に jasmine-gem にそれをページに含めることです。

于 2014-01-25T22:25:16.607 に答える