Content picker full api and test coverage

src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js

@@ -6,7 +6,7 @@ angular.module('umbraco')
 	function($scope, dialogService, entityResource){
 		$scope.ids = $scope.model.value.split(',');
 		$scope.renderModel = [];
-
+		
 		entityResource.getByIds($scope.ids).then(function(data){
 			$(data).each(function(i, item){
 				$scope.renderModel.push({name: item.name, id: item.id, icon: item.icon});
@@ -17,14 +17,26 @@ angular.module('umbraco')
 			var d = dialogService.contentPicker({scope: $scope, callback: populate});
 		};
 
-		function populate(data){
-			$(data.selection).each(function(i, item){
+		$scope.remove =function(index){
+			$scope.renderModel.splice(index, 1);
+			$scope.ids.splice(index, 1);
+			$scope.model.value = $scope.ids.join();
+		};
+
+		$scope.add =function(item){
+
+			if($scope.ids.indexOf(item.id) < 0){
 				$scope.renderModel.push({name: item.name, id: item.id, icon: item.icon})
 				$scope.ids.push(item.id);	
-			});
 
-			//set the model value to a comma-sep string 
-			//TOOD: consider if we should save more managed model?
-			$scope.model.value = $scope.ids.join();
+				$scope.model.value = $scope.ids.join();	
+			}	
+		};
+
+
+		function populate(data){
+			$(data.selection).each(function(i, item){
+				$scope.add(item);
+			});
 		}
 });

src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html

@@ -1,7 +1,7 @@
 <div ng-controller="Umbraco.Editors.ContentPickerController">
 	<ul class="nav nav-stacked">	
 		<li ng-repeat="node in renderModel">
-			<a href="#" prevent-default>
+			<a href="#" prevent-default ng-click="remove($index)">
 				<i class="icon umb-tree-icon sprTree {{node.icon}}"></i> 
 					{{node.name}}
 			</a>

src/Umbraco.Web.UI.Client/test/unit/app/propertyeditors/content-picker-controller.spec.js

@@ -0,0 +1,91 @@
+describe('Content picker controller tests', function () {
+    var scope, controller, httpBackend;
+    routeParams = {id: 1234, create: false};
+
+    beforeEach(module('umbraco'));
+
+    //inject the contentMocks service
+    beforeEach(inject(function ($rootScope, $controller, angularHelper, $httpBackend, entityMocks, mocksUtils) {
+
+        //for these tests we don't want any authorization to occur
+        mocksUtils.disableAuth();
+
+        httpBackend = $httpBackend;
+        scope = $rootScope.$new();
+        scope.model = {
+                        alias: "property",
+                        value:"1233,1231,23121",
+                        label: "My content picker",
+                        description: "desc"
+                      };
+
+        //have the contentMocks register its expect urls on the httpbackend
+        //see /mocks/content.mocks.js for how its setup
+        entityMocks.register();
+
+        controller = $controller('Umbraco.Editors.ContentPickerController', {
+            $scope: scope,
+            $routeParams: routeParams
+        });
+
+        //For controller tests its easiest to have the digest and flush happen here
+        //since its intially always the same $http calls made
+
+        //scope.$digest resolves the promise against the httpbackend
+        scope.$digest();
+
+        //httpbackend.flush() resolves all request against the httpbackend
+        //to fake a async response, (which is what happens on a real setup)
+        httpBackend.flush();
+    }));
+
+    describe('content edit controller save and publish', function () {
+
+        it('should define the default properties on construction', function () {
+            expect(scope.model.value).toNotBe(undefined);
+        });
+        
+        it("should populate scope.renderModel", function(){
+            expect(scope.renderModel).toNotBe(undefined);
+            expect(scope.renderModel.length).toBe(3);
+        });
+
+        it("Each rendermodel item should contain name, id and icon", function(){
+            var item = scope.renderModel[0];
+            expect(item.name).toNotBe(undefined);
+            expect(item.id).toBe(1233);
+            expect(item.icon).toNotBe(undefined);
+        });
+
+        it("Removing an item should update renderModel, ids and model.value", function(){
+            
+            scope.remove(1);
+
+            expect(scope.renderModel.length).toBe(2);
+            expect(scope.ids.length).toBe(2);
+            expect(scope.model.value).toBe("1233,23121");
+        });
+
+        it("Adding an item should update renderModel, ids and model.value", function(){
+            
+            scope.add({name: "meh", id: 666, icon: "woop"});
+
+            expect(scope.renderModel.length).toBe(4);
+            expect(scope.ids.length).toBe(4);
+            expect(scope.model.value).toBe("1233,1231,23121,666");
+        });
+
+        it("Adding a dublicate item should note update renderModel, ids and model.value", function(){
+            
+            scope.add({name: "meh", id: 666, icon: "woop"});
+            expect(scope.renderModel.length).toBe(4);
+            expect(scope.ids.length).toBe(4);
+            expect(scope.model.value).toBe("1233,1231,23121,666");
+
+            scope.add({name: "meh 2", id: 666, icon: "woop 2"});
+            expect(scope.renderModel.length).toBe(4);
+            expect(scope.ids.length).toBe(4);
+            expect(scope.model.value).toBe("1233,1231,23121,666");
+        });  
+    });
+});