Added tests for "placeholder" option in single and multiple sortables.

Author: thgreasi

test/sortable.spec.js

@@ -114,6 +114,76 @@ describe('uiSortable', function() {
       });
     });
 
+    it('should work when "placeholder" option is used', function() {
+      inject(function($compile, $rootScope) {
+        var element;
+        element = $compile('<ul ui-sortable ng-model="items"><li ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
+        $rootScope.$apply(function() {
+          $rootScope.opts = {
+            placeholder: "sortable-item-placeholder"
+          };
+          $rootScope.items = ["One", "Two", "Three"];
+        });
+
+        host.append(element);
+
+        var li = element.find(':eq(1)');
+        var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(["One", "Three", "Two"]);
+
+        li = element.find(':eq(1)');
+        dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(["Three", "One", "Two"]);
+
+        $(element).remove();
+      });
+    });
+
+    it('should work when "placeholder" option equals the class of items', function() {
+      inject(function($compile, $rootScope) {
+        var element;
+        element = $compile('<ul ui-sortable ng-model="items"><li ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
+        $rootScope.$apply(function() {
+          $rootScope.opts = {
+            placeholder: "sortable-item"
+          };
+          $rootScope.items = ["One", "Two", "Three"];
+        });
+
+        host.append(element);
+
+        var li = element.find(':eq(1)');
+        var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(["One", "Three", "Two"]);
+
+        li = element.find(':eq(1)');
+        dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(["Three", "One", "Two"]);
+
+        $(element).remove();
+      });
+    });
+
+  });
+
+  describe('Multiple sortables related', function() {
+
+    var host;
+
+    beforeEach(inject(function() {
+      host = $('<div id="test-host"></div>');
+      $('body').append(host);
+    }));
+
+    afterEach(function() {
+      host.remove();
+      host = null;
+    });
+
     it('should update model when sorting between sortables', function() {
       inject(function($compile, $rootScope) {
         var elementTop, elementBottom;
@@ -146,6 +216,76 @@ describe('uiSortable', function() {
       });
     });
 
+    it('should work when "placeholder" option is used', function() {
+      inject(function($compile, $rootScope) {
+        var elementTop, elementBottom;
+        elementTop = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsTop"><li ng-repeat="item in itemsTop" id="s-top-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
+        elementBottom = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsBottom"><li ng-repeat="item in itemsBottom" id="s-bottom-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
+        $rootScope.$apply(function() {
+          $rootScope.itemsTop = ["Top One", "Top Two", "Top Three"];
+          $rootScope.itemsBottom = ["Bottom One", "Bottom Two", "Bottom Three"];
+          $rootScope.opts = {
+            placeholder: "sortable-item-placeholder",
+            connectWith: ".cross-sortable"
+          };
+        });
+
+        host.append(elementTop).append(elementBottom);
+
+        var li1 = elementTop.find(':eq(0)');
+        var li2 = elementBottom.find(':eq(0)');
+        var dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
+        li1.simulate('drag', { dy: dy });
+        expect($rootScope.itemsTop).toEqual(["Top Two", "Top Three"]);
+        expect($rootScope.itemsBottom).toEqual(["Bottom One", "Top One", "Bottom Two", "Bottom Three"]);
+
+        li1 = elementBottom.find(':eq(1)');
+        li2 = elementTop.find(':eq(1)');
+        dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top);
+        li1.simulate('drag', { dy: dy });
+        expect($rootScope.itemsTop).toEqual(["Top Two", "Top One", "Top Three"]);
+        expect($rootScope.itemsBottom).toEqual(["Bottom One", "Bottom Two", "Bottom Three"]);
+
+        $(elementTop).remove();
+        $(elementBottom).remove();
+      });
+    });
+
+    it('should work when "placeholder" option equals the class of items', function() {
+      inject(function($compile, $rootScope) {
+        var elementTop, elementBottom;
+        elementTop = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsTop"><li ng-repeat="item in itemsTop" id="s-top-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
+        elementBottom = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsBottom"><li ng-repeat="item in itemsBottom" id="s-bottom-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
+        $rootScope.$apply(function() {
+          $rootScope.itemsTop = ["Top One", "Top Two", "Top Three"];
+          $rootScope.itemsBottom = ["Bottom One", "Bottom Two", "Bottom Three"];
+          $rootScope.opts = {
+            placeholder: "sortable-item",
+            connectWith: ".cross-sortable"
+          };
+        });
+
+        host.append(elementTop).append(elementBottom);
+
+        var li1 = elementTop.find(':eq(0)');
+        var li2 = elementBottom.find(':eq(0)');
+        var dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
+        li1.simulate('drag', { dy: dy });
+        expect($rootScope.itemsTop).toEqual(["Top Two", "Top Three"]);
+        expect($rootScope.itemsBottom).toEqual(["Bottom One", "Top One", "Bottom Two", "Bottom Three"]);
+
+        li1 = elementBottom.find(':eq(1)');
+        li2 = elementTop.find(':eq(1)');
+        dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top);
+        li1.simulate('drag', { dy: dy });
+        expect($rootScope.itemsTop).toEqual(["Top Two", "Top One", "Top Three"]);
+        expect($rootScope.itemsBottom).toEqual(["Bottom One", "Bottom Two", "Bottom Three"]);
+
+        $(elementTop).remove();
+        $(elementBottom).remove();
+      });
+    });
+
   });