fixing onUiState event handler (elastic#21715) (elastic#21874)

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

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+
+import { setupAndTeardownInjectorStub } from 'test_utils/stub_get_active_injector';
+
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+
+import { VisProvider } from '../../../vis';
+import { VisualizeDataLoader } from '../visualize_data_loader';
+
+describe('visualize data loader', () => {
+
+  let visualizeDataLoader;
+
+  beforeEach(ngMock.module('kibana', 'kibana/directive'));
+  beforeEach(ngMock.inject((Private) => {
+    const indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+    const Vis = Private(VisProvider);
+
+    // Create a new Vis object
+    const vis = new Vis(indexPattern, {
+      type: 'pie',
+      params: {},
+      aggs: [
+        { type: 'count', schema: 'metric' },
+        {
+          type: 'range',
+          schema: 'bucket',
+          params: {
+            field: 'bytes',
+            ranges: [
+              { from: 0, to: 1000 },
+              { from: 1000, to: 2000 }
+            ]
+          }
+        }
+      ]
+    });
+
+    visualizeDataLoader = new VisualizeDataLoader(vis, Private);
+  }));
+  setupAndTeardownInjectorStub();
+
+  it('should have a requestHandler', () => {
+    expect(visualizeDataLoader.requestHandler).to.be.a('function');
+  });
+
+  it('should have a responseHandler', () => {
+    expect(visualizeDataLoader.responseHandler).to.be.a('function');
+  });
+
+  describe('fetch', () => {
+    it('should be a function', () => {
+      expect(visualizeDataLoader.fetch).to.be.a('function');
+    });
+  });
+});

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

@@ -33,6 +33,7 @@ import { EmbeddedVisualizeHandler } from '../embedded_visualize_handler';
 import { Inspector } from '../../../inspector/inspector';
 import { dispatchRenderComplete } from '../../../render_complete';
 import { VisualizeDataLoader } from '../visualize_data_loader';
+import { PersistedState } from '../../../persisted_state';
 
 describe('visualize loader', () => {
 
@@ -41,6 +42,7 @@ describe('visualize loader', () => {
   let $rootScope;
   let loader;
   let mockedSavedObject;
+  let sandbox;
 
   function createSavedObject() {
     return {
@@ -99,8 +101,10 @@ describe('visualize loader', () => {
 
     // Setup savedObject
     mockedSavedObject = createSavedObject();
+
+    sandbox = sinon.sandbox.create();
     // Mock savedVisualizations.get to return 'mockedSavedObject' when id is 'exists'
-    sinon.stub(savedVisualizations, 'get').callsFake((id) =>
+    sandbox.stub(savedVisualizations, 'get').callsFake((id) =>
       id === 'exists' ? Promise.resolve(mockedSavedObject) : Promise.reject()
     );
   }));
@@ -109,6 +113,12 @@ describe('visualize loader', () => {
     loader = await getVisualizeLoader();
   });
 
+  afterEach(() => {
+    if (sandbox) {
+      sandbox.restore();
+    }
+  });
+
   describe('getVisualizeLoader', () => {
 
     it('should return a promise', () => {
@@ -228,7 +238,7 @@ describe('visualize loader', () => {
 
       it('should allow opening the inspector of the visualization and return its session', () => {
         const handler = loader.embedVisualizationWithSavedObject(newContainer()[0], createSavedObject(), {});
-        sinon.spy(Inspector, 'open');
+        sandbox.spy(Inspector, 'open');
         const inspectorSession = handler.openInspector();
         expect(Inspector.open.calledOnce).to.be(true);
         expect(inspectorSession.close).to.be.a('function');
@@ -302,8 +312,8 @@ describe('visualize loader', () => {
         expect(container.find('[data-test-subj="visualizationLoader"]').attr('data-added')).to.be('value');
       });
 
-      it('should allow updating the time range of the visualization', async () => {
-        const spy = sinon.spy(VisualizeDataLoader.prototype, 'fetch');
+      describe('should allow updating the time range of the visualization', async () => {
+        const spy = sandbox.spy(VisualizeDataLoader.prototype, 'fetch');
 
         const handler = loader.embedVisualizationWithSavedObject(newContainer()[0], createSavedObject(), {
           timeRange: { from: 'now-7d', to: 'now' }
@@ -323,6 +333,28 @@ describe('visualize loader', () => {
         sinon.assert.calledOnce(spy);
         sinon.assert.calledWith(spy, sinon.match({ timeRange: { from: 'now-10d/d', to: 'now' } }));
       });
+
+      it('should not set forceFetch on uiState change', async () => {
+        const spy = sandbox.spy(VisualizeDataLoader.prototype, 'fetch');
+
+        const uiState = new PersistedState();
+        loader.embedVisualizationWithSavedObject(newContainer()[0], createSavedObject(), {
+          timeRange: { from: 'now-7d', to: 'now' },
+          uiState: uiState,
+        });
+
+        // Wait for the initial fetch and render to happen
+        await timeout(150);
+        spy.resetHistory();
+
+        uiState.set('property', 'value');
+
+        // Wait for fetch debounce to happen (as soon as we use lodash 4+ we could use fake timers here for the debounce)
+        await timeout(150);
+
+        sinon.assert.calledOnce(spy);
+        sinon.assert.calledWith(spy, sinon.match({ forceFetch: false }));
+      });
     });
 
   });

src/ui/public/visualize/loader/embedded_visualize_handler.ts

@@ -105,7 +105,7 @@ export class EmbeddedVisualizeHandler {
 
     this.vis.on('update', this.handleVisUpdate);
     this.vis.on('reload', this.reload);
-    this.uiState.on('change', this.fetchAndRender);
+    this.uiState.on('change', this.onUiStateChange);
     timefilter.on('autoRefreshFetch', this.reload);
 
     this.dataLoader = new VisualizeDataLoader(vis, Private);
@@ -165,7 +165,7 @@ export class EmbeddedVisualizeHandler {
     this.vis.removeListener('reload', this.reload);
     this.vis.removeListener('update', this.handleVisUpdate);
     this.element.removeEventListener('renderComplete', this.onRenderCompleteListener);
-    this.uiState.off('change', this.fetchAndRender);
+    this.uiState.off('change', this.onUiStateChange);
     visualizationLoader.destroy(this.element);
     this.renderCompleteHelper.destroy();
   }
@@ -226,6 +226,10 @@ export class EmbeddedVisualizeHandler {
     this.element.removeAttribute(LOADING_ATTRIBUTE);
   };
 
+  private onUiStateChange = () => {
+    this.fetchAndRender();
+  };
+
   /**
    * Fetches new data and renders the chart. This will happen debounced for a couple
    * of milliseconds, to bundle fast successive calls into one fetch and render,