ui-sortable/test/sortable.e2e.nested.spec.js at master · dminkovski/ui-sortable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
'use strict';

describe('uiSortable', function() {

  beforeEach(module(function($compileProvider) {
    if (typeof $compileProvider.debugInfoEnabled === 'function') {
      $compileProvider.debugInfoEnabled(false);
    }
  }));

  // Ensure the sortable angular module is loaded
  beforeEach(module('ui.sortable'));
  beforeEach(module('ui.sortable.testHelper'));

  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() {

    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 nested sortables', function() {
      inject(function($compile, $rootScope) {
        var elementTree, li1, li2;

        elementTree = $compile(''.concat(
          '<ul ui-sortable="sortableOptions" ng-model="items" class="nested-sortable outterList" style="float: left;margin-left: 10px;padding-bottom: 10px;">',
            '<li ng-repeat="item in items">',
              '<div>',
                '<span class="itemContent lvl1ItemContent">{{item.text}}</span>',
                '<ul ui-sortable="sortableOptions" ng-model="item.items" class="nested-sortable innerList" style="margin-left: 10px;padding-bottom: 10px;">',
                  '<li ng-repeat="i in item.items">',
                    '<span class="itemContent lvl2ItemContent">{{i.text}}</span>',
                  '</li>',
                '</ul>',
              '</div>',
            '</li>',
          '</ul>',
          '<div style="clear: both;"></div>'))($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: '.nested-sortable'
          };
        });

        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('li: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 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 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(['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'));

        // 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: -6 });
        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 2.1', 'Item 1']);
        expect($rootScope.items[1].items.map(function(x){ return x.text; }))
          .toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent'));

        $(elementTree).remove();
      });
    });

  });

});