start refactoring

app/scripts/views/icon.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+function Icon ({glyph}) {
+  return <span className={`icon fa fa-${glyph}`} aria-hidden='true'></span>
+}
+
+Icon.propTypes = {
+  glyph: PropTypes.string.isRequired
+}
+
+export default Icon

app/scripts/views/nav-item.js

@@ -0,0 +1,21 @@
+import React, {PropTypes} from 'react'
+import Link from 'react-router'
+
+import i18n from '../utils/i18n'
+import Icon from './icon'
+
+function NavItem ({title, url, icon}) {
+  return (
+    <Link className='link' to={url} activeClassName='active'>
+      <Icon glyph={icon} /> {i18n.t(title)}
+    </Link>
+  )
+}
+
+NavItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired
+}
+
+export default NavItem

app/scripts/views/nav.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import {Link} from 'react-router'
-import i18n from '../utils/i18n.js'
+
+import NavItem from './nav-item'
 
 export default React.createClass({
   displayName: 'Nav',
@@ -14,34 +14,22 @@ export default React.createClass({
       <div className='row'>
         <ul id='side' className='nav nav-sidebar'>
           <li>
-            <Link className='link' to='/home' activeClassName='active'>
-              <span className='icon fa fa-dot-circle-o' aria-hidden='true'></span> {i18n.t('Home')}
-            </Link>
+            <NavItem title='Home' url='/home' icon='dot-circle-o' />
           </li>
           <li>
-            <Link className='link' to='/connections' activeClassName='active'>
-              <span className='icon fa fa-globe' aria-hidden='true'></span> {i18n.t('Connections')}
-            </Link>
+            <NavItem title='Connections' url='/connections' icon='globe' />
           </li>
           <li>
-            <Link className='link' to='files' activeClassName='active'>
-              <span className='icon fa fa-file' aria-hidden='true'></span> {i18n.t('Files')}
-            </Link>
+            <NavItem title='Files' url='/files' icon='file' />
           </li>
           <li>
-            <Link className='link' to='/objects' activeClassName='active'>
-              <span className='icon fa fa-list-alt' aria-hidden='true'></span> {i18n.t('DAG')}
-            </Link>
+            <NavItem title='DAG' url='/objects' icon='list-alt' />
           </li>
           <li>
-            <Link className='link' to='config' activeClassName='active'>
-              <span className='icon fa fa-cog' aria-hidden='true'></span> {i18n.t('Config')}
-            </Link>
+            <NavItem title='Config' url='/config' icon='cog' />
           </li>
           <li>
-            <Link className='link' to='logs' activeClassName='active'>
-              <span className='icon fa fa-list' aria-hidden='true'></span> {i18n.t('Logs')}
-            </Link>
+            <NavItem title='Logs' url='/logs' icon='list' />
           </li>
         </ul>
       </div>

karma.conf.js

@@ -1,5 +1,7 @@
 var webpackConfig = require('./webpack.config')
 
+webpackConfig.devtool = 'inline-source-map'
+
 module.exports = function (config) {
   config.set({
 

test/views/icon.spec.js

@@ -0,0 +1,14 @@
+import {expect} from 'chai'
+import React from 'react'
+import Test from 'legit-tests/no-dom'
+
+import Icon from '../../app/scripts/views/icon'
+
+describe('Icon', () => {
+  it('renders the given glyph', () => {
+    Test(<Icon glyph='list'/>)
+    .test(function () {
+      expect(this.instance.props.className).to.be.eql('icon fa fa-list')
+    })
+  })
+})

test/views/nav-item.spec.js

@@ -0,0 +1,20 @@
+import {expect} from 'chai'
+import React from 'react'
+import Test from 'legit-tests/no-dom'
+
+import NavItem from '../../app/scripts/views/nav-item'
+
+describe('NavItem', () => {
+  it('renders', () => {
+    Test(<NavItem title='List' url='/list' icon='list'/>)
+    // .find('Link')
+    // .test(({link}) => {
+    //   expect(link.props.to).to.be.eql('/list')
+    //   expect(link.value).to.be.eql('List')
+    // })
+    .find('Icon')
+    .test(({Icon}) => {
+      expect(Icon.props.glyph).to.be.eql('list')
+    })
+  })
+})