4

要素がクリックされたときに関数が呼び出されることをテストしようとしています。簡単そうに見えますが、この単純な例を機能させることができないように見えるので、私は愚かな何かを見逃しているに違いありません。

これが私の見解です

(function($) {
    window.LaserMonitor = {
        Views: {}
    };

    window.LaserMonitor.Views.WorkstationSummary = Backbone.View.extend({
        tagName: 'li',
        className: 'StationItem',

        initialize: function() {
            _.bindAll(this, 'showDetails');
            this.template = _.template($("#WorkstationSummary").html());
        },

        events: {
            'click h3' : 'showDetails'
        },

        showDetails: function() {
        },

        render: function() {
            var renderedTmpl = this.template(this.model.toJSON());

            $(this.el).append(renderedTmpl);

            return this;
        }
    });
})(jQuery);

これが私のジャスミンテストです：

describe('WorkstationSummary Item', function() {
    beforeEach(function() {
        _.templateSettings = {
          interpolate: /\{\{(.+?)\}\}/g,
          evaluate: /\{\{(.+?)\}\}/g
        };      

        loadFixtures('LaserMonitorFixture.html');

        this.model = new Backbone.Model({
            id: 1,
            name: 'D8',
            assigned: 1900,
            inProgress: 4,
            completed: 5
        });

        this.view = new window.LaserMonitor.Views.WorkstationSummary({model: this.model});
    });

    describe('Events', function() {
        beforeEach(function() {
            this.view.render();
        });

        it('should trigger click event', function() {
            this.header = this.view.$('h3');

            spyOn(this.view, 'showDetails');

            this.header.click();

            expect(this.view.showDetails).toHaveBeenCalled();
        });
    });
});

この実行の結果は次のとおりです。

エラー：showDetailsのスパイが呼び出されたと予想されます。at new（http：// localhost：57708 / JobMgr2 / test-js / lib / jasmine-1.0.2 / jasmine.js：102：32）at [object Object] .toHaveBeenCalled（http：// localhost：57708 / JobMgr2 /test-js/lib/jasmine-1.0.2/jasmine.js:1171:29）[オブジェクトオブジェクト]。（http：// localhost：57708 / JobMgr2 / test-js / spec / LaserMonitorSpec.js：33：34）at [object Object] .execute（http：// localhost：57708 / JobMgr2 / test-js / lib / jasmine -1.0.2 / jasmine.js：1001：15）at [object Object] .next_（http：// localhost：57708 / JobMgr2 / test-js / lib / jasmine-1.0.2 / jasmine.js：1790：31 ）http：// localhost：57708 / JobMgr2 / test-js / lib / jasmine-1.0.2 / jasmine.js：1780：18

編集：完全性のためのフィクスチャテンプレートの追加：

<script type="text/template" id="WorkstationSummary">
    <h3>{{ name }} ({{ assigned }}/{{ inProgress }}/{{ completed }})</h3>
    <ul>
    </ul>
</script>
4

2 に答える 2

5

テストの実行中にメソッドのスパイを作成すると、実際のメソッドを呼び出す代わりに、スパイが呼び出されます。スパイはメソッドのラッパーです。ただし、ここで問題となるのは、スパイを作成する前にビューを作成したことです。したがって、実際のメソッドはスパイの代わりに呼び出されます。あなたがしなければならないことは、ビューオブジェクトを作成する前にスパイを作成することです。私はsinon.jsを使用してメソッドをスパイしました。そして、ビューのプロトタイプを使用して、そのビューのメソッドをスパイする必要があります。

var workStationSpy = sinon.spy(window.LaserMonitor.Views.WorkstationSummary.prototype, "showDetails");
this.view = new window.LaserMonitor.Views.WorkstationSummary({model: this.model});
this.view.render();
expect(workStationSpy).toHaveBeenCalled();
workStationSpy.restore();
于 2012-04-29T07:39:26.977 に答える
0

次のように変更して試してみます。

it('should trigger click event', function() {
    var viewToTest = this.view;
    this.header = viewToTest.$('h3');
    spyOn(viewToTest, 'showDetails');
    this.header.click();
    expect(viewToTest.showDetails).toHaveBeenCalled(); 
});

「this.view」を呼び出すことについての私の心配は、スコーピングの問題につながる可能性があります。私がテストしていないというのは大げさな推測ですが、試してみる価値はあると思います。幸運を！

于 2011-11-30T07:56:50.007 に答える