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

Commit 3c36ecd

Browse files
thgreasithgreasi
committed
test(directives): add transclusion tests
1 parent 37d04d3 commit 3c36ecd

File tree

3 files changed

+132
-1
lines changed

3 files changed

+132
-1
lines changed

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

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

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

1818
beforeEach(inject(function (sortableTestHelper) {
1919
EXTRA_DY_PERCENTAGE = sortableTestHelper.EXTRA_DY_PERCENTAGE;
2020
listContent = sortableTestHelper.listContent;
21+
listFindContent = sortableTestHelper.listFindContent;
2122
listInnerContent = sortableTestHelper.listInnerContent;
2223
beforeLiElement = sortableTestHelper.extraElements && sortableTestHelper.extraElements.beforeLiElement;
2324
afterLiElement = sortableTestHelper.extraElements && sortableTestHelper.extraElements.afterLiElement;
@@ -112,6 +113,108 @@ describe('uiSortable', function() {
112113
});
113114
});
114115

116+
it('should work when the items are inside a transcluded directive', function() {
117+
inject(function($compile, $rootScope) {
118+
var element;
119+
element = $compile(''.concat(
120+
'<div ui-sortable="opts" ng-model="items">',
121+
'<ui-sortable-transclusion-test-directive>',
122+
beforeLiElement,
123+
'<div ng-repeat="item in items track by $index" id="s-{{$index}}" class="sortable-item">',
124+
'{{ item }}',
125+
'</div>',
126+
afterLiElement,
127+
'</ui-sortable-simple-test-directive>',
128+
'</div>'))($rootScope);
129+
130+
$rootScope.$apply(function() {
131+
$rootScope.opts = {
132+
items: '> * .sortable-item'
133+
};
134+
$rootScope.items = ['One', 'Two', 'Three'];
135+
});
136+
137+
host.append(element);
138+
139+
var li = element.find('.sortable-item:eq(1)');
140+
var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
141+
li.simulate('drag', { dy: dy });
142+
expect($rootScope.items).toEqual(['One', 'Three', 'Two']);
143+
expect($rootScope.items).toEqual(listFindContent(element));
144+
145+
li = element.find('.sortable-item:eq(1)');
146+
dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
147+
li.simulate('drag', { dy: dy });
148+
expect($rootScope.items).toEqual(['Three', 'One', 'Two']);
149+
expect($rootScope.items).toEqual(listFindContent(element));
150+
151+
$(element).remove();
152+
});
153+
});
154+
155+
it('should properly cancel() when the items are inside a transcluded directive', function() {
156+
inject(function($compile, $rootScope) {
157+
var element;
158+
element = $compile(''.concat(
159+
'<div ui-sortable="opts" ng-model="items">',
160+
'<ui-sortable-transclusion-test-directive>',
161+
beforeLiElement,
162+
'<div ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">',
163+
'{{ item }}',
164+
'</div>',
165+
afterLiElement,
166+
'</ui-sortable-simple-test-directive>',
167+
'</div>'))($rootScope);
168+
169+
$rootScope.$apply(function() {
170+
$rootScope.opts = {
171+
items: '> * .sortable-item',
172+
update: function(e, ui) {
173+
if (ui.item.sortable.model === 'Two') {
174+
ui.item.sortable.cancel();
175+
}
176+
}
177+
};
178+
$rootScope.items = ['One', 'Two', 'Three'];
179+
});
180+
181+
host.append(element);
182+
183+
var li = element.find('.sortable-item:eq(1)');
184+
var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
185+
li.simulate('drag', { dy: dy });
186+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
187+
expect($rootScope.items).toEqual(listFindContent(element));
188+
// try again
189+
li = element.find('.sortable-item:eq(1)');
190+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
191+
li.simulate('drag', { dy: dy });
192+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
193+
expect($rootScope.items).toEqual(listFindContent(element));
194+
// try again
195+
li = element.find('.sortable-item:eq(1)');
196+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
197+
li.simulate('drag', { dy: dy });
198+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
199+
expect($rootScope.items).toEqual(listFindContent(element));
200+
201+
li = element.find('.sortable-item:eq(0)');
202+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
203+
li.simulate('drag', { dy: dy });
204+
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
205+
expect($rootScope.items).toEqual(listFindContent(element));
206+
207+
li = element.find('.sortable-item:eq(2)');
208+
dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
209+
li.simulate('drag', { dy: dy });
210+
expect($rootScope.items).toEqual(['Two', 'Three', 'One']);
211+
expect($rootScope.items).toEqual(listFindContent(element));
212+
213+
214+
$(element).remove();
215+
});
216+
});
217+
115218
}
116219

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

‎test/sortable.test-directives.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,21 @@ angular.module('ui.sortable.testDirectives', [])
3434
}
3535
};
3636
}
37+
).directive('uiSortableTransclusionTestDirective',
38+
function() {
39+
return {
40+
restrict: 'E',
41+
transclude: true,
42+
scope: true,
43+
template: '<div>' +
44+
'<h1>Transclusion Directive</h1>' +
45+
'<div>' +
46+
'<div>' +
47+
'<ng-transclude></ng-transclude>' +
48+
'</div>' +
49+
'</div>' +
50+
'</div>'
51+
};
52+
}
3753
);
3854

‎test/sortable.test-helper.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,17 @@ angular.module('ui.sortable.testHelper', [])
1515
return [];
1616
}
1717

18+
function listFindContent (list, contentSelector) {
19+
if (!contentSelector) {
20+
contentSelector = '.sortable-item';
21+
}
22+
23+
if (list && list.length) {
24+
return list.find(contentSelector).map(function(){ return this.innerHTML; }).toArray();
25+
}
26+
return [];
27+
}
28+
1829
function listInnerContent (list, contentSelector) {
1930
if (!contentSelector) {
2031
contentSelector = '.itemContent';
@@ -79,6 +90,7 @@ angular.module('ui.sortable.testHelper', [])
7990
return {
8091
EXTRA_DY_PERCENTAGE: EXTRA_DY_PERCENTAGE,
8192
listContent: listContent,
93+
listFindContent: listFindContent,
8294
listInnerContent: listInnerContent,
8395
simulateElementDrag: simulateElementDrag,
8496
hasUndefinedProperties: hasUndefinedProperties,

0 commit comments

Comments
 (0)