Add Jest test runner

Add unit tests to windowScale util

.babelrc

@@ -8,11 +8,6 @@
     },
     "development": {
       "presets": ["react-hmre"]
-    },
-    "test": {
-      "plugins": [
-        ["webpack-loaders", { "config": "webpack.config.test.js", "verbose": false }]
-      ]
     }
   }
 }

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
   "env": {
     "browser": true,
     "mocha": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "rules": {
     "no-unused-expressions": ["error", { "allowShortCircuit": true }],

.jest.json

@@ -0,0 +1,39 @@
+{
+  "verbose": true,
+  "testRegex": "(/__tests__/.*|(\\.|/)spec)\\.jsx?$",
+  "setupFiles": ["<rootDir>/test/setup.js"],
+  "modulePaths": [
+    "<rootDir>/app",
+    "<rootDir>/app/actions",
+    "<rootDir>/app/api",
+    "<rootDir>/app/components",
+    "<rootDir>/app/containers",
+    "<rootDir>/app/reducers",
+    "<rootDir>/app/selectors",
+    "<rootDir>/app/static",
+    "<rootDir>/app/store",
+    "<rootDir>/app/types",
+    "<rootDir>/app/utils"
+  ],
+  "moduleFileExtensions": ["js", "jsx", "test.js"],
+  "moduleDirectories": ["node_modules"],
+  "moduleNameMapper": {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+    "\\.(css|less)$": "identity-obj-proxy"
+  },
+  "collectCoverage": true,
+  "collectCoverageFrom": [
+    "app/**/*.{js}",
+    "!**/node_modules/**",
+    "!**/vendor/**",
+    "!**/dist/**",
+    "!**/containers/**",
+    "!**/__tests__/**",
+    "!**/processIsRunning.js",
+    "!**/*.test.js",
+    "!**/*.development.js",
+    "!app/index.main.js"
+  ],
+  "coverageReporters": ["text"],
+  "coveragePathIgnorePatterns": ["<rootDir>/build/", "<rootDir>/node_modules/", "<rootDir>/app/node_modules/", "<rootDir>/app/dist", "<rootDir>/app/types"]
+}

__mocks__/__electron.js

@@ -0,0 +1,17 @@
+const electron = jest.genMockFromModule('electron');
+
+electron.screen = {};
+
+const primaryDisplay = {
+  workAreaSize: {
+    width: 1920
+  }
+};
+
+electron.screen.setPrimaryDisplayWidth = width => {
+  primaryDisplay.workAreaSize.width = width;
+};
+
+electron.screen.getPrimaryDisplay = () => primaryDisplay;
+
+module.exports = electron;

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

app/index.renderer.js

@@ -1,4 +1,3 @@
-// @flow
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';

app/utils/__tests__/windowScale.js

@@ -0,0 +1,59 @@
+import { SIZES, MIN_FACTOR, MAX_FACTOR, clampScaleFactor, getInitialWindowDimensions, getSize } from '../windowScale';
+
+jest.mock('electron', function electronMock () {
+  this.width = 1920;
+  const screen = {
+    getPrimaryDisplay: () => ({
+      workAreaSize: {
+        width: this.width
+      }
+    })
+  };
+  return {
+    screen,
+    setWidth: _width => { this.width = _width; }
+  };
+});
+
+const testSizes = [{ width: 1920 }, { width: 800, height: 600 }].concat(SIZES);
+
+describe('util: windowScale', () => {
+  it(`clamps scale factors below ${MIN_FACTOR}`, () => {
+    const below = clampScaleFactor(0.1);
+
+    expect(below).toBe(MIN_FACTOR);
+  });
+
+  it(`clamps scale factors above ${MAX_FACTOR}`, () => {
+    const above = clampScaleFactor(2);
+
+    expect(above).toBe(MAX_FACTOR);
+  });
+
+  it(`doesn't clamp values between ${MIN_FACTOR} and ${MAX_FACTOR}`, () => {
+    const within = clampScaleFactor(1);
+
+    expect(within).toBeLessThanOrEqual(MAX_FACTOR);
+    expect(within).toBeGreaterThanOrEqual(MIN_FACTOR);
+  });
+
+  testSizes.forEach(size => {
+    it(`ensures the initial window size fits the screen's dimensions (screen width: ${size.width})`, () => {
+      require('electron').setWidth(size.width);
+      const result = getInitialWindowDimensions();
+      expect(result.dimensions.width).toBeLessThanOrEqual(size.width);
+      expect(result.scale).toBeLessThanOrEqual(MAX_FACTOR);
+      expect(result.scale).toBeGreaterThanOrEqual(MIN_FACTOR);
+    });
+  });
+
+  it('infers a window size based on a scale factor', () => {
+    const dimensions1 = getSize(1);
+    const dimensions125 = getSize(1.25);
+    const dimensions08 = getSize(0.8);
+
+    expect(dimensions08).toEqual({ width: 1024, height: 576 });
+    expect(dimensions1).toEqual({ width: 1280, height: 720 });
+    expect(dimensions125).toEqual({ width: 1600, height: 900 });
+  });
+});

app/utils/index.test.js

@@ -0,0 +1,9 @@
+export { default as bind } from './bind';
+export { default as lcuRequest } from './lcuRequest';
+export { validatePath, validatePathSync } from './validatePath';
+export { default as dispatchToRenderer } from './dispatchToRenderer';
+export { default as parseLockfile } from './parseLockfile';
+export { default as processIsRunning } from './processIsRunning';
+export { default as env } from './env';
+
+module.exports.windowScale = require('./windowScale');

app/utils/windowScale.js

@@ -1,9 +1,12 @@
 import electron from 'electron';
 
-const SIZES = [
+export const MIN_FACTOR = 0.8;
+export const MAX_FACTOR = 1.25;
+
+export const SIZES = [
   { width: 1600, height: 900 },
   { width: 1280, height: 720 },
-  { width: 1024, height: 578 }
+  { width: 1024, height: 576 }
 ];
 
 export function computeScaleFactor (width) {
@@ -18,9 +21,9 @@ export function getSize (factor) {
 }
 
 export function clampScaleFactor (_factor) {
-  let factor = _factor;
-  if (factor > 1.25) factor = 1.25;
-  if (factor < 0.75) factor = 0.75;
+  let factor = Number(_factor);
+  if (factor > MAX_FACTOR) factor = MAX_FACTOR;
+  if (factor < MIN_FACTOR) factor = MIN_FACTOR;
   return factor;
 }
 
@@ -32,12 +35,15 @@ export function getScaleFactor (width) {
 export function getInitialWindowDimensions () {
   const primaryDisplay = electron.screen.getPrimaryDisplay();
   const workAreaWidth = primaryDisplay.workAreaSize.width;
-  const finalDimensions = SIZES.reduce((prev, curr) => {
-    if (Math.abs(curr.width - workAreaWidth) < Math.abs(prev.width - workAreaWidth)) {
+  const workAreaHeight = primaryDisplay.workAreaSize.height;
+  const finalDimensions = SIZES.reduceRight((prev, curr) => {
+    // if it fits the screen, use this size
+    if (workAreaWidth - curr.width > 0) {
       return curr;
     }
+    // otherwise take the previous size that did fit
     return prev;
-  });
+  }, { width: workAreaWidth, height: workAreaHeight });
   return {
     dimensions: finalDimensions,
     scale: getScaleFactor(finalDimensions.width)

package.json

@@ -12,15 +12,18 @@
   "build": {
     "appId": "org.jinx.LoLSkinsViewer",
     "category": "public.app-category.tools",
-    "publish": [{
-      "provider": "github"
-    }],
+    "publish": [
+      {
+        "provider": "github"
+      }
+    ],
     "directories": {
       "buildResources": "build",
       "output": "release"
     },
     "dmg": {
-      "contents": [{
+      "contents": [
+        {
           "x": 410,
           "y": 150,
           "type": "link",
@@ -55,6 +58,7 @@
     "asar": "^0.13.0",
     "babel-core": "^6.18.2",
     "babel-eslint": "^7.1.1",
+    "babel-jest": "^18.0.0",
     "babel-loader": "^6.2.8",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-dev-expression": "^0.2.1",
@@ -69,7 +73,6 @@
     "babel-preset-react-optimize": "^1.0.1",
     "babel-preset-stage-0": "^6.16.0",
     "babel-register": "^6.18.0",
-    "chai": "^3.5.0",
     "concurrently": "^3.1.0",
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^3.1.3",
@@ -95,10 +98,11 @@
     "fbjs-scripts": "^0.7.1",
     "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.24.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^18.1.0",
     "jsdom": "^9.8.3",
     "json-loader": "^0.5.4",
     "minimist": "^1.2.0",
-    "mocha": "^3.2.0",
     "node-sass": "^4.0.0",
     "react-addons-test-utils": "^15.4.1",
     "redux-logger": "^2.7.4",
@@ -144,7 +148,7 @@
     "package-win": "npm run build && build --win --x64",
     "postinstall": "concurrently \"install-app-deps\" \"node node_modules/fbjs-scripts/node/check-dev-engines.js package.json\"",
     "start-hot": "cross-env HOT=1 NODE_ENV=development electron ./app/dist/main",
-    "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 mocha --retries 2 --compilers js:babel-register --recursive --require ./test/setup.js test/**/*.spec.js",
+    "test": "jest --config .jest.json",
     "test-e2e": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 mocha --retries 2 --compilers js:babel-register --require ./test/setup.js ./test/e2e.js",
     "test-watch": "npm test -- --watch"
   },

test/setup.js

@@ -1,9 +1,3 @@
-import 'babel-polyfill';
-import { jsdom } from 'jsdom';
-
-global.document = jsdom('<!doctype html><html><body></body></html>');
-global.window = document.defaultView;
-global.navigator = global.window.navigator;
 window.localStorage = window.sessionStorage = {
   getItem (key) {
     return this[key];