Merge pull request #41 from andela-iamao/ft-configure-express-38

#38 Add Express Support

lib/Generate.js

@@ -24,25 +24,35 @@ class Generate {
 
   /**
    * webpack - Generate a webpack config file from the sample
+   * @param {String} withExpress - configuration with express server
    * @returns {Promise} if successful, resolves and pass in the
    * configuration as argument. Else reject and pass the error
    * @memberOf Generate
    */
-  webpack() {
+  webpack(withExpress = 'n') {
     return new Promise((resolve, reject) => {
       fs.readFile(
         path.join(this.mainpath, '/sample/webpack.config.sample'),
         (err, data) => {
+          let webpack = data.toString();
+          if (withExpress === 'y') {
+            webpack = webpack.replace(
+              '\'webpack-dev-server/client?/\',',
+              '//\'webpack-dev-server/client?/\'');
+            webpack = webpack.replace(
+              'webpack/hot/dev-server',
+              'webpack-hot-middleware/client?reload=true');
+          }
           fs.writeFile(
             path.join(
               this.filepath,
               '/webpack.config.js'),
-            data.toString(),
+            webpack,
             (err) => {
               if (err) {
                 return reject(err);
               }
-              return resolve(data.toString());
+              return resolve(webpack);
             });
         });
     });
@@ -108,6 +118,8 @@ class Generate {
           'index.js' : setupInfo.main,
         scripts: {
           test: '',
+          'test:frontend':
+            'NODE_ENV=test mocha -w test/mocha-helper.js test/**/*.spec.js --slow 5000 --compilers js:babel-register',
           start: 'webpack',
           'start-dev': 'webpack-dev-server --config webpack.config.js --open --content-base dist/'
         },
@@ -132,6 +144,34 @@ class Generate {
     });
   }
 
+  /**
+   * eslintrc - Generate a .eslintrc file from the sample
+   * @param {String} entry - name of express server file
+   * @returns {Promise} if successful, resolves and pass in the
+   * configuration as argument. Else reject and pass the error
+   * @memberOf Generate
+   */
+  express(entry) {
+    return new Promise((resolve, reject) => {
+      const main = (!entry || entry === '') ? 'index.js' : entry;
+      fs.readFile(
+        path.join(this.mainpath, '/sample/express.sample'),
+        (err, data) => {
+          fs.writeFile(
+            path.join(
+              this.filepath,
+              `/${main}`),
+            data.toString(),
+            (err) => {
+              if (err) {
+                return reject(err);
+              }
+              resolve(data.toString());
+            });
+        });
+    });
+  }
+
   /**
    * eslintrc - Generate a .eslintrc file from the sample
    * @returns {Promise} if successful, resolves and pass in the
@@ -167,11 +207,17 @@ class Generate {
    */
   all(setupInfo) {
     return new Promise((resolve, reject) => {
-      this.webpack().then(() => {
+      this.webpack(setupInfo.express[0]).then(() => {
         this.eslintrc().then(() => {
           this.package(setupInfo).then(() => {
             this.babelrc().then(() => {
-              resolve();
+              if (setupInfo.express[0] === 'y') {
+                this.express(setupInfo.main).then(() => {
+                  resolve();
+                });
+              } else {
+                resolve();
+              }
             });
           });
         });

sample/About.component.spec.js.sample

@@ -0,0 +1,15 @@
+/* global expect:true */
+/* global shallow:true */
+
+import React from 'react';//eslint-disable-line
+
+import About from '../../src/components/static/About.component.jsx';
+
+describe('<About />', () => {
+  it('should have a heading text of h2', () => {
+    const wrapper = shallow(
+      <About />
+    );
+    expect(wrapper.find('h2')).to.have.length(1);
+  });
+});

sample/Common.component.spec.js.sample

@@ -0,0 +1,14 @@
+/* global expect:true */
+/* global mount:true */
+
+import React from 'react';//eslint-disable-line
+
+import Common from '../../src/components/common/Common.component.jsx';
+
+describe('<Common />', () => {
+  it('should render the child components', () => {
+    const wrapper = mount(<Common ><h3>Common</h3></Common>);
+    expect(wrapper.props().children.type).to.eql('h3');
+    expect(wrapper.props().children.props.children).to.eql('Common');
+  });
+});

sample/Home.component.jsx.sample

@@ -14,7 +14,7 @@ class Home extends React.Component {
    */
   render() {
     return (
-      <h2>Home page</h2>
+      <h2 className=".heading">Home page</h2>
     );
   }
 }

sample/Home.component.spec.js.sample

@@ -1,16 +1,15 @@
 /* global expect:true */
 /* global shallow:true */
-/* global mount:true */
 
 import React from 'react';//eslint-disable-line
 
-import Home from '../../src/components/Home.component';
+import Home from '../../src/components/Home.component.jsx';
 
 describe('<Home />', () => {
   it('should have a heading text', () => {
     const wrapper = shallow(
       <Home />
     );
-    expect(wrapper.find('.heading')).to.have.length(1);
+    expect(wrapper.props()).to.have.property('children');
   });
 });

sample/NotFound.component.jsx.sample

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/**
+ * NotFound - renders a 404 page;
+ * @returns {Object} React element to render
+ */
+export default function NotFound() {
+  return (
+    <div className="full-height flex-center position-ref">
+      <h1>404!</h1>
+    </div>
+  );
+}

sample/NotFound.component.spec.js.sample

@@ -0,0 +1,15 @@
+/* global expect:true */
+/* global shallow:true */
+
+import React from 'react';//eslint-disable-line
+
+import NotFound from '../../src/components/static/NotFound.component.jsx';
+
+describe('<NotFound />', () => {
+  it('should have a heading text of h1', () => {
+    const wrapper = shallow(
+      <NotFound />
+    );
+    expect(wrapper.find('h1')).to.have.length(1);
+  });
+});

sample/Routes.component.jsx.sample

@@ -1,13 +1,15 @@
 import React from 'react';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
-import Common from './common/Common.component';
-import Home from './Home.component';
-import About from './static/About.component';
+import Common from './common/Common.component.jsx';
+import Home from './Home.component.jsx';
+import About from './static/About.component.jsx';
+import NotFound from './static/NotFound.component.jsx';
 
 const routes = (
   <Route path="/" component={Common}>
     <IndexRoute component={Home} />
     <Route path="/about" component={About} />
+    <Route path="/*" component={NotFound} />
   </Route>
 );
 

sample/Routes.component.spec.js.sample

@@ -0,0 +1,14 @@
+/* global expect:true */
+/* global shallow:true */
+
+import React from 'react';//eslint-disable-line
+
+import Routes from '../../src/components/Routes.component.jsx';
+
+describe('<Routes />', () => {
+  it('should have the props for history and routes', () => {
+    const wrapper = shallow(<Routes />);
+    expect(wrapper.props()).to.have.property('history');
+    expect(wrapper.props()).to.have.property('routes');
+  });
+});

sample/dependencies.js

@@ -27,22 +27,25 @@ module.exports = {
     'babel-preset-stage-2': '^6.24.1',
     chai: '^3.5.0',
     'css-loader': '^0.28.4',
-    eslint: '^3.19.0',
-    'file-loader': '^0.11.2',
     enzyme: '^2.8.2',
+    eslint: '^3.19.0',
     'eslint-config-airbnb': '^15.0.1',
     'eslint-plugin-import': '^2.3.0',
     'eslint-plugin-jsx-a11y': '^5.0.3',
     'eslint-plugin-react': '^7.0.1',
     'extract-text-webpack-plugin': '^2.1.2',
+    faker: '^4.1.0',
+    'file-loader': '^0.11.2',
     jsdom: '^9.12.0',
     less: '^2.7.2',
     'less-loader': '^4.0.4',
     moxios: '^0.4.0',
     nock: '^9.0.13',
     'node-sass': '^4.5.3',
+    'react-addons-test-utils': '^15.6.0',
     'redux-mock-store': '^1.2.3',
     'sass-loader': '^6.0.5',
+    sinon: '^2.3.4',
     'style-loader': '^0.18.2',
     'url-loader': '^0.5.8',
     'webpack-dev-middleware': '^1.6.1',

sample/express.sample

@@ -0,0 +1,30 @@
+const express = require('express');
+const path = require('path');
+const webpack = require('webpack');
+
+const app = express();
+
+const PORT = process.env.PORT || 7000;
+
+if (process.env.NODE_ENV !== 'test') {
+  const webpackConfig = require('./webpack.config');
+  const webpackDevMiddleware = require('webpack-dev-middleware');
+  const webpackHotMiddleware = require('webpack-hot-middleware');
+
+  const compiler = webpack(webpackConfig);
+  app.use(webpackDevMiddleware(compiler, {
+    noInfo: true,
+    publicPath: '/'
+  }));
+  app.use(webpackHotMiddleware(compiler));
+}
+
+app.use(express.static(path.join(__dirname, '/dist/')));
+
+app.get('/*', (req, res) => {
+  res.sendFile(path.join(__dirname, '/dist/index.html'));
+});
+
+app.listen(PORT, () => {
+  console.info('==> 🌎 Listening on PORT %s.', PORT);// eslint-disable-line
+});

sample/folder-schema.js

@@ -4,7 +4,7 @@ module.exports = [
       {
         components: [
           { common: ['Common.component.jsx'] },
-          { static: ['About.component.jsx'] },
+          { static: ['About.component.jsx', 'NotFound.component.jsx'] },
           'Routes.component.jsx',
           'Home.component.jsx'
         ]
@@ -30,7 +30,13 @@ module.exports = [
     test: [
       { actions: ['actionTypes.spec.js'] },
       { reducers: ['root.reducer.spec.js'] },
-      { components: ['Home.component.spec.js'] },
+      { components: [
+        'Home.component.spec.js',
+        'About.component.spec.js',
+        'Common.component.spec.js',
+        'Routes.component.spec.js',
+        'NotFound.component.spec.js'
+      ] },
       { e2e: ['e2e.txt'] },
       'mocha-helper.js'
     ]

sample/mocha-helper.js.sample

@@ -4,7 +4,6 @@ import thunk from 'redux-thunk';
 import nock from 'nock';
 import faker from 'faker';
 import * as chai from 'chai';
-import spies from 'chai-spies';
 import sinon from 'sinon';
 import moxios from 'moxios';
 import { mount, shallow, render } from 'enzyme';
@@ -20,13 +19,11 @@ Object.keys(document.defaultView).forEach((property) => {
   }
 });
 
-chai.use(spies);
-
 global.window.localStorage = {
-  getItem: () => {
+  getItem() {
     return 'abc';
   }
-}
+};
 
 global.sinon = sinon;
 global.expect = chai.expect;
@@ -36,7 +33,6 @@ global.nock = nock;
 global.mount = mount;
 global.shallow = shallow;
 global.render = render;
-global.spy = spies;
 global.faker = faker;
 global.moxios = moxios;
 global.navigator = {

sample/style.scss.sample

@@ -0,0 +1,13 @@
+.full-height {
+  height: 100vh;
+}
+
+.flex-center {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.position-ref {
+  position: relative;
+}