[COMPASS-1785] Support Electron Renderer Tests

template/.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig helps developers define and maintain
+# consistent coding styles between different editors and IDEs.
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

template/config/webpack.dev.config.js

@@ -46,9 +46,11 @@ module.exports = {
       fonts: path.join(project.path.src, 'assets/fonts'),
       images: path.join(project.path.src, 'assets/images'),
       less: path.join(project.path.src, 'assets/less'),
+      models: path.join(project.path.src, 'models'),
       plugin: path.join(project.path.src, 'index.js'),
       stores: path.join(project.path.src, 'stores'),
-      storybook: project.path.storybook
+      storybook: project.path.storybook,
+      utils: path.join(project.path.src, 'utils')
     }
   },
   module: {

template/config/webpack.karma.config.js

@@ -0,0 +1,110 @@
+const webpack = require('webpack');
+const path = require('path');
+const project = require('./project');
+
+const GLOBALS = {
+    'process.env': {
+        'NODE_ENV': JSON.stringify('test')
+    },
+    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
+};
+
+module.exports = {
+  target: 'electron-renderer', // webpack should compile node compatible code for tests
+  stats: 'errors-only',
+  externals: {
+    'jsdom': 'window',
+    'react/addons': 'react',
+    'react/lib/ExecutionEnvironment': 'react',
+    'react/lib/ReactContext': 'react',
+    'react-addons-test-utils': 'react-dom',
+  },
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.jsx', '.json', 'less'],
+    alias: {
+      actions: path.join(project.path.src, 'actions'),
+      components: path.join(project.path.src, 'components'),
+      constants: path.join(project.path.src, 'constants'),
+      fonts: path.join(project.path.src, 'assets/fonts'),
+      images: path.join(project.path.src, 'assets/images'),
+      less: path.join(project.path.src, 'assets/less'),
+      models: path.join(project.path.src, 'models'),
+      plugin: path.join(project.path.src, 'index.js'),
+      stores: path.join(project.path.src, 'stores'),
+      storybook: project.path.storybook,
+      utils: path.join(project.path.src, 'utils')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader'},
+          { loader: 'css-loader' }
+        ]
+      },
+      {
+        test: /\.less$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: 'style-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              importLoaders: 1,
+              localIdentName: 'QueryHistory_[name]-[local]__[hash:base64:5]'
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: function () {
+                return [
+                  project.plugin.autoprefixer
+                ];
+              }
+            }
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              noIeCompat: true
+            }
+          }
+        ]
+      },
+      {
+        test: /node_modules\/JSONStream\/index\.js$/,
+        use: [{ loader: 'shebang-loader' }]
+      },
+      {
+        test: /\.(js|jsx)$/,
+        use: [{ loader: 'babel-loader' }],
+        exclude: /(node_modules)/
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg)$/,
+        use: [{
+          loader: 'ignore-loader',
+          query: {
+            limit: 8192,
+            name: 'assets/images/[name]__[hash:base64:5].[ext]'
+          }
+        }]
+      },
+      {
+        test: /\.(woff|woff2|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [{
+          loader: 'ignore-loader',
+          query: {
+            limit: 8192,
+            name: 'assets/fonts/[name]__[hash:base64:5].[ext]'
+          }
+        }],
+      }
+    ]
+  }
+};

template/config/webpack.prod.config.js

@@ -41,9 +41,11 @@ module.exports = {
       fonts: path.join(project.path.src, 'assets/fonts'),
       images: path.join(project.path.src, 'assets/images'),
       less: path.join(project.path.src, 'assets/less'),
+      models: path.join(project.path.src, 'models'),
       plugin: path.join(project.path.src, 'index.js'),
       stores: path.join(project.path.src, 'stores'),
-      storybook: project.path.storybook
+      storybook: project.path.storybook,
+      utils: path.join(project.path.src, 'utils')
     }
   },
   module: {

template/config/webpack.test.config.js

@@ -29,9 +29,11 @@ module.exports = {
       fonts: path.join(project.path.src, 'assets/fonts'),
       images: path.join(project.path.src, 'assets/images'),
       less: path.join(project.path.src, 'assets/less'),
+      models: path.join(project.path.src, 'models'),
       plugin: path.join(project.path.src, 'index.js'),
       stores: path.join(project.path.src, 'stores'),
-      storybook: project.path.storybook
+      storybook: project.path.storybook,
+      utils: path.join(project.path.src, 'utils')
     }
   },
   module: {

template/config/webpack.watch.config.js

@@ -35,9 +35,11 @@ module.exports = {
       fonts: path.join(project.path.src, 'assets/fonts'),
       images: path.join(project.path.src, 'assets/images'),
       less: path.join(project.path.src, 'assets/less'),
+      models: path.join(project.path.src, 'models'),
       plugin: path.join(project.path.src, 'index.js'),
       stores: path.join(project.path.src, 'stores'),
-      storybook: project.path.storybook
+      storybook: project.path.storybook,
+      utils: path.join(project.path.src, 'utils')
     }
   },
   module: {

template/karma.conf.js

@@ -0,0 +1,28 @@
+const webpackConfig = require('./config/webpack.karma.config');
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    singleRun: true,
+    files: [
+      'test/**/*.spec.js'
+    ],
+    reporters: ['mocha'],
+    preprocessors: {
+      'test/**/*.spec.js': ['webpack', 'sourcemap']
+    },
+    browsers: ['Electron'],
+    frameworks: ['mocha', 'chai', 'sinon', 'chai-sinon'],
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true,
+      stats: 'errors-only'
+    },
+    // DEV: `useIframe: false` is for launching a new window instead of using an iframe
+    //   In Electron, iframes don't get `nodeIntegration` priveleges yet windows do.
+    client: {
+      useIframe: false
+    },
+    logLevel: config.LOG_ERROR
+  });
+};

template/package.json

@@ -13,6 +13,7 @@
     "start:prod": "npm run compile && electron --noDevServer ./electron",
     "test": "cross-env NODE_ENV=test mocha-webpack \"./src/**/*.spec.js\"",
     "test:watch": "cross-env NODE_ENV=test mocha-webpack \"./src/**/*.spec.js\" --watch",
+    "test:karma": "cross-env NODE_ENV=test karma start",
     "cover": "nyc npm run test",
     "ci": "npm run check && npm test",
     "fmt": "mongodb-js-fmt ./*.js ./test/*.js",
@@ -63,6 +64,15 @@
     "istanbul-instrumenter-loader": "^3.0.0",
     "jsdom": "^11.1.0",
     "jsdom-global": "^3.0.2",
+    "karma": "^1.7.0",
+    "karma-chai": "^0.1.0",
+    "karma-chai-sinon": "^0.1.5",
+    "karma-electron": "^5.2.1",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.4",
+    "karma-sinon": "^1.0.5",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.4",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "mocha": "^3.4.2",

template/src/actions/actions.js

@@ -0,0 +1,11 @@
+import Reflux from 'reflux';
+
+const {{pascalcase name}}Actions = Reflux.createActions([
+  /**
+   * define your actions as strings below, for example:
+   */
+  'toggleStatus'
+]);
+
+export default {{pascalcase name}}Actions;
+export { {{pascalcase name}}Actions };

template/src/actions/index.js

@@ -1,10 +1,4 @@
-const Reflux = require('reflux');
+import {{pascalcase name}}Actions from './actions';
 
-const {{pascalcase name}}Actions = Reflux.createActions([
-  /**
-   * define your actions as strings below, for example:
-   */
-  'toggleStatus'
-]);
-
-module.exports = {{pascalcase name}}Actions;
+export default {{pascalcase name}}Actions;
+export { {{pascalcase name}}Actions };

template/src/components/toggleButton/index.js → template/src/components/toggle-button/index.js

@@ -1,4 +1,4 @@
-import ToggleButton from './ToggleButton';
+import ToggleButton from './toggle-button';
 
 export default ToggleButton;
 export { ToggleButton };

template/src/components/toggleButton/ToggleButton.jsx → template/src/components/toggle-button/toggle-button.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import styles from './ToggleButton.less';
+import styles from './toggle-button.less';
 
 class ToggleButton extends Component {
   static displayName = 'ToggleButton';

template/src/components/toggleButton/ToggleButton.spec.js → template/src/components/toggle-button/toggle-button.spec.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import ToggleButton from 'components/toggleButton';
-import styles from './ToggleButton.less';
+import ToggleButton from 'components/toggle-button';
+import styles from './toggle-button.less';
 
 describe('ToggleButton [Component]', () => {
   let component;

template/src/components/toggleButton/ToggleButton.stories.js → template/src/components/toggle-button/toggle-button.stories.js

@@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import ComponentPreview from 'storybook/decorators/componentPreview';
 import { withChaptersOptions } from 'constants/storybook';
-import { ToggleButton } from 'components/toggleButton';
+import { ToggleButton } from 'components/toggle-button';
 
 storiesOf('ToggleButton', module)
   .addWithChapters('Example Title', {

template/src/components/{{name}}/{{name}}.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import ToggleButton from 'components/toggleButton';
+import ToggleButton from 'components/toggle-button';
 
 import styles from './{{name}}.less';
 

template/src/components/{{name}}/{{name}}.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import {{pascalcase name}} from 'components/{{name}}';
-import ToggleButton from 'components/toggleButton';
+import ToggleButton from 'components/toggle-button';
 import styles from './{{name}}.less';
 
 describe('{{pascalcase name}} [Component]', () => {

template/src/index.js

@@ -1,4 +1,4 @@
-import {{pascalcase name}}Plugin from './Plugin';
+import {{pascalcase name}}Plugin from './plugin';
 import {{pascalcase name}}Actions from 'actions';
 import {{pascalcase name}}Store from 'stores';
 

template/src/Plugin.spec.js → template/src/plugin.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { StoreConnector } from 'hadron-react-components';
-import {{pascalcase name}}Plugin from './Plugin';
+import {{pascalcase name}}Plugin from './plugin';
 
 describe('{{pascalcase name}} [Plugin]', () => {
   let component;