问题描述
无法通过下面的测试用例，该用例要求向集合添加元素。 当我执行 taskCollection.add() 时，它抛出错误，因为无法为 undefined 设置值 任何人都可以检查如何通过这个测试用例。我尝试创建一个新视图，然后执行 addAll 但它不起作用.. 如何将模型添加到集合中。测试用例在底部
这是我的JS代码
//Define a global var task_id as 0
//Define your Model,Task Model
var Task = Backbone.Model.extend({
defaults: {
task_id: 0,task_name: "abc",task_desc: "xyz",},});
//Define your Collection,TasksCollection with Model as Task
var TasksCollection = Backbone.Collection.extend({
model: Task,});
var taskCollection = new TasksCollection();
//Define your View,TaskRecordsView with events buttons add(addTask),delete(deleteTask) and clear(clearInput)
var TaskRecordsView = Backbone.View.extend({
el: "#todoapp",render: function () {},events: {
"click #btnadd": "add","click #btnclear": "remove",initialize: function () {
this.render();
},addTask: function () {
taskCollection.add([this.Task]); this.render();
},clearInput: function () {
this.render();
},deleteTask: function () {
this.render();
},});
var tasksView = new TaskRecordsView({
collection: taskCollection,});
taskCollection.on("add",function () {
tasksView.render();
});
taskCollection.on("remove",function () {
tasksView.render();
});
HTML 代码：
<!-- Hmtl -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="todoapp">
<table style="width:75%;" id="tblinput">
<thead>
<h1>My Todos</h3>
<thead>
<tr>
<td>Task Name:</td>
<td>
<input type="text" id="task_name" placeholder="Enter the task name" />
</td>
</tr>
<tr>
<td>Description:</td>
<td>
<textarea id="task_desc" placeholder="Enter the Task Description"></textarea>
</td>
</tr>
<td>
</td>
<td>
<button id="btnadd">Add</button>
<button id="btnclear">Clear</button>
</td>
</tr>
</table>
<div id="dvcontainer"></div>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/backbone/backbone.js"></script>
<script type = "text/javascript" src="index.js"></script>
</html>
下面是我试图通过的测试用例
describe('Event testing application',function() {
var task,taskCollection,view;
beforeEach(function() {
document.body.innerHTML='<div id="dummy_body"><input type="text" id="task_name" placeholder="Enter the task name" /><textarea id="task_desc" placeholder="Enter the Task Description"></textarea><button id="btnadd">Add</button><button id="btnclear">Clear</button> <div id="dvcontainer"></div> </div>';
task = new Task({
taskid:0,taskName: "ssa",taskDesc: "sdsa",});
taskCollection=new TasksCollection({model: Task });
view=new TaskRecordsView();
});
afterEach(function() {
document.body.removeChild(document.getElementById('dummy_body'));
});
describe('Testing sample app',function() {
it("TaskCollection length after adding one task",function () {
$("#task_name").val("Meeting");
$("#task_desc").text("At 4 pm");
view.addTask();
expect(view.addTask()).toBe(1);
});
it('TaskCollection length after adding two task',function() {
$('#task_name').val('task1');
$('#task_desc').text('desc1');
if(view.addTask()==1){
$('#task_name').val('task2');
$('#task_desc').text('desc2');
view.addTask();
}
expect(view.addTask()).toBe(2);
});
});
});
我得到的错误是：-
[1A[2KNode.js (linux; U; rv:v8.15.1) 事件测试应用程序测试示例应用程序
添加一项任务失败后的 TaskCollection 长度
预期未定义为 1。
在用户上下文。 (test/index_test.js:27:33)
Node.js (linux; U; rv:v8.15.1): Executed 1 of 2 (1 Failed) (0 secs / 0.038 secs) [1A[2KNode.js (linux; U; rv:v8.15.1) 事件测试应用程序测试示例应用
添加两个任务失败后的 TaskCollection 长度
预计 undefined 为 2。
在用户上下文。 (test/index_test.js:49:33)
Node.js (linux; U; rv:v8.15.1): 执行 2 of 2 (2 Failed) (0 secs / 0.041 secs)
解决方法
我认为您的 addTask 没有达到您的预期。 this.Task 应该是您在代码的某个点创建的模型 Task 的实例。
addTask: function () {
taskCollection.add([this.Task]);
this.render();
},可能你想要的是这样的：
addTask: function () {
let newTask = new Task({
task_name: $("#task_name").val(),task_desc: $("#task_desc").text()
});
taskCollection.add(newTask);
// this.render(); // no need to be called here as you have a listener for "add" events
},此外，您的 addTask 不返回任何 expect(view.addTask()).toBe(1);，因此此检查没有意义。期望 addTask 返回任务数量对我来说没有多大意义。
我会使用类似的东西：
// in TasksRecordView
numberOfTasks: function() {
return taskCollection.length;
}
并将您的测试更改为：expect(view.numberOfTasks()).toBe(1);
顺便说一句，您在模型中使用自定义 task_id，我的代码将始终为 0，您应该处理此问题或删除 task_id 并仅使用内部 {{3 }} 的骨干。
我的情况是测试用例不能按照评论之一的要求进行更改，只需从 addTask 返回任务数。我不认为这是一个好的设计，但应该可行；
addTask: function () {
let newTask = new Task({
task_name: $("#task_name").val(),task_desc: $("#task_desc").text()
});
taskCollection.add(newTask);
// this.render(); // no need to be called here as you have a listener for "add" events
return taskCollection.length;
},