Karma to Jest: 3 test files (#12414)

* Karma to Jest: viewstate_srv

* Karma to Jest: annotations_srv

* Remove comments

* Karma to Jest: series_override_ctrl

* Remove unnecessary code

* Class to function and fix lint error

* Fix ngInject

public/app/features/annotations/specs/annotations_srv.jest.ts

@@ -1,17 +1,17 @@
-import { describe, beforeEach, it, expect, angularMocks } from 'test/lib/common';
 import '../annotations_srv';
-import helpers from 'test/specs/helpers';
 import 'app/features/dashboard/time_srv';
+import { AnnotationsSrv } from '../annotations_srv';
 
 describe('AnnotationsSrv', function() {
-  var ctx = new helpers.ServiceTestContext();
+  let $rootScope = {
+    onAppEvent: jest.fn(),
+  };
+  let $q;
+  let datasourceSrv;
+  let backendSrv;
+  let timeSrv;
 
-  beforeEach(angularMocks.module('grafana.core'));
+  let annotationsSrv = new AnnotationsSrv($rootScope, $q, datasourceSrv, backendSrv, timeSrv);
-  beforeEach(angularMocks.module('grafana.services'));
-  beforeEach(ctx.createService('timeSrv'));
-  beforeEach(() => {
-    ctx.createService('annotationsSrv');
-  });
 
   describe('When translating the query result', () => {
     const annotationSource = {
@@ -30,11 +30,11 @@ describe('AnnotationsSrv', function() {
     let translatedAnnotations;
 
     beforeEach(() => {
-      translatedAnnotations = ctx.service.translateQueryResult(annotationSource, annotations);
+      translatedAnnotations = annotationsSrv.translateQueryResult(annotationSource, annotations);
     });
 
     it('should set defaults', () => {
-      expect(translatedAnnotations[0].source).to.eql(annotationSource);
+      expect(translatedAnnotations[0].source).toEqual(annotationSource);
     });
   });
 });

public/app/features/dashboard/specs/viewstate_srv.jest.ts

@@ -0,0 +1,67 @@
+//import { describe, beforeEach, it, expect, angularMocks } from 'test/lib/common';
+import 'app/features/dashboard/view_state_srv';
+import config from 'app/core/config';
+import { DashboardViewState } from '../view_state_srv';
+
+describe('when updating view state', () => {
+  let location = {
+    replace: jest.fn(),
+    search: jest.fn(),
+  };
+
+  let $scope = {
+    onAppEvent: jest.fn(() => {}),
+    dashboard: {
+      meta: {},
+      panels: [],
+    },
+  };
+
+  let $rootScope = {};
+  let viewState;
+
+  beforeEach(() => {
+    config.bootData = {
+      user: {
+        orgId: 1,
+      },
+    };
+  });
+
+  describe('to fullscreen true and edit true', () => {
+    beforeEach(() => {
+      location.search = jest.fn(() => {
+        return { fullscreen: true, edit: true, panelId: 1 };
+      });
+      viewState = new DashboardViewState($scope, location, {}, $rootScope);
+    });
+
+    it('should update querystring and view state', () => {
+      var updateState = { fullscreen: true, edit: true, panelId: 1 };
+
+      viewState.update(updateState);
+
+      expect(location.search).toHaveBeenCalledWith({
+        edit: true,
+        editview: null,
+        fullscreen: true,
+        orgId: 1,
+        panelId: 1,
+      });
+      expect(viewState.dashboard.meta.fullscreen).toBe(true);
+      expect(viewState.state.fullscreen).toBe(true);
+    });
+  });
+
+  describe('to fullscreen false', () => {
+    beforeEach(() => {
+      viewState = new DashboardViewState($scope, location, {}, $rootScope);
+    });
+    it('should remove params from query string', () => {
+      viewState.update({ fullscreen: true, panelId: 1, edit: true });
+      viewState.update({ fullscreen: false });
+      expect(viewState.dashboard.meta.fullscreen).toBe(false);
+      expect(viewState.state.fullscreen).toBe(null);
+    });
+  });
+});

public/app/features/dashboard/specs/viewstate_srv_specs.ts

@@ -1,65 +0,0 @@
-import { describe, beforeEach, it, expect, angularMocks } from 'test/lib/common';
-import 'app/features/dashboard/view_state_srv';
-import config from 'app/core/config';
-
-describe('when updating view state', function() {
-  var viewState, location;
-  var timeSrv = {};
-  var templateSrv = {};
-  var contextSrv = {
-    user: {
-      orgId: 19,
-    },
-  };
-  beforeEach(function() {
-    config.bootData = {
-      user: {
-        orgId: 1,
-      },
-    };
-  });
-  beforeEach(angularMocks.module('grafana.services'));
-  beforeEach(
-    angularMocks.module(function($provide) {
-      $provide.value('timeSrv', timeSrv);
-      $provide.value('templateSrv', templateSrv);
-      $provide.value('contextSrv', contextSrv);
-    })
-  );
-
-  beforeEach(
-    angularMocks.inject(function(dashboardViewStateSrv, $location, $rootScope) {
-      $rootScope.onAppEvent = function() {};
-      $rootScope.dashboard = {
-        meta: {},
-        panels: [],
-      };
-      viewState = dashboardViewStateSrv.create($rootScope);
-      location = $location;
-    })
-  );
-
-  describe('to fullscreen true and edit true', function() {
-    it('should update querystring and view state', function() {
-      var updateState = { fullscreen: true, edit: true, panelId: 1 };
-      viewState.update(updateState);
-      expect(location.search()).to.eql({
-        fullscreen: true,
-        edit: true,
-        panelId: 1,
-        orgId: 1,
-      });
-      expect(viewState.dashboard.meta.fullscreen).to.be(true);
-      expect(viewState.state.fullscreen).to.be(true);
-    });
-  });
-
-  describe('to fullscreen false', function() {
-    it('should remove params from query string', function() {
-      viewState.update({ fullscreen: true, panelId: 1, edit: true });
-      viewState.update({ fullscreen: false });
-      expect(viewState.dashboard.meta.fullscreen).to.be(false);
-      expect(viewState.state.fullscreen).to.be(null);
-    });
-  });
-});

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

@@ -1,160 +1,158 @@
 import _ from 'lodash';
 import angular from 'angular';
 
-export class SeriesOverridesCtrl {
+/** @ngInject */
-  /** @ngInject */
+export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
-  constructor($scope, $element, popoverSrv) {
+  $scope.overrideMenu = [];
-    $scope.overrideMenu = [];
+  $scope.currentOverrides = [];
-    $scope.currentOverrides = [];
+  $scope.override = $scope.override || {};
-    $scope.override = $scope.override || {};
 
-    $scope.addOverrideOption = function(name, propertyName, values) {
+  $scope.addOverrideOption = function(name, propertyName, values) {
-      var option = {
+    var option = {
-        text: name,
+      text: name,
-        propertyName: propertyName,
+      propertyName: propertyName,
-        index: $scope.overrideMenu.lenght,
+      index: $scope.overrideMenu.lenght,
-        values: values,
+      values: values,
-        submenu: _.map(values, function(value) {
+      submenu: _.map(values, function(value) {
-          return { text: String(value), value: value };
+        return { text: String(value), value: value };
-        }),
+      }),
-      };
-
-      $scope.overrideMenu.push(option);
     };
 
-    $scope.setOverride = function(item, subItem) {
+    $scope.overrideMenu.push(option);
-      // handle color overrides
+  };
-      if (item.propertyName === 'color') {
+
-        $scope.openColorSelector($scope.override['color']);
+  $scope.setOverride = function(item, subItem) {
+    // handle color overrides
+    if (item.propertyName === 'color') {
+      $scope.openColorSelector($scope.override['color']);
+      return;
+    }
+
+    $scope.override[item.propertyName] = subItem.value;
+
+    // automatically disable lines for this series and the fill below to series
+    // can be removed by the user if they still want lines
+    if (item.propertyName === 'fillBelowTo') {
+      $scope.override['lines'] = false;
+      $scope.ctrl.addSeriesOverride({ alias: subItem.value, lines: false });
+    }
+
+    $scope.updateCurrentOverrides();
+    $scope.ctrl.render();
+  };
+
+  $scope.colorSelected = function(color) {
+    $scope.override['color'] = color;
+    $scope.updateCurrentOverrides();
+    $scope.ctrl.render();
+  };
+
+  $scope.openColorSelector = function(color) {
+    var fakeSeries = { color: color };
+    popoverSrv.show({
+      element: $element.find('.dropdown')[0],
+      position: 'top center',
+      openOn: 'click',
+      template: '<series-color-picker series="series" onColorChange="colorSelected" />',
+      model: {
+        autoClose: true,
+        colorSelected: $scope.colorSelected,
+        series: fakeSeries,
+      },
+      onClose: function() {
+        $scope.ctrl.render();
+      },
+    });
+  };
+
+  $scope.removeOverride = function(option) {
+    delete $scope.override[option.propertyName];
+    $scope.updateCurrentOverrides();
+    $scope.ctrl.refresh();
+  };
+
+  $scope.getSeriesNames = function() {
+    return _.map($scope.ctrl.seriesList, function(series) {
+      return series.alias;
+    });
+  };
+
+  $scope.updateCurrentOverrides = function() {
+    $scope.currentOverrides = [];
+    _.each($scope.overrideMenu, function(option) {
+      var value = $scope.override[option.propertyName];
+      if (_.isUndefined(value)) {
         return;
       }
-
+      $scope.currentOverrides.push({
-      $scope.override[item.propertyName] = subItem.value;
+        name: option.text,
-
+        propertyName: option.propertyName,
-      // automatically disable lines for this series and the fill below to series
+        value: String(value),
-      // can be removed by the user if they still want lines
-      if (item.propertyName === 'fillBelowTo') {
-        $scope.override['lines'] = false;
-        $scope.ctrl.addSeriesOverride({ alias: subItem.value, lines: false });
-      }
-
-      $scope.updateCurrentOverrides();
-      $scope.ctrl.render();
-    };
-
-    $scope.colorSelected = function(color) {
-      $scope.override['color'] = color;
-      $scope.updateCurrentOverrides();
-      $scope.ctrl.render();
-    };
-
-    $scope.openColorSelector = function(color) {
-      var fakeSeries = { color: color };
-      popoverSrv.show({
-        element: $element.find('.dropdown')[0],
-        position: 'top center',
-        openOn: 'click',
-        template: '<series-color-picker series="series" onColorChange="colorSelected" />',
-        model: {
-          autoClose: true,
-          colorSelected: $scope.colorSelected,
-          series: fakeSeries,
-        },
-        onClose: function() {
-          $scope.ctrl.render();
-        },
       });
-    };
+    });
+  };
 
-    $scope.removeOverride = function(option) {
+  $scope.addOverrideOption('Bars', 'bars', [true, false]);
-      delete $scope.override[option.propertyName];
+  $scope.addOverrideOption('Lines', 'lines', [true, false]);
-      $scope.updateCurrentOverrides();
+  $scope.addOverrideOption('Line fill', 'fill', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-      $scope.ctrl.refresh();
+  $scope.addOverrideOption('Line width', 'linewidth', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-    };
+  $scope.addOverrideOption('Null point mode', 'nullPointMode', ['connected', 'null', 'null as zero']);
-
+  $scope.addOverrideOption('Fill below to', 'fillBelowTo', $scope.getSeriesNames());
-    $scope.getSeriesNames = function() {
+  $scope.addOverrideOption('Staircase line', 'steppedLine', [true, false]);
-      return _.map($scope.ctrl.seriesList, function(series) {
+  $scope.addOverrideOption('Dashes', 'dashes', [true, false]);
-        return series.alias;
+  $scope.addOverrideOption('Dash Length', 'dashLength', [
-      });
+    1,
-    };
+    2,
-
+    3,
-    $scope.updateCurrentOverrides = function() {
+    4,
-      $scope.currentOverrides = [];
+    5,
-      _.each($scope.overrideMenu, function(option) {
+    6,
-        var value = $scope.override[option.propertyName];
+    7,
-        if (_.isUndefined(value)) {
+    8,
-          return;
+    9,
-        }
+    10,
-        $scope.currentOverrides.push({
+    11,
-          name: option.text,
+    12,
-          propertyName: option.propertyName,
+    13,
-          value: String(value),
+    14,
-        });
+    15,
-      });
+    16,
-    };
+    17,
-
+    18,
-    $scope.addOverrideOption('Bars', 'bars', [true, false]);
+    19,
-    $scope.addOverrideOption('Lines', 'lines', [true, false]);
+    20,
-    $scope.addOverrideOption('Line fill', 'fill', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  ]);
-    $scope.addOverrideOption('Line width', 'linewidth', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  $scope.addOverrideOption('Dash Space', 'spaceLength', [
-    $scope.addOverrideOption('Null point mode', 'nullPointMode', ['connected', 'null', 'null as zero']);
+    1,
-    $scope.addOverrideOption('Fill below to', 'fillBelowTo', $scope.getSeriesNames());
+    2,
-    $scope.addOverrideOption('Staircase line', 'steppedLine', [true, false]);
+    3,
-    $scope.addOverrideOption('Dashes', 'dashes', [true, false]);
+    4,
-    $scope.addOverrideOption('Dash Length', 'dashLength', [
+    5,
-      1,
+    6,
-      2,
+    7,
-      3,
+    8,
-      4,
+    9,
-      5,
+    10,
-      6,
+    11,
-      7,
+    12,
-      8,
+    13,
-      9,
+    14,
-      10,
+    15,
-      11,
+    16,
-      12,
+    17,
-      13,
+    18,
-      14,
+    19,
-      15,
+    20,
-      16,
+  ]);
-      17,
+  $scope.addOverrideOption('Points', 'points', [true, false]);
-      18,
+  $scope.addOverrideOption('Points Radius', 'pointradius', [1, 2, 3, 4, 5]);
-      19,
+  $scope.addOverrideOption('Stack', 'stack', [true, false, 'A', 'B', 'C', 'D']);
-      20,
+  $scope.addOverrideOption('Color', 'color', ['change']);
-    ]);
+  $scope.addOverrideOption('Y-axis', 'yaxis', [1, 2]);
-    $scope.addOverrideOption('Dash Space', 'spaceLength', [
+  $scope.addOverrideOption('Z-index', 'zindex', [-3, -2, -1, 0, 1, 2, 3]);
-      1,
+  $scope.addOverrideOption('Transform', 'transform', ['negative-Y']);
-      2,
+  $scope.addOverrideOption('Legend', 'legend', [true, false]);
-      3,
+  $scope.updateCurrentOverrides();
-      4,
-      5,
-      6,
-      7,
-      8,
-      9,
-      10,
-      11,
-      12,
-      13,
-      14,
-      15,
-      16,
-      17,
-      18,
-      19,
-      20,
-    ]);
-    $scope.addOverrideOption('Points', 'points', [true, false]);
-    $scope.addOverrideOption('Points Radius', 'pointradius', [1, 2, 3, 4, 5]);
-    $scope.addOverrideOption('Stack', 'stack', [true, false, 'A', 'B', 'C', 'D']);
-    $scope.addOverrideOption('Color', 'color', ['change']);
-    $scope.addOverrideOption('Y-axis', 'yaxis', [1, 2]);
-    $scope.addOverrideOption('Z-index', 'zindex', [-3, -2, -1, 0, 1, 2, 3]);
-    $scope.addOverrideOption('Transform', 'transform', ['negative-Y']);
-    $scope.addOverrideOption('Legend', 'legend', [true, false]);
-    $scope.updateCurrentOverrides();
-  }
 }
 
 angular.module('grafana.controllers').controller('SeriesOverridesCtrl', SeriesOverridesCtrl);

public/app/plugins/panel/graph/specs/series_override_ctrl.jest.ts

@@ -0,0 +1,42 @@
+import '../series_overrides_ctrl';
+import { SeriesOverridesCtrl } from '../series_overrides_ctrl';
+
+describe('SeriesOverridesCtrl', () => {
+  let popoverSrv = {};
+  let $scope;
+
+  beforeEach(() => {
+    $scope = {
+      ctrl: {
+        refresh: jest.fn(),
+        render: jest.fn(),
+        seriesList: [],
+      },
+      render: jest.fn(() => {}),
+    };
+    SeriesOverridesCtrl($scope, {}, popoverSrv);
+  });
+
+  describe('When setting an override', () => {
+    beforeEach(() => {
+      $scope.setOverride({ propertyName: 'lines' }, { value: true });
+    });
+
+    it('should set override property', () => {
+      expect($scope.override.lines).toBe(true);
+    });
+
+    it('should update view model', () => {
+      expect($scope.currentOverrides[0].name).toBe('Lines');
+      expect($scope.currentOverrides[0].value).toBe('true');
+    });
+  });
+
+  describe('When removing overide', () => {
+    it('click should include option and value index', () => {
+      $scope.setOverride(1, 0);
+      $scope.removeOverride({ propertyName: 'lines' });
+      expect($scope.currentOverrides.length).toBe(0);
+    });
+  });
+});

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

@@ -1,55 +0,0 @@
-import { describe, beforeEach, it, expect, sinon, angularMocks } from 'test/lib/common';
-import '../series_overrides_ctrl';
-import helpers from 'test/specs/helpers';
-
-describe('SeriesOverridesCtrl', function() {
-  var ctx = new helpers.ControllerTestContext();
-  var popoverSrv = {};
-
-  beforeEach(angularMocks.module('grafana.services'));
-  beforeEach(angularMocks.module('grafana.controllers'));
-
-  beforeEach(
-    ctx.providePhase({
-      popoverSrv: popoverSrv,
-    })
-  );
-
-  beforeEach(
-    angularMocks.inject(function($rootScope, $controller) {
-      ctx.scope = $rootScope.$new();
-      ctx.scope.ctrl = {
-        refresh: sinon.spy(),
-        render: sinon.spy(),
-        seriesList: [],
-      };
-      ctx.scope.render = function() {};
-      ctx.controller = $controller('SeriesOverridesCtrl', {
-        $scope: ctx.scope,
-      });
-    })
-  );
-
-  describe('When setting an override', function() {
-    beforeEach(function() {
-      ctx.scope.setOverride({ propertyName: 'lines' }, { value: true });
-    });
-
-    it('should set override property', function() {
-      expect(ctx.scope.override.lines).to.be(true);
-    });
-
-    it('should update view model', function() {
-      expect(ctx.scope.currentOverrides[0].name).to.be('Lines');
-      expect(ctx.scope.currentOverrides[0].value).to.be('true');
-    });
-  });
-
-  describe('When removing overide', function() {
-    it('click should include option and value index', function() {
-      ctx.scope.setOverride(1, 0);
-      ctx.scope.removeOverride({ propertyName: 'lines' });
-      expect(ctx.scope.currentOverrides.length).to.be(0);
-    });
-  });
-});