Question

我正在尝试测试我的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中！

Answer 1

我在另一篇文章（here）下找到了答案，并相应更改了断言......

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期望（'submit'）现在失败了。这可能是因为伪造而且并不重要，因为我可以通过调用该方法来测试执行。

createSpy没有覆盖Backbone Jasmine测试

1 个答案: