Merge pull request #20 from RyanCCollins/fix_rc_fix_testing

Fix rc fix testing

Author: RyanCCollins

app/src/containers/FeatureFirstContainer/index.js

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as MyActions from './actions';
 
-class FeatureFirstContainer extends Component {
+export class FeatureFirstContainer extends Component {
   constructor(props) {
     super(props);
     this.initiateLoading = this.initiateLoading.bind(this);
@@ -36,7 +36,7 @@ class FeatureFirstContainer extends Component {
         :
           <div>
             <LogoImage
-              imageSource="https://github.com/RyanCCollins/cdn/raw/master/alumni-webapp/udacity-alumni-small.png?raw=true" 
+              imageSource="https://github.com/RyanCCollins/cdn/raw/master/alumni-webapp/udacity-alumni-small.png?raw=true"
             />
             <div className={styles.headerText}>
               <Header

app/src/containers/FeatureFirstContainer/tests/index.test.js

@@ -0,0 +1,29 @@
+import { FeatureFirstContainer } from '../index';
+import expect from 'expect';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+function setup() {
+  const props = {
+    isLoading: true,
+  };
+  const wrapper = shallow(
+    <FeatureFirstContainer isLoading={props.isLoading} />
+  );
+  return {
+    props,
+    wrapper,
+  };
+}
+describe('<FeatureFirstContainer />', () => {
+  it('should show a loading indicator while loading', () => {
+    const {
+      wrapper,
+    } = setup();
+    expect(
+      wrapper.contains(
+        <h1>LOADING...</h1>
+      )
+    ).toBe(true);
+  });
+});

config/testing/karma.conf.js

@@ -1,14 +1,15 @@
-const webpackConfig = require('../../config/webpack/webpack.test.config');
+const webpackConfig = require('../webpack/webpack.test.babel');
 const argv = require('minimist')(process.argv.slice(2));
 const path = require('path');
 
-// From React Boilerplate
-// See here: https://github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.test.babel.js
 module.exports = (config) => {
   config.set({
     frameworks: ['mocha'],
     reporters: ['coverage', 'mocha'],
-    browsers: ['Chrome'],
+    browsers: process.env.TRAVIS // eslint-disable-line no-nested-ternary
+      ? ['ChromeTravis']
+      : process.env.APPVEYOR
+        ? ['IE'] : ['Chrome'],
 
     autoWatch: false,
     singleRun: true,
@@ -21,15 +22,18 @@ module.exports = (config) => {
 
     files: [
       {
-        pattern: './test_helper.js',
+        pattern: './test-bundler.js',
         watched: false,
         served: true,
         included: true,
       },
     ],
 
     preprocessors: {
-      ['./test_helper.js']: ['webpack', 'sourcemap'], // eslint-disable-line no-useless-computed-key
+      ['./test-bundler.js']: [
+        'webpack',
+        'sourcemap',
+      ],
     },
 
     webpack: webpackConfig,
@@ -55,6 +59,6 @@ module.exports = (config) => {
         { type: 'text-summary' },
       ],
     },
-
+    failOnEmptyTestSuite: false,
   });
 };

config/testing/test-bundler.js

@@ -0,0 +1,20 @@
+// needed for regenerator-runtime
+// (ES7 generator support is required by redux-saga)
+import 'babel-polyfill';
+
+// If we need to use Chai, we'll have already chaiEnzyme loaded
+import chai from 'chai';
+import chaiEnzyme from 'chai-enzyme';
+import chaiJsx from 'chai-jsx';
+
+chai.use(chaiEnzyme());
+chai.use(chaiJsx);
+
+// Include all .js files under `app`, except app.js, reducers.js, and routes.js.
+// This is for isparta code coverage
+const context = require.context(
+  '../../app/src',
+  true,
+  /([^\a]+).test\.js$/
+);
+context.keys().forEach(context);

config/testing/test_helper.js

@@ -1,13 +1,17 @@
+
+/**
+ * TEST WEBPACK CONFIGURATION
+ */
+
 const path = require('path');
 const webpack = require('webpack');
-const ROOT_PATH = path.resolve(__dirname);
-const HtmlwebpackPlugin = require('html-webpack-plugin');
-
 const modules = [
   'app/src',
   'node_modules',
 ];
 
+const ROOT_PATH = path.resolve(__dirname);
+
 module.exports = {
   devtool: 'inline-source-map',
   isparta: {
@@ -16,44 +20,82 @@ module.exports = {
     },
   },
   module: {
+    // Some libraries don't like being run through babel.
+    // If they gripe, put them here.
     noParse: [
-      // If libraries complain about babel, put them here.
+      /node_modules(\\|\/)sinon/,
+      /node_modules(\\|\/)acorn/,
     ],
     preLoaders: [
-      {
-        test: /\.js$/,
+      { test: /\.js$/,
         loader: 'isparta',
         include: path.resolve('app/src'),
       },
     ],
     loaders: [
       { test: /\.json$/, loader: 'json-loader' },
-      { test: /\.scss$/, loader: 'null-loader' },
-      { test: /\.js$/, loader: 'babel', exclude: [/node_modules/] },
-      { test: /\.jpe?g$|\.gif$|\.png$/i, loader: 'null-loader' },
+      { test: /\.css$/, loader: 'null-loader' },
+      {
+        test: /\.module\.scss$/,
+        loader: 'null-loader',
+      },
+      {
+        test: /\.scss$/,
+        exclude: /\.module\.scss$/,
+        loader: 'null-loader',
+      },
+
+      // sinon.js--aliased for enzyme--expects/requires global vars.
+      // imports-loader allows for global vars to be injected into the module.
+      // See https://github.com/webpack/webpack/issues/304
+      { test: /sinon(\\|\/)pkg(\\|\/)sinon\.js/,
+        loader: 'imports?define=>false,require=>false',
+      },
+      { test: /\.js$/,
+        loader: 'babel',
+        exclude: [/node_modules/],
+      },
+      { test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
+        loader: 'null-loader',
+      },
     ],
   },
+
   plugins: [
-    new HtmlwebpackPlugin({
-      title: 'Scalable React Boilerplate',
-      template: 'index.html',
-    }),
+
+    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
+    // inside your code for any environment checks; UglifyJS will automatically
+    // drop any unreachable code.
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
       },
-    }),
-  ],
+    })],
+
+  // Some node_modules pull in Node-specific dependencies.
+  // Since we're running in a browser we have to stub them out. See:
+  // https://webpack.github.io/docs/configuration.html#node
+  // https://github.com/webpack/node-libs-browser/tree/master/mock
+  // https://github.com/webpack/jade-loader/issues/8#issuecomment-55568520
+  node: {
+    fs: 'empty',
+    child_process: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  },
+
+  // required for enzyme to work properly
   externals: {
     jsdom: 'window',
     'react/addons': true,
     'react/lib/ExecutionEnvironment': true,
     'react/lib/ReactContext': 'window',
   },
   resolve: {
-    modulesDirectoris: modules,
+    modulesDirectories: modules,
     modules,
     alias: {
+      // required for enzyme to work properly
       sinon: 'sinon/pkg/sinon',
       components: path.resolve(ROOT_PATH, '../../app/src/components'),
       containers: path.resolve(ROOT_PATH, '../../app/src/containers'),

config/webpack/webpack.test.babel.js

@@ -28,7 +28,9 @@
     "deploy": "NODE_ENV=production `npm bin`/webpack -p",
     "start": "npm run dev",
     "clean": "rm -rf app/dist app/build",
-    "setup": "npm install"
+    "setup": "npm install",
+    "devtest": "webpack-dev-server --config ./config/webpack/webpack.test.babel.js",
+    "test2": "NODE_ENV=test mocha --compilers js:babel-core/register --require config/testing/test-bundler \"./app/src/**/*.test.js\""
   },
   "repository": {
     "type": "git",
@@ -121,6 +123,7 @@
     "react-css-modules": "^3.7.6",
     "react-hot-loader": "^1.3.0",
     "redux-devtools": "^3.0.1",
+    "redux-mock-store": "^1.1.4",
     "webpack-dev-server": "^1.14.0",
     "webpack-visualizer-plugin": "^0.1.5"
   }