feat: add react-storybook support

- include storybook builds as part of deployment;
- update `wdio` directory position for cleanliness;
- update packages and associated unit tests;

conf/storybook/config.js

@@ -0,0 +1,6 @@
+import { configure } from '@kadira/storybook';
+
+const req = require.context( '../../src', true, /story\.js$/ );
+
+configure( () => req.keys().forEach( req ), module );
+

conf/storybook/webpack.config.js

@@ -0,0 +1,10 @@
+var path = require( 'path' );
+
+module.exports = {
+  resolve: {
+    root: [
+      path.resolve( './src' ),
+    ],
+  },
+};
+

wdio/run.js → conf/wdio/run.js

@@ -6,7 +6,7 @@ const cwd = process.cwd();
 require( 'babel-polyfill' );
 require( 'babel-register' );
 
-glob( 'src/**/*scenario.js', function ( err, files ) {
+glob( '../../src/**/*scenario.js', function ( err, files ) {
   require( './setup.js' );
 
   files.forEach( function ( file ) {

package.json

@@ -8,11 +8,13 @@
     "build:html": "mkdir -p build && cp index.html build/",
     "build": "npm run build:html && npm run build:webpack",
     "test:unit": "tape build/specs.js | faucet",
-    "test:e2e": "node wdio/run.js | faucet",
+    "test:e2e": "node conf/wdio/run.js | faucet",
     "pretest": "npm run build",
     "test": "npm run test:unit && echo SKIPPING: e2e tests",
     "start": "node server.js",
     "dev": "npm run build:html && BUILD_ENV=development webpack-dev-server --hot --inline --config webpack.config.js --content-base build --port 8888 --host 0.0.0.0 --history-api-fallback",
+    "storybook": "start-storybook -p 9001 -c conf/storybook",
+    "build-storybook": "build-storybook -c conf/storybook",
     "selenium:install": "selenium-standalone install",
     "selenium:start": "selenium-standalone start &> /dev/null &",
     "selenium": "npm run selenium:install && npm run selenium:start",
@@ -37,6 +39,7 @@
   },
   "homepage": "https://github.com/StoryShop/app#readme",
   "devDependencies": {
+    "@kadira/storybook": "^2.14.0",
     "autoprefixer": "^6.3.3",
     "babel-loader": "^6.2.2",
     "babel-polyfill": "^6.5.0",

src/components/app/spec.js

@@ -10,7 +10,7 @@ test( 'App Render Method', t => {
   const instance = getShallowInstance( <App /> );
 
   // FIXME(jdm): This test requires knowing what DocumentTitle renders.
-  const expected = 'SideEffect(Component)';
+  const expected = 'SideEffect(DocumentTitle)';
   const actual = instance.type.displayName;
 
   t.equals( actual, expected, 'rendered the DocumentTitle element' );

src/components/autoprefix/spec.js

@@ -12,7 +12,7 @@ test( 'Autoprefix HOC', t => {
   const result = getShallowInstance( <WrappedComponent style={{ display: 'flex' }} /> );
   const actual = result.props.style;
   const expected = {
-    display: [ '-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex' ],
+    display: [ '-webkit-box', '-ms-flexbox', 'flex' ],
   };
 
   t.deepEquals( actual, expected, 'should prefix CSS properties' );

src/components/inline-edit/story.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import InlineEdit from './';
+
+storiesOf( 'InlineEdit', module )
+  .add( 'default', () => (
+    <InlineEdit
+      defaultValue='value...'
+      onChange={action('onChange')}
+    />
+  ))
+  ;
+

src/routes/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../wdio';
+import browser from '../../conf/wdio';
 
 test( 'Left Nav', async t => {
   let actual, expected;

src/routes/worlds/one/characters/list/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../../wdio';
+import browser from '../../../../../../conf/wdio';
 import ids from '../../../../../utils/ids.json';
 
 test( 'Characters Placeholder Route', async t => {

src/routes/worlds/one/characters/one/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../../wdio';
+import browser from '../../../../../../conf/wdio';
 import ids from '../../../../../utils/ids.json';
 
 test( 'Characters Placeholder Route', async t => {

src/routes/worlds/one/elements/list/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../../wdio';
+import browser from '../../../../../../conf/wdio';
 import ids from '../../../../../utils/ids.json';
 
 test( 'Characters Placeholder Route', async t => {

src/routes/worlds/one/elements/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../wdio';
+import browser from '../../../../../conf/wdio';
 import ids from '../../../../utils/ids.json';
 
 test( 'Elements Placeholder Route', async t => {

src/routes/worlds/one/outlines/list/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../../wdio';
+import browser from '../../../../../../conf/wdio';
 import ids from '../../../../../utils/ids.json';
 
 test( 'Characters Placeholder Route', async t => {

src/routes/worlds/one/outlines/one/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../../wdio';
+import browser from '../../../../../../conf/wdio';
 import ids from '../../../../../utils/ids.json';
 
 test( 'Characters Placeholder Route', async t => {

src/routes/worlds/one/outlines/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../wdio';
+import browser from '../../../../../conf/wdio';
 import ids from '../../../../utils/ids.json';
 
 test( 'Outlines Placeholder Route', async t => {

src/routes/worlds/one/settings/po.js

@@ -1,4 +1,4 @@
-import browser from '../../../../../wdio';
+import browser from '../../../../../conf/wdio';
 
 export default id => ({
   titleSelector: '.world-jumbotron h1 textarea',

src/routes/worlds/one/settings/scenario.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import browser from '../../../../../wdio';
+import browser from '../../../../../conf/wdio';
 import ids from '../../../../utils/ids.json';
 import SettingsPage from './po';
 

src/utils/autoprefix/spec.js

@@ -13,7 +13,7 @@ test( 'autoprefix', t => {
   const actual = prefix( style );
 
   const expected = {
-    display: [ '-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex' ],
+    display: [ '-webkit-box', '-ms-flexbox', 'flex' ],
   };
 
   t.deepEquals( actual, expected, 'should prefix CSS properties' );