Merge 7f00770 into 6d3de43

.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, '/');
 });