I am currently working on developing a "To Do list" using angular js. My goal is to allow users to click on a checkbox to mark tasks as completed after they have been finished. While the functionality works fine in the index.html file, I am struggling to pass the test itself.
Below is the test scenario:
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)
});
});
});
Here is the snippet from my 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
}
}]);
The error message that I am encountering reads as follows:
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)
The issue appears to be stemming from the line "ctrl.isCompleted("hello");"
I would greatly appreciate any guidance or assistance you may have to offer!