#Backbone js。基于测试用例将模型添加到集合中，由于无法为未定义设置值而抛出错误

Question

无法通过要求向集合中添加元素的 Below 测试用例。当我执行 taskCollection.add() 时，它会抛出错误，因为无法为未定义设置值任何人都可以检查如何通过这个测试用例。我尝试创建一个新视图然后执行 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 长度 FAILED
预期未定义为 1。
在用户上下文。 (test/index_test.js:27:33)
Node.js (linux; U; rv:v8.15.1): 执行 1 of 2 (1 FAILED) (0 secs / 0.038 secs) [1A[2KNode.js (linux; U; rv:v8.15.1) 事件测试应用程序测试示例应用程序添加两个任务后的 TaskCollection 长度 FAILED
预期未定义为 2.
在用户上下文。 (test/index_test.js:49:33)
Node.js (linux; U; rv:v8.15.1)：执行 2 次，共 2 次（2 次失败）（0 秒/0.041 秒）

Answer 1

我认为您的 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 return 什么也没做 expect(view.addTask()).toBe(1); 所以这个检查没有意义。并且期望 addTask 到 return 任务的数量对我来说没有多大意义。

我将使用类似的东西：

// in TasksRecordView

numberOfTasks: function() {
    return taskCollection.length;
}

并将您的测试更改为：expect(view.numberOfTasks()).toBe(1);

顺便说一句，你在你的模型中使用了自定义 task_id，我的代码总是 0 你应该处理这个问题或删除 task_id 并只使用内部 cid 共 Backbone。

我认为无法按照其中一条评论中的要求更改测试用例，只是 return 来自 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;
},

#Backbone js。基于测试用例将模型添加到集合中，由于无法为未定义设置值而抛出错误

#Backbone js . Adding a model to collection based on a test case ,It is throwing error as unable to set values for undefined

backbone.js