时间戳

首页 > 解决方案 > #骨干js。基于测试用例将模型添加到集合中，由于无法为未定义设置值而引发错误

backbone.js - #骨干js。基于测试用例将模型添加到集合中，由于无法为未定义设置值而引发错误

问题描述

无法通过要求向集合添加元素的以下测试用例。当我执行 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。
在 UserContext。(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.
在 UserContext。(test/index_test.js:49:33)
Node.js (linux; U; rv:v8.15.1): 2 of 2 (2 FAILED) (0 secs / 0.041 secs)

标签： backbone.js

解决方案

我认为你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;
},

推荐阅读