Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit bec8e9d

Browse files
thgreasithgreasi
committed
test(directives): add transclusion tests w/ connected sortables
1 parent 19c968d commit bec8e9d

File tree

2 files changed

+151
-5
lines changed

2 files changed

+151
-5
lines changed

‎test/sortable.e2e.directives.spec.js‎

Lines changed: 140 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,18 @@ describe('uiSortable', function() {
1313
beforeEach(module('ui.sortable.testHelper'));
1414
beforeEach(module('ui.sortable.testDirectives'));
1515

16-
var EXTRA_DY_PERCENTAGE, listContent, listFindContent, listInnerContent, beforeLiElement, afterLiElement;
16+
var EXTRA_DY_PERCENTAGE, listContent, listFindContent, listInnerContent, simulateElementDrag, beforeLiElement, afterLiElement, beforeDivElement, afterDivElement;
1717

1818
beforeEach(inject(function (sortableTestHelper) {
1919
EXTRA_DY_PERCENTAGE = sortableTestHelper.EXTRA_DY_PERCENTAGE;
2020
listContent = sortableTestHelper.listContent;
2121
listFindContent = sortableTestHelper.listFindContent;
2222
listInnerContent = sortableTestHelper.listInnerContent;
23+
simulateElementDrag = sortableTestHelper.simulateElementDrag;
2324
beforeLiElement = sortableTestHelper.extraElements && sortableTestHelper.extraElements.beforeLiElement;
2425
afterLiElement = sortableTestHelper.extraElements && sortableTestHelper.extraElements.afterLiElement;
26+
beforeDivElement = sortableTestHelper.extraElements && sortableTestHelper.extraElements.beforeDivElement;
27+
afterDivElement = sortableTestHelper.extraElements && sortableTestHelper.extraElements.afterDivElement;
2528
}));
2629

2730
tests.description = 'Inner directives related';
@@ -35,6 +38,7 @@ describe('uiSortable', function() {
3538

3639
if (!useExtraElements) {
3740
beforeLiElement = afterLiElement = '';
41+
beforeDivElement = afterDivElement = '';
3842
}
3943
}));
4044

@@ -215,6 +219,141 @@ describe('uiSortable', function() {
215219
});
216220
});
217221

222+
it('should update model when the items are inside a transcluded directive and sorting between sortables', function() {
223+
inject(function($compile, $rootScope) {
224+
var elementTop, elementBottom;
225+
elementTop = $compile(''.concat(
226+
'<div ui-sortable="opts" class="cross-sortable" ng-model="itemsTop">',
227+
'<ui-sortable-transclusion-test-directive>',
228+
beforeDivElement,
229+
'<div ng-repeat="item in itemsTop" id="s-top-{{$index}}" class="sortable-item">{{ item }}</div>',
230+
afterDivElement,
231+
'</ui-sortable-simple-test-directive>',
232+
'</div>'))($rootScope);
233+
elementBottom = $compile(''.concat(
234+
'<div ui-sortable="opts" class="cross-sortable" ng-model="itemsBottom">',
235+
'<ui-sortable-transclusion-test-directive>',
236+
beforeDivElement,
237+
'<div ng-repeat="item in itemsBottom" id="s-bottom-{{$index}}" class="sortable-item">{{ item }}</div>',
238+
afterDivElement,
239+
'</ui-sortable-simple-test-directive>',
240+
'</div>'))($rootScope);
241+
$rootScope.$apply(function() {
242+
$rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three'];
243+
$rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three'];
244+
$rootScope.opts = {
245+
connectWith: '.cross-sortable',
246+
items: '> * .sortable-item'
247+
};
248+
});
249+
250+
host.append(elementTop).append(elementBottom).append('<div class="clear"></div>');
251+
252+
var li1 = elementTop.find('.sortable-item:eq(0)');
253+
var li2 = elementBottom.find('.sortable-item:eq(2)');
254+
simulateElementDrag(li1, li2, { place: 'above', moves: 100 });
255+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three']);
256+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Top One', 'Bottom Three']);
257+
expect($rootScope.itemsTop).toEqual(listFindContent(elementTop));
258+
expect($rootScope.itemsBottom).toEqual(listFindContent(elementBottom));
259+
260+
// it seems that it ony likes the last spot
261+
li1 = elementBottom.find('.sortable-item:eq(2)');
262+
li2 = elementTop.find('.sortable-item:eq(1)');
263+
simulateElementDrag(li1, li2, { place: 'below', moves: 100 });
264+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three', 'Top One']);
265+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
266+
expect($rootScope.itemsTop).toEqual(listFindContent(elementTop));
267+
expect($rootScope.itemsBottom).toEqual(listFindContent(elementBottom));
268+
269+
$(elementTop).remove();
270+
$(elementBottom).remove();
271+
});
272+
});
273+
274+
it('should properly cancel() when the items are inside a transcluded directive and sorting between sortables', function() {
275+
inject(function($compile, $rootScope) {
276+
var elementTop, elementBottom;
277+
elementTop = $compile(''.concat(
278+
'<div ui-sortable="opts" class="cross-sortable" ng-model="itemsTop">',
279+
'<ui-sortable-transclusion-test-directive>',
280+
beforeDivElement,
281+
'<div ng-repeat="item in itemsTop" id="s-top-{{$index}}" class="sortable-item">{{ item }}</div>',
282+
afterDivElement,
283+
'</ui-sortable-simple-test-directive>',
284+
'</div>'))($rootScope);
285+
elementBottom = $compile(''.concat(
286+
'<div ui-sortable="opts" class="cross-sortable" ng-model="itemsBottom">',
287+
'<ui-sortable-transclusion-test-directive>',
288+
beforeDivElement,
289+
'<div ng-repeat="item in itemsBottom" id="s-bottom-{{$index}}" class="sortable-item">{{ item }}</div>',
290+
afterDivElement,
291+
'</ui-sortable-simple-test-directive>',
292+
'</div>'))($rootScope);
293+
$rootScope.$apply(function() {
294+
$rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three'];
295+
$rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three'];
296+
$rootScope.opts = {
297+
connectWith: '.cross-sortable',
298+
items: '> * .sortable-item',
299+
update: function(e, ui) {
300+
if (ui.item.sortable.model &&
301+
(typeof ui.item.sortable.model === 'string') &&
302+
ui.item.sortable.model.indexOf('Two') >= 0) {
303+
ui.item.sortable.cancel();
304+
}
305+
}
306+
};
307+
});
308+
309+
host.append(elementTop).append(elementBottom).append('<div class="clear"></div>');
310+
311+
var li1 = elementTop.find('.sortable-item:eq(1)');
312+
var li2 = elementBottom.find('.sortable-item:eq(0)');
313+
simulateElementDrag(li1, li2, { place: 'below', moves: 100 });
314+
expect($rootScope.itemsTop).toEqual(['Top One', 'Top Two', 'Top Three']);
315+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
316+
expect($rootScope.itemsTop).toEqual(listFindContent(elementTop));
317+
expect($rootScope.itemsBottom).toEqual(listFindContent(elementBottom));
318+
// try again
319+
li1 = elementBottom.find('.sortable-item:eq(1)');
320+
li2 = elementTop.find('.sortable-item:eq(1)');
321+
simulateElementDrag(li1, li2, { place: 'above', moves: 100 });
322+
expect($rootScope.itemsTop).toEqual(['Top One', 'Top Two', 'Top Three']);
323+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
324+
expect($rootScope.itemsTop).toEqual(listFindContent(elementTop));
325+
expect($rootScope.itemsBottom).toEqual(listFindContent(elementBottom));
326+
// try again
327+
li1 = elementBottom.find('.sortable-item:eq(1)');
328+
li2 = elementTop.find('.sortable-item:eq(1)');
329+
simulateElementDrag(li1, li2, { place: 'above', moves: 100 });
330+
expect($rootScope.itemsTop).toEqual(['Top One', 'Top Two', 'Top Three']);
331+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
332+
expect($rootScope.itemsTop).toEqual(listFindContent(elementTop));
333+
expect($rootScope.itemsBottom).toEqual(listFindContent(elementBottom));
334+
335+
li1 = elementTop.find('.sortable-item:eq(0)');
336+
li2 = elementBottom.find('.sortable-item:eq(2)');
337+
simulateElementDrag(li1, li2, { place: 'above', moves: 100 });
338+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three']);
339+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Top One', 'Bottom Three']);
340+
expect($rootScope.itemsTop).toEqual(listFindContent(elementTop));
341+
expect($rootScope.itemsBottom).toEqual(listFindContent(elementBottom));
342+
343+
// it seems that it ony likes the last spot
344+
li1 = elementBottom.find('.sortable-item:eq(2)');
345+
li2 = elementTop.find('.sortable-item:eq(1)');
346+
simulateElementDrag(li1, li2, { place: 'below', moves: 100 });
347+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three', 'Top One']);
348+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
349+
expect($rootScope.itemsTop).toEqual(listFindContent(elementTop));
350+
expect($rootScope.itemsBottom).toEqual(listFindContent(elementBottom));
351+
352+
$(elementTop).remove();
353+
$(elementBottom).remove();
354+
});
355+
});
356+
218357
}
219358

220359
[0, 1].forEach(function(useExtraElements){

‎test/sortable.test-helper.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,12 @@ angular.module('ui.sortable.testHelper', [])
4646
};
4747

4848
if (options === 'above') {
49-
dragOptions.dy -= EXTRA_DY_PERCENTAGE * draggedElement.outerHeight();
49+
options = { place: 'above' };
5050
} else if (options === 'below') {
51-
dragOptions.dy += EXTRA_DY_PERCENTAGE * draggedElement.outerHeight();
52-
} else if (typeof options === 'object') {
51+
options = { place: 'below' };
52+
}
5353

54+
if (typeof options === 'object') {
5455
if ('place' in options) {
5556
if (options.place === 'above') {
5657
dragOptions.dy -= EXTRA_DY_PERCENTAGE * draggedElement.outerHeight();
@@ -73,6 +74,10 @@ angular.module('ui.sortable.testHelper', [])
7374
if (isFinite(options.extradx)) {
7475
dragOptions.dx += options.extradx;
7576
}
77+
78+
if (isFinite(options.moves) && options.moves > 0) {
79+
dragOptions.moves = options.moves;
80+
}
7681
}
7782

7883
draggedElement.simulate(dragOptions.action, dragOptions);
@@ -96,7 +101,9 @@ angular.module('ui.sortable.testHelper', [])
96101
hasUndefinedProperties: hasUndefinedProperties,
97102
extraElements: {
98103
beforeLiElement: '<li>extra element</li>',
99-
afterLiElement: '<li>extra element</li>'
104+
afterLiElement: '<li>extra element</li>',
105+
beforeDivElement: '<div>extra element</div>',
106+
afterDivElement: '<div>extra element</div>'
100107
}
101108
};
102109
})

0 commit comments

Comments
 (0)