Dashboard app controller and directive tests

src/kibana/apps/dashboard/directives/grid.js

@@ -45,10 +45,7 @@ define(function (require) {
             min_cols: 12,
             max_cols: 12,
             resize: {
-              enabled: true,
-              stop: function (event, ui, widget) {
-                console.log(widget.height(), widget.width());
-              }
+              enabled: true
             },
             serialize_params: function (el, wgd) {
               return {

test/unit/index.html

@@ -49,6 +49,9 @@
         require([
           'sinon/sinon',
           'specs/apps/dashboard/index',
+          'specs/apps/dashboard/directives/panel',
+          'specs/apps/dashboard/directives/grid',
+
           'specs/courier/index'
         ], function (sinon) {
 

test/unit/specs/apps/dashboard/directives/grid.js

@@ -0,0 +1,144 @@
+define(function (require) {
+  var angular = require('angular');
+  var mocks = require('angular-mocks');
+  var _ = require('lodash');
+  var $ = require('jquery');
+
+  // Load the kibana app dependencies.
+  require('angular-route');
+
+  // Load the code for the directive
+  require('apps/dashboard/directives/panel');
+
+  describe('Gridster', function () {
+    var $scope, $elem, compile;
+
+    beforeEach(function () {
+      module('app/dashboard');
+
+      // Create the scope
+      inject(function ($rootScope, $compile) {
+
+        // So we can use this in other sections
+        compile = $compile;
+
+        $scope = $rootScope;
+
+        $elem = angular.element(
+          '<ul dashboard-grid="" ' +
+          '  grid="dashboard.panels" ' +
+          '  control="gridControl" ' +
+          '  class="ng-isolate-scope gridster" ' +
+          '  style="position: relative; width: 1207px; height: 220px;">' +
+          '</ul>'
+        );
+
+        // The element must be attached to the DOM for gridster to work
+        $elem.height(1).width(1).css('overflow', 'hidden');
+        $elem.appendTo(document.body);
+      });
+
+    });
+
+    afterEach(function () {
+      $elem.remove();
+    });
+
+    describe('without parameters', function () {
+      beforeEach(function () {
+        compile($elem)($scope);
+        $scope.$digest();
+      });
+
+      it('should return without attaching anything', function (done) {
+        var panels = $elem.find('li.gs-w');
+        expect(panels.length).to.be(0);
+        done();
+      });
+
+    });
+
+    describe('with parameters', function () {
+      var grid;
+
+      beforeEach(function () {
+        $scope.gridControl = {};
+        $scope.dashboard = {
+          panels: [{
+            col: 1,
+            row: 1,
+            size_x: 3,
+            size_y: 2,
+            params: {
+              type: 'vis1'
+            }
+          }, {
+            col: 4,
+            row: 1,
+            size_x: 3,
+            size_y: 2,
+            params: {
+              type: 'vis2'
+            }
+          }]
+        };
+
+        compile($elem)($scope);
+        $scope.$digest();
+
+        grid = $scope.gridControl.serializeGrid;
+      });
+
+      it('should have 2 panels', function (done) {
+        var panels = $elem.find('li.gs-w');
+        expect(panels.length).to.be(2);
+        done();
+      });
+
+      it('should remove panels when remove is clicked', function (done) {
+        expect(grid().length).to.be(2);
+
+        // Click close button
+        $elem.find('li.gs-w:first i.remove').trigger('click');
+        expect(grid().length).to.be(1);
+        done();
+      });
+
+      it('should have a control.clearGrid that removes all widgets', function (done) {
+        expect(grid().length).to.be(2);
+        $scope.gridControl.clearGrid();
+        expect(grid().length).to.be(0);
+        done();
+      });
+
+      it('has an addWidget that adds a widget', function (done) {
+        expect(grid().length).to.be(2);
+        $scope.gridControl.addWidget({});
+        expect(grid().length).to.be(3);
+        done();
+      });
+
+      it('has an unserializeGrid that creates a grid from an object', function (done) {
+        expect(grid().length).to.be(2);
+        $scope.gridControl.clearGrid();
+        expect(grid().length).to.be(0);
+        $scope.gridControl.unserializeGrid({
+          panels: [{
+            col: 1,
+            row: 1,
+            size_x: 3,
+            size_y: 2,
+            params: {
+              type: 'vis1'
+            }
+          }]
+        });
+        expect(grid().length).to.be(1);
+        done();
+      });
+
+    });
+
+  });
+
+});

test/unit/specs/apps/dashboard/directives/panel.js

@@ -0,0 +1,51 @@
+define(function (require) {
+  var angular = require('angular');
+  var mocks = require('angular-mocks');
+  var _ = require('lodash');
+  var $ = require('jquery');
+
+  // Load the kibana app dependencies.
+  require('angular-route');
+
+  // Load the code for the directive
+  require('apps/dashboard/directives/panel');
+
+  describe('Dashboard panels', function () {
+    var $scope, $elem;
+
+    beforeEach(function () {
+      module('app/dashboard');
+
+      // Create the scope
+      inject(function ($rootScope, $compile) {
+
+        $scope = $rootScope;
+
+        var params = {
+          type: 'new'
+        };
+
+        $elem = angular.element(
+          '<dashboard-panel params=\'' + JSON.stringify(params) + '\'></dashboard-panel>'
+        );
+
+        $compile($elem)($scope);
+        $scope.$digest();
+      });
+
+    });
+
+    it('should have a close button', function (done) {
+      var closeIcon = $elem.find('i.remove');
+      expect(closeIcon.length).to.be(1);
+      done();
+    });
+
+    it('should have the name of the panel', function (done) {
+      expect($elem.text()).to.be('new');
+      done();
+    });
+
+  });
+
+});

test/unit/specs/apps/dashboard/index.js

@@ -2,6 +2,8 @@ define(function (require) {
   var mocks = require('angular-mocks');
   var _ = require('lodash');
   var $ = require('jquery');
+  var sinon = require('test_utils/auto_release_sinon');
+
 
   // Load the kibana app dependencies.
   require('angular-route');
@@ -10,23 +12,30 @@ define(function (require) {
   require('apps/dashboard/index');
 
   describe('Dashboard app', function () {
-    var $scope;
+    var $scope,
+      location;
 
     beforeEach(function () {
       module('app/dashboard');
 
       // Create the scope
-      inject(function ($rootScope, $controller) {
+      inject(function ($rootScope, $controller, $location) {
         $scope = $rootScope.$new();
         var dashCtrl = $controller('dashboard', {
           $scope: $scope
         });
 
+        location = $location;
+
       // $scope is now available in tests
       });
 
     });
 
+    afterEach(function () {
+      $scope.$destroy();
+    });
+
     it('should attach $routeParams to scope', function (done) {
       expect($scope.routeParams).to.be.a(Object);
       done();
@@ -39,6 +48,56 @@ define(function (require) {
       done();
     });
 
+
+    describe('saving', function () {
+      beforeEach(function () {
+        sinon.stub($scope, 'save', function () {});
+      });
+      it('should open the save dialog with openSave()', function (done) {
+        expect($scope.configTemplate).to.be(undefined);
+        $scope.openSave();
+        expect($scope.configTemplate).to.be.a('string');
+        done();
+      });
+      it('should unset the dialog when called again', function (done) {
+        $scope.openSave();
+        $scope.openSave();
+        expect($scope.configTemplate).to.be(undefined);
+        done();
+      });
+      it('should save the dashboard when submitted', function (done) {
+        $scope.openSave();
+        $scope.configSubmit();
+        expect($scope.save.called).to.be(true);
+        done();
+      });
+    });
+
+    describe('loading', function () {
+      beforeEach(function () {
+        $scope.gridControl = {
+          clearGrid: function () {},
+          unserializeGrid: function () {},
+        };
+        _.each($scope.gridControl, function (value, key) {
+          sinon.spy($scope.gridControl, key);
+        });
+      });
+
+      it('should attach the schema to the dashboard object', function (done) {
+        $scope.load({foo: 'bar'});
+        expect($scope.dashboard.foo).to.be('bar');
+        done();
+      });
+
+      it('should clear the grid before loading a new one', function (done) {
+        $scope.load({foo: 'bar'});
+        expect($scope.gridControl.clearGrid.called).to.be(true);
+        expect($scope.gridControl.unserializeGrid.called).to.be(true);
+        done();
+      });
+    });
+
   });
 
 });