AngularJS: Trim todos on save

architecture-examples/angularjs/js/controllers/todoCtrl.js

@@ -13,7 +13,7 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 	$scope.editedTodo = null;
 
 	$scope.$watch('todos', function () {
-		$scope.remainingCount = filterFilter(todos, {completed: false}).length;
+		$scope.remainingCount = filterFilter(todos, { completed: false }).length;
 		$scope.completedCount = todos.length - $scope.remainingCount;
 		$scope.allChecked = !$scope.remainingCount;
 		todoStorage.put(todos);
@@ -32,12 +32,13 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 	});
 
 	$scope.addTodo = function () {
-		if (!$scope.newTodo.length) {
+		var newTodo = $scope.newTodo.trim();
+		if (!newTodo.length) {
 			return;
 		}
 
 		todos.push({
-			title: $scope.newTodo,
+			title: newTodo,
 			completed: false
 		});
 
@@ -50,6 +51,8 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 
 	$scope.doneEditing = function (todo) {
 		$scope.editedTodo = null;
+		todo.title = todo.title.trim();
+
 		if (!todo.title) {
 			$scope.removeTodo(todo);
 		}

architecture-examples/angularjs/test/unit/todoCtrlSpec.js

@@ -4,13 +4,23 @@
 
 	describe('Todo Controller', function () {
 		var ctrl, scope;
+		var todoList;
+		var todoStorage = {
+			storage: {},
+			get: function () {
+				return this.storage;
+			},
+			put: function (value) {
+				this.storage = value;
+			}
+		};
 
 			// Load the module containing the app, only 'ng' is loaded by default.
 		beforeEach(module('todomvc'));
 
 		beforeEach(inject(function ($controller, $rootScope) {
 			scope = $rootScope.$new();
-			ctrl = $controller('TodoCtrl', {$scope: scope});
+			ctrl = $controller('TodoCtrl', { $scope: scope });
 		}));
 
 		it('should not have an edited Todo on start', function () {
@@ -60,17 +70,44 @@
 			});
 		});
 
+		describe('having no Todos', function () {
+			var ctrl;
+
+			beforeEach(inject(function ($controller) {
+				todoStorage.storage = [];
+				ctrl = $controller('TodoCtrl', {
+					$scope: scope,
+					todoStorage: todoStorage
+				});
+				scope.$digest();
+			}));
+
+			it('should not add empty Todos', function () {
+				scope.newTodo = '';
+				scope.addTodo();
+				scope.$digest();
+				expect(scope.todos.length).toBe(0);
+			});
+
+			it('should not add items consisting only of whitespaces', function () {
+				scope.newTodo = '   ';
+				scope.addTodo();
+				scope.$digest();
+				expect(scope.todos.length).toBe(0);
+			});
+
+
+			it('should trim whitespace from new Todos', function () {
+				scope.newTodo = '  buy some unicorns  ';
+				scope.addTodo();
+				scope.$digest();
+				expect(scope.todos.length).toBe(1);
+				expect(scope.todos[0].title).toBe('buy some unicorns');
+			});
+		});
+
 		describe('having some saved Todos', function () {
-			var todoList,
-				todoStorage = {
-				storage: {},
-				get: function () {
-					return this.storage;
-				},
-				put: function (value) {
-					this.storage = value;
-				}
-			};
+			var ctrl;
 
 			beforeEach(inject(function ($controller) {
 				todoList = [{
@@ -117,6 +154,14 @@
 				expect(scope.todos.length).toBe(4);
 			});
 
+			it('should trim Todos on saving', function () {
+				var todo = todoList[0];
+				todo.title = ' buy moar unicorns  ';
+
+				scope.doneEditing(todo);
+				expect(scope.todos[0].title).toBe('buy moar unicorns');
+			});
+
 			it('clearCompletedTodos() should clear completed Todos', function () {
 				scope.clearCompletedTodos();
 				expect(scope.todos.length).toBe(3);