Global nav role switcher hooked up (#45)

Addresses story #2 and task #5

The dashboard page currently doesn't call the getAdminData. I'll hook that up next to a real lifecycle or action.

Here is what everything looks like:
![screen recording 2016-09-08 at 04 48 pm](https://cloud.githubusercontent.com/assets/8884298/18371523/8d6ef1f0-75fa-11e6-812d-cfc0ad53b272.gif)

## Other changes in this PR
 - Tests now inject the tap event plugin, so that MUI components dont spit out errors
 - Test config removes extra quotes from stringified json strings.

### Demo Data Flow
 - demo module now handles fetching data associated with a demo session and logs in to the supplychainmanager automatically
 - Dashboard component no longer manages data fetching on route loading, instead it is handled properly within the route itself.
 - CreateDemo saga now simply creates a demo and changes the route (In a future task, I want to have it manage adding one retail manager automatically so that demos always begin with that role as a default)

### Mock API / stronger saga tests
 - Sagas tests now make use of state changes from actually calling the reducer, which requires proper data passed in....meaning I needed a way to mock the API calls. I made a mock file that gives back faker data in the shape we currently expect from the API.

What this allows, is for saga tests to properly fail if things change in the way data is passed around and modified (whereas before, we just generated made up objects and so it worked in test, but not in the running app)

The Saga tests look a bit more confusing, but are WAY more solid now. Writing and testing complex async actions has never been fun, but this makes them accurate and stable, which is the real win.

.storybook/webpack.config.js

@@ -30,15 +30,16 @@ const env = process.env.NODE_ENV || 'development';
 webpackConfig.plugins = [
   new webpack.DefinePlugin({
     'process.env': {
-      'NODE_ENV': JSON.stringify(env),
+      NODE_ENV: JSON.stringify(env),
     },
-    'NODE_ENV': env,
-    '__DEV__': env === 'development',
-    '__PROD__': env === 'production',
-    '__TEST__': env === 'test',
-    '__DEBUG__': env === 'development' && !argv.no_debug,
-    '__COVERAGE__': !argv.watch && env === 'test',
-    '__BASENAME__': JSON.stringify(process.env.BASENAME || ''),
+    NODE_ENV: env,
+    __DEV__: env === 'development',
+    __PROD__: env === 'production',
+    __TEST__: env === 'test',
+    __DEBUG__: env === 'development' && !argv.no_debug,
+    __COVERAGE__: !argv.watch && env === 'test',
+    __BASENAME__: JSON.stringify(process.env.BASENAME || ''),
+    __CONTROLLER_API__: JSON.stringify('https://fake-controller.net'),
   }),
 ];
 

config/ava.config.js

@@ -3,6 +3,13 @@
 import { argv } from 'yargs';
 import fs from 'fs';
 import config from '../config';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+
+Object.keys(config.globals).forEach(key => {
+  if(typeof (config.globals[key]) === 'string') {
+    config.globals[key] = config.globals[key].replace(/['"]+/g, '');
+  };
+});
 
 Object.assign(global, config.globals);
 
@@ -28,3 +35,4 @@ require.extensions['.html'] = (module, filename) => {
 global.document = require('jsdom').jsdom(require('../src/index.html'));
 global.window = document.defaultView;
 global.navigator = window.navigator;
+injectTapEventPlugin(); // for component tests using onTouchTap event

config/index.js

@@ -33,7 +33,7 @@ const config = {
   // ----------------------------------
   // Controller Service Configuration
   // ----------------------------------
-  controller_service : process.env.CONTROLLER_SERVICE || 'https://not.set.net',
+  controller_service : process.env.CONTROLLER_SERVICE,
 
   // ----------------------------------
   // Compiler Configuration
@@ -72,6 +72,7 @@ Edit at Your Own Risk
 // Environment
 // ------------------------------------
 // N.B.: globals added here must _also_ be added to .eslintrc
+
 config.globals = {
   'process.env'  : {
     'NODE_ENV' : JSON.stringify(config.env),
@@ -83,9 +84,7 @@ config.globals = {
   '__DEBUG__'    : config.env === 'development' && !argv.no_debug,
   '__COVERAGE__' : !argv.watch && config.env === 'test',
   '__BASENAME__' : JSON.stringify(process.env.BASENAME || ''),
-  '__CONTROLLER_API__' : config.env === 'test' ?
-    `${config.controller_service}/api/v1` :
-    JSON.stringify(`${config.controller_service}/api/v1`),
+  '__CONTROLLER_API__' : JSON.stringify(config.controller_service || ''),
 };
 
 // ------------------------------------

package.json

@@ -69,7 +69,8 @@
       "command": "node_modules/.bin/nyc node --harmony-proxies ./node_modules/.bin/ava",
       "env": {
         "NODE_ENV": "test",
-        "NODE_PATH": "src"
+        "NODE_PATH": "src",
+        "CONTROLLER_SERVICE": "https://fake-controller.net"
       }
     }
   },

src/components/GlobalNav/GlobalNav.jsx

@@ -2,33 +2,23 @@ import React from 'react';
 import IconButton from 'material-ui/IconButton';
 import { Toolbar, ToolbarGroup, ToolbarTitle, ToolbarSeparator } from 'material-ui/Toolbar';
 import { Icon } from 'react-fa';
-import { palette } from 'styles/muiTheme';
-import RoleSwitcher from './RoleSwitcher';
+import { Link } from 'react-router';
+import RoleSwitcher from 'containers/RoleSwitcherContainer';
 import classes from './GlobalNav.scss';
 
 const styles = {
-  toolbar: {
-    backgroundColor: palette.primary1Color,
-  },
   separator: {
-    backgroundColor: 'rgb(184, 222, 228)',
-    margin: '0px 12px 0px 24px',
-  },
-  paragraph: {
-    paddingLeft: '2rem',
-    fontSize: '0.9rem',
-  },
-  title: {
-    color: palette.alternateTextColor,
-    fontSize: '1rem',
+    margin: '0px 0.75rem 0px 2rem',
   },
 };
 
 export const GlobalNav = () => (
   <div className={classes.globalNav}>
-    <Toolbar style={styles.toolbar}>
+    <Toolbar>
       <ToolbarGroup firstChild>
-        <ToolbarTitle text="Logistics Wizard" className={classes.title} style={styles.title} />
+        <Link to="/">
+          <ToolbarTitle text="Logistics Wizard" className={classes.title} />
+        </Link>
       </ToolbarGroup>
 
       <ToolbarGroup>
@@ -40,12 +30,13 @@ export const GlobalNav = () => (
             className={classes.github}
           />
         </IconButton>
-        <p className="flow-text" style={styles.paragraph}>Demo Settings</p>
+        <ToolbarTitle text="Demo Settings" className={classes.title} />
       </ToolbarGroup>
     </Toolbar>
   </div>
 );
 
-GlobalNav.propTypes = {};
+GlobalNav.propTypes = {
+};
 
 export default GlobalNav;

src/components/GlobalNav/GlobalNav.scss

@@ -1,49 +1,15 @@
-/* GlobalNav Styles */
-.globalNav {
-  p {
-    color: rgb(255, 255, 255);
-  }
-}
+@import '~styles/base/colors';
 
 .title {
   padding-left: 2rem;
-}
-
-.separator {
-  background-color: rgb(184, 222, 228);
+  color: $alternateTextColor;
 }
 
 .github {
   font-size: 1.9rem;
-  color: rgb(184, 222, 228);
+  color: $primary3Color;
 
   &:hover {
-    color: rgb(255, 255, 255);
-  }
-}
-
-/* RoleSwitcher Styles */
-.stack {
-  position: relative;
-  cursor: pointer;
-  margin-right: 30px;
-
-  .user {
-    font-size: 1.2rem;
-    color: rgb(15, 147, 166);
-    line-height: 3.3rem;
-    margin-left: .3rem;
-  }
-
-  &:hover {
-    .circle {
-      color: rgb(255, 255, 255);
-    }
-  }
-
-  .circle {
-    font-size: 1.9rem;
-    color: rgb(184, 222, 228);
-    line-height: 3.3rem;
+    color: $alternateTextColor;
   }
 }

src/components/GlobalNav/GlobalNav.story.js

@@ -3,15 +3,31 @@ import { storiesOf } from '@kadira/storybook';
 import GlobalNav from './GlobalNav';
 import RoleSwitcher from './RoleSwitcher';
 
+const users = [
+  {
+    id: 1,
+    role: 'supplychainmanager',
+    loggedIn: true,
+  },
+  {
+    id: 2,
+    role: 'retailstoremanager',
+    location: 'Austin, TX',
+  },
+];
+
 storiesOf('GlobalNav', module)
   .addDecorator((story) => (
     <div style={{ width: '100vw' }}>
       {story()}
     </div>
   ))
-  .add('Default', () => (
+  .add('Not Logged in', () => (
     <GlobalNav />
   ))
+  .add('Logged in', () => (
+    <GlobalNav users={users} />
+  ))
   .add('Role Switcher', () => (
-    <RoleSwitcher open />
+    <RoleSwitcher users={users} />
   ));

src/components/GlobalNav/GlobalNav.test.js

@@ -1,34 +1,22 @@
 import test from 'ava';
 import React from 'react';
 import { shallow } from 'enzyme';
-// import { Icon } from 'react-fa';
 import GlobalNav from './GlobalNav';
 
-
 const setup = () => {
-  // const spies = {
-  //   clicky: sinon.spy(),
-  // };
-  // const props = {
-  //   customProp: 'Test',
-  //   clicky: spies.clicky,
-  // };
+  const spies = {
+  };
+  const props = {
+  };
   const component = shallow(<GlobalNav />);
 
-  return { component };
+  return { component, props, spies };
 };
 
 test('(Component) Has expected elements.', t => {
   const { component } = setup();
 
-  // t.is(component.find('Icon'), 1,
-  //   'contains React-FA Github Icons.');
-  // t.true(component.contains('<RoleSwitcher />'),
-  //   'contains RoleSwitcher component.');
-  // t.true(component.contains('<Toolbar />'),
-  //   'contains Toolbar component.');
-
-  t.is(component.find('Icon').length, 1);
-  t.is(component.find('RoleSwitcher').length, 1);
-  t.is(component.find('Toolbar').length, 1);
+  t.is(component.find('Connect(RoleSwitcher)').length, 1);
+  t.is(component.find('Link').length, 1);
+  t.is(component.find('Link').first().props().to, '/');
 });