feat(panels): fixed unit tests

public/app/features/panel/metrics_panel_ctrl.ts

@@ -43,7 +43,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     // hookup initial data fetch
     this.$timeout(() => {
       if (!this.skipDataOnInit) {
-        this.getData();
+        this.refresh();
       }
     }, 30);;
   }
@@ -163,7 +163,7 @@ class MetricsPanelCtrl extends PanelCtrl {
       }
     };
 
-  issueQueries() {
+  issueQueries(datasource) {
     if (!this.panel.targets || this.panel.targets.length === 0) {
       return this.$q.when([]);
     }
@@ -182,7 +182,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     };
 
     this.setTimeQueryStart();
-    return this.datasource.query(metricsQuery).then(results => {
+    return datasource.query(metricsQuery).then(results => {
       this.setTimeQueryEnd();
 
       if (this.dashboard.snapshot) {

public/app/partials/metrics.html

@@ -18,7 +18,7 @@
 			</button>
 
 			<ul class="dropdown-menu" role="menu">
-				<li ng-repeat="datasource in ctrl.datasources" role="menuitem" ng-hide="ctrl.datasource.meta.builtIn">
+				<li ng-repeat="datasource in ctrl.datasources" role="menuitem" ng-hide="datasource.meta.builtIn">
 					<a ng-click="ctrl.addDataQuery(datasource);">{{datasource.name}}</a>
 				</li>
 			</ul>

public/app/plugins/datasource/graphite/query_ctrl.js

@@ -209,7 +209,7 @@ function (angular, _, config, gfunc, Parser) {
 
     $scope.targetTextChanged = function() {
       parseTarget();
-      $scope.ctrl.getData();
+      panelCtrl.refresh();
     };
 
     $scope.targetChanged = function() {
@@ -223,7 +223,7 @@ function (angular, _, config, gfunc, Parser) {
 
       if ($scope.target.target !== oldTarget) {
         if ($scope.segments[$scope.segments.length - 1].value !== 'select metric') {
-          $scope.ctrl.getData();
+          panelCtrl.refresh();
         }
       }
     };

public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts

@@ -14,13 +14,19 @@ describe('GraphiteQueryCtrl', function() {
   beforeEach(angularMocks.module('grafana.services'));
 
   beforeEach(ctx.providePhase());
-  beforeEach(ctx.createControllerPhase('GraphiteQueryCtrl'));
+  beforeEach(angularMocks.inject(($rootScope, $controller, $q) => {
+    ctx.$q = $q;
+    ctx.scope = $rootScope.$new();
+    ctx.scope.ctrl = {panel: ctx.panel};
+    ctx.panelCtrl = ctx.scope.ctrl;
+    ctx.controller = $controller('GraphiteQueryCtrl', {$scope: ctx.scope});
+  }));
 
   beforeEach(function() {
     ctx.scope.target = {target: 'aliasByNode(scaleToSeconds(test.prod.*,1),2)'};
 
-    ctx.scope.datasource = ctx.datasource;
+    ctx.panelCtrl.datasource = ctx.datasource;
-    ctx.scope.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([]));
+    ctx.panelCtrl.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([]));
   });
 
   describe('init', function() {
@@ -30,7 +36,7 @@ describe('GraphiteQueryCtrl', function() {
     });
 
     it('should validate metric key exists', function() {
-      expect(ctx.scope.datasource.metricFindQuery.getCall(0).args[0]).to.be('test.prod.*');
+      expect(ctx.panelCtrl.datasource.metricFindQuery.getCall(0).args[0]).to.be('test.prod.*');
     });
 
     it('should delete last segment if no metrics are found', function() {
@@ -45,11 +51,11 @@ describe('GraphiteQueryCtrl', function() {
   describe('when adding function', function() {
     beforeEach(function() {
       ctx.scope.target.target = 'test.prod.*.count';
-      ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}]));
+      ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}]));
       ctx.scope.init();
       ctx.scope.$digest();
 
-      ctx.scope.$parent = { get_data: sinon.spy() };
+      ctx.panelCtrl.refresh = sinon.spy();
       ctx.scope.addFunction(gfunc.getFuncDef('aliasByNode'));
     });
 
@@ -61,19 +67,17 @@ describe('GraphiteQueryCtrl', function() {
       expect(ctx.scope.target.target).to.be('aliasByNode(test.prod.*.count, 2)');
     });
 
-    it('should call get_data', function() {
+    it('should call refresh', function() {
-      expect(ctx.scope.$parent.get_data.called).to.be(true);
+      expect(ctx.panelCtrl.refresh.called).to.be(true);
     });
   });
 
   describe('when adding function before any metric segment', function() {
     beforeEach(function() {
       ctx.scope.target.target = '';
-      ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: true}]));
+      ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: true}]));
       ctx.scope.init();
       ctx.scope.$digest();
-
-      ctx.scope.$parent = { get_data: sinon.spy() };
       ctx.scope.addFunction(gfunc.getFuncDef('asPercent'));
     });
 
@@ -85,10 +89,9 @@ describe('GraphiteQueryCtrl', function() {
   describe('when initalizing target without metric expression and only function', function() {
     beforeEach(function() {
       ctx.scope.target.target = 'asPercent(#A, #B)';
-      ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([]));
+      ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([]));
       ctx.scope.init();
       ctx.scope.$digest();
-      ctx.scope.$parent = { get_data: sinon.spy() };
     });
 
     it('should not add select metric segment', function() {
@@ -104,10 +107,9 @@ describe('GraphiteQueryCtrl', function() {
   describe('when initializing a target with single param func using variable', function() {
     beforeEach(function() {
       ctx.scope.target.target = 'movingAverage(prod.count, $var)';
-      ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([]));
+      ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([]));
       ctx.scope.init();
       ctx.scope.$digest();
-      ctx.scope.$parent = { get_data: sinon.spy() };
     });
 
     it('should add 2 segments', function() {
@@ -123,7 +125,7 @@ describe('GraphiteQueryCtrl', function() {
   describe('when initalizing target without metric expression and function with series-ref', function() {
     beforeEach(function() {
       ctx.scope.target.target = 'asPercent(metric.node.count, #A)';
-      ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([]));
+      ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([]));
       ctx.scope.init();
       ctx.scope.$digest();
       ctx.scope.$parent = { get_data: sinon.spy() };
@@ -141,13 +143,12 @@ describe('GraphiteQueryCtrl', function() {
   describe('when getting altSegments and metricFindQuery retuns empty array', function() {
     beforeEach(function() {
       ctx.scope.target.target = 'test.count';
-      ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([]));
+      ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([]));
       ctx.scope.init();
       ctx.scope.getAltSegments(1).then(function(results) {
         ctx.altSegments = results;
       });
       ctx.scope.$digest();
-      ctx.scope.$parent = { get_data: sinon.spy() };
     });
 
     it('should have no segments', function() {
@@ -158,11 +159,11 @@ describe('GraphiteQueryCtrl', function() {
 
   describe('targetChanged', function() {
     beforeEach(function() {
-      ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}]));
+      ctx.panelCtrl.datasource.metricFindQuery.returns(ctx.$q.when([{expandable: false}]));
       ctx.scope.init();
       ctx.scope.$digest();
 
-      ctx.scope.$parent = { get_data: sinon.spy() };
+      ctx.panelCtrl.refresh = sinon.spy();
       ctx.scope.target.target = '';
       ctx.scope.targetChanged();
     });
@@ -171,8 +172,8 @@ describe('GraphiteQueryCtrl', function() {
       expect(ctx.scope.target.target).to.be('aliasByNode(scaleToSeconds(test.prod.*, 1), 2)');
     });
 
-    it('should call get_data', function() {
+    it('should call panelCtrl.refresh', function() {
-      expect(ctx.scope.$parent.get_data.called).to.be(true);
+      expect(ctx.panelCtrl.refresh.called).to.be(true);
     });
   });
 });

public/app/plugins/panel/graph/graph_ctrl.ts

@@ -129,7 +129,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   refreshData(datasource) {
     this.annotationsPromise = this.annotationsSrv.getAnnotations(this.dashboard);
 
-    return this.issueQueries()
+    return this.issueQueries(datasource)
     .then(res => this.dataHandler(res))
     .catch(err => {
       this.seriesList = [];

public/app/plugins/panel/graph/seriesOverridesCtrl.js

@@ -1,13 +1,11 @@
 define([
   'angular',
   'jquery',
-  'app/app',
   'lodash',
-], function(angular, jquery, app, _) {
+], function(angular, jquery, _) {
   'use strict';
 
-  var module = angular.module('grafana.panels.graph', []);
+  var module = angular.module('grafana.controllers');
-  app.useModule(module);
 
   module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv) {
     $scope.overrideMenu = [];

public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts

@@ -2,15 +2,10 @@
 
 import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common';
 
-import 'app/features/panel/panel_srv';
-import 'app/features/panel/panel_helper';
-
 import angular from 'angular';
-import {GraphCtrl} from '../module';
+import {GraphCtrl} from '../graph_ctrl';
 import helpers from '../../../../../test/specs/helpers';
 
-angular.module('grafana.controllers').controller('GraphCtrl', GraphCtrl);
-
 describe('GraphCtrl', function() {
   var ctx = new helpers.ControllerTestContext();
 
@@ -18,7 +13,7 @@ describe('GraphCtrl', function() {
   beforeEach(angularMocks.module('grafana.controllers'));
 
   beforeEach(ctx.providePhase());
-  beforeEach(ctx.createControllerPhase('GraphCtrl'));
+  beforeEach(ctx.createPanelController(GraphCtrl));
 
   describe('get_data with 2 series', function() {
     beforeEach(function() {
@@ -29,25 +24,23 @@ describe('GraphCtrl', function() {
           { target: 'test.cpu2', datapoints: [[1, 10]]}
         ]
       }));
-      ctx.scope.render = sinon.spy();
+      ctx.ctrl.render = sinon.spy();
-      ctx.scope.refreshData(ctx.datasource);
+      ctx.ctrl.refreshData(ctx.datasource);
       ctx.scope.$digest();
     });
 
     it('should send time series to render', function() {
-      var data = ctx.scope.render.getCall(0).args[0];
+      var data = ctx.ctrl.render.getCall(0).args[0];
       expect(data.length).to.be(2);
     });
 
     describe('get_data failure following success', function() {
       beforeEach(function() {
         ctx.datasource.query = sinon.stub().returns(ctx.$q.reject('Datasource Error'));
-        ctx.scope.refreshData(ctx.datasource);
+        ctx.ctrl.refreshData(ctx.datasource);
         ctx.scope.$digest();
       });
 
     });
-
   });
-
 });

public/app/plugins/panel/graph/specs/graph_specs.ts

@@ -23,11 +23,13 @@ describe('grafanaGraph', function() {
         }));
 
         beforeEach(angularMocks.inject(function($rootScope, $compile) {
+          var ctrl: any = {};
           var scope = $rootScope.$new();
+          scope.ctrl = ctrl;
           var element = angular.element("<div style='width:500px' grafana-graph><div>");
 
-          scope.height = '200px';
+          ctrl.height = '200px';
-          scope.panel = {
+          ctrl.panel = {
             legend: {},
             grid: { },
             y_formats: [],
@@ -37,12 +39,12 @@ describe('grafanaGraph', function() {
             }
           };
 
-          scope.panelRenderingComplete = sinon.spy();
+          $rootScope.onAppEvent = sinon.spy();
-          scope.appEvent = sinon.spy();
+          ctrl.otherPanelInFullscreenMode = sinon.spy();
-          scope.onAppEvent = sinon.spy();
+          ctrl.renderingCompleted = sinon.spy();
-          scope.hiddenSeries = {};
+          ctrl.hiddenSeries = {};
-          scope.dashboard = { timezone: 'browser' };
+          ctrl.dashboard = { timezone: 'browser' };
-          scope.range = {
+          ctrl.range = {
             from: new Date('2014-08-09 10:00:00'),
             to: new Date('2014-09-09 13:00:00')
           };
@@ -56,7 +58,7 @@ describe('grafanaGraph', function() {
             alias: 'series2'
           }));
 
-          setupFunc(scope, ctx.data);
+          setupFunc(ctrl, ctx.data);
 
           $compile(element)(scope);
           scope.$digest();
@@ -73,11 +75,11 @@ describe('grafanaGraph', function() {
   }
 
   graphScenario('simple lines options', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.panel.lines = true;
+      ctrl.panel.lines = true;
-      scope.panel.fill = 5;
+      ctrl.panel.fill = 5;
-      scope.panel.linewidth = 3;
+      ctrl.panel.linewidth = 3;
-      scope.panel.steppedLine = true;
+      ctrl.panel.steppedLine = true;
     });
 
     it('should configure plot with correct options', function() {
@@ -89,8 +91,8 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('grid thresholds 100, 200', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.panel.grid = {
+      ctrl.panel.grid = {
         threshold1: 100,
         threshold1Color: "#111",
         threshold2: 200,
@@ -109,8 +111,8 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('inverted grid thresholds 200, 100', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.panel.grid = {
+      ctrl.panel.grid = {
         threshold1: 200,
         threshold1Color: "#111",
         threshold2: 100,
@@ -129,8 +131,8 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('grid thresholds from zero', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.panel.grid = {
+      ctrl.panel.grid = {
         threshold1: 0,
         threshold1Color: "#111",
       };
@@ -143,8 +145,8 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('when logBase is log 10', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.panel.grid = {
+      ctrl.panel.grid = {
         leftMax: null,
         rightMax: null,
         leftMin: null,
@@ -162,8 +164,8 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('should use timeStep for barWidth', function(ctx) {
-    ctx.setup(function(scope, data) {
+    ctx.setup(function(ctrl, data) {
-      scope.panel.bars = true;
+      ctrl.panel.bars = true;
       data[0] = new TimeSeries({
         datapoints: [[1,10],[2,20]],
         alias: 'series1',
@@ -176,10 +178,10 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('series option overrides, fill & points', function(ctx) {
-    ctx.setup(function(scope, data) {
+    ctx.setup(function(ctrl, data) {
-      scope.panel.lines = true;
+      ctrl.panel.lines = true;
-      scope.panel.fill = 5;
+      ctrl.panel.fill = 5;
-      scope.panel.seriesOverrides = [
+      ctrl.panel.seriesOverrides = [
         { alias: 'test', fill: 0, points: true }
       ];
 
@@ -194,8 +196,8 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('should order series order according to zindex', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }];
+      ctrl.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }];
     });
 
     it('should move zindex 2 last', function() {
@@ -205,8 +207,8 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('when series is hidden', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.hiddenSeries = {'series2': true};
+      ctrl.hiddenSeries = {'series2': true};
     });
 
     it('should remove datapoints and disable stack', function() {
@@ -217,9 +219,9 @@ describe('grafanaGraph', function() {
   });
 
   graphScenario('when stack and percent', function(ctx) {
-    ctx.setup(function(scope) {
+    ctx.setup(function(ctrl) {
-      scope.panel.percentage = true;
+      ctrl.panel.percentage = true;
-      scope.panel.stack = true;
+      ctrl.panel.stack = true;
     });
 
     it('should show percentage', function() {

public/app/plugins/panel/graph/specs/tooltip_specs.ts

@@ -8,6 +8,7 @@ import GraphTooltip from '../graph_tooltip';
 var scope =  {
   appEvent: sinon.spy(),
   onAppEvent: sinon.spy(),
+  ctrl: {}
 };
 
 var elem = $('<div></div>');
@@ -15,8 +16,8 @@ var dashboard = { };
 
 function describeSharedTooltip(desc, fn) {
   var ctx: any = {};
-  ctx.scope = scope;
+  ctx.ctrl = scope.ctrl;
-  ctx.scope.panel =  {
+  ctx.ctrl.panel =  {
     tooltip:  {
       shared: true
     },
@@ -51,9 +52,11 @@ describeSharedTooltip("steppedLine false, stack false", function(ctx) {
   it('should return 2 series', function() {
     expect(ctx.results.length).to.be(2);
   });
+
   it('should add time to results array', function() {
     expect(ctx.results.time).to.be(10);
   });
+
   it('should set value and hoverIndex', function() {
     expect(ctx.results[0].value).to.be(15);
     expect(ctx.results[1].value).to.be(2);
@@ -93,7 +96,7 @@ describeSharedTooltip("steppedLine false, stack true, individual false", functio
         stack: true
       }
     ];
-    ctx.scope.panel.stack = true;
+    ctx.ctrl.panel.stack = true;
     ctx.pos = { x: 11 };
   });
 
@@ -124,7 +127,7 @@ describeSharedTooltip("steppedLine false, stack true, individual false, series s
         stack: false
       }
     ];
-    ctx.scope.panel.stack = true;
+    ctx.ctrl.panel.stack = true;
     ctx.pos = { x: 11 };
   });
 
@@ -156,15 +159,14 @@ describeSharedTooltip("steppedLine false, stack true, individual true", function
         stack: false
       }
     ];
-    ctx.scope.panel.stack = true;
+    ctx.ctrl.panel.stack = true;
-    ctx.scope.panel.tooltip.value_type = 'individual';
+    ctx.ctrl.panel.tooltip.value_type = 'individual';
     ctx.pos = { x: 11 };
   });
 
   it('should not show stacked value', function() {
     expect(ctx.results[1].value).to.be(2);
   });
-
 });
 
 

public/test/specs/dashboardViewStateSrv-specs.js

@@ -9,7 +9,8 @@ define([
     beforeEach(module('grafana.services'));
 
     beforeEach(inject(function(dashboardViewStateSrv, $location, $rootScope) {
-      $rootScope.onAppEvent = function(){};
+      $rootScope.onAppEvent = function() {};
+      $rootScope.dashboard = {meta: {}};
       viewState = dashboardViewStateSrv.create($rootScope);
       location = $location;
     }));
@@ -19,7 +20,7 @@ define([
         var updateState = { fullscreen: true, edit: true, panelId: 1 };
         viewState.update(updateState);
         expect(location.search()).to.eql(updateState);
-        expect(viewState.fullscreen).to.be(true);
+        expect(viewState.dashboard.meta.fullscreen).to.be(true);
         expect(viewState.state.fullscreen).to.be(true);
       });
     });
@@ -29,7 +30,7 @@ define([
         viewState.update({fullscreen: true, panelId: 1, edit: true});
         viewState.update({fullscreen: false});
         expect(location.search()).to.eql({});
-        expect(viewState.fullscreen).to.be(false);
+        expect(viewState.dashboard.meta.fullscreen).to.be(false);
         expect(viewState.state.fullscreen).to.be(null);
       });
     });

public/test/specs/helpers.js

@@ -1,7 +1,8 @@
 define([
  'lodash',
+ 'app/core/config',
  'app/core/utils/datemath',
-], function(_, dateMath) {
+], function(_, config, dateMath) {
   'use strict';
 
   function ControllerTestContext() {
@@ -36,6 +37,28 @@ define([
       });
     };
 
+    this.createPanelController = function(Ctrl) {
+      return inject(function($controller, $rootScope, $q, $location, $browser) {
+        self.scope = $rootScope.$new();
+        self.$location = $location;
+        self.$browser = $browser;
+        self.$q = $q;
+        self.panel = {type: 'test'};
+        self.dashboard = {};
+
+        $rootScope.appEvent = sinon.spy();
+        $rootScope.onAppEvent = sinon.spy();
+        $rootScope.colors = [];
+
+        for (var i = 0; i < 50; i++) { $rootScope.colors.push('#' + i); }
+
+        config.panels['test'] = {info: {}};
+        self.ctrl = $controller(Ctrl, {$scope: self.scope}, {
+          panel: self.panel, dashboard: self.dashboard
+        });
+      });
+    };
+
     this.createControllerPhase = function(controllerName) {
       return inject(function($controller, $rootScope, $q, $location, $browser) {
         self.scope = $rootScope.$new();
@@ -59,7 +82,6 @@ define([
         self.controller = $controller(controllerName, {
           $scope: self.scope
         });
-
       });
     };
   }
@@ -74,10 +96,10 @@ define([
     self.$routeParams = {};
 
     this.providePhase = function(mocks) {
-     return module(function($provide) {
+      return module(function($provide) {
-       _.each(mocks, function(key) {
+        _.each(mocks, function(key) {
-         $provide.value(key, self[key]);
+          $provide.value(key, self[key]);
-       });
+        });
       });
     };
 

public/test/specs/seriesOverridesCtrl-specs.js

@@ -9,16 +9,25 @@ define([
     var popoverSrv = {};
 
     beforeEach(module('grafana.services'));
-    beforeEach(module('grafana.panels.graph'));
+    beforeEach(module('grafana.controllers'));
 
     beforeEach(ctx.providePhase({
       popoverSrv: popoverSrv
     }));
 
-    beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl'));
+    beforeEach(inject(function($rootScope, $controller) {
-    beforeEach(function() {
+     // ctx.createControllerPhase('SeriesOverridesCtrl'));
+     // beforeEach(function() {
+      ctx.scope = $rootScope.$new();
+      ctx.scope.ctrl = {
+        render: sinon.spy(),
+        seriesList: []
+      };
       ctx.scope.render = function() {};
-    });
+      ctx.controller = $controller('SeriesOverridesCtrl', {
+        $scope: ctx.scope
+      });
+    }));
 
     describe('When setting an override', function() {
       beforeEach(function() {