integrating react storybook and adding example unit test

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+const req = require.context('../stories', true, /\.js$/)
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

.storybook/webpack.config.js

@@ -0,0 +1,50 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+const webpack = require('webpack');
+const precss = require('precss');
+const postcssNested = require('postcss-nested');
+const postcssImport = require('postcss-import');
+const postcssCssnext = require('postcss-cssnext');
+
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: { sourceMap: true, importLoaders: 1 }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
+              plugins: () => [
+                precss(),
+                postcssNested(),
+                postcssImport({ addDependencyTo: webpack }),
+                postcssCssnext({
+                  browsers: ['last 2 versions', 'ie >= 9'],
+                  compress: true,
+                }),
+              ],
+            },
+          },
+        ],
+      }
+    ]
+  },
+};

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "6"
+script: npm run test

__fixtures__/index.js

@@ -0,0 +1,9 @@
+import { fromJS } from 'immutable'
+
+export const exampleData = {
+  example:{
+    result: fromJS({
+      testing: 'data'
+    })
+  }
+}

__mocks__/fileMock.js

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

__tests__/Example.spec.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { Example } from  '../src/js/common/components/Example'
+import { exampleData } from '../__fixtures__'
+
+describe('ExampleView', () => {
+  it('should render a blank div without data', () => {
+    const el = shallow(<Example />)
+
+    expect(el.length).toEqual(1)
+    expect(el.find('.row').length).toEqual(0)
+  })
+
+  it('should render with correct data', () => {
+    const el = shallow(
+      <Example {...exampleData} />
+    )
+
+    expect(el.length).toEqual(1)
+    expect(el.find('.row').length).toEqual(1)
+  })
+})

package.json

@@ -1,14 +1,16 @@
 {
   "name": "react-redux-boilerplate",
-  "version": "0.8.20",
+  "version": "0.8.30",
   "description": "React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build process framework out of the box.",
   "scripts": {
     "dev": "NODE_ENV=development webpack-dashboard -p 3300 -c red -t dashboard -- node bin/commands.js dev",
     "build": "NODE_ENV=production node bin/commands.js build",
     "build:release": "NODE_ENV=release node bin/commands.js build",
     "clean": "rimraf docroot",
-    "test": "jest --verbose --no-cache",
-    "lint": "node bin/commands.js lint"
+    "test": "jest --no-cache",
+    "lint": "node bin/commands.js lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook -o docroot/doc"
   },
   "repository": {
     "type": "git",
@@ -22,6 +24,7 @@
     "node": ">=6.9.0"
   },
   "devDependencies": {
+    "@storybook/react": "^3.1.8",
     "assets-webpack-plugin": "^3.5.1",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
@@ -47,6 +50,7 @@
     "css-loader": "^0.28.4",
     "debug": "^2.6.8",
     "dotenv": "^4.0.0",
+    "enzyme": "^2.9.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.2",
     "eslint-friendly-formatter": "^3.0.0",
@@ -56,6 +60,7 @@
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.29.0",
+    "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "^3.3.1",
     "jest-cli": "^20.0.4",
     "jsonfile": "^3.0.1",
@@ -66,6 +71,7 @@
     "precss": "^1.4.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-router": "^4.1.1",
+    "react-test-renderer": "^15.6.1",
     "rimraf": "^2.6.1",
     "shelljs": "^0.7.8",
     "style-loader": "^0.18.2",
@@ -91,10 +97,12 @@
     "reselect": "^3.0.1"
   },
   "jest": {
-    "transform": {
-      ".*": "<rootDir>/preprocessor.js"
+    "verbose": true,
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css)$": "identity-obj-proxy"
     },
-    "automock": true,
+    "automock": false,
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(js|jsx|json)$",
     "moduleFileExtensions": [
       "js",

src/assets/fonts/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "Aspira";
+  src: url("Aspira-Regular.eot") format("embedded-opentype");
+  src: url("Aspira-Regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}

src/js/app.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import '../assets/fonts/fonts.css';
+
 function App({ children }) {
   return (
     <div className="container">

src/js/common/components/Example/Example.jsx

@@ -0,0 +1,24 @@
+import React, { PureComponent } from 'react'
+
+class Example extends PureComponent {
+  render () {
+    const props = this.props;
+    const result = props.example && props.example.result ? props.example.result : null;
+
+    if (result && result.size && result.size > 0) {
+      return (
+
+        <div className="row example">
+            <pre className="col-md-12 example__output">
+              {JSON.stringify(result.toJS(), undefined, 2)}
+            </pre>
+        </div>
+
+
+      );
+    }
+    return <div />;
+  }
+}
+
+export default Example

src/js/common/components/Example/index.js

@@ -0,0 +1 @@
+export { default as Example } from './Example'

src/js/views/example/index.jsx

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux';
+
 import { actions as exampleActions } from '../../redux/modules/example';
 import { exampleSelector } from '../../redux/selectors/exampleSelector';
+import { Example } from '../../common/components/Example'
 
 require('../../../style/index.css');
 
@@ -25,21 +27,7 @@ class ExampleView extends Component {
   }
 
   render() {
-    const result = this.props.example.result ? this.props.example.result : null;
-
-    if (result && result.size && result.size > 0) {
-      return (
-
-          <div className="row example">
-            <pre className="col-md-12 example__output">
-              {JSON.stringify(result.toJS(), undefined, 2)}
-            </pre>
-          </div>
-
-
-      );
-    }
-    return <div />;
+    return <Example {...this.props } />
   }
 }
 

src/style/index.css

@@ -1,5 +1,3 @@
-/* TODO: import is not working
- ---------------------- */
 @import "configs/color";
 
 /* Example handler
@@ -10,3 +8,7 @@
   color: brown;
   font-size: 0.8em;
 }
+
+h2 {
+  font-family: Aspira;
+}

stories/example.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react'
+
+import { Example } from '../src/js/common/components/Example'
+import { exampleData } from '../__fixtures__'
+
+storiesOf('Example View', module)
+  .add('no data', () => <Example />)
+  .add('with example data', () => <Example {...exampleData}  />);

webpack.config.common.js

@@ -96,7 +96,7 @@ const COMMON_LOADERS = [
     ],
   },
   {
-    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+    test: /\.[ot]tf(\?v=\d+\.\d+\.\d+)?$/,
     use: [
       {
         loader: 'url-loader',
@@ -111,7 +111,11 @@ const COMMON_LOADERS = [
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
     use: [
       {
-        loader: 'file-loader',
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          mimetype: 'application/vnd.ms-fontobject',
+        }
       }
     ],
   }
@@ -153,4 +157,4 @@ export default {
     tls:'{}',
     net:'{}'
   },
-};
+};