[ui/resize_checker] extract from vislib and use resize-observer polyf…

…ill (#9439)

package.json

@@ -177,6 +177,7 @@
     "redux": "3.0.0",
     "redux-thunk": "0.1.0",
     "request": "2.61.0",
+    "resize-observer-polyfill": "1.2.1",
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
     "rjs-repack-loader": "1.0.6",

src/core_plugins/console/public/src/sense_editor_resize.js

@@ -1,4 +1,4 @@
-import ResizeCheckerProvider from 'ui/vislib/lib/resize_checker'
+import { ResizeCheckerProvider } from 'ui/resize_checker'
 
 export function useResizeCheckerProvider(Private) {
   const ResizeChecker = Private(ResizeCheckerProvider);

src/ui/public/resize_checker/__tests__/resize_checker.js

@@ -0,0 +1,145 @@
+import $ from 'jquery';
+import { delay, fromNode } from 'bluebird';
+import expect from 'expect.js';
+import sinon from 'auto-release-sinon';
+
+import ngMock from 'ng_mock';
+import EventsProvider from 'ui/events';
+import NoDigestPromises from 'test_utils/no_digest_promises';
+
+import { ResizeCheckerProvider } from '../resize_checker';
+
+describe('Resize Checker', () => {
+  NoDigestPromises.activateForSuite();
+
+  const teardown = [];
+  let setup;
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(($injector) => {
+    setup = () => {
+      const Private = $injector.get('Private');
+      const ResizeChecker = Private(ResizeCheckerProvider);
+      const EventEmitter = Private(EventsProvider);
+
+      const createEl = () => {
+        const el = $('<div>').appendTo('body').get(0);
+        teardown.push(() => $(el).remove());
+        return el;
+      };
+
+      const createChecker = el => {
+        const checker = new ResizeChecker(el);
+        teardown.push(() => checker.destroy());
+        return checker;
+      };
+
+      const createListener = () => {
+        let resolveFirstCallPromise;
+        const listener = sinon.spy(() => resolveFirstCallPromise());
+        listener.firstCallPromise = new Promise(resolve => (resolveFirstCallPromise = resolve));
+        return listener;
+      };
+
+      return { EventEmitter, createEl, createChecker, createListener };
+    };
+  }));
+
+  afterEach(() => {
+    teardown.splice(0).forEach(fn => {
+      fn();
+    });
+  });
+
+  describe('contruction', () => {
+    it('accepts a jQuery wrapped element', () => {
+      const { createChecker } = setup();
+
+      createChecker($('<div>'));
+    });
+  });
+
+  describe('events', () => {
+    it('is an event emitter', () => {
+      const { createEl, createChecker, EventEmitter } = setup();
+
+      const checker = createChecker(createEl());
+      expect(checker).to.be.a(EventEmitter);
+    });
+
+    it('emits a "resize" event asynchronously', async () => {
+      const { createEl, createChecker, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      $(el).height(100);
+      sinon.assert.notCalled(listener);
+      await listener.firstCallPromise;
+      sinon.assert.calledOnce(listener);
+    });
+  });
+
+  describe('#modifySizeWithoutTriggeringResize()', () => {
+    it(`does not emit "resize" events caused by the block`, async () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      checker.modifySizeWithoutTriggeringResize(() => {
+        $(el).height(100);
+      });
+      await delay(1000);
+      sinon.assert.notCalled(listener);
+    });
+
+    it('does emit "resize" when modification is made between the block and resize notification', async () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      checker.modifySizeWithoutTriggeringResize(() => {
+        $(el).height(100);
+      });
+      sinon.assert.notCalled(listener);
+      $(el).height(200);
+      await listener.firstCallPromise;
+      sinon.assert.calledOnce(listener);
+    });
+  });
+
+  describe('#destroy()', () => {
+    it('destroys internal observer instance', () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const checker = createChecker(createEl());
+      const listener = createListener();
+
+      checker.destroy();
+      expect(!checker._observer).to.be(true);
+    });
+
+    it('does not emit future resize events', async () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      checker.destroy();
+
+      $(el).height(100);
+      await delay(1000);
+      sinon.assert.notCalled(listener);
+    });
+  });
+});

src/ui/public/resize_checker/index.js

@@ -0,0 +1 @@
+export { ResizeCheckerProvider } from './resize_checker';