[test] Added draggable container, item, and handles tests.

package.json

@@ -95,7 +95,7 @@
     "commander": "2.8.1",
     "css-loader": "0.17.0",
     "d3": "3.5.6",
-    "dragula": "3.6.8",
+    "dragula": "3.7.0",
     "elasticsearch": "10.1.2",
     "elasticsearch-browser": "10.1.2",
     "expiry-js": "0.1.7",

src/plugins/kibana/public/visualize/editor/__tests__/draggable.js

@@ -0,0 +1,124 @@
+import angular from 'angular';
+import sinon from 'sinon';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+
+let init;
+let $rootScope;
+let $compile;
+
+describe('draggable_* directives', function () {
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function ($injector) {
+    $rootScope = $injector.get('$rootScope');
+    $compile = $injector.get('$compile');
+    init = function init(markup = '') {
+      const $parentScope = $rootScope.$new();
+      $parentScope.items = [
+        { name: 'item_1' },
+        { name: 'item_2' },
+        { name: 'item_3' }
+      ];
+
+      // create the markup
+      const $elem = angular.element(`<div draggable-container="items">`);
+      $elem.html(markup);
+
+      // compile the directive
+      $compile($elem)($parentScope);
+      $parentScope.$apply();
+
+      const $scope = $elem.scope();
+
+      return { $parentScope, $scope, $elem };
+    };
+  }));
+
+  describe('draggable_container directive', function () {
+    it('should expose the drake', function () {
+      const { $scope } = init();
+      expect($scope.drake).to.be.an(Object);
+    });
+
+    it('should expose the controller', function () {
+      const { $scope } = init();
+      expect($scope.draggableContainerCtrl).to.be.an(Object);
+    });
+
+    it('should pull item list from directive attribute', function () {
+      const { $scope, $parentScope } = init();
+      expect($scope.draggableContainerCtrl.getList()).to.eql($parentScope.items);
+    });
+
+    it('should not be able to move extraneous DOM elements', function () {
+      const bare = angular.element(`<div>`);
+      const { $scope } = init();
+      expect($scope.drake.canMove(bare[0])).to.eql(false);
+    });
+
+    it('should not be able to move non-[draggable-item] elements', function () {
+      const bare = angular.element(`<div>`);
+      const { $scope, $elem } = init();
+      $elem.append(bare);
+      expect($scope.drake.canMove(bare[0])).to.eql(false);
+    });
+
+    it('shouldn\'t be able to move extraneous [draggable-item] elements', function () {
+      const anotherParent = angular.element(`<div draggable-container="items">`);
+      const item = angular.element(`<div draggable-item="items[0]">`);
+      anotherParent.append(item);
+      $compile(anotherParent)($rootScope);
+      $compile(item)($rootScope);
+      $rootScope.$apply();
+      const { $scope } = init();
+      expect($scope.drake.canMove(item[0])).to.eql(false);
+    });
+
+    it('should be able to move [draggable-item] children', function () {
+      const { $scope, $elem } = init(`<div draggable-item="items[0]"></div>`);
+      const item = $elem.find(`[draggable-item]`);
+      expect($scope.drake.canMove(item[0])).to.eql(true);
+    });
+
+    it('shouldn\'t be able to move [draggable-item] if it has a handle', function () {
+      const { $scope, $elem } = init(`
+        <div draggable-item="items[0]">
+          <div draggable-handle></div>
+        </div>
+      `);
+      const item = $elem.find(`[draggable-item]`);
+      expect($scope.drake.canMove(item[0])).to.eql(false);
+    });
+
+    it('should be able to move [draggable-item] by its handle', function () {
+      const { $scope, $elem } = init(`
+        <div draggable-item="items[0]">
+          <div draggable-handle></div>
+        </div>
+      `);
+      const handle = $elem.find(`[draggable-handle]`);
+      expect($scope.drake.canMove(handle[0])).to.eql(true);
+    });
+  });
+
+  describe('draggable_items', function () {
+    it('should be required to be a child to [draggable-container]', function () {
+      const item = angular.element(`<div draggable-item="items[0]">`);
+      expect(() => {
+        $compile(item)($rootScope);
+        $rootScope.$apply();
+      }).to.throwException(/controller(.+)draggableContainer(.+)required/i);
+    });
+  });
+
+  describe('draggable_handle', function () {
+    it('should be required to be a child to [draggable-item]', function () {
+      const handle = angular.element(`<div draggable-handle>`);
+      expect(() => {
+        $compile(handle)($rootScope);
+        $rootScope.$apply();
+      }).to.throwException(/controller(.+)draggableItem(.+)required/i);
+    });
+  });
+});

src/plugins/kibana/public/visualize/editor/draggable_container.js

@@ -25,7 +25,7 @@ uiModules
           const $handle = $(handle);
           const $anywhereInParentChain = $handle.parents().addBack();
           const scope = $handle.scope();
-          const movable = scope.dragHandles.is($anywhereInParentChain);
+          const movable = scope.dragHandles.length === 0 || scope.dragHandles.is($anywhereInParentChain);
           return movable;
         }
       });
@@ -53,6 +53,7 @@ uiModules
       drake.on('dragend', markDragging(false));
       drake.on('drop', drop);
       $scope.$on('$destroy', drake.destroy);
+      $scope.drake = drake;
 
       function markDragging(isDragging) {
         return el => {

src/plugins/kibana/public/visualize/editor/draggable_handle.js

@@ -11,5 +11,4 @@ uiModules
       $el.addClass('gu-handle');
     }
   };
-
 });

src/plugins/kibana/public/visualize/editor/draggable_item.js

@@ -4,21 +4,21 @@ import uiModules from 'ui/modules';
 uiModules
 .get('app/visualize')
 .directive('draggableItem', function () {
-
   return {
     restrict: 'A',
     require: '^draggableContainer',
     scope: true,
+    bindToController: true,
     controllerAs: 'draggableItemCtrl',
     controller($scope, $attrs, $parse) {
+      this.dragHandles = this.dragHandles || $();
       this.getItem = () => $parse($attrs.draggableItem)($scope);
       this.registerHandle = $el => {
-        $scope.dragHandles.push(...$el);
+        this.dragHandles.push(...$el);
       };
     },
     link($scope, $el, attr, ctrl) {
       $scope.dragHandles = $();
     }
   };
-
 });