@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-thread-sidebar-view.test.js

@@ -1,26 +1,29 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _lodash = _interopRequireDefault(require("lodash"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _pdelay = _interopRequireDefault(require("pdelay"));
-var _fs = _interopRequireDefault(require("fs"));
-var _idMap = _interopRequireDefault(require("../../../lib/idMap"));
-var _gmailThreadSidebarView = _interopRequireDefault(require("./gmail-thread-sidebar-view"));
-var _ContentPanelViewDriver = _interopRequireDefault(require("../../../driver-common/sidebar/ContentPanelViewDriver"));
-var _gmailElementGetter = _interopRequireDefault(require("../gmail-element-getter"));
-var _mockWebstorage = _interopRequireDefault(require("mock-webstorage"));
+/* @flow */
+
+import _ from 'lodash';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import delay from 'pdelay';
+import fs from 'fs';
+import idMap from '../../../lib/idMap';
+import GmailThreadSidebarView from './gmail-thread-sidebar-view';
+import ContentPanelViewDriver from '../../../driver-common/sidebar/ContentPanelViewDriver';
+import GmailElementGetter from '../gmail-element-getter';
+import MockWebStorage from 'mock-webstorage';
+
 jest.mock('../../../lib/dom/make-element-child-stream', () => {
   return () => require('kefir-bus')();
 });
+
 jest.mock('../../../lib/dom/make-mutation-observer-chunked-stream', () => {
   return () => require('kefir-bus')();
 });
-global.localStorage = new _mockWebstorage.default();
+
+global.localStorage = new MockWebStorage();
 global._APP_SIDEBAR_TEST = true;
-Element.prototype.insertAdjacentElement = function (position, el) {
+
+(Element: any).prototype.insertAdjacentElement = function (position, el) {
   switch (position) {
     case 'beforebegin':
       this.parentElement.insertBefore(el, this);
@@ -37,159 +40,310 @@ Element.prototype.insertAdjacentElement = function (position, el) {
       break;
   }
 };
+
 describe('Without add-ons', function () {
   it('construction works', () => {
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), document.createElement('div'));
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      document.createElement('div')
+    );
   });
+
   it('sidebar is added', async () => {
     const container = document.createElement('div');
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), container);
-    const panel = gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    await (0, _pdelay.default)(0);
-    expect(container.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(1);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      container
+    );
+
+    const panel = gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    await delay(0);
+    expect(
+      container.querySelectorAll('.' + idMap('app_sidebar_content_panel'))
+        .length
+    ).toBe(1);
+
     panel.remove();
-    expect(container.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(0);
+    expect(
+      container.querySelectorAll('.' + idMap('app_sidebar_content_panel'))
+        .length
+    ).toBe(0);
   });
+
   it('multiple sidebars can be added', async () => {
     const container = document.createElement('div');
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), container);
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo1',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo2',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    await (0, _pdelay.default)(0);
-    expect(container.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(2);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      container
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo1',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo2',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    await delay(0);
+    expect(
+      container.querySelectorAll('.' + idMap('app_sidebar_content_panel'))
+        .length
+    ).toBe(2);
   });
 });
+
 describe('With new add-ons html', function () {
   it('construction works', () => {
     const sidebarContainer = makeAddonSidebarWithV2HTML();
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), document.createElement('div'), sidebarContainer);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      document.createElement('div'),
+      sidebarContainer
+    );
   });
+
   it('sidebar is added', async () => {
     const sidebarContainer = makeAddonSidebarWithV2HTML();
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), document.createElement('div'), sidebarContainer);
-    const panel = gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    await (0, _pdelay.default)(0);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(1);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('sidebar_button_container')).length).toBe(1);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      document.createElement('div'),
+      sidebarContainer
+    );
+
+    const panel = gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    await delay(0);
+    expect(
+      sidebarContainer.querySelectorAll(
+        '.' + idMap('app_sidebar_content_panel')
+      ).length
+    ).toBe(1);
+    expect(
+      sidebarContainer.querySelectorAll('.' + idMap('sidebar_button_container'))
+        .length
+    ).toBe(1);
+
     panel.remove();
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(0);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('sidebar_button_container')).length).toBe(0);
+    expect(
+      sidebarContainer.querySelectorAll(
+        '.' + idMap('app_sidebar_content_panel')
+      ).length
+    ).toBe(0);
+    expect(
+      sidebarContainer.querySelectorAll('.' + idMap('sidebar_button_container'))
+        .length
+    ).toBe(0);
   });
+
   it('icons get grouped by appName', async () => {
     const sidebarContainer = makeAddonSidebarWithV2HTML();
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), document.createElement('div'), sidebarContainer);
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      appName: 'foo',
-      title: 'foo 1',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      appName: 'foo',
-      title: 'foo 2',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      appName: 'bar',
-      title: 'bar 2',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    await (0, _pdelay.default)(0);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(3);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('sidebar_button_container')).length).toBe(2);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      document.createElement('div'),
+      sidebarContainer
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        appName: 'foo',
+        title: 'foo 1',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        appName: 'foo',
+        title: 'foo 2',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        appName: 'bar',
+        title: 'bar 2',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    await delay(0);
+    expect(
+      sidebarContainer.querySelectorAll(
+        '.' + idMap('app_sidebar_content_panel')
+      ).length
+    ).toBe(3);
+    expect(
+      sidebarContainer.querySelectorAll('.' + idMap('sidebar_button_container'))
+        .length
+    ).toBe(2);
   });
 });
+
 describe('With old add-ons html', function () {
   it('construction works', () => {
     const sidebarContainer = makeAddonSidebarWithV1HTML();
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), document.createElement('div'), sidebarContainer);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      document.createElement('div'),
+      sidebarContainer
+    );
   });
+
   it('sidebar is added', async () => {
     const sidebarContainer = makeAddonSidebarWithV1HTML();
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), document.createElement('div'), sidebarContainer);
-    const panel = gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    await (0, _pdelay.default)(0);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(1);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('sidebar_button_container')).length).toBe(1);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      document.createElement('div'),
+      sidebarContainer
+    );
+
+    const panel = gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    await delay(0);
+    expect(
+      sidebarContainer.querySelectorAll(
+        '.' + idMap('app_sidebar_content_panel')
+      ).length
+    ).toBe(1);
+    expect(
+      sidebarContainer.querySelectorAll('.' + idMap('sidebar_button_container'))
+        .length
+    ).toBe(1);
+
     panel.remove();
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(0);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('sidebar_button_container')).length).toBe(0);
+    expect(
+      sidebarContainer.querySelectorAll(
+        '.' + idMap('app_sidebar_content_panel')
+      ).length
+    ).toBe(0);
+    expect(
+      sidebarContainer.querySelectorAll('.' + idMap('sidebar_button_container'))
+        .length
+    ).toBe(0);
   });
+
   it('icons get grouped by appName', async () => {
     const sidebarContainer = makeAddonSidebarWithV1HTML();
-    const gmailThreadSidebarView = new _gmailThreadSidebarView.default(makeDriver(), document.createElement('div'), sidebarContainer);
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      appName: 'foo',
-      title: 'foo 1',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      appName: 'foo',
-      title: 'foo 2',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    gmailThreadSidebarView.addSidebarContentPanel(_kefir.default.constant({
-      appName: 'bar',
-      title: 'bar 2',
-      iconUrl: '/bar.png',
-      el: document.createElement('div')
-    }));
-    await (0, _pdelay.default)(0);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('app_sidebar_content_panel')).length).toBe(3);
-    expect(sidebarContainer.querySelectorAll('.' + (0, _idMap.default)('sidebar_button_container')).length).toBe(2);
+    const gmailThreadSidebarView = new GmailThreadSidebarView(
+      makeDriver(),
+      document.createElement('div'),
+      sidebarContainer
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        appName: 'foo',
+        title: 'foo 1',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        appName: 'foo',
+        title: 'foo 2',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    gmailThreadSidebarView.addSidebarContentPanel(
+      Kefir.constant({
+        appName: 'bar',
+        title: 'bar 2',
+        iconUrl: '/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+
+    await delay(0);
+    expect(
+      sidebarContainer.querySelectorAll(
+        '.' + idMap('app_sidebar_content_panel')
+      ).length
+    ).toBe(3);
+    expect(
+      sidebarContainer.querySelectorAll('.' + idMap('sidebar_button_container'))
+        .length
+    ).toBe(2);
   });
 });
-function makeDriver(appId, opts) {
+
+function makeDriver(appId, opts): any {
   return {
     getAppId: () => appId || 'test',
-    getOpts: () => opts || {
-      appName: 'Test',
-      appIconUrl: 'testImage.png'
-    },
+    getOpts: () => opts || { appName: 'Test', appIconUrl: 'testImage.png' },
     getLogger() {
       return {
         eventSdkPassive() {},
         error(err, details) {
           console.error('logger.error called:', err, details); //eslint-disable-line no-console
           throw err;
-        }
+        },
       };
-    }
+    },
   };
 }
-function makeAddonSidebarWithV1HTML() {
+
+function makeAddonSidebarWithV1HTML(): HTMLElement {
   const mainContainer = document.createElement('div');
-  mainContainer.innerHTML = _fs.default.readFileSync(__dirname + '/../../../../../test/data/gmail-2017-06-22-gmail-addon-sidebar.html', 'utf8');
-  _gmailElementGetter.default.getMainContentBodyContainerElement = () => mainContainer.querySelector('.bkK');
-  return mainContainer.querySelector('.bnl');
+
+  mainContainer.innerHTML = fs.readFileSync(
+    __dirname +
+      '/../../../../../test/data/gmail-2017-06-22-gmail-addon-sidebar.html',
+    'utf8'
+  );
+
+  (GmailElementGetter: any).getMainContentBodyContainerElement = () =>
+    mainContainer.querySelector('.bkK');
+
+  return (mainContainer.querySelector('.bnl'): any);
 }
-function makeAddonSidebarWithV2HTML() {
+
+function makeAddonSidebarWithV2HTML(): HTMLElement {
   const mainContainer = document.createElement('div');
-  mainContainer.innerHTML = _fs.default.readFileSync(__dirname + '/../../../../../test/data/gmail-2017-09-08-gmail-addon-sidebar.html', 'utf8');
-  _gmailElementGetter.default.getMainContentBodyContainerElement = () => mainContainer.querySelector('.bkK');
-  return mainContainer.querySelector('.bnl');
-}
+
+  mainContainer.innerHTML = fs.readFileSync(
+    __dirname +
+      '/../../../../../test/data/gmail-2017-09-08-gmail-addon-sidebar.html',
+    'utf8'
+  );
+
+  (GmailElementGetter: any).getMainContentBodyContainerElement = () =>
+    mainContainer.querySelector('.bkK');
+
+  return (mainContainer.querySelector('.bnl'): any);
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-thread-view/width-manager.js

@@ -1,29 +1,49 @@
-"use strict";
+/* @flow */
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _idMap = _interopRequireDefault(require("../../../../lib/idMap"));
-class WidthManager {
-  constructor(contentContainerEl, addonSidebarContainerEl) {
+import idMap from '../../../../lib/idMap';
+
+export default class WidthManager {
+  _contentContainerEl: Element;
+  _addonSidebarContainerEl: Element;
+
+  constructor(
+    contentContainerEl: HTMLElement,
+    addonSidebarContainerEl: HTMLElement
+  ) {
     this._contentContainerEl = contentContainerEl;
     this._addonSidebarContainerEl = addonSidebarContainerEl;
   }
+
   fixWidths() {
     // right now width manager really just cares about when
     // there are no icons sdk or native and adds/removes some styling
     // classes accordingly
 
-    const tabList = this._addonSidebarContainerEl.querySelector('[role=tablist]');
+    const tabList =
+      this._addonSidebarContainerEl.querySelector('[role=tablist]');
     if (!tabList) return;
-    if (this._addonSidebarContainerEl.classList.contains((0, _idMap.default)('app_sidebar_in_use'))) {
-      this._contentContainerEl.classList.remove((0, _idMap.default)('container_app_sidebar_no_icons'));
+
+    if (
+      this._addonSidebarContainerEl.classList.contains(
+        idMap('app_sidebar_in_use')
+      )
+    ) {
+      this._contentContainerEl.classList.remove(
+        idMap('container_app_sidebar_no_icons')
+      );
       return;
     }
-    const noIconsVisible = ![...tabList.children].some(child => child.style.display !== 'none');
-    if (noIconsVisible) this._contentContainerEl.classList.add((0, _idMap.default)('container_app_sidebar_no_icons'));else this._contentContainerEl.classList.remove((0, _idMap.default)('container_app_sidebar_no_icons'));
+
+    const noIconsVisible = ![...tabList.children].some(
+      (child) => child.style.display !== 'none'
+    );
+    if (noIconsVisible)
+      this._contentContainerEl.classList.add(
+        idMap('container_app_sidebar_no_icons')
+      );
+    else
+      this._contentContainerEl.classList.remove(
+        idMap('container_app_sidebar_no_icons')
+      );
   }
 }
-exports.default = WidthManager;