From 54d442c0939efd2ed4b3d1e234cec39aaaca98f0 Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Sun, 6 Jul 2014 20:40:52 +0300 Subject: [PATCH 1/5] refactor(sortable): move connected lists cancel() test --- test/sortable.e2e.callbacks.spec.js | 63 ----------------------------- test/sortable.e2e.multi.spec.js | 63 +++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 63 deletions(-) diff --git a/test/sortable.e2e.callbacks.spec.js b/test/sortable.e2e.callbacks.spec.js index 38b2268..3902792 100644 --- a/test/sortable.e2e.callbacks.spec.js +++ b/test/sortable.e2e.callbacks.spec.js @@ -105,69 +105,6 @@ describe('uiSortable', function() { }); }); - it('should cancel sorting of nodes that contain "Two"', function() { - inject(function($compile, $rootScope) { - var elementTop, elementBottom; - elementTop = $compile('')($rootScope); - elementBottom = $compile('')($rootScope); - $rootScope.$apply(function() { - $rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three']; - $rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three']; - $rootScope.opts = { - connectWith: '.cross-sortable', - update: function(e, ui) { - if (ui.item.scope() && - (typeof ui.item.scope().item === 'string') && - ui.item.scope().item.indexOf('Two') >= 0) { - ui.item.sortable.cancel(); - } - } - }; - }); - - host.append(elementTop).append(elementBottom); - - var li1 = elementTop.find(':eq(1)'); - 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 One', 'Top Two', 'Top Three']); - expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); - expect($rootScope.itemsTop).toEqual(listContent(elementTop)); - expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); - - 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 One', 'Top Two', 'Top Three']); - expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); - expect($rootScope.itemsTop).toEqual(listContent(elementTop)); - expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); - - li1 = elementTop.find(':eq(0)'); - li2 = elementBottom.find(':eq(0)'); - 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']); - expect($rootScope.itemsTop).toEqual(listContent(elementTop)); - expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); - - 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']); - expect($rootScope.itemsTop).toEqual(listContent(elementTop)); - expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); - - $(elementTop).remove(); - $(elementBottom).remove(); - }); - }); - it('should update model from update() callback', function() { inject(function($compile, $rootScope) { var element, logsElement; diff --git a/test/sortable.e2e.multi.spec.js b/test/sortable.e2e.multi.spec.js index e9c827a..00b5220 100644 --- a/test/sortable.e2e.multi.spec.js +++ b/test/sortable.e2e.multi.spec.js @@ -534,6 +534,69 @@ describe('uiSortable', function() { }); }); + it('should cancel sorting of nodes that contain "Two"', function() { + inject(function($compile, $rootScope) { + var elementTop, elementBottom; + elementTop = $compile('')($rootScope); + elementBottom = $compile('')($rootScope); + $rootScope.$apply(function() { + $rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three']; + $rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three']; + $rootScope.opts = { + connectWith: '.cross-sortable', + update: function(e, ui) { + if (ui.item.scope() && + (typeof ui.item.scope().item === 'string') && + ui.item.scope().item.indexOf('Two') >= 0) { + ui.item.sortable.cancel(); + } + } + }; + }); + + host.append(elementTop).append(elementBottom); + + var li1 = elementTop.find(':eq(1)'); + 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 One', 'Top Two', 'Top Three']); + expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); + expect($rootScope.itemsTop).toEqual(listContent(elementTop)); + expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); + + 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 One', 'Top Two', 'Top Three']); + expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); + expect($rootScope.itemsTop).toEqual(listContent(elementTop)); + expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); + + li1 = elementTop.find(':eq(0)'); + li2 = elementBottom.find(':eq(0)'); + 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']); + expect($rootScope.itemsTop).toEqual(listContent(elementTop)); + expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); + + 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']); + expect($rootScope.itemsTop).toEqual(listContent(elementTop)); + expect($rootScope.itemsBottom).toEqual(listContent(elementBottom)); + + $(elementTop).remove(); + $(elementBottom).remove(); + }); + }); + }); }); \ No newline at end of file From 70e3b8e4370a7f7f467addecc8747bdfcfb400fe Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Sun, 6 Jul 2014 21:09:20 +0300 Subject: [PATCH 2/5] refactor(tests): abstract connected lists dx&dy dragging --- test/sortable.e2e.multi.spec.js | 113 +++++++++++++++++++------------- test/sortable.test-helper.js | 27 +++++++- 2 files changed, 94 insertions(+), 46 deletions(-) diff --git a/test/sortable.e2e.multi.spec.js b/test/sortable.e2e.multi.spec.js index 00b5220..d0ea17b 100644 --- a/test/sortable.e2e.multi.spec.js +++ b/test/sortable.e2e.multi.spec.js @@ -6,12 +6,13 @@ describe('uiSortable', function() { beforeEach(module('ui.sortable')); beforeEach(module('ui.sortable.testHelper')); - var EXTRA_DY_PERCENTAGE, listContent, listInnerContent; + var EXTRA_DY_PERCENTAGE, listContent, listInnerContent, simulateElementDrag; beforeEach(inject(function (sortableTestHelper) { EXTRA_DY_PERCENTAGE = sortableTestHelper.EXTRA_DY_PERCENTAGE; listContent = sortableTestHelper.listContent; listInnerContent = sortableTestHelper.listInnerContent; + simulateElementDrag = sortableTestHelper.simulateElementDrag; })); describe('Multiple sortables related', function() { @@ -43,8 +44,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -52,8 +54,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -86,8 +89,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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', 0, 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop).map(parseFalsyValue)); @@ -95,8 +99,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); + // li1.simulate('drag', { dy: dy }); expect($rootScope.itemsTop).toEqual(['Top Two', 0, 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop).map(parseFalsyValue)); @@ -125,8 +130,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -134,8 +140,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -164,8 +171,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -173,8 +181,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -203,8 +212,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -212,8 +222,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -243,8 +254,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -252,8 +264,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -284,8 +297,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -293,8 +307,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -326,8 +341,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -335,8 +351,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -367,8 +384,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -376,8 +394,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -418,8 +437,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -567,8 +587,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); + // li1.simulate('drag', { dy: dy }); expect($rootScope.itemsTop).toEqual(['Top One', 'Top Two', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -576,8 +597,9 @@ describe('uiSortable', function() { li1 = elementTop.find(':eq(0)'); li2 = elementBottom.find(':eq(0)'); - dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); - li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, 'below'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -585,8 +607,9 @@ describe('uiSortable', function() { 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 }); + simulateElementDrag(li1, li2, 'above'); + // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); diff --git a/test/sortable.test-helper.js b/test/sortable.test-helper.js index 11141d1..4d089f6 100644 --- a/test/sortable.test-helper.js +++ b/test/sortable.test-helper.js @@ -22,9 +22,34 @@ angular.module('ui.sortable.testHelper', []) return []; } + function simulateElementDrag(draggedElement, dropTarget, options) { + var dragOptions = { + dx: dropTarget.position().left - draggedElement.position().left, + dy: dropTarget.position().top - draggedElement.position().top + }; + + if (options === 'above') { + dragOptions.dy -= EXTRA_DY_PERCENTAGE * draggedElement.outerHeight(); + } else if (options === 'below') { + dragOptions.dy += EXTRA_DY_PERCENTAGE * draggedElement.outerHeight(); + } else if (typeof options === 'object') { + + if (isFinite(options.dy)) { + dragOptions.dy += options.dy; + } + + if (isFinite(options.dx)) { + dragOptions.dx += options.dx; + } + } + + draggedElement.simulate('drag', dragOptions); + } + return { EXTRA_DY_PERCENTAGE: EXTRA_DY_PERCENTAGE, listContent: listContent, - listInnerContent: listInnerContent + listInnerContent: listInnerContent, + simulateElementDrag: simulateElementDrag }; }); From 492bfa10718ec0a90b763d3f4176527201d55ca5 Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Sun, 6 Jul 2014 21:10:24 +0300 Subject: [PATCH 3/5] refactor(tests): move nested lists tests in separate file --- test/sortable.e2e.multi.spec.js | 104 ----------------------- test/sortable.e2e.nested.spec.js | 136 +++++++++++++++++++++++++++++++ 2 files changed, 136 insertions(+), 104 deletions(-) create mode 100644 test/sortable.e2e.nested.spec.js diff --git a/test/sortable.e2e.multi.spec.js b/test/sortable.e2e.multi.spec.js index d0ea17b..80af7b9 100644 --- a/test/sortable.e2e.multi.spec.js +++ b/test/sortable.e2e.multi.spec.js @@ -450,110 +450,6 @@ describe('uiSortable', function() { }); }); - it('should update model when sorting between nested sortables', function() { - inject(function($compile, $rootScope) { - var elementTree, li1, li2, dy; - - elementTree = $compile(''.concat( - '
    ', - '
  • ', - '
    ', - '{{item.text}}', - '
      ', - '
    • ', - '{{i.text}}', - '
      • ', - '
    ', - '
    ', - '
    • ', - '
', - '
'))($rootScope); - - $rootScope.$apply(function() { - $rootScope.items = [ - { - text: 'Item 1', - items: [] - }, - { - text: 'Item 2', - items: [ - { text: 'Item 2.1', items: [] }, - { text: 'Item 2.2', items: [] } - ] - } - ]; - - $rootScope.sortableOptions = { - connectWith: '.apps-container' - }; - }); - - host.append(elementTree); - - // this should drag the item out of the list and - // the item should return back to its original position - li1 = elementTree.find('.innerList:last').find(':last'); - li1.simulate('drag', { dx: -200, moves: 30 }); - expect($rootScope.items.map(function(x){ return x.text; })) - .toEqual(['Item 1', 'Item 2']); - expect($rootScope.items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree, '.lvl1ItemContent')); - expect($rootScope.items[0].items.map(function(x){ return x.text; })) - .toEqual([]); - expect($rootScope.items[0].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual(['Item 2.1', 'Item 2.2']); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); - - // this should drag the item from the inner list and - // drop it to the outter list - li1 = elementTree.find('.innerList:last').find(':last'); - li2 = elementTree.find('> li:last'); - dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); - li1.simulate('drag', { dy: dy }); - expect($rootScope.items.map(function(x){ return x.text; })) - .toEqual(['Item 1', 'Item 2.2', 'Item 2']); - expect($rootScope.items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree, '.lvl1ItemContent')); - expect($rootScope.items[0].items.map(function(x){ return x.text; })) - .toEqual([]); - expect($rootScope.items[0].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual([]); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); - expect($rootScope.items[2].items.map(function(x){ return x.text; })) - .toEqual(['Item 2.1']); - expect($rootScope.items[2].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(2)'), '.lvl2ItemContent')); - - // this should drag the item from the outter list and - // drop it to the inner list - li1 = elementTree.find('> li:first'); - li2 = elementTree.find('.innerList:last').find(':last'); - dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); - li1.simulate('drag', { dy: dy }); - expect($rootScope.items.map(function(x){ return x.text; })) - .toEqual(['Item 2.2', 'Item 2']); - expect($rootScope.items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree, '.lvl1ItemContent')); - expect($rootScope.items[0].items.map(function(x){ return x.text; })) - .toEqual([]); - expect($rootScope.items[0].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual(['Item 1', 'Item 2.1']); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); - - $(elementTree).remove(); - }); - }); - it('should cancel sorting of nodes that contain "Two"', function() { inject(function($compile, $rootScope) { var elementTop, elementBottom; diff --git a/test/sortable.e2e.nested.spec.js b/test/sortable.e2e.nested.spec.js new file mode 100644 index 0000000..970d6e6 --- /dev/null +++ b/test/sortable.e2e.nested.spec.js @@ -0,0 +1,136 @@ +'use strict'; + +describe('uiSortable', function() { + + // Ensure the sortable angular module is loaded + beforeEach(module('ui.sortable')); + beforeEach(module('ui.sortable.testHelper')); + + var EXTRA_DY_PERCENTAGE, listInnerContent; + + beforeEach(inject(function (sortableTestHelper) { + EXTRA_DY_PERCENTAGE = sortableTestHelper.EXTRA_DY_PERCENTAGE; + listInnerContent = sortableTestHelper.listInnerContent; + })); + + describe('Nested sortables related', function() { + + var host; + + beforeEach(inject(function() { + host = $('
'); + $('body').append(host); + })); + + afterEach(function() { + host.remove(); + host = null; + }); + + it('should update model when sorting between nested sortables', function() { + inject(function($compile, $rootScope) { + var elementTree, li1, li2, dy; + + elementTree = $compile(''.concat( + '
    ', + '
  • ', + '
    ', + '{{item.text}}', + '
      ', + '
    • ', + '{{i.text}}', + '
      • ', + '
    ', + '
    ', + '
    • ', + '
', + '
'))($rootScope); + + $rootScope.$apply(function() { + $rootScope.items = [ + { + text: 'Item 1', + items: [] + }, + { + text: 'Item 2', + items: [ + { text: 'Item 2.1', items: [] }, + { text: 'Item 2.2', items: [] } + ] + } + ]; + + $rootScope.sortableOptions = { + connectWith: '.apps-container' + }; + }); + + host.append(elementTree); + + // this should drag the item out of the list and + // the item should return back to its original position + li1 = elementTree.find('.innerList:last').find(':last'); + li1.simulate('drag', { dx: -200, moves: 30 }); + expect($rootScope.items.map(function(x){ return x.text; })) + .toEqual(['Item 1', 'Item 2']); + expect($rootScope.items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree, '.lvl1ItemContent')); + expect($rootScope.items[0].items.map(function(x){ return x.text; })) + .toEqual([]); + expect($rootScope.items[0].items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); + expect($rootScope.items[1].items.map(function(x){ return x.text; })) + .toEqual(['Item 2.1', 'Item 2.2']); + expect($rootScope.items[1].items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); + + // this should drag the item from the inner list and + // drop it to the outter list + li1 = elementTree.find('.innerList:last').find(':last'); + li2 = elementTree.find('> li:last'); + dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); + li1.simulate('drag', { dy: dy }); + expect($rootScope.items.map(function(x){ return x.text; })) + .toEqual(['Item 1', 'Item 2.2', 'Item 2']); + expect($rootScope.items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree, '.lvl1ItemContent')); + expect($rootScope.items[0].items.map(function(x){ return x.text; })) + .toEqual([]); + expect($rootScope.items[0].items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); + expect($rootScope.items[1].items.map(function(x){ return x.text; })) + .toEqual([]); + expect($rootScope.items[1].items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); + expect($rootScope.items[2].items.map(function(x){ return x.text; })) + .toEqual(['Item 2.1']); + expect($rootScope.items[2].items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree.find('.innerList:eq(2)'), '.lvl2ItemContent')); + + // this should drag the item from the outter list and + // drop it to the inner list + li1 = elementTree.find('> li:first'); + li2 = elementTree.find('.innerList:last').find(':last'); + dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); + li1.simulate('drag', { dy: dy }); + expect($rootScope.items.map(function(x){ return x.text; })) + .toEqual(['Item 2.2', 'Item 2']); + expect($rootScope.items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree, '.lvl1ItemContent')); + expect($rootScope.items[0].items.map(function(x){ return x.text; })) + .toEqual([]); + expect($rootScope.items[0].items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); + expect($rootScope.items[1].items.map(function(x){ return x.text; })) + .toEqual(['Item 1', 'Item 2.1']); + expect($rootScope.items[1].items.map(function(x){ return x.text; })) + .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); + + $(elementTree).remove(); + }); + }); + + }); + +}); \ No newline at end of file From 1ed63cd54dd5bf0cdf47d4abfff60e69e282462e Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Tue, 8 Jul 2014 00:54:17 +0300 Subject: [PATCH 4/5] test(sortable.e2e.multi.spec): make connected lists floated --- test/karma.conf.js | 3 +- test/sortable.e2e.multi.spec.js | 96 +++++++++----------------------- test/sortable.e2e.nested.spec.js | 53 ++++++++---------- test/sortable.test-helper.js | 26 +++++++-- test/sortable.tests.css | 7 +++ 5 files changed, 77 insertions(+), 108 deletions(-) create mode 100644 test/sortable.tests.css diff --git a/test/karma.conf.js b/test/karma.conf.js index 5e50eb8..3db0116 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -30,7 +30,8 @@ module.exports = function(config) { 'src/sortable.js', 'test/sortable.test-helper.js', 'test/sortable.test-directives.js', - 'test/*.spec.js' + 'test/*.spec.js', + 'test/sortable.tests.css' ]), diff --git a/test/sortable.e2e.multi.spec.js b/test/sortable.e2e.multi.spec.js index 80af7b9..860d349 100644 --- a/test/sortable.e2e.multi.spec.js +++ b/test/sortable.e2e.multi.spec.js @@ -40,13 +40,11 @@ describe('uiSortable', function() { $rootScope.opts = { connectWith: '.cross-sortable' }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -54,9 +52,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -78,7 +74,7 @@ describe('uiSortable', function() { $rootScope.opts = { connectWith: '.cross-sortable' }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); function parseFalsyValue (value) { if (value === '0') { @@ -90,8 +86,6 @@ describe('uiSortable', function() { var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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', 0, 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop).map(parseFalsyValue)); @@ -99,9 +93,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 0, 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop).map(parseFalsyValue)); @@ -126,13 +118,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -140,9 +130,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -167,13 +155,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -181,9 +167,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -208,13 +192,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -222,9 +204,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -250,13 +230,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -264,9 +242,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -293,13 +269,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -307,9 +281,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -337,13 +309,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -351,9 +321,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -380,13 +348,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(0)'); var li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -394,9 +360,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -424,12 +388,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); 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 }); + simulateElementDrag(li1, li2, 'below'); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Top One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -437,9 +400,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -470,12 +431,11 @@ describe('uiSortable', function() { }; }); - host.append(elementTop).append(elementBottom); + host.append(elementTop).append(elementBottom).append('
'); var li1 = elementTop.find(':eq(1)'); var li2 = elementBottom.find(':eq(0)'); - var dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); - li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, 'below'); expect($rootScope.itemsTop).toEqual(['Top One', 'Top Two', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -483,9 +443,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top One', 'Top Two', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -494,8 +452,6 @@ describe('uiSortable', function() { li1 = elementTop.find(':eq(0)'); li2 = elementBottom.find(':eq(0)'); simulateElementDrag(li1, li2, 'below'); - // 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']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); @@ -503,9 +459,7 @@ describe('uiSortable', function() { li1 = elementBottom.find(':eq(1)'); li2 = elementTop.find(':eq(1)'); - simulateElementDrag(li1, li2, 'above'); - // dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top); - // li1.simulate('drag', { dy: dy }); + simulateElementDrag(li1, li2, { place: 'above', extradx: -20, extrady: -10 }); expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']); expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']); expect($rootScope.itemsTop).toEqual(listContent(elementTop)); diff --git a/test/sortable.e2e.nested.spec.js b/test/sortable.e2e.nested.spec.js index 970d6e6..247a17a 100644 --- a/test/sortable.e2e.nested.spec.js +++ b/test/sortable.e2e.nested.spec.js @@ -6,11 +6,12 @@ describe('uiSortable', function() { beforeEach(module('ui.sortable')); beforeEach(module('ui.sortable.testHelper')); - var EXTRA_DY_PERCENTAGE, listInnerContent; + var EXTRA_DY_PERCENTAGE, listInnerContent, simulateElementDrag; beforeEach(inject(function (sortableTestHelper) { EXTRA_DY_PERCENTAGE = sortableTestHelper.EXTRA_DY_PERCENTAGE; listInnerContent = sortableTestHelper.listInnerContent; + simulateElementDrag = sortableTestHelper.simulateElementDrag; })); describe('Nested sortables related', function() { @@ -23,20 +24,20 @@ describe('uiSortable', function() { })); afterEach(function() { - host.remove(); - host = null; + // host.remove(); + // host = null; }); it('should update model when sorting between nested sortables', function() { inject(function($compile, $rootScope) { - var elementTree, li1, li2, dy; + var elementTree, li1, li2; elementTree = $compile(''.concat( - '
    ', + '
      ', '
    • ', '
      ', '{{item.text}}', - '
        ', + '
          ', '
        • ', '{{i.text}}', '
          • ', @@ -62,7 +63,7 @@ describe('uiSortable', function() { ]; $rootScope.sortableOptions = { - connectWith: '.apps-container' + connectWith: '.nested-sortable' }; }); @@ -70,7 +71,7 @@ describe('uiSortable', function() { // this should drag the item out of the list and // the item should return back to its original position - li1 = elementTree.find('.innerList:last').find(':last'); + li1 = elementTree.find('.innerList:last').find('li:last'); li1.simulate('drag', { dx: -200, moves: 30 }); expect($rootScope.items.map(function(x){ return x.text; })) .toEqual(['Item 1', 'Item 2']); @@ -85,35 +86,25 @@ describe('uiSortable', function() { expect($rootScope.items[1].items.map(function(x){ return x.text; })) .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); - // this should drag the item from the inner list and - // drop it to the outter list - li1 = elementTree.find('.innerList:last').find(':last'); - li2 = elementTree.find('> li:last'); - dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); - li1.simulate('drag', { dy: dy }); + // this should drag the item from the outter list and + // drop it to the inner list + li1 = elementTree.find('> li:first'); + li2 = elementTree.find('.innerList:last').find('li:last'); + simulateElementDrag(li1, li2, { place: 'above', extradx: 10, extrady: -5 }); expect($rootScope.items.map(function(x){ return x.text; })) - .toEqual(['Item 1', 'Item 2.2', 'Item 2']); + .toEqual(['Item 2']); expect($rootScope.items.map(function(x){ return x.text; })) .toEqual(listInnerContent(elementTree, '.lvl1ItemContent')); expect($rootScope.items[0].items.map(function(x){ return x.text; })) - .toEqual([]); + .toEqual(['Item 2.1', 'Item 1', 'Item 2.2']); expect($rootScope.items[0].items.map(function(x){ return x.text; })) .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual([]); - expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); - expect($rootScope.items[2].items.map(function(x){ return x.text; })) - .toEqual(['Item 2.1']); - expect($rootScope.items[2].items.map(function(x){ return x.text; })) - .toEqual(listInnerContent(elementTree.find('.innerList:eq(2)'), '.lvl2ItemContent')); - // this should drag the item from the outter list and - // drop it to the inner list - li1 = elementTree.find('> li:first'); - li2 = elementTree.find('.innerList:last').find(':last'); - dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top); - li1.simulate('drag', { dy: dy }); + // this should drag the item from the inner list and + // drop it to the outter list + li1 = elementTree.find('.innerList:last').find('li:last'); + li2 = elementTree.find('> li:first'); + simulateElementDrag(li1, li2, { place: 'above', extradx: -10, extrady: -5 }); expect($rootScope.items.map(function(x){ return x.text; })) .toEqual(['Item 2.2', 'Item 2']); expect($rootScope.items.map(function(x){ return x.text; })) @@ -123,7 +114,7 @@ describe('uiSortable', function() { expect($rootScope.items[0].items.map(function(x){ return x.text; })) .toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent')); expect($rootScope.items[1].items.map(function(x){ return x.text; })) - .toEqual(['Item 1', 'Item 2.1']); + .toEqual(['Item 2.1', 'Item 1']); expect($rootScope.items[1].items.map(function(x){ return x.text; })) .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent')); diff --git a/test/sortable.test-helper.js b/test/sortable.test-helper.js index 4d089f6..2b5bf90 100644 --- a/test/sortable.test-helper.js +++ b/test/sortable.test-helper.js @@ -25,7 +25,8 @@ angular.module('ui.sortable.testHelper', []) function simulateElementDrag(draggedElement, dropTarget, options) { var dragOptions = { dx: dropTarget.position().left - draggedElement.position().left, - dy: dropTarget.position().top - draggedElement.position().top + dy: dropTarget.position().top - draggedElement.position().top, + moves: 30 }; if (options === 'above') { @@ -33,13 +34,28 @@ angular.module('ui.sortable.testHelper', []) } else if (options === 'below') { dragOptions.dy += EXTRA_DY_PERCENTAGE * draggedElement.outerHeight(); } else if (typeof options === 'object') { - - if (isFinite(options.dy)) { - dragOptions.dy += options.dy; + + if ('place' in options) { + if (options.place === 'above') { + dragOptions.dy -= EXTRA_DY_PERCENTAGE * draggedElement.outerHeight(); + } else if (options.place === 'below') { + dragOptions.dy += EXTRA_DY_PERCENTAGE * draggedElement.outerHeight(); + } } if (isFinite(options.dx)) { - dragOptions.dx += options.dx; + dragOptions.dx = options.dx; + } + if (isFinite(options.dy)) { + dragOptions.dy = options.dy; + } + + if (isFinite(options.extrady)) { + dragOptions.dy += options.extrady; + } + + if (isFinite(options.extradx)) { + dragOptions.dx += options.extradx; } } diff --git a/test/sortable.tests.css b/test/sortable.tests.css new file mode 100644 index 0000000..0d7bb75 --- /dev/null +++ b/test/sortable.tests.css @@ -0,0 +1,7 @@ +.cross-sortable { + float: left; +} + +.clear { + clear: both; +} \ No newline at end of file From f814933b33fae4196e6ec9d94ae2448ae5f3822d Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Tue, 8 Jul 2014 00:54:43 +0300 Subject: [PATCH 5/5] chore: remove jquery-ui maximum version limitation --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 9618a11..f480ad4 100644 --- a/bower.json +++ b/bower.json @@ -17,7 +17,7 @@ ], "dependencies": { "angular": "~1.2.x", - "jquery-ui": ">=1.9 <1.11" + "jquery-ui": ">=1.9" }, "devDependencies": { "angular-mocks": "~1.2.x",