COMPASS-470 Add zoom in & out (#741)

* Add View > Zoom Menu items, ipc and renderer implementations

See the Venn Diagram here for whew straddle the two processes:
https://medium.com/@ccnokes/deep-dive-into-electrons-main-and-renderer-processes-7a9599d5c9e2#.uh3qa3j8o

* Add electron-mocha main and renderer tests

1. test/main-process/menu.zoom.test.js: Called by `npm run test-main`.
This unit tests the menu items exist and have keyboard shortcut accelerators
2. test/renderer-process/zoom.test.js: Called by `npm run test-renderer`
This unit tests that calling the zoom functions call the native electron.webFrame.get/setZoomLevel functions.

Architecture based on:
http://stackoverflow.com/questions/34485182/how-to-access-remote-module-from-unit-tests

Also electron-mocha was already a devDependency, we just were not using it, so let’s bump the version and use it:
https://github.com/jprichardson/electron-mocha

* Hack: Move main/renderer process tests from `test` dir into `tests` dir

So “Zoom renderer tests” do not fail:
  Zoom renderer tests
    3) should zoom reset
    4) "after each" hook for "should zoom reset"
…
  3) Zoom renderer tests should zoom reset:
     TypeError: Cannot read property 'setZoomLevel' of undefined
      at zoomReset (src/app/menu-renderer.js:10:10)
      at Context.it (test/renderer-process/zoom.test.js:9:12)

  4) Zoom renderer tests "after each" hook for "should zoom reset":
     TypeError: Cannot read property 'setZoomLevel' of undefined
      at zoomReset (src/app/menu-renderer.js:10:10)
      at Context.afterEach (test/renderer-process/zoom.test.js:6:5)

Also hadron-build does not support the notion of separate testing processes, just a combined one, so we’ll want to revisit this later when we can agree what should go where.

Author: pzrq

package.json

@@ -61,7 +61,7 @@
   "scripts": {
     "start": "hadron-build develop",
     "pretest": "mongodb-runner install && mongodb-runner start --port 27018",
-    "test": "hadron-build test",
+    "test": "npm run test-main && npm run test-renderer && hadron-build test",
     "posttest": "mongodb-runner stop --port 27018",
     "check": "mongodb-js-precommit ./src/app/*.js ./src/app/**/**/*.js ./src/{app/**/*.js,main/**/*.js} ./test/*.js ./src/internal-packages/**/*.js ./src/internal-packages/**/**/*{.js,.jsx} ./src/internal-packages/**/**/**/*{.js,.jsx} ./src/internal-packages/**/**/**/**/*{.js,.jsx}",
     "ci": "npm run check && npm run test",
@@ -70,7 +70,9 @@
     "fmt": "mongodb-js-fmt ./*.js src/{**/*.js,*.js} test/{**/*.js,*.js}",
     "release": "hadron-build release",
     "test-functional": "npm test -- --functional",
+    "test-main": "electron-mocha ./tests/main-process/*.test.js",
     "test-packages": "npm test -- --packages",
+    "test-renderer": "electron-mocha --renderer ./tests/renderer-process/*.test.js",
     "test-unit": "npm test -- --unit",
     "test-release": "npm test -- --release",
     "upload": "hadron-build upload",
@@ -175,7 +177,7 @@
     "chai-enzyme": "^0.5.2",
     "devtron": "^1.4.0",
     "electron-devtools-installer": "^2.0.1",
-    "electron-mocha": "^3.1.1",
+    "electron-mocha": "^3.3.0",
     "electron-prebuilt": "1.2.8",
     "enzyme": "^2.5.1",
     "eslint-config-mongodb-js": "^2.2.0",

src/app/index.js

@@ -59,6 +59,7 @@ var Preferences = require('./models/preferences');
 var User = require('./models/user');
 
 var ApplicationStore = require('hadron-reflux-store').ApplicationStore;
+require('./menu-renderer');
 var Router = require('./router');
 var migrateApp = require('./migrations');
 var metricsSetup = require('./metrics');

src/app/menu-renderer.js

@@ -0,0 +1,31 @@
+const electron = require('electron');
+const ipc = require('hadron-ipc');
+
+const ZOOM_DEFAULT = 0;
+const ZOOM_INCREMENT = 0.5;
+const ZOOM_MAX = 5;
+const ZOOM_MIN = -3;
+
+const zoomReset = () => {
+  return electron.webFrame.setZoomLevel(ZOOM_DEFAULT);
+};
+const zoomIn = () => {
+  const currentZoomLevel = electron.webFrame.getZoomLevel();
+  const newZoomLevel = Math.min(currentZoomLevel + ZOOM_INCREMENT, ZOOM_MAX);
+  return electron.webFrame.setZoomLevel(newZoomLevel);
+};
+const zoomOut = () => {
+  const currentZoomLevel = electron.webFrame.getZoomLevel();
+  const newZoomLevel = Math.max(currentZoomLevel - ZOOM_INCREMENT, ZOOM_MIN);
+  return electron.webFrame.setZoomLevel(newZoomLevel);
+};
+
+ipc.on('window:zoom-reset', zoomReset);
+ipc.on('window:zoom-in', zoomIn);
+ipc.on('window:zoom-out', zoomOut);
+
+module.exports = {
+  zoomReset,
+  zoomIn,
+  zoomOut
+};

src/main/menu.js

@@ -220,6 +220,29 @@ function viewSubMenu() {
           BrowserWindow.getFocusedWindow().reload();
         }
       },
+      separator(),
+      {
+        label: 'Actual Size',
+        accelerator: 'CmdOrCtrl+0',
+        click: function() {
+          ipc.broadcast('window:zoom-reset');
+        }
+      },
+      {
+        label: 'Zoom In',
+        accelerator: 'CmdOrCtrl+Plus',
+        click: function() {
+          ipc.broadcast('window:zoom-in');
+        }
+      },
+      {
+        label: 'Zoom Out',
+        accelerator: 'CmdOrCtrl+-',
+        click: function() {
+          ipc.broadcast('window:zoom-out');
+        }
+      },
+      separator(),
       {
         label: '&Toggle DevTools',
         accelerator: 'Alt+CmdOrCtrl+I',

tests/main-process/menu.zoom.test.js

@@ -0,0 +1,39 @@
+const expect = require('chai').expect;
+const { BrowserWindow, Menu } = require('electron');
+const AppMenu = require('../../src/main/menu');
+const _ = require('lodash');
+
+describe('App Menu', () => {
+  before(function() {
+    const _window = new BrowserWindow({show: false});
+    AppMenu.init();
+    AppMenu.load(_window);
+    const menuTemplate = AppMenu.getTemplate(_window.id);
+    this.fullMenu = Menu.buildFromTemplate(menuTemplate);
+  });
+  context('View sub-menu', () => {
+    before(function() {
+      this.viewSubMenu = _.find(this.fullMenu.items, (menuItem) => {
+        return menuItem.label === '&View';
+      }).submenu;
+    });
+    it('contains a zoom reset item', function() {
+      const zoomResetItem = _.find(this.viewSubMenu.items, (item) => {
+        return item.label === 'Actual Size';
+      });
+      expect(zoomResetItem.accelerator).to.be.equal('CmdOrCtrl+0');
+    });
+    it('contains a zoom in item', function() {
+      const zoomInItem = _.find(this.viewSubMenu.items, (menuItem) => {
+        return menuItem.label === 'Zoom In';
+      });
+      expect(zoomInItem.accelerator).to.be.equal('CmdOrCtrl+Plus');
+    });
+    it('contains a zoom out item', function() {
+      const zoomOutItem = _.find(this.viewSubMenu.items, (menuItem) => {
+        return menuItem.label === 'Zoom Out';
+      });
+      expect(zoomOutItem.accelerator).to.be.equal('CmdOrCtrl+-');
+    });
+  });
+});

tests/renderer-process/zoom.test.js

@@ -0,0 +1,25 @@
+const expect = require('chai').expect;
+const {zoomReset, zoomIn, zoomOut} = require('../../src/app/menu-renderer');
+
+describe('Zoom renderer tests', () => {
+  afterEach(() => {
+    zoomReset();
+  });
+  it('should zoom reset', () => {
+    expect(zoomReset()).to.be.equal(0);
+  });
+  it('should zoom in', () => {
+    expect(zoomIn()).to.be.equal(0.5);
+  });
+  it('should zoom in at least 5x', () => {
+    [1,2,3,4,5].forEach(() => {zoomIn()});
+    expect(zoomIn()).to.be.equal(3);
+  });
+  it('should zoom out', () => {
+    expect(zoomOut()).to.be.equal(-0.5);
+  });
+  it('should zoom out at least 5x', () => {
+    [1,2,3,4,5].forEach(() => {zoomOut()});
+    expect(zoomOut()).to.be.equal(-3);
+  });
+});