我正在测试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!!
1条答案
按热度按时间oknwwptz1#
我在另一个帖子(here)下找到了这个问题的答案,并相应地更改了Assert...
...关键是在创建示例之前将createSpy和callFake附加到原型。(在提交事件中尝试不使用fake,以获得华丽的屏幕乐趣!!)Helper.PreventedEvent只返回一个简单的函数,该函数通过调用preventDefault来阻止提交。
有趣的是,jasmine-jquery expect('submit')现在失败了,这很可能是因为这个方法是假的,这并不重要,因为我可以通过调用这个方法来测试执行情况。