stView.el 在使用 jasmine 测试 Backbone 视图时未定义

Question

我正在使用Jasmine进行单元测试，以使用Backbone测试应用程序.js(这是我第一次使用它们，所以我有点卡住了：/( 这是我的骨干视图

define(['jquery','backbone','underscore','handelbars','models/story','text!templates/story.html',
		'controllers/storyController'], 
function($, Backbone, _,handelbars, story,storyTemplate,ctrl){
	var View = Backbone.View.extend({
		el: '#main',
		events:{
			'click .close-story' : 'closeStory',
		}
// Some functions
	});
	return View;
});

和茉莉花的规格

define(['views/storyView'],function (storyView) {
describe("Testing the Story View ",function () {
var stView;
beforeEach(function(){
stView=new storyView({id:1});
stView.render();
})
it("Test if el is defined and trigger the click ",function () {
expect(stView.el).toBeDefined(); 
})
})
})

谢谢:)

Answer 1

视图构造函数中有硬编码el: '#main'。 这将评估何时加载 AMD 模块。 当你运行 jasmine 单元测试时，我认为你的应用程序的这个元素在 Jasmine 测试页面中不可用，除非你以某种方式嘲笑它。您可以通过在构造函数上放置断点并检查 DOM 来测试这一点。

为了使现有代码正常工作，您应该在加载包含视图定义的模块之前，在 DOM jasmine 用于运行测试的任何内容上附加一个虚拟元素。

另一方面，最好删除硬编码el: '#main'(你可以告诉开发人员这是一个非常糟糕的编码做法(并在创建视图实例时传递元素引用，这样你就可以这样做

new storyView({id:1, el : $('<div/>'}); // dummy element for test