# Backbone js,根据测试用例将模型添加到集合中，由于无法为undefined设置值，因此引发错误

Unable to pass the Below tests case which is asking to add a element to the collection . When i do taskCollection.add(), It is throwing error as unable to set values for undefined Can anyone please check on how to pass this test case . I tried creating a new view and then do a addAll but it just does not work .. How to add a model to the collection . Test case is at the bottom
This is my JS Code

//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 Code:

<!-- 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>

BELOW IS THE TEST CASE I AM TRYING TO PASS

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);
                });
           });
    });

ERROR i am getting is :-[1A[2KNode.js (linux; U; rv:v8.15.1) Event testing application Testing sample app

TaskCollection length after adding one task FAILED
Expected undefined to be 1.
at UserContext. (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) Event testing application Testing sample app TaskCollection length after adding two task FAILED
Expected undefined to be 2.
at UserContext. (test/index_test.js:49:33)
Node.js (linux; U; rv:v8.15.1): Executed 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，只是使用 Backbone 网的内部CID。
如果测试用例不能像注解中所要求的那样被修改，那么只需要从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,根据测试用例将模型添加到集合中，由于无法为undefined设置值，因此引发错误

1条答案

相关问题

热门标签

最新问答