Shameful, large commit

ntdb · ntdb · commit 4702c81eaaa2 · 2016-03-19T12:45:37.000-07:00
[ADD] Basic testing framework
[ADD] CSS Modules
[CHG] Organization
[CHG] Update all dependencies to latest
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,20 @@
 {
-  "stage": 0
+  "presets": [
+    "es2015",
+    "react",
+    "stage-1"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        [
+          "babel-plugin-webpack-loaders",
+          {
+            "config": "./webpack/runtime.webpack.config.js",
+            "verbose": false
+          }
+        ]
+      ]
+    }
+  }
 }
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,13 @@
 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "rules": {
     "comma-dangle": 0,
-    'no-unused-vars': [2, {     // http://eslint.org/docs/rules/no-unused-vars
-      'vars': 'local',
-      'args': 'after-used',
-      'argsIgnorePattern': '^_'
-    }]
+    "no-unused-vars": [2, {     // http://eslint.org/docs/rules/no-unused-vars
+      "vars": "local",
+      "args": "after-used",
+      "argsIgnorePattern": "^_"
+    }],
+    "react/prefer-stateless-function": 0 // this is annoying in a boilerplate
   }
 }
diff --git a/README.md b/README.md
@@ -11,6 +11,9 @@ Frontend scaffold: Webpack, Babel, Sass, React, Redux, ESLint
 * `npm install -g webpack-dev-server`
 * `npm start`
 
+## Test
+* `npm test`
+
 ## Build
 * Set `['output']['publicPath']` to your deployment URL in `webpack-production.config.js`
 * npm run build
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "start": "node server.js",
-    "build": "webpack -p --config webpack-production.config.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack -p --config webpack/webpack-production.config.js",
+    "test": "NODE_ENV=test BABEL_DISABLE_CACHE=1 babel-tape-runner tests/**/*.js | faucet"
   },
   "keywords": [
     "scaffold",
@@ -25,31 +25,43 @@
   "license": "ISC",
   "dependencies": {
     "jsonp": "^0.2.0",
-    "lodash": "^3.10.1",
-    "node-libs-browser": "^0.5.2",
+    "lodash": "^4.6.1",
+    "node-libs-browser": "^1.0.0",
     "react": "^0.14.0",
     "react-dom": "^0.14.0",
     "react-redux": "^4.0.0",
     "redux": "^3.0.2",
     "webpack": "^1.10.1"
   },
   "devDependencies": {
-    "autoprefixer-loader": "^2.0.0",
-    "babel-core": "^5.6.20",
-    "babel-eslint": "^4.1.1",
-    "babel-loader": "^5.3.1",
-    "css-loader": "^0.17.0",
-    "eslint": "^1.3.1",
-    "eslint-config-airbnb": "0.0.8",
+    "autoprefixer-loader": "^3.2.0",
+    "babel-core": "^6.7.2",
+    "babel-eslint": "^5.0.0",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-webpack-loaders": "^0.3.10",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
+    "babel-tape-runner": "^2.0.1",
+    "css-loader": "^0.23.1",
+    "eslint": "^2.4.0",
+    "eslint-config-airbnb": "6.1.0",
     "eslint-loader": "^1.0.0",
-    "eslint-plugin-react": "^3.3.1",
-    "extract-text-webpack-plugin": "^0.8.2",
+    "eslint-plugin-react": "^4.2.3",
+    "estraverse-fb": "^1.3.1",
+    "extend-tape": "^1.2.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "faucet": "0.0.1",
     "file-loader": "^0.8.4",
     "node-sass": "^3.2.0",
+    "react-addons-test-utils": "^0.14.7",
     "react-hot-loader": "^1.2.8",
-    "sass-loader": "^2.0.1",
+    "react-unit": "^1.2.1",
+    "sass-loader": "^3.2.0",
     "scss-lint-loader": "^1.0.1",
-    "style-loader": "^0.12.3",
+    "style-loader": "^0.13.0",
+    "tape": "^4.5.1",
+    "tape-jsx-equals": "^1.0.0",
     "url-loader": "^0.5.6",
     "webpack-dev-server": "^1.10.1",
     "webpack-notifier": "^1.2.1"
diff --git a/server.js b/server.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
-const config = require('./webpack.config');
+const config = require('./webpack/webpack.config');
 
 new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
diff --git a/source/components/name/Name.js b/source/components/name/Name.js
@@ -0,0 +1,23 @@
+import React, { Component, PropTypes } from 'react';
+
+class Name extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    actions: PropTypes.object.isRequired
+  }
+  constructor(props, context) {
+    super(props, context);
+    this.displayName = 'Name';
+  }
+  removeName = () => {
+    this.props.actions.deleteName(this.props.name);
+  }
+  render() {
+    const { name } = this.props;
+    return (
+      <p>{name} <a onClick={this.removeName}>(remove)</a></p>
+    );
+  }
+}
+
+export default Name;
diff --git a/source/components/nameList/nameList.js b/source/components/nameList/nameList.js
@@ -1,4 +1,7 @@
 import React, { Component, PropTypes } from 'react';
+import Name from '../name/Name';
+
+import styles from './NameList.scss';
 
 class NameList extends Component {
   static propTypes = {
@@ -9,22 +12,17 @@ class NameList extends Component {
     super(props, context);
     this.displayName = 'NameList';
   }
-  removeName(name) {
-    this.props.actions.deleteName(name);
-  }
-  addName() {
+  addName = () => {
     const random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
     this.props.actions.addName(random);
   }
   render() {
-    const { names } = this.props;
+    const { names, actions } = this.props;
     return (
       <div>
-        <h3>Names!</h3>
-        {names.map(name =>
-          <p key={name}>{name} <a onClick={this.removeName.bind(this, name)}>(remove)</a></p>
-        )}
-        <a onClick={this.addName.bind(this)}>Add Name</a>
+        <h3 className={styles.header}>Names!</h3>
+        {names.map(name => <Name key={name} name={name} actions={actions} />)}
+        <a onClick={this.addName}>Add Name</a>
       </div>
     );
   }
diff --git a/source/components/nameList/nameList.scss b/source/components/nameList/nameList.scss
@@ -0,0 +1,3 @@
+.header {
+  color: red;
+}
diff --git a/source/configureStore.js b/source/configureStore.js
diff --git a/source/containers/App/App.js b/source/containers/App/App.js
@@ -1,8 +1,10 @@
 import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import NameList from '../components/nameList';
-import * as NameActions from '../data/names';
+import NameList from '../../components/nameList/NameList';
+import * as NameActions from '../../data/names';
+
+import './App.scss';
 
 class App extends Component {
   static propTypes = {
diff --git a/source/containers/App/App.scss b/source/containers/App/App.scss
diff --git a/source/data/names.js b/source/data/names.js
@@ -8,12 +8,12 @@ const initialState = [];
 // REDUCER
 export default function names(state = initialState, action) {
   switch (action.type) {
-  case ADD_NAME:
-    return [...state, action.name];
-  case DELETE_NAME:
-    return state.filter((name) => name !== action.name);
-  default:
-    return state;
+    case ADD_NAME:
+      return [...state, action.name];
+    case DELETE_NAME:
+      return state.filter((name) => name !== action.name);
+    default:
+      return state;
   }
 }
 
diff --git a/source/data/reducer.js b/source/data/reducer.js
diff --git a/source/index.js b/source/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import App from './containers/App';
+import App from './containers/App/App';
 import configureStore from './configureStore';
-import '../styles/main';
+import './index.scss';
 
 const store = configureStore();
 
diff --git a/source/index.scss b/source/index.scss
diff --git a/tests/components/nameList.js b/tests/components/nameList.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { createRenderer } from 'react-addons-test-utils';
+// import createComponent from 'react-unit';
+import tape from 'tape';
+import addAssertions from 'extend-tape';
+import jsxEquals from 'tape-jsx-equals';
+const test = addAssertions(tape, {jsxEquals});
+
+// import '../../source/components/nameList/nameList.scss';
+
+// Component to test
+import NameList from '../../source/components/nameList/nameList';
+
+test('----- React Component Tests: NameList -----', (t) => {
+  // Shallow rendering: Render React element only *one* level deep
+  // const component = createComponent.shallow(<NameList names={['Nate', 'David']} />);
+
+  // Test component props and content
+  // t.equal(component.props.className, 'default-class', 'ClassName props of component should equal "share"');
+  // t.equal(component.text, 'share', 'Label props of component should be rendered as Button text "share"');
+
+  // Test rendered output
+  const renderer = createRenderer();
+  renderer.render(<NameList names={['Nate', 'David']} />);
+  const result = renderer.getRenderOutput();
+  t.jsxEquals(result, (
+      <div>
+        <h3>Names!</h3>
+          <p key="Nate">"Nate"<a>(remove)</a></p>
+        )}
+        <a>Add Name</a>
+      </div>
+  ));
+
+  t.end();
+});
diff --git a/webpack/runtime.webpack.config.js b/webpack/runtime.webpack.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  output: {
+    // YOU NEED TO SET libraryTarget: 'commonjs2'
+    libraryTarget: 'commonjs2',
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.scss$/,
+        loaders: [
+          'style-loader',
+          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+          'autoprefixer-loader?browsers=last 2 version',
+          'sass-loader'
+        ],
+      },
+    ],
+  },
+};
diff --git a/webpack/webpack-common.config.js b/webpack/webpack-common.config.js
@@ -8,44 +8,39 @@ module.exports = {
     {
       test: /\.js$/,
       loader: 'eslint-loader',
-      include: path.join(__dirname, 'source/scripts')
-    },
-    {
-      test: /\.scss$/,
-      loader: 'scss-lint-loader',
-      include: path.join(__dirname, 'source/styles')
-    },
+      include: path.join(__dirname, '../source')
+    }
   ],
   loaders: [
     {
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
-      include: path.join(__dirname, 'source/scripts')
+      include: path.join(__dirname, '../source')
     },
     {
       test: /\.scss$/,
       loaders: [
         'style-loader',
-        'css-loader',
+        'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
         'autoprefixer-loader?browsers=last 2 version',
         'sass-loader'
       ],
-      include: path.join(__dirname, 'source/styles')
+      include: path.join(__dirname, '../source')
     },
     {
       test: /\.css$/,
       loaders: [
         'style-loader',
-        'css-loader'
+        'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
       ],
-      include: path.join(__dirname, 'source/styles')
+      include: path.join(__dirname, '../source')
     },
     {
       test: /\.(png|jpg|jpeg|svg|woff|otf|ttf)$/, loader: 'url-loader?limit=8192'
     }
   ],
   resolve: {
-    root: path.join(__dirname, 'source'),
+    root: path.join(__dirname, '../source'),
     extensions: ['', '.js', '.scss', '.css', '.png', '.jpg', '.jpeg', '.svg', '.woff', '.otf', '.ttf']
   }
 };
diff --git a/webpack/webpack-production.config.js b/webpack/webpack-production.config.js
@@ -4,10 +4,10 @@ var Common = require('./webpack-common.config');
 
 module.exports = {
   entry: [
-    './source/scripts'
+    './source'
   ],
   output: {
-    path: path.join(__dirname, 'public/assets/'),
+    path: path.join(__dirname, '../public/assets/'),
     publicPath: '/',
     filename: 'bundle.js'
   },
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -7,10 +7,10 @@ module.exports = {
   entry: [
     'webpack-dev-server/client?http://0.0.0.0:3000',
     'webpack/hot/only-dev-server',
-    './source/scripts'
+    './source'
   ],
   output: {
-    path: path.join(__dirname, 'public'),
+    path: path.join(__dirname, '../public'),
     publicPath: '/assets/',
     filename: 'bundle.js'
   },

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,13 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "airbnb",`
	`3`	`+ "parser": "babel-eslint",`
`3`	`4`	`"rules": {`
`4`	`5`	`"comma-dangle": 0,`
`5`		`- 'no-unused-vars': [2, { // http://eslint.org/docs/rules/no-unused-vars`
`6`		`- 'vars': 'local',`
`7`		`- 'args': 'after-used',`
`8`		`- 'argsIgnorePattern': '^_'`
`9`		`- }]`
	`6`	`+ "no-unused-vars": [2, { // http://eslint.org/docs/rules/no-unused-vars`
	`7`	`+ "vars": "local",`
	`8`	`+ "args": "after-used",`
	`9`	`+ "argsIgnorePattern": "^_"`
	`10`	`+ }],`
	`11`	`+ "react/prefer-stateless-function": 0 // this is annoying in a boilerplate`
`10`	`12`	`}`
`11`	`13`	`}`