0

我正在尝试测试我的 Jasmine 编辑视图。我需要完成的测试之一是提交按钮事件已正确连接。我只需要设置呈现的内容，然后提交表单，测试 save 方法是否按预期被调用。

这是测试代码...

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！

4

1 回答 1

1

我在另一篇文章（这里）下找到了答案，并相应地改变了断言......

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 附加到原型。（在提交事件上尝试不假，以获得华丽的屏幕乐趣！！）Helper.PreventedEvent 仅返回一个简单的函数，该函数通过调用 preventDefault 来阻止提交。

有趣的是 jasmine-jquery expect('submit') 现在失败了。这很可能是因为伪造并且不是关键的，因为我可以通过调用该方法的事实来测试执行。

于 2013-07-17T11:51:55.217 回答