1+ 'use strict' ;
2+
3+ describe ( 'uiSortable' , function ( ) {
4+
5+ // Ensure the sortable angular module is loaded
6+ beforeEach ( module ( 'ui.sortable' ) ) ;
7+ beforeEach ( module ( 'ui.sortable.testHelper' ) ) ;
8+
9+ var EXTRA_DY_PERCENTAGE , listInnerContent ;
10+
11+ beforeEach ( inject ( function ( sortableTestHelper ) {
12+ EXTRA_DY_PERCENTAGE = sortableTestHelper . EXTRA_DY_PERCENTAGE ;
13+ listInnerContent = sortableTestHelper . listInnerContent ;
14+ } ) ) ;
15+
16+ describe ( 'Nested sortables related' , function ( ) {
17+
18+ var host ;
19+
20+ beforeEach ( inject ( function ( ) {
21+ host = $ ( '<div id="test-host"></div>' ) ;
22+ $ ( 'body' ) . append ( host ) ;
23+ } ) ) ;
24+
25+ afterEach ( function ( ) {
26+ host . remove ( ) ;
27+ host = null ;
28+ } ) ;
29+
30+ it ( 'should update model when sorting between nested sortables' , function ( ) {
31+ inject ( function ( $compile , $rootScope ) {
32+ var elementTree , li1 , li2 , dy ;
33+
34+ elementTree = $compile ( '' . concat (
35+ '<ul ui-sortable="sortableOptions" ng-model="items" class="apps-container outterList" style="float: left;margin-left: 10px;padding-bottom: 10px;">' ,
36+ '<li ng-repeat="item in items">' ,
37+ '<div>' ,
38+ '<span class="itemContent lvl1ItemContent">{{item.text}}</span>' ,
39+ '<ul ui-sortable="sortableOptions" ng-model="item.items" class="apps-container innerList" style="margin-left: 10px;padding-bottom: 10px;">' ,
40+ '<li ng-repeat="i in item.items">' ,
41+ '<span class="itemContent lvl2ItemContent">{{i.text}}</span>' ,
42+ '</li>' ,
43+ '</ul>' ,
44+ '</div>' ,
45+ '</li>' ,
46+ '</ul>' ,
47+ '<div style="clear: both;"></div>' ) ) ( $rootScope ) ;
48+
49+ $rootScope . $apply ( function ( ) {
50+ $rootScope . items = [
51+ {
52+ text : 'Item 1' ,
53+ items : [ ]
54+ } ,
55+ {
56+ text : 'Item 2' ,
57+ items : [
58+ { text : 'Item 2.1' , items : [ ] } ,
59+ { text : 'Item 2.2' , items : [ ] }
60+ ]
61+ }
62+ ] ;
63+
64+ $rootScope . sortableOptions = {
65+ connectWith : '.apps-container'
66+ } ;
67+ } ) ;
68+
69+ host . append ( elementTree ) ;
70+
71+ // this should drag the item out of the list and
72+ // the item should return back to its original position
73+ li1 = elementTree . find ( '.innerList:last' ) . find ( ':last' ) ;
74+ li1 . simulate ( 'drag' , { dx : - 200 , moves : 30 } ) ;
75+ expect ( $rootScope . items . map ( function ( x ) { return x . text ; } ) )
76+ . toEqual ( [ 'Item 1' , 'Item 2' ] ) ;
77+ expect ( $rootScope . items . map ( function ( x ) { return x . text ; } ) )
78+ . toEqual ( listInnerContent ( elementTree , '.lvl1ItemContent' ) ) ;
79+ expect ( $rootScope . items [ 0 ] . items . map ( function ( x ) { return x . text ; } ) )
80+ . toEqual ( [ ] ) ;
81+ expect ( $rootScope . items [ 0 ] . items . map ( function ( x ) { return x . text ; } ) )
82+ . toEqual ( listInnerContent ( elementTree . find ( '.innerList:eq(0)' ) , '.lvl2ItemContent' ) ) ;
83+ expect ( $rootScope . items [ 1 ] . items . map ( function ( x ) { return x . text ; } ) )
84+ . toEqual ( [ 'Item 2.1' , 'Item 2.2' ] ) ;
85+ expect ( $rootScope . items [ 1 ] . items . map ( function ( x ) { return x . text ; } ) )
86+ . toEqual ( listInnerContent ( elementTree . find ( '.innerList:eq(1)' ) , '.lvl2ItemContent' ) ) ;
87+
88+ // this should drag the item from the inner list and
89+ // drop it to the outter list
90+ li1 = elementTree . find ( '.innerList:last' ) . find ( ':last' ) ;
91+ li2 = elementTree . find ( '> li:last' ) ;
92+ dy = EXTRA_DY_PERCENTAGE * li1 . outerHeight ( ) + ( li2 . position ( ) . top - li1 . position ( ) . top ) ;
93+ li1 . simulate ( 'drag' , { dy : dy } ) ;
94+ expect ( $rootScope . items . map ( function ( x ) { return x . text ; } ) )
95+ . toEqual ( [ 'Item 1' , 'Item 2.2' , 'Item 2' ] ) ;
96+ expect ( $rootScope . items . map ( function ( x ) { return x . text ; } ) )
97+ . toEqual ( listInnerContent ( elementTree , '.lvl1ItemContent' ) ) ;
98+ expect ( $rootScope . items [ 0 ] . items . map ( function ( x ) { return x . text ; } ) )
99+ . toEqual ( [ ] ) ;
100+ expect ( $rootScope . items [ 0 ] . items . map ( function ( x ) { return x . text ; } ) )
101+ . toEqual ( listInnerContent ( elementTree . find ( '.innerList:eq(0)' ) , '.lvl2ItemContent' ) ) ;
102+ expect ( $rootScope . items [ 1 ] . items . map ( function ( x ) { return x . text ; } ) )
103+ . toEqual ( [ ] ) ;
104+ expect ( $rootScope . items [ 1 ] . items . map ( function ( x ) { return x . text ; } ) )
105+ . toEqual ( listInnerContent ( elementTree . find ( '.innerList:eq(1)' ) , '.lvl2ItemContent' ) ) ;
106+ expect ( $rootScope . items [ 2 ] . items . map ( function ( x ) { return x . text ; } ) )
107+ . toEqual ( [ 'Item 2.1' ] ) ;
108+ expect ( $rootScope . items [ 2 ] . items . map ( function ( x ) { return x . text ; } ) )
109+ . toEqual ( listInnerContent ( elementTree . find ( '.innerList:eq(2)' ) , '.lvl2ItemContent' ) ) ;
110+
111+ // this should drag the item from the outter list and
112+ // drop it to the inner list
113+ li1 = elementTree . find ( '> li:first' ) ;
114+ li2 = elementTree . find ( '.innerList:last' ) . find ( ':last' ) ;
115+ dy = - EXTRA_DY_PERCENTAGE * li1 . outerHeight ( ) + ( li2 . position ( ) . top - li1 . position ( ) . top ) ;
116+ li1 . simulate ( 'drag' , { dy : dy } ) ;
117+ expect ( $rootScope . items . map ( function ( x ) { return x . text ; } ) )
118+ . toEqual ( [ 'Item 2.2' , 'Item 2' ] ) ;
119+ expect ( $rootScope . items . map ( function ( x ) { return x . text ; } ) )
120+ . toEqual ( listInnerContent ( elementTree , '.lvl1ItemContent' ) ) ;
121+ expect ( $rootScope . items [ 0 ] . items . map ( function ( x ) { return x . text ; } ) )
122+ . toEqual ( [ ] ) ;
123+ expect ( $rootScope . items [ 0 ] . items . map ( function ( x ) { return x . text ; } ) )
124+ . toEqual ( listInnerContent ( elementTree . find ( '.innerList:eq(0)' ) , '.lvl2ItemContent' ) ) ;
125+ expect ( $rootScope . items [ 1 ] . items . map ( function ( x ) { return x . text ; } ) )
126+ . toEqual ( [ 'Item 1' , 'Item 2.1' ] ) ;
127+ expect ( $rootScope . items [ 1 ] . items . map ( function ( x ) { return x . text ; } ) )
128+ . toEqual ( listInnerContent ( elementTree . find ( '.innerList:eq(1)' ) , '.lvl2ItemContent' ) ) ;
129+
130+ $ ( elementTree ) . remove ( ) ;
131+ } ) ;
132+ } ) ;
133+
134+ } ) ;
135+
136+ } ) ;
0 commit comments