createSpy未在Backbone Jasmine测试中覆盖

wwodge7n  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(122)

我正在测试Jasmine编辑视图。我需要完成的一个测试是测试submit按钮事件是否正确连接。我只需要设置呈现的内容,然后提交表单,测试保存方法是否按预期被调用。
下面是测试代码...

define(['spec-helper', 'views/about/v-edit-version-info-entry', 'models/m-version-info'],
function (Helper, View, VersionInfo) {
    describe("Version Info Editor View", function () {

        var objUt;

        beforeEach(function() {
            objUt = new View();
            $('body').append('<div id="jasmineSpecTestArea"></div>');
        });

        afterEach(function() {
            $('#jasmineSpecTestArea').remove();
        });

        it("is appropriately named", function() {
            expect(objUt.name).toEqual('Edit Version Info');
        });

        it("is wrapped in the appropriate container", function() {
            expect(objUt.el.outerHTML.toLowerCase()).toContain('<div class="edit-version-info-panel">');
        });

        it("triggers save when the form is submitted", function () {
            objUt.collection = new VersionInfo.Collection();

            spyOnEvent($('.edit-version-info-form'), 'submit');
            objUt.saveEntry = jasmine.createSpy('saveEntry() spy');

            objUt.render();
            $('#jasmineSpecTestArea').append(objUt.el);
            $('.edit-version-info-form').submit();

            expect('submit').toHaveBeenTriggeredOn($('.edit-version-info-form'));
            expect(objUt.saveEntry).toHaveBeenCalled();
        });

最后一个测试是有问题的。似乎jasmine.createSpy调用没有替换saveEntry方法,然后该方法被对象中的底层事件调用。下面是我尝试测试的类...

define(['ministry', 'models/m-version-info', 'text!templates/version-info/edit-version-info-entry.html', 'jquery.custom'],
function (Ministry, VersionInfo, TemplateSource) {

    var editVersionInfoView = Ministry.View.extend({

        name: 'Edit Version Info',

        tagName: 'div',
        className: 'edit-version-info-panel',

        template: Handlebars.compile(TemplateSource),

        $dbVersionInput: undefined,
        $tagInput: undefined,

        initialize: function () {
        },

        render: function () {
            this.$el.html(this.template());
            this.$dbVersionInput = this.$('#dbVersion');
            this.$tagInput = this.$('#tag');
            return this;
        },

        events: {
            'submit .edit-version-info-form': 'saveEntry'
        },

        createModelInstance: function(options) {
            return new VersionInfo.Model(options);
        },

        saveEntry: function (e) {
            e.preventDefault();
            var newEntry = this.createModelInstance({ dbVersion: this.$dbVersionInput.val(), tag: this.$tagInput.val() });
            this.collection.create(newEntry);
        }
    });

    return editVersionInfoView;
});

任何建议都是最受欢迎的,我不明白为什么我的createSpy没有覆盖它。这是不是我不能绕过的Backbone事件系统的一些奇怪之处?如果是这样的话,它有点让前端区域的许多测试变得无用,因为测试试图(但失败了)将数据保存到API!!

oknwwptz

oknwwptz1#

我在另一个帖子(here)下找到了这个问题的答案,并相应地更改了Assert...

it("triggers save when the form is submitted", function () {
    View.prototype.saveEntry = jasmine.createSpy('saveEntry() spy').andCallFake(Helper.PreventedEvent);
    objUt = new View();
               
    spyOnEvent($('.edit-version-info-form'), 'submit');

    objUt.render();
    $('#jasmineSpecTestArea').append(objUt.el);
    $('.edit-version-info-form').submit();

    expect('submit').toHaveBeenTriggeredOn($('.edit-version-info-form'));
    expect(objUt.saveEntry).toHaveBeenCalled();
});

...关键是在创建示例之前将createSpy和callFake附加到原型。(在提交事件中尝试不使用fake,以获得华丽的屏幕乐趣!!)Helper.PreventedEvent只返回一个简单的函数,该函数通过调用preventDefault来阻止提交。
有趣的是,jasmine-jquery expect('submit')现在失败了,这很可能是因为这个方法是假的,这并不重要,因为我可以通过调用这个方法来测试执行情况。

相关问题