javascript - 无法让 karma 测试传递给 Controller

Question

我正在尝试在 Angular js 中创建一个“待办事项列表”。完成任务后，我希望能够单击复选框来标记完成。虽然它正在处理index.html，但我无法让测试本身通过。

这是我的测试:

describe('ToDoListController', function() {
  beforeEach(module('ToDoList'));

  var ctrl;

  beforeEach(inject(function($controller) {
    ctrl = $controller('ToDoListController');
  }));

  it('initialises with an empty list and term', function() {
    expect(ctrl.listDisplay).toEqual([]);
    expect(ctrl.taskTerm).toBeUndefined();
  });

  describe('when viewing the to do list', function(){

    it('displays list items', function() {
      ctrl.taskTerm = "hello";
      ctrl.addTask();
      expect(ctrl.listDisplay[0].task).toBe("hello");
    });

    it('is completed when clicked', function() {
      ctrl.taskTerm = "hello";
      ctrl.addTask();
      ctrl.isCompleted("hello");
      expect(ctrl.listDisplay[0].completed).toBe(true)
    });

  });
});

这是我的 Controller :

toDoList.controller('ToDoListController', [function() {

  var self = this;
  self.listDisplay = []

  self.addTask = function() {
    self.listDisplay.push({task: self.taskTerm, completed: false})
  };

  self.isCompleted = function(item) {
    var i = self.listDisplay.indexOf(item)
    self.listDisplay[i].completed = true
  }
}]);

我返回的错误是:

TypeError: Cannot set property 'completed' of undefined
    at self.isCompleted (/Users/edobrien/Documents/Projects/todo_challenge/js/toDoListController.js:13:35)
    at Object.<anonymous> (/Users/edobrien/Documents/Projects/todo_challenge/test/toDoListController.spec.js:26:12)

仅供引用，错误发生在“ctrl.isCompleted("hello");”处线

如果你们能提供任何帮助，我们将不胜感激!

Answer 1

您的 Controller 的 isCompleted 方法是错误的:您的列表是对象数组，没有字符串:

self.addTask = function() {
    self.listDisplay.push({task: self.taskTerm, completed: false})
};

如果将taskTerm设置为“hello”，则压入数组的对象不是字符串“hello”，而是像这样的对象

{task: "hello", completed: false}

所以当你尝试用indexOf("hello")找到它时，它总是返回-1，因为

"hello"!= {任务: "hello", 已完成: false}

更改在数组中查找对象的方式:

self.isCompleted = function(item) {
    var completed=false;
    self.listDisplay.forEach(function (value,index) {
        if (value.task ==item) {
            completed=value.completed;
        }
    });
    return completed;
};

更新:我在阅读您的代码时犯了一个错误:isCompleted 是检查是否有某事的方法的常用名称...好吧，如果某件事完成了。但实际上您的方法将其设置为已完成。这种方法通常被命名为setCompleted。

所以方法应该是这样的:

self.setCompleted = function(item) {
    self.listDisplay.forEach(function (obj,index) {
        if (obj.task ==item) {
            obj.completed=true; //setting it as completed
        }
    });
};