adding visualize tests (#13957)

src/fixtures/mock_ui_state.js

@@ -8,6 +8,11 @@ export default {
     keys[path] = val;
     return val;
   },
+  setSilent: function (path, val) {
+    keys[path] = val;
+    return val;
+  },
+  emit: _.noop,
   on: _.noop,
   off: _.noop
 };

src/ui/public/visualize/__tests__/spy.js

@@ -0,0 +1,107 @@
+import $ from 'jquery';
+import _ from 'lodash';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import { VisProvider } from 'ui/vis';
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import FixturesStubbedSearchSourceProvider from 'fixtures/stubbed_search_source';
+import MockState from 'fixtures/mock_state';
+
+describe('visualize spy directive', function () {
+  let $rootScope;
+  let $compile;
+  let $el;
+  let Vis;
+  let indexPattern;
+  let fixtures;
+  let searchSource;
+  let appState;
+  let vis;
+
+  beforeEach(ngMock.module('kibana', 'kibana/table_vis'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    $rootScope = $injector.get('$rootScope');
+    $compile = $injector.get('$compile');
+    fixtures = require('fixtures/fake_hierarchical_data');
+    Vis = Private(VisProvider);
+    appState = new MockState({ filters: [] });
+    appState.toJSON = () => { return {}; };
+    indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+    searchSource = Private(FixturesStubbedSearchSourceProvider);
+    const requiresSearch = false;
+    vis = new CreateVis(null, requiresSearch);
+    init(vis, fixtures.oneRangeBucket);
+  }));
+
+  // basically a parameterized beforeEach
+  function init(vis, esResponse) {
+    vis.aggs.forEach(function (agg, i) { agg.id = 'agg_' + (i + 1); });
+    $rootScope.spy = {};
+    $rootScope.vis = vis;
+    $rootScope.esResponse = esResponse;
+    $rootScope.uiState = require('fixtures/mock_ui_state');
+    $rootScope.searchSource = searchSource;
+    $el = $('<visualize-spy>');
+    $compile($el)($rootScope);
+    $rootScope.$apply();
+  }
+
+  function CreateVis(params, requiresSearch) {
+    const vis = new Vis(indexPattern, {
+      type: 'table',
+      params: params || {},
+      aggs: [
+        { type: 'count', schema: 'metric' },
+        {
+          type: 'range',
+          schema: 'bucket',
+          params: {
+            field: 'bytes',
+            ranges: [
+              { from: 0, to: 1000 },
+              { from: 1000, to: 2000 }
+            ]
+          }
+        }
+      ]
+    });
+
+    vis.type.requestHandler = requiresSearch ? 'default' : 'none';
+    vis.type.responseHandler = 'none';
+    vis.type.requiresSearch = false;
+    return vis;
+  }
+
+  it('toggleDisplay toggles spy display', () => {
+    $rootScope.toggleDisplay();
+    $rootScope.$apply();
+    let mode = _.get($rootScope.spy, 'mode.name');
+    expect(mode).to.equal('table');
+
+    $rootScope.toggleDisplay();
+    $rootScope.$apply();
+    mode = _.get($rootScope.spy, 'mode.name');
+    expect(mode).to.be.undefined;
+  });
+
+  it('toggleFullPage toggles full page display', () => {
+    $rootScope.spy = { mode: { name: 'table' } };
+    $rootScope.toggleFullPage();
+    $rootScope.$apply();
+    let mode = _.get($rootScope.spy, 'mode.fill');
+    expect(mode).to.equal(true);
+
+    $rootScope.toggleFullPage();
+    $rootScope.$apply();
+    mode = _.get($rootScope.spy, 'mode.fill');
+    expect(mode).to.equal(false);
+  });
+
+  it('onSpyModeChange updates the spy display mode', () => {
+    $rootScope.selectedModeName = 'table';
+    $rootScope.onSpyModeChange();
+    $rootScope.$apply();
+    const mode = _.get($rootScope.spy, 'mode.name');
+    expect(mode).to.equal('table');
+  });
+});

src/ui/public/visualize/__tests__/visualization_editor.js

@@ -0,0 +1,92 @@
+import $ from 'jquery';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import { VisProvider } from 'ui/vis';
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import FixturesStubbedSearchSourceProvider from 'fixtures/stubbed_search_source';
+import MockState from 'fixtures/mock_state';
+
+describe('visualization_editor directive', function () {
+  let $rootScope;
+  let $compile;
+  let $scope;
+  let $el;
+  let Vis;
+  let indexPattern;
+  let fixtures;
+  let searchSource;
+  let appState;
+  let $timeout;
+  let vis;
+
+  beforeEach(ngMock.module('kibana', 'kibana/table_vis'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    $rootScope = $injector.get('$rootScope');
+    $compile = $injector.get('$compile');
+    $timeout = $injector.get('$timeout');
+    fixtures = require('fixtures/fake_hierarchical_data');
+    Vis = Private(VisProvider);
+    appState = new MockState({ filters: [] });
+    appState.toJSON = () => { return {}; };
+    indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+    searchSource = Private(FixturesStubbedSearchSourceProvider);
+
+    const requiresSearch = false;
+    vis = new CreateVis(null, requiresSearch);
+    init(vis, fixtures.oneRangeBucket);
+    $timeout.flush();
+    $timeout.verifyNoPendingTasks();
+  }));
+
+  // basically a parameterized beforeEach
+  function init(vis, esResponse) {
+    vis.aggs.forEach(function (agg, i) { agg.id = 'agg_' + (i + 1); });
+
+    $rootScope.vis = vis;
+    $rootScope.visData = esResponse;
+    $rootScope.uiState = require('fixtures/mock_ui_state');
+    $rootScope.searchSource = searchSource;
+    $el = $('<visualization-editor vis="vis" vis-data="visData" ui-state="uiState" search-source="searchSource">');
+    $compile($el)($rootScope);
+    $rootScope.$apply();
+
+    $scope = $el.isolateScope();
+  }
+
+  function CreateVis(params, requiresSearch) {
+    const vis = new Vis(indexPattern, {
+      type: 'table',
+      params: params || {},
+      aggs: [
+        { type: 'count', schema: 'metric' },
+        {
+          type: 'range',
+          schema: 'bucket',
+          params: {
+            field: 'bytes',
+            ranges: [
+              { from: 0, to: 1000 },
+              { from: 1000, to: 2000 }
+            ]
+          }
+        }
+      ]
+    });
+
+    vis.type.requestHandler = requiresSearch ? 'default' : 'none';
+    vis.type.responseHandler = 'none';
+    vis.type.requiresSearch = requiresSearch;
+    return vis;
+  }
+
+  it('calls render complete when editor is rendered', function () {
+    let renderComplete = 0;
+    $scope.renderFunction = () => {
+      renderComplete++;
+    };
+
+    $scope.$emit('render');
+    $scope.$apply();
+    expect(renderComplete).to.equal(1);
+  });
+});

src/ui/public/visualize/__tests__/visualize.js

@@ -27,8 +27,15 @@ describe('visualize directive', function () {
     appState.toJSON = () => { return {}; };
     indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
     searchSource = Private(FixturesStubbedSearchSourceProvider);
+
+    const requiresSearch = false;
+    init(new CreateVis(null, requiresSearch), fixtures.oneRangeBucket);
   }));
 
+  afterEach(() => {
+    $scope.$destroy();
+  });
+
   // basically a parameterized beforeEach
   function init(vis, esResponse) {
     vis.aggs.forEach(function (agg, i) { agg.id = 'agg_' + (i + 1); });
@@ -37,6 +44,7 @@ describe('visualize directive', function () {
     $rootScope.esResponse = esResponse;
     $rootScope.uiState = require('fixtures/mock_ui_state');
     $rootScope.appState = appState;
+    $rootScope.appState.vis = vis.getState();
     $rootScope.searchSource = searchSource;
     $rootScope.savedObject = {
       vis: vis,
@@ -76,11 +84,37 @@ describe('visualize directive', function () {
   }
 
   it('searchSource.onResults should not be called when requiresSearch is false', function () {
-    const requiresSearch = false;
-    init(new CreateVis(null, requiresSearch), fixtures.oneRangeBucket);
-
     searchSource.crankResults();
     $scope.$digest();
     expect(searchSource.getOnResultsCount()).to.be(0);
   });
+
+  it('fetches new data on update event', () => {
+    let counter = 0;
+    $scope.fetch = () => { counter++; };
+    $scope.vis.emit('update');
+    expect(counter).to.equal(1);
+  });
+
+  it('updates the appState in editor mode on update event', () => {
+    $scope.editorMode = true;
+    $scope.appState.vis = {};
+    $scope.vis.emit('update');
+    expect($scope.appState.vis).to.not.equal({});
+  });
+
+  it('sets force flag on force event', () => {
+    $scope.vis.emit('reload');
+    expect($scope.vis.reload).to.equal(true);
+  });
+
+  it('renderComplete is triggered on the element', () => {
+    let counter = 0;
+    $el.on('renderComplete', () => {
+      counter++;
+    });
+    $scope.$emit('renderComplete');
+    expect(counter).to.equal(1);
+  });
+
 });

src/ui/public/visualize/__tests__/visualize_legend.js

@@ -0,0 +1,173 @@
+import $ from 'jquery';
+import _ from 'lodash';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import { VisProvider } from 'ui/vis';
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+
+describe('visualize_legend directive', function () {
+  let $rootScope;
+  let $compile;
+  let $timeout;
+  let $el;
+  let Vis;
+  let indexPattern;
+  let fixtures;
+
+  beforeEach(ngMock.module('kibana', 'kibana/table_vis'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    $rootScope = $injector.get('$rootScope');
+    $compile = $injector.get('$compile');
+    $timeout = $injector.get('$timeout');
+    fixtures = require('fixtures/fake_hierarchical_data');
+    Vis = Private(VisProvider);
+    indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+  }));
+
+  // basically a parameterized beforeEach
+  function init(vis, esResponse) {
+    vis.aggs.forEach(function (agg, i) { agg.id = 'agg_' + (i + 1); });
+
+    $rootScope.vis = vis;
+    $rootScope.visData = esResponse;
+    $rootScope.uiState = require('fixtures/mock_ui_state');
+    $el = $('<visualize-legend>');
+    $compile($el)($rootScope);
+    $rootScope.$apply();
+  }
+
+  function CreateVis(params, requiresSearch) {
+    const vis = new Vis(indexPattern, {
+      type: 'line',
+      params: params || {},
+      aggs: [
+        { type: 'count', schema: 'metric' },
+        {
+          type: 'range',
+          schema: 'bucket',
+          params: {
+            field: 'bytes',
+            ranges: [
+              { from: 0, to: 1000 },
+              { from: 1000, to: 2000 }
+            ]
+          }
+        }
+      ]
+    });
+
+    vis.type.requestHandler = requiresSearch ? 'default' : 'none';
+    vis.type.responseHandler = 'none';
+    vis.type.requiresSearch = false;
+    return vis;
+  }
+
+  it('calls hightlight handler when hightlight function is called', () => {
+    const requiresSearch = false;
+    const vis = new CreateVis(null, requiresSearch);
+    init(vis, fixtures.oneRangeBucket);
+    let highlight = 0;
+    _.set(vis, 'vislibVis.handler.highlight', () => { highlight++; });
+    $rootScope.highlight({ currentTarget: null });
+    expect(highlight).to.equal(1);
+  });
+
+  it('calls unhighlight handler when unhighlight function is called', () => {
+    const requiresSearch = false;
+    const vis = new CreateVis(null, requiresSearch);
+    init(vis, fixtures.oneRangeBucket);
+    let unhighlight = 0;
+    _.set(vis, 'vislibVis.handler.unHighlight', () => { unhighlight++; });
+    $rootScope.unhighlight({ currentTarget: null });
+    expect(unhighlight).to.equal(1);
+  });
+
+  describe('setColor function', () => {
+    beforeEach(() => {
+      const requiresSearch = false;
+      const vis = new CreateVis(null, requiresSearch);
+      init(vis, fixtures.oneRangeBucket);
+    });
+
+    it('sets the color in the UI state', () => {
+      $rootScope.setColor('test', '#ffffff');
+      const colors = $rootScope.uiState.get('vis.colors');
+      expect(colors.test).to.equal('#ffffff');
+    });
+  });
+
+  describe('toggleLegend function', () => {
+    let vis;
+
+    beforeEach(() => {
+      const requiresSearch = false;
+      vis = new CreateVis(null, requiresSearch);
+      init(vis, fixtures.oneRangeBucket);
+    });
+
+    it('sets the color in the UI state', () => {
+      $rootScope.open = true;
+      $rootScope.toggleLegend();
+      $rootScope.$digest();
+      $timeout.flush();
+      $timeout.verifyNoPendingTasks();
+      let legendOpen = $rootScope.uiState.get('vis.legendOpen');
+      expect(legendOpen).to.equal(false);
+
+      $rootScope.toggleLegend();
+      $rootScope.$digest();
+      $timeout.flush();
+      $timeout.verifyNoPendingTasks();
+      legendOpen = $rootScope.uiState.get('vis.legendOpen');
+      expect(legendOpen).to.equal(true);
+    });
+  });
+
+  it('does not update scope.data if visData is null', () => {
+    $rootScope.visData = null;
+    $rootScope.$digest();
+    expect($rootScope.data).to.not.equal(null);
+  });
+
+  it('works without handler set', () => {
+    const requiresSearch = false;
+    const vis = new CreateVis(null, requiresSearch);
+    vis.vislibVis = {};
+    init(vis, fixtures.oneRangeBucket);
+    expect(() => {
+      $rootScope.highlight({ currentTarget: null });
+      $rootScope.unhighlight({ currentTarget: null });
+    }).to.not.throwError();
+  });
+
+  it('getToggleLegendClasses returns correct class', () => {
+    const requiresSearch = false;
+    const vis = new CreateVis(null, requiresSearch);
+    init(vis, fixtures.oneRangeBucket);
+
+    $rootScope.vis.params.legendPosition = 'top';
+    $rootScope.open = true;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-up');
+    $rootScope.open = false;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-down');
+
+    $rootScope.vis.params.legendPosition = 'bottom';
+    $rootScope.open = true;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-down');
+    $rootScope.open = false;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-up');
+
+    $rootScope.vis.params.legendPosition = 'left';
+    $rootScope.open = true;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-left');
+    $rootScope.open = false;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-right');
+
+    $rootScope.vis.params.legendPosition = 'right';
+    $rootScope.open = true;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-right');
+    $rootScope.open = false;
+    expect($rootScope.getToggleLegendClasses()).to.equal('fa-chevron-circle-left');
+  });
+
+});

src/ui/public/visualize/visualization_editor.js

@@ -27,7 +27,7 @@ uiModules
         editorTypes.find(editor => editor.key === vis.type.editor);
       const editor = new Editor(element[0], vis);
 
-      const renderFunction = () => {
+      $scope.renderFunction = () => {
         if (!$scope.vis) return;
         editor.render($scope.visData, $scope.searchSource, getUpdateStatus($scope)).then(() => {
           $scope.$emit('renderComplete');
@@ -36,7 +36,7 @@ uiModules
 
       $scope.$on('render', (event) => {
         event.preventDefault();
-        renderFunction();
+        $scope.renderFunction();
       });
 
       $scope.$on('$destroy', () => {
@@ -44,7 +44,7 @@ uiModules
       });
 
       if (!vis.initialized) {
-        $timeout(() => { renderFunction(); });
+        $timeout(() => { $scope.renderFunction(); });
       }
     }
   };

src/ui/public/visualize/visualize_legend.js

@@ -72,13 +72,10 @@ uiModules.get('kibana')
         switch ($scope.vis.params.legendPosition) {
           case 'top':
             return $scope.open ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down';
-            break;
           case 'bottom':
             return $scope.open ? 'fa-chevron-circle-down' : 'fa-chevron-circle-up';
-            break;
           case 'left':
             return $scope.open ? 'fa-chevron-circle-left' : 'fa-chevron-circle-right';
-            break;
           case 'right':
           default:
             return $scope.open ? 'fa-chevron-circle-right' : 'fa-chevron-circle-left';