Fixed lint errors in all js files

- Also added linter configuration, and make linter fail on error - fixing ES6 errors and added ES6 transformer - gulp target to try local build - linted gulpfile - cant hook into gulp lint yet, because gulp does currently not support ES6 which some rules demand, since gulp cant transpile itself, we have a chicken and egg problem. - ES6 transpiler for test runner - removed old linter config - adapted editorconfig to reflect linter config
2026-02-14 18:09:59 +00:00 · 2015-05-27 19:46:16 +02:00
parent 42a3f57e11
commit 7d1ee40a2b
30 changed files with 419 additions and 445 deletions
--- a/client/.editorconfig
+++ b/client/.editorconfig
@@ -9,7 +9,7 @@ root = true

 # Change these settings to your own preference
 indent_style = space
-indent_size = 4
+indent_size = 2

 # We recommend you to keep these unchanged
 end_of_line = lf
@@ -20,10 +20,3 @@ insert_final_newline = true
 [*.md]
 trim_trailing_whitespace = false

-[package.json]
-indent_style = space
-indent_size = 2
-
-[bower.json]
-indent_style = space
-indent_size = 2
--- a/client/.eslintignore
+++ b/client/.eslintignore
@@ -0,0 +1 @@
+app/**/__tests__/*.js
--- a/client/.eslintrc
+++ b/client/.eslintrc
@@ -1,7 +1,8 @@
 {
  "parser": "babel-eslint",
  "plugins": [
-    "react"
+    "react",
+    "jasmine"
  ],
  "env": {
    "browser": true,
@@ -138,7 +139,7 @@
    }],
    "comma-style": [2, "last"],      // http://eslint.org/docs/rules/comma-style
    "eol-last": 2,                   // http://eslint.org/docs/rules/eol-last
-    "func-names": 1,                 // http://eslint.org/docs/rules/func-names
+    "func-names": 0,                 // http://eslint.org/docs/rules/func-names
    "key-spacing": [2, {             // http://eslint.org/docs/rules/key-spacing
        "beforeColon": false,
        "afterColon": true
@@ -184,7 +185,7 @@
    "react/no-did-update-set-state": 2,
    "react/no-multi-comp": 2,
    "react/no-unknown-property": 2,
-    "react/prop-types": 2,
+    "react/prop-types": 0,
    "react/react-in-jsx-scope": 2,
    "react/self-closing-comp": 2,
    "react/wrap-multilines": 2,
--- a/client/.jshintrc
+++ b/client/.jshintrc
@@ -1,21 +0,0 @@
-{
-    "node": true,
-    "browser": true,
-    "esnext": true,
-    "bitwise": true,
-    "camelcase": true,
-    "curly": true,
-    "eqeqeq": true,
-    "immed": true,
-    "indent": 4,
-    "latedef": true,
-    "newcap": true,
-    "noarg": true,
-    "quotmark": "single",
-    "undef": true,
-    "unused": true,
-    "strict": true,
-    "trailing": true,
-    "smarttabs": true,
-    "jquery": true
-}
--- a/client/.yo-rc.json
+++ b/client/.yo-rc.json
@@ -1,3 +0,0 @@
-{
-  "generator-mocha": {}
-}
--- a/client/app/scripts/actions/app-actions.js
+++ b/client/app/scripts/actions/app-actions.js
@@ -1,5 +1,8 @@
-var AppDispatcher = require('../dispatcher/app-dispatcher');
-var ActionTypes = require('../constants/action-types');
+let ActionTypes;
+let AppDispatcher;
+let AppStore;
+let RouterUtils;
+let WebapiUtils;

 module.exports = {
  clickCloseDetails: function() {
@@ -90,8 +93,11 @@ module.exports = {
  }
 };

-// breaking circular deps
+// require below export to break circular dep

-var RouterUtils = require('../utils/router-utils');
-var WebapiUtils = require('../utils/web-api-utils');
-var AppStore = require('../stores/app-store');
+AppDispatcher = require('../dispatcher/app-dispatcher');
+ActionTypes = require('../constants/action-types');
+
+RouterUtils = require('../utils/router-utils');
+WebapiUtils = require('../utils/web-api-utils');
+AppStore = require('../stores/app-store');
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -1,10 +1,9 @@
-var _ = require('lodash');
-var React = require('react');
-var tweenState = require('react-tween-state');
+const React = require('react');
+const tweenState = require('react-tween-state');

-var NodeColorMixin = require('../mixins/node-color-mixin');
+const NodeColorMixin = require('../mixins/node-color-mixin');

-var Node = React.createClass({
+const Node = React.createClass({
  mixins: [
    NodeColorMixin,
    tweenState.Mixin
@@ -40,13 +39,12 @@ var Node = React.createClass({
  },

  render: function() {
-    var transform = "translate(" + this.getTweeningValue('x') + "," + this.getTweeningValue('y') + ")";
-    var scale = this.props.scale;
-    var textOffsetX = 0;
-    var textOffsetY = scale(0.5) + 18;
-    var textAngle = _.isUndefined(this.props.angle) ? 0 : -1 * (this.props.angle * 180 / Math.PI - 90);
-    var color = this.getNodeColor(this.props.label);
-    var className = this.props.highlighted ? "node highlighted" : "node";
+    const transform = 'translate(' + this.getTweeningValue('x') + ',' + this.getTweeningValue('y') + ')';
+    const scale = this.props.scale;
+    const textOffsetX = 0;
+    const textOffsetY = scale(0.5) + 18;
+    const color = this.getNodeColor(this.props.label);
+    const className = this.props.highlighted ? 'node highlighted' : 'node';

    return (
      <g className={className} transform={transform} onClick={this.props.onClick} id={this.props.id}>
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -1,40 +1,133 @@
-var _ = require('lodash');
-var d3 = require('d3');
-var React = require('react');
+const _ = require('lodash');
+const d3 = require('d3');
+const React = require('react');

-var NodesLayout = require('./nodes-layout');
-var Node = require('./node');
+const NodesLayout = require('./nodes-layout');
+const Node = require('./node');

-var MAX_NODES = 100;
-var MARGINS = {
+const MARGINS = {
  top: 130,
  left: 40,
  right: 40,
  bottom: 0
 };

-var line = d3.svg.line()
-  .interpolate("basis")
+const line = d3.svg.line()
+  .interpolate('basis')
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; });

-var NodesChart = React.createClass({
+const NodesChart = React.createClass({

  getInitialState: function() {
    return {
      nodes: {},
      edges: {},
      nodeScale: 1,
-      translate: "0,0",
+      translate: '0,0',
      scale: 1,
      hasZoomed: false
    };
  },

+  componentWillMount: function() {
+    this.updateGraphState(this.props);
+  },
+
+  componentDidMount: function() {
+    this.zoom = d3.behavior.zoom()
+      .scaleExtent([0.1, 2])
+      .on('zoom', this.zoomed);
+
+    d3.select('.nodes-chart')
+      .call(this.zoom);
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    if (this.getTopologyFingerprint(nextProps.nodes) !== this.getTopologyFingerprint(this.props.nodes)) {
+      this.setState({
+        nodes: {},
+        edges: {}
+      });
+    }
+
+    this.updateGraphState(nextProps);
+  },
+
+  componentWillUnmount: function() {
+    // undoing .call(zoom)
+
+    d3.select('.nodes-chart')
+      .on('mousedown.zoom', null)
+      .on('onwheel', null)
+      .on('onmousewheel', null)
+      .on('dblclick.zoom', null)
+      .on('touchstart.zoom', null);
+  },
+
+  getTopologyFingerprint: function(topology) {
+    const fingerprint = [];
+
+    _.each(topology, function(node) {
+      fingerprint.push(node.id);
+      if (node.adjacency) {
+        fingerprint.push(node.adjacency.join(','));
+      }
+    });
+    return fingerprint.join(';');
+  },
+
+  getGraphNodes: function(nodes, scale) {
+    return _.map(nodes, function(node) {
+      const highlighted = _.includes(this.props.highlightedNodes, node.id);
+      return (
+        <Node
+          highlighted={highlighted}
+          onClick={this.props.onNodeClick}
+          key={node.id}
+          id={node.id}
+          label={node.label}
+          subLabel={node.subLabel}
+          scale={scale}
+          dx={node.x}
+          dy={node.y}
+        />
+      );
+    }, this);
+  },
+
+  getGraphEdges: function(edges) {
+    return _.map(edges, function(edge) {
+      return (
+        <path className="link" d={line(edge.points)} key={edge.id} />
+      );
+    });
+  },
+
+  render: function() {
+    const nodeElements = this.getGraphNodes(this.state.nodes, this.state.nodeScale);
+    const edgeElements = this.getGraphEdges(this.state.edges, this.state.nodeScale);
+    const transform = 'translate(' + this.state.translate + ')' +
+      ' scale(' + this.state.scale + ')';
+
+    return (
+      <svg width="100%" height="100%" className="nodes-chart">
+        <g className="canvas" transform={transform}>
+          <g className="edges">
+            {edgeElements}
+          </g>
+          <g className="nodes">
+            {nodeElements}
+          </g>
+        </g>
+      </svg>
+    );
+  },
+
  initNodes: function(topology, prevNodes) {
-    var centerX = this.props.width / 2;
-    var centerY = this.props.height / 2;
-    var nodes = {};
+    const centerX = this.props.width / 2;
+    const centerY = this.props.height / 2;
+    const nodes = {};

    _.each(topology, function(node, id) {
      nodes[id] = prevNodes[id] || {};
@@ -55,19 +148,19 @@ var NodesChart = React.createClass({
  },

  initEdges: function(topology, nodes) {
-    var edges = {};
+    const edges = {};

    _.each(topology, function(node) {
      _.each(node.adjacency, function(adjacent) {
-        var edge = [node.id, adjacent],
-          edgeId = edge.join('-');
+        const edge = [node.id, adjacent];
+        const edgeId = edge.join('-');

        if (!edges[edgeId]) {
-          var source = nodes[edge[0]];
-          var target = nodes[edge[1]];
+          const source = nodes[edge[0]];
+          const target = nodes[edge[1]];

-          if(!source || !target) {
-            console.error("Missing edge node", edge[0], source, edge[1], target);
+          if (!source || !target) {
+            console.error('Missing edge node', edge[0], source, edge[1], target);
          }

          edges[edgeId] = {
@@ -83,58 +176,18 @@ var NodesChart = React.createClass({
    return edges;
  },

-  getNodes: function(nodes, scale) {
-    return _.map(nodes, function (node) {
-      var highlighted = _.includes(this.props.highlightedNodes, node.id);
-      return (
-        <Node
-          highlighted={highlighted}
-          onClick={this.props.onNodeClick}
-          key={node.id}
-          id={node.id}
-          label={node.label}
-          subLabel={node.subLabel}
-          scale={scale}
-          dx={node.x}
-          dy={node.y}
-        />
-      );
-    }, this);
-  },
-
-  getEdges: function(edges, scale) {
-    return _.map(edges, function(edge) {
-      return (
-        <path className="link" d={line(edge.points)} key={edge.id} />
-      );
-    });
-  },
-
-  getTopologyFingerprint: function(topology) {
-    var nodes = _.keys(topology).sort();
-    var fingerprint = [];
-
-    _.each(topology, function(node) {
-      fingerprint.push(node.id);
-      if (node.adjacency) {
-        fingerprint.push(node.adjacency.join(','));
-      }
-    });
-    return fingerprint.join(';');
-  },
-
  updateGraphState: function(props) {
-    var nodes = this.initNodes(props.nodes, this.state.nodes);
-    var edges = this.initEdges(props.nodes, nodes);
+    const nodes = this.initNodes(props.nodes, this.state.nodes);
+    const edges = this.initEdges(props.nodes, nodes);

-    var expanse = Math.min(props.height, props.width);
-    var nodeSize = expanse / 2;
-    var n = _.size(props.nodes);
-    var nodeScale = d3.scale.linear().range([0, nodeSize/Math.pow(n, 0.7)]);
+    const expanse = Math.min(props.height, props.width);
+    const nodeSize = expanse / 2;
+    const n = _.size(props.nodes);
+    const nodeScale = d3.scale.linear().range([0, nodeSize / Math.pow(n, 0.7)]);

-    var layoutId = 'layered node chart';
+    const layoutId = 'layered node chart';
    console.time(layoutId);
-    var graph = NodesLayout.doLayout(
+    const graph = NodesLayout.doLayout(
      nodes,
      edges,
      props.width,
@@ -146,12 +199,12 @@ var NodesChart = React.createClass({

    // adjust layout based on viewport

-    var xFactor = (props.width - MARGINS.left - MARGINS.right) / graph.width;
-    var yFactor = props.height / graph.height;
-    var zoomFactor = Math.min(xFactor, yFactor);
-    var zoomScale = this.state.scale;
+    const xFactor = (props.width - MARGINS.left - MARGINS.right) / graph.width;
+    const yFactor = props.height / graph.height;
+    const zoomFactor = Math.min(xFactor, yFactor);
+    let zoomScale = this.state.scale;

-    if(this.zoom && !this.state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
+    if (this.zoom && !this.state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
      zoomScale = zoomFactor;
      // saving in d3's behavior cache
      this.zoom.scale(zoomFactor);
@@ -165,68 +218,12 @@ var NodesChart = React.createClass({
    });
  },

-  componentWillMount: function() {
-    this.updateGraphState(this.props);
-  },
-
-  componentDidMount: function() {
-    this.zoom = d3.behavior.zoom()
-      .scaleExtent([0.1, 2])
-      .on('zoom', this.zoomed);
-
-    d3.select('.nodes-chart')
-      .call(this.zoom);
-  },
-
-  componentWillUnmount: function() {
-
-    // undoing .call(zoom)
-
-    d3.select('.nodes-chart')
-      .on("mousedown.zoom", null)
-      .on("onwheel", null)
-      .on("onmousewheel", null)
-      .on("dblclick.zoom", null)
-      .on("touchstart.zoom", null);
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    if (this.getTopologyFingerprint(nextProps.nodes) !== this.getTopologyFingerprint(this.props.nodes)) {
-      this.setState({
-        nodes: {},
-        edges: {}
-      });
-    }
-
-    this.updateGraphState(nextProps);
-  },
-
  zoomed: function() {
    this.setState({
      hasZoomed: true,
      translate: d3.event.translate,
      scale: d3.event.scale
    });
-  },
-
-  render: function() {
-    var nodeElements = this.getNodes(this.state.nodes, this.state.nodeScale);
-    var edgeElements = this.getEdges(this.state.edges, this.state.nodeScale);
-    var transform = 'translate(' + this.state.translate + ')' +
-      ' scale(' + this.state.scale + ')';
-
-    return (
-      <svg width="100%" height="100%" className="nodes-chart">
-        <g className="canvas" transform={transform}>
-          <g className="edges">
-            {edgeElements}
-          </g>
-          <g className="nodes">
-            {nodeElements}
-          </g>
-        </g>
-      </svg>
-    );
  }

 });
--- a/client/app/scripts/charts/nodes-layout.js
+++ b/client/app/scripts/charts/nodes-layout.js
@@ -1,16 +1,16 @@
-var dagre = require('dagre');
-var _ = require('lodash');
+const dagre = require('dagre');
+const _ = require('lodash');

-var MAX_NODES = 100;
+const MAX_NODES = 100;

-var doLayout = function(nodes, edges, width, height, scale, margins) {
-  var offsetX = 0 + margins.left;
-  var offsetY = 0 + margins.top;
-  var g = new dagre.graphlib.Graph({});
+const doLayout = function(nodes, edges, width, height, scale, margins) {
+  let offsetX = 0 + margins.left;
+  let offsetY = 0 + margins.top;
+  const g = new dagre.graphlib.Graph({});

  if (_.size(nodes) > MAX_NODES) {
    console.error('Too many nodes for graph layout engine. Limit: ' + MAX_NODES);
-    return;
+    return null;
  }

  // configure node margins
@@ -27,13 +27,13 @@ var doLayout = function(nodes, edges, width, height, scale, margins) {
  });

  _.each(edges, function(edge) {
-    var virtualNodes = edge.source.id === edge.target.id ? 1 : 0;
+    const virtualNodes = edge.source.id === edge.target.id ? 1 : 0;
    g.setEdge(edge.source.id, edge.target.id, {id: edge.id, minlen: virtualNodes});
  });

  dagre.layout(g);

-  var graph = g.graph();
+  const graph = g.graph();

  // shifting graph coordinates to center

@@ -47,15 +47,15 @@ var doLayout = function(nodes, edges, width, height, scale, margins) {
  // apply coordinates to nodes and edges

  g.nodes().forEach(function(id) {
-    var node = nodes[id];
-    var graphNode = g.node(id);
+    const node = nodes[id];
+    const graphNode = g.node(id);
    node.x = graphNode.x + offsetX;
    node.y = graphNode.y + offsetY;
  });

  g.edges().forEach(function(id) {
-    var graphEdge = g.edge(id);
-    var edge = edges[graphEdge.id];
+    const graphEdge = g.edge(id);
+    const edge = edges[graphEdge.id];
    _.each(graphEdge.points, function(point) {
      point.x += offsetX;
      point.y += offsetY;
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -1,19 +1,18 @@
-var React = require('react');
-var _ = require('lodash');
+const React = require('react');

-var Logo = require('./logo');
-var AppStore = require('../stores/app-store');
-var Groupings = require('./groupings.js');
-var Status = require('./status.js');
-var Topologies = require('./topologies.js');
-var WebapiUtils = require('../utils/web-api-utils');
-var AppActions = require('../actions/app-actions');
-var Details = require('./details');
-var Nodes = require('./nodes');
-var RouterUtils = require('../utils/router-utils');
+const Logo = require('./logo');
+const AppStore = require('../stores/app-store');
+const Groupings = require('./groupings.js');
+const Status = require('./status.js');
+const Topologies = require('./topologies.js');
+const WebapiUtils = require('../utils/web-api-utils');
+const AppActions = require('../actions/app-actions');
+const Details = require('./details');
+const Nodes = require('./nodes');
+const RouterUtils = require('../utils/router-utils');


-var ESC_KEY_CODE = 27;
+const ESC_KEY_CODE = 27;

 function getStateFromStores() {
  return {
@@ -24,11 +23,11 @@ function getStateFromStores() {
    nodeDetails: AppStore.getNodeDetails(),
    nodes: AppStore.getNodes(),
    topologies: AppStore.getTopologies()
-  }
+  };
 }


-var App = React.createClass({
+const App = React.createClass({

  getInitialState: function() {
    return getStateFromStores();
@@ -53,7 +52,7 @@ var App = React.createClass({
  },

  render: function() {
-    var showingDetails = this.state.selectedNodeId;
+    const showingDetails = this.state.selectedNodeId;

    return (
      <div>
--- a/client/app/scripts/components/details.js
+++ b/client/app/scripts/components/details.js
@@ -1,18 +1,11 @@
-var React = require('react');
-var _ = require('lodash');
-var mui = require('material-ui');
-var Paper = mui.Paper;
-var IconButton = mui.IconButton;
+const React = require('react');
+const mui = require('material-ui');
+const Paper = mui.Paper;

-var AppActions = require('../actions/app-actions');
-var NodeDetails = require('./node-details');
+const AppActions = require('../actions/app-actions');
+const NodeDetails = require('./node-details');

-var Details = React.createClass({
-
-  handleClickClose: function(ev) {
-    ev.preventDefault();
-    AppActions.clickCloseDetails();
-  },
+const Details = React.createClass({

  render: function() {
    return (
@@ -25,8 +18,14 @@ var Details = React.createClass({
        </Paper>
      </div>
    );
+  },
+
+  handleClickClose: function(ev) {
+    ev.preventDefault();
+    AppActions.clickCloseDetails();
  }

+
 });

-module.exports = Details;
+module.exports = Details;
--- a/client/app/scripts/components/explorer.js
+++ b/client/app/scripts/components/explorer.js
@@ -1,15 +1,15 @@
-var React = require('react');
-var _ = require('lodash');
+const React = require('react');
+const _ = require('lodash');

-var NodesChart = require('../charts/nodes-chart');
-var NodeDetails = require('./node-details');
+const NodesChart = require('../charts/nodes-chart');
+const NodeDetails = require('./node-details');

-var marginBottom = 64;
-var marginTop = 64;
-var marginLeft = 36;
-var marginRight = 36;
+const marginBottom = 64;
+const marginTop = 64;
+const marginLeft = 36;
+const marginRight = 36;

-var Explorer = React.createClass({
+const Explorer = React.createClass({

  getInitialState: function() {
    return {
@@ -27,27 +27,16 @@ var Explorer = React.createClass({
    window.removeEventListener('resize', this.handleResize);
  },

-  setDimensions: function() {
-    this.setState({
-      height: window.innerHeight - marginBottom - marginTop,
-      width: window.innerWidth - marginLeft - marginRight
-    });
-  },
-
-  handleResize: function() {
-    this.setDimensions();
-  },
-
  getSubTopology: function(topology) {
-    var subTopology = {};
-    var nodeSet = [];
+    const subTopology = {};
+    const nodeSet = [];

    _.each(this.props.expandedNodes, function(nodeId) {
      if (topology[nodeId]) {
        subTopology[nodeId] = topology[nodeId];
        nodeSet = _.union(subTopology[nodeId].adjacency, nodeSet);
        _.each(subTopology[nodeId].adjacency, function(adjacentId) {
-          var node = _.assign({}, topology[adjacentId]);
+          const node = _.assign({}, topology[adjacentId]);

          subTopology[adjacentId] = node;
        });
@@ -62,20 +51,14 @@ var Explorer = React.createClass({
    return subTopology;
  },

-  onNodeClick: function(ev) {
-    var nodeId = ev.currentTarget.id;
-    AppActions.clickNode(nodeId);
-  },
-
  render: function() {
-    var subTopology = this.getSubTopology(this.props.nodes);
+    const subTopology = this.getSubTopology(this.props.nodes);

    return (
      <div id="explorer">
        <NodeDetails details={this.props.details} />
        <div className="graph">
          <NodesChart
-            onNodeClick={this.onNodeClick}
            layout={this.state.layout}
            nodes={subTopology}
            highlightedNodes={this.props.expandedNodes}
@@ -86,8 +69,19 @@ var Explorer = React.createClass({
        </div>
      </div>
    );
+  },
+
+  setDimensions: function() {
+    this.setState({
+      height: window.innerHeight - marginBottom - marginTop,
+      width: window.innerWidth - marginLeft - marginRight
+    });
+  },
+
+  handleResize: function() {
+    this.setDimensions();
  }

 });

-module.exports = Explorer;
+module.exports = Explorer;
--- a/client/app/scripts/components/groupings.js
+++ b/client/app/scripts/components/groupings.js
@@ -1,10 +1,9 @@
-var React = require('react');
-var _ = require('lodash');
+const React = require('react');
+const _ = require('lodash');

-var AppActions = require('../actions/app-actions');
-var AppStore = require('../stores/app-store');
+const AppActions = require('../actions/app-actions');

-var GROUPINGS = [{
+const GROUPINGS = [{
  id: 'none',
  iconClass: 'fa fa-th',
  needsTopology: false
@@ -14,31 +13,27 @@ var GROUPINGS = [{
  needsTopology: 'grouped_url'
 }];

-var Groupings = React.createClass({
+const Groupings = React.createClass({

  onGroupingClick: function(ev) {
    ev.preventDefault();
    AppActions.clickGrouping(ev.currentTarget.getAttribute('rel'));
  },

-  isGroupingSupportedByTopology: function(topology, grouping) {
-    return !grouping.needsTopology || topology && topology[grouping.needsTopology];
-  },
-
  getGroupingsSupportedByTopology: function(topology) {
    return _.filter(GROUPINGS, _.partial(this.isGroupingSupportedByTopology, topology));
  },

  renderGrouping: function(grouping, activeGroupingId) {
-    var className = "groupings-item",
-      isSupportedByTopology = this.isGroupingSupportedByTopology(this.props.currentTopology, grouping);
+    let className = 'groupings-item';
+    const isSupportedByTopology = this.isGroupingSupportedByTopology(this.props.currentTopology, grouping);

    if (grouping.id === activeGroupingId) {
-      className += " groupings-item-active";
+      className += ' groupings-item-active';
    } else if (!isSupportedByTopology) {
-      className += " groupings-item-disabled";
+      className += ' groupings-item-disabled';
    } else {
-      className += " groupings-item-default";
+      className += ' groupings-item-default';
    }

    return (
@@ -49,8 +44,8 @@ var Groupings = React.createClass({
  },

  render: function() {
-    var activeGrouping = this.props.active,
-      isGroupingSupported = _.size(this.getGroupingsSupportedByTopology(this.props.currentTopology)) > 1;
+    const activeGrouping = this.props.active;
+    const isGroupingSupported = _.size(this.getGroupingsSupportedByTopology(this.props.currentTopology)) > 1;

    return (
      <div className="groupings">
@@ -59,6 +54,10 @@ var Groupings = React.createClass({
        }, this)}
      </div>
    );
+  },
+
+  isGroupingSupportedByTopology: function(topology, grouping) {
+    return !grouping.needsTopology || topology && topology[grouping.needsTopology];
  }

 });
--- a/client/app/scripts/components/logo.js
+++ b/client/app/scripts/components/logo.js
@@ -1,6 +1,6 @@
-var React = require('react');
+const React = require('react');

-var Logo = React.createClass({
+const Logo = React.createClass({

  render: function() {
    return (
@@ -16,7 +16,7 @@ var Logo = React.createClass({
          <path fill="#FF4B19" d="M155.276,133.518l58.14-51.933c-2.77-6.938-6.551-13.358-11.175-19.076l-46.965,41.951V133.518z"/>
          <path fill="#FF4B19" d="M133.605,123.817l-18.668,16.676V41.242c-8.086,3.555-15.409,8.513-21.672,14.567V162.19
            c4.885,4.724,10.409,8.787,16.444,12.03l23.896-21.345V123.817z"/>
-          <polygon fill="#32324B" points="325.563,124.099 339.389,72.22 357.955,72.22 337.414,144.377 315.556,144.377 303.311,95.79 
+          <polygon fill="#32324B" points="325.563,124.099 339.389,72.22 357.955,72.22 337.414,144.377 315.556,144.377 303.311,95.79
            291.065,144.377 269.207,144.377 248.666,72.22 267.232,72.22 281.058,124.099 294.752,72.22 311.869,72.22 "/>
          <path fill="#32324B" d="M426.429,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
            c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
@@ -28,7 +28,7 @@ var Logo = React.createClass({
            L480.628,97.634z M480.628,111.195l-6.979,1.054c-3.819,0.658-8.427,1.315-11.192,1.843c-3.029,0.527-5.662,1.186-7.637,2.765
            c-1.844,1.449-2.765,3.425-2.765,5.926c0,2.107,0.79,8.69,10.666,8.69c5.793,0,10.928-2.105,13.693-4.872
            c3.556-3.555,4.214-8.032,4.214-11.587V111.195z"/>
-          <polygon fill="#32324B" points="549.495,144.377 525.399,144.377 501.698,72.221 521.186,72.221 537.775,127.392 554.499,72.221 
+          <polygon fill="#32324B" points="549.495,144.377 525.399,144.377 501.698,72.221 521.186,72.221 537.775,127.392 554.499,72.221
            573.459,72.221 "/>
          <path fill="#32324B" d="M641.273,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
            c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
@@ -62,4 +62,4 @@ var Logo = React.createClass({

 });

-module.exports = Logo;
+module.exports = Logo;
--- a/client/app/scripts/components/node-details-table.js
+++ b/client/app/scripts/components/node-details-table.js
@@ -1,10 +1,9 @@
-var React = require('react');
-var _ = require('lodash');
+const React = require('react');

-var NodeDetailsTable = React.createClass({
+const NodeDetailsTable = React.createClass({

  render: function() {
-    var isNumeric = this.props.isNumeric;
+    const isNumeric = this.props.isNumeric;

    return (
      <div className="node-details-table">
@@ -29,4 +28,4 @@ var NodeDetailsTable = React.createClass({

 });

-module.exports = NodeDetailsTable;
+module.exports = NodeDetailsTable;
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -1,24 +1,23 @@
-var React = require('react');
-var _ = require('lodash');
+const React = require('react');

-var NodeDetailsTable = require('./node-details-table');
-var NodeColorMixin = require('../mixins/node-color-mixin');
+const NodeDetailsTable = require('./node-details-table');
+const NodeColorMixin = require('../mixins/node-color-mixin');

-var NodeDetails = React.createClass({
+const NodeDetails = React.createClass({

  mixins: [
    NodeColorMixin
  ],

  render: function() {
-    var node = this.props.details;
+    const node = this.props.details;

    if (!node) {
      return <div className="node-details" />;
    }

-    var style = {
-      "background-color": this.getNodeColorDark(node.label_major)
+    const style = {
+      'background-color': this.getNodeColorDark(node.label_major)
    };

    return (
@@ -41,4 +40,4 @@ var NodeDetails = React.createClass({

 });

-module.exports = NodeDetails;
+module.exports = NodeDetails;
--- a/client/app/scripts/components/nodes.js
+++ b/client/app/scripts/components/nodes.js
@@ -1,13 +1,12 @@
-var React = require('react');
+const React = require('react');

-var NodesChart = require('../charts/nodes-chart');
-var AppActions = require('../actions/app-actions');
+const NodesChart = require('../charts/nodes-chart');
+const AppActions = require('../actions/app-actions');

-var navbarHeight = 160;
-var marginTop = 0;
-var marginLeft = 0;
+const navbarHeight = 160;
+const marginTop = 0;

-var Nodes = React.createClass({
+const Nodes = React.createClass({

  getInitialState: function() {
    return {
@@ -16,10 +15,6 @@ var Nodes = React.createClass({
    };
  },

-  onNodeClick: function(ev) {
-    AppActions.clickNode(ev.currentTarget.id);
-  },
-
  componentDidMount: function() {
    window.addEventListener('resize', this.handleResize);
  },
@@ -28,15 +23,8 @@ var Nodes = React.createClass({
    window.removeEventListener('resize', this.handleResize);
  },

-  setDimensions: function() {
-    this.setState({
-      height: window.innerHeight - navbarHeight - marginTop,
-      width: window.innerWidth
-    });
-  },
-
-  handleResize: function() {
-    this.setDimensions();
+  onNodeClick: function(ev) {
+    AppActions.clickNode(ev.currentTarget.id);
  },

  render: function() {
@@ -51,8 +39,19 @@ var Nodes = React.createClass({
        />
      </div>
    );
+  },
+
+  handleResize: function() {
+    this.setDimensions();
+  },
+
+  setDimensions: function() {
+    this.setState({
+      height: window.innerHeight - navbarHeight - marginTop,
+      width: window.innerWidth
+    });
  }

 });

-module.exports = Nodes;
+module.exports = Nodes;
--- a/client/app/scripts/components/status.js
+++ b/client/app/scripts/components/status.js
@@ -1,6 +1,6 @@
-var React = require('react');
+const React = require('react');

-var Status = React.createClass({
+const Status = React.createClass({

  renderConnectionState: function() {
    return (
@@ -12,7 +12,7 @@ var Status = React.createClass({
  },

  render: function() {
-    var isDisconnected = this.props.connectionState === 'disconnected';
+    const isDisconnected = this.props.connectionState === 'disconnected';

    return (
      <div className="status">
--- a/client/app/scripts/components/topologies.js
+++ b/client/app/scripts/components/topologies.js
@@ -1,21 +1,21 @@
-var React = require('react');
-var _ = require('lodash');
+const React = require('react');
+const _ = require('lodash');

-var AppActions = require('../actions/app-actions');
-var AppStore = require('../stores/app-store');
+const AppActions = require('../actions/app-actions');
+const AppStore = require('../stores/app-store');

-var Topologies = React.createClass({
+const Topologies = React.createClass({

  onTopologyClick: function(ev) {
    ev.preventDefault();
    AppActions.clickTopology(ev.currentTarget.getAttribute('rel'));
  },

-  renderTopology: function(topology, active) {
-    var isActive = topology.name === this.props.currentTopology.name,
-      className = isActive ? "topologies-item topologies-item-active" : "topologies-item",
-      topologyId = AppStore.getTopologyIdForUrl(topology.url),
-      title = ['Topology: ' + topology.name,
+  renderTopology: function(topology) {
+    const isActive = topology.name === this.props.currentTopology.name;
+    const className = isActive ? 'topologies-item topologies-item-active' : 'topologies-item';
+    const topologyId = AppStore.getTopologyIdForUrl(topology.url);
+    const title = ['Topology: ' + topology.name,
      'Nodes: ' + topology.stats.node_count,
      'Connections: ' + topology.stats.node_count].join('\n');

@@ -31,7 +31,7 @@ var Topologies = React.createClass({
  },

  render: function() {
-    var topologies = _.sortBy(this.props.topologies, function(topology) {
+    const topologies = _.sortBy(this.props.topologies, function(topology) {
        return topology.name;
      });

--- a/client/app/scripts/constants/action-types.js
+++ b/client/app/scripts/constants/action-types.js
@@ -1,4 +1,4 @@
-var keymirror = require('keymirror');
+const keymirror = require('keymirror');

 module.exports = keymirror({
  CLICK_CLOSE_DETAILS: null,
--- a/client/app/scripts/dispatcher/app-dispatcher.js
+++ b/client/app/scripts/dispatcher/app-dispatcher.js
@@ -1,10 +1,10 @@
-var flux = require('flux');
-var _ = require('lodash');
+const flux = require('flux');
+const _ = require('lodash');

-var AppDispatcher = new flux.Dispatcher();
+const AppDispatcher = new flux.Dispatcher();

 AppDispatcher.dispatch = _.wrap(flux.Dispatcher.prototype.dispatch, function(func) {
-  var args = Array.prototype.slice.call(arguments, 1);
+  const args = Array.prototype.slice.call(arguments, 1);
  // console.log(args[0]);
  func.apply(this, args);
 });
--- a/client/app/scripts/main.js
+++ b/client/app/scripts/main.js
@@ -1,6 +1,6 @@
-var React = require('react');
+const React = require('react');

-var App = require('./components/app.js');
+const App = require('./components/app.js');

 React.render(
  <App/>,
--- a/client/app/scripts/mixins/node-color-mixin.js
+++ b/client/app/scripts/mixins/node-color-mixin.js
@@ -1,27 +1,27 @@
-var d3 = require('d3');
+const d3 = require('d3');

-var colors = d3.scale.category20();
+const colors = d3.scale.category20();

 // make sure the internet always gets the same color
-var internetLabel = "the Internet";
+const internetLabel = 'the Internet';
 colors(internetLabel);


-var NodeColorMixin = {
+const NodeColorMixin = {
  getNodeColor: function(text) {
    return colors(text);
  },
  getNodeColorDark: function(text) {
-    var color = d3.rgb(colors(text));
-    var hsl = color.hsl();
+    const color = d3.rgb(colors(text));
+    let hsl = color.hsl();

    // ensure darkness
    // if (hsl.l > 0.5) {
-      hsl = hsl.darker();
+    hsl = hsl.darker();
    // }

    return hsl.toString();
  }
 };

-module.exports = NodeColorMixin;
+module.exports = NodeColorMixin;
--- a/client/app/scripts/stores/tests/app-store-test.js
+++ b/client/app/scripts/stores/tests/app-store-test.js
@@ -1,21 +1,23 @@
-describe('AppStore', function() {

-  var ActionTypes = require('../../constants/action-types');
-  var AppStore, registeredCallback;
+
+describe('AppStore', function() {
+  const ActionTypes = require('../../constants/action-types');
+  let AppStore;
+  let registeredCallback;

  // actions

-  var ClickTopologyAction = {
+  const ClickTopologyAction = {
    type: ActionTypes.CLICK_TOPOLOGY,
    topologyId: 'topo1'
  };

-  var ClickGroupingAction = {
+  const ClickGroupingAction = {
    type: ActionTypes.CLICK_GROUPING,
    grouping: 'grouped'
  };

-  var ReceiveTopologiesAction = {
+  const ReceiveTopologiesAction = {
    type: ActionTypes.RECEIVE_TOPOLOGIES,
    topologies: [{
      url: '/topo1',
@@ -32,7 +34,7 @@ describe('AppStore', function() {
  // topology tests

  it('init with no topologies', function() {
-    var topos = AppStore.getTopologies();
+    const topos = AppStore.getTopologies();
    expect(topos.length).toBe(0);
    expect(AppStore.getCurrentTopology()).toBeUndefined();
  });
@@ -56,5 +58,4 @@ describe('AppStore', function() {
    expect(AppStore.getCurrentTopologyUrl()).toBe('/topo1grouped');
  });

-
 });
--- a/client/app/scripts/stores/app-store.js
+++ b/client/app/scripts/stores/app-store.js
@@ -1,25 +1,30 @@
-var EventEmitter = require('events').EventEmitter;
-var _ = require('lodash');
-var assign = require('object-assign');
+const EventEmitter = require('events').EventEmitter;
+const _ = require('lodash');
+const assign = require('object-assign');

-var AppDispatcher = require('../dispatcher/app-dispatcher');
-var ActionTypes = require('../constants/action-types');
+const AppDispatcher = require('../dispatcher/app-dispatcher');
+const ActionTypes = require('../constants/action-types');

+// Helpers
+
+function isUrlForTopologyId(url, topologyId) {
+  return _.endsWith(url, topologyId);
+}

 // Initial values

-var connectionState = 'disconnected';
-var currentGrouping = 'none';
-var currentTopologyId = 'applications';
-var mouseOverNode = null;
-var nodes = {};
-var nodeDetails = null;
-var selectedNodeId = null;
-var topologies = [];
+let connectionState = 'disconnected';
+let currentGrouping = 'none';
+let currentTopologyId = 'applications';
+let mouseOverNode = null;
+let nodes = {};
+let nodeDetails = null;
+let selectedNodeId = null;
+let topologies = [];

 // Store API

-var AppStore = assign({}, EventEmitter.prototype, {
+const AppStore = assign({}, EventEmitter.prototype, {

  CHANGE_EVENT: 'change',

@@ -42,10 +47,10 @@ var AppStore = assign({}, EventEmitter.prototype, {
  },

  getCurrentTopologyUrl: function() {
-    var topology = this.getCurrentTopology();
+    const topology = this.getCurrentTopology();

    if (topology) {
-      return topology.grouped_url && currentGrouping == 'grouped' ? topology.grouped_url : topology.url;
+      return topology.grouped_url && currentGrouping === 'grouped' ? topology.grouped_url : topology.url;
    }
  },

@@ -74,14 +79,6 @@ var AppStore = assign({}, EventEmitter.prototype, {
  }
 });

-
-// Helpers
-
-function isUrlForTopologyId(url, topologyId) {
-  return _.endsWith(url, topologyId);
-}
-
-
 // Store Dispatch Hooks

 AppStore.registeredCallback = function(payload) {
@@ -140,7 +137,7 @@ AppStore.registeredCallback = function(payload) {
        'update', _.size(payload.delta.update),
        'add', _.size(payload.delta.add));

-      connectionState = "connected";
+      connectionState = 'connected';

      // nodes that no longer exist
      _.each(payload.delta.remove, function(nodeId) {
--- a/client/app/scripts/utils/router-utils.js
+++ b/client/app/scripts/utils/router-utils.js
@@ -1,25 +1,24 @@
-var page = require('page');
+const page = require('page');

-var AppActions = require('../actions/app-actions');
-var AppStore = require('../stores/app-store');
-
-page('/', function(ctx) {
-  updateRoute();
-});
-
-page('/state/:state', function(ctx) {
-  var state = JSON.parse(ctx.params.state);
-  AppActions.route(state);
-});
+const AppActions = require('../actions/app-actions');
+const AppStore = require('../stores/app-store');

 function updateRoute() {
-  var state = AppStore.getAppState();
-  var stateUrl = JSON.stringify(state);
-  var dispatch = false;
+  const state = AppStore.getAppState();
+  const stateUrl = JSON.stringify(state);
+  const dispatch = false;

  page.show('/state/' + stateUrl, state, dispatch);
 }

+page('/', function() {
+  updateRoute();
+});
+
+page('/state/:state', function(ctx) {
+  const state = JSON.parse(ctx.params.state);
+  AppActions.route(state);
+});

 module.exports = {
  getRouter: function() {
@@ -27,4 +26,4 @@ module.exports = {
  },

  updateRoute: updateRoute
-};
+};
--- a/client/app/scripts/utils/web-api-utils.js
+++ b/client/app/scripts/utils/web-api-utils.js
@@ -1,15 +1,15 @@
-var reqwest = require('reqwest');
+const reqwest = require('reqwest');

-var AppActions = require('../actions/app-actions');
+const AppActions = require('../actions/app-actions');

-var WS_URL = window.WS_URL || 'ws://' + location.host;
+const WS_URL = window.WS_URL || 'ws://' + location.host;


-var socket;
-var reconnectTimer = 0;
-var currentUrl = null;
-var updateFrequency = '5s';
-var topologyTimer = 0;
+let socket;
+let reconnectTimer = 0;
+let currentUrl = null;
+let updateFrequency = '5s';
+let topologyTimer = 0;

 function createWebsocket(topologyUrl) {
  if (socket) {
@@ -26,10 +26,10 @@ function createWebsocket(topologyUrl) {
    reconnectTimer = setTimeout(function() {
      createWebsocket(topologyUrl);
    }, 5000);
-  }
+  };

  socket.onmessage = function(event) {
-    var msg = JSON.parse(event.data);
+    const msg = JSON.parse(event.data);
    if (msg.add || msg.remove || msg.update) {
      AppActions.receiveNodesDelta(msg);
    }
@@ -48,7 +48,7 @@ function getTopologies() {

 function getNodeDetails(topologyUrl, nodeId) {
  if (topologyUrl && nodeId) {
-    var url = [topologyUrl, nodeId].join('/');
+    const url = [topologyUrl, nodeId].join('/');
    reqwest(url, function(res) {
      AppActions.receiveNodeDetails(res.node);
    });
@@ -65,4 +65,5 @@ module.exports = {
      createWebsocket(topologyUrl);
    }
  }
-}
+};
+
--- a/client/gulpfile.js
+++ b/client/gulpfile.js
@@ -1,21 +1,21 @@
-'use strict';

-var gulp = require('gulp');
-var connect = require('gulp-connect');
-var livereload = require('gulp-livereload');
-var browserify = require('browserify');
-var del = require('del');
-var source = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-var reactify = require('reactify');
+const gulp = require('gulp');
+const connect = require('gulp-connect');
+const livereload = require('gulp-livereload');
+const babelify = require('babelify');
+const browserify = require('browserify');
+const del = require('del');
+const source = require('vinyl-source-stream');
+const vbuffer = require('vinyl-buffer');
+const reactify = require('reactify');

 // load plugins
-var $ = require('gulp-load-plugins')();
+const $ = require('gulp-load-plugins')();

 var isDev = true;
 var isProd = false;

-gulp.task('styles', function () {
+gulp.task('styles', function() {
  return gulp.src('app/styles/main.less')
    .pipe($.if(isDev, $.sourcemaps.init()))
    .pipe($.less())
@@ -29,22 +29,23 @@ gulp.task('styles', function () {
 });

 gulp.task('scripts', function() {
-  var bundler = browserify('./app/scripts/main.js', {debug: isDev});
+  const bundler = browserify('./app/scripts/main.js', {debug: isDev});
  bundler.transform(reactify);
+  bundler.transform(babelify);

-  var stream = bundler.bundle();
+  const stream = bundler.bundle();

  return stream
    .pipe(source('bundle.js'))
    .pipe($.if(isDev, gulp.dest('.tmp/scripts')))
-    .pipe($.if(isProd, buffer()))
+    .pipe($.if(isProd, vbuffer()))
    .pipe($.if(isProd, $.uglify()))
+    .on('error', $.util.log)
    .pipe($.if(isProd, gulp.dest('dist/scripts')))
-    .pipe(livereload())
-    .on('error', $.util.log);
+    .pipe(livereload());
 });

-gulp.task('html', ['styles', 'scripts'], function () {
+gulp.task('html', ['styles', 'scripts'], function() {
  return gulp.src('app/*.html')
    .pipe($.preprocess())
    .pipe(gulp.dest('dist'))
@@ -52,13 +53,13 @@ gulp.task('html', ['styles', 'scripts'], function () {
    .pipe(livereload());
 });

-gulp.task('images', function () {
+gulp.task('images', function() {
  return gulp.src('app/images/**/*')
    .pipe(gulp.dest('dist/images'))
    .pipe($.size());
 });

-gulp.task('fonts', function () {
+gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
@@ -67,50 +68,51 @@ gulp.task('fonts', function () {
    .pipe($.size());
 });

-gulp.task('extras', function () {
+gulp.task('extras', function() {
  return gulp.src(['app/*.*', '!app/*.html'], { dot: true })
    .pipe(gulp.dest('dist'));
 });

-gulp.task('clean', function () {
+gulp.task('clean', function() {
  return del(['.tmp', 'dist']);
 });


-gulp.task('lint', function () {
+gulp.task('lint', function() {
  return gulp.src(['app/**/*.js'])
-    // eslint() attaches the lint output to the eslint property 
-    // of the file object so it can be used by other modules. 
+    // eslint() attaches the lint output to the eslint property
+    // of the file object so it can be used by other modules.
    .pipe($.eslint())
-    // eslint.format() outputs the lint results to the console. 
-    // Alternatively use eslint.formatEach() (see Docs). 
-    .pipe($.eslint.format());
-    // To have the process exit with an error code (1) on 
-    // lint error, return the stream and pipe to failOnError last. 
-    //.pipe($.eslint.failOnError());
+    // eslint.format() outputs the lint results to the console.
+    // Alternatively use eslint.formatEach() (see Docs).
+    .pipe($.eslint.format())
+    // To have the process exit with an error code (1) on
+    // lint error, return the stream and pipe to failOnError last.
+    .pipe($.eslint.failOnError());
 });

 gulp.task('production', ['html', 'images', 'fonts', 'extras']);

-gulp.task('build', function () {
+gulp.task('build', function() {
  isDev = false;
  isProd = true;
  gulp.start('production');
 });

-gulp.task('default', ['clean'], function () {
+gulp.task('default', ['clean'], function() {
  gulp.start('build');
 });

-gulp.task('connect', function () {
+gulp.task('connect', function() {
+  const root = isProd ? ['dist'] : ['.tmp', 'app'];
  connect.server({
-    root: ['.tmp', 'app'],
+    root: root,
    port: 4041,
-    middleware: function(connect, o) {
+    middleware: function() {
      return [(function() {
-        var url = require('url');
-        var proxy = require('proxy-middleware');
-        var options = url.parse('http://localhost:4040/api');
+        const url = require('url');
+        const proxy = require('proxy-middleware');
+        const options = url.parse('http://localhost:4040/api');
        options.route = '/api';
        return proxy(options);
      })()];
@@ -121,7 +123,19 @@ gulp.task('connect', function () {

 gulp.task('serve', ['connect', 'styles', 'scripts', 'fonts']);

-gulp.task('watch', ['serve'], function () {
+gulp.task('serve-build', function() {
+  isDev = false;
+  isProd = true;
+
+  // use local WS api
+  gulp.src('app/*.html')
+    .pipe($.preprocess({context: {DEBUG: true} }))
+    .pipe(gulp.dest('dist'));
+
+  gulp.start('connect');
+});
+
+gulp.task('watch', ['serve'], function() {
  livereload.listen();
  gulp.watch('app/styles/**/*.less', ['styles']);
  gulp.watch('app/scripts/**/*.js', ['scripts']);
--- a/client/package.json
+++ b/client/package.json
@@ -22,9 +22,11 @@
  },
  "devDependencies": {
    "babel-eslint": "^3.1.9",
+    "babelify": "^6.1.2",
    "browserify": "^10.2.0",
    "del": "^1.1.1",
    "eslint": "^0.21.2",
+    "eslint-plugin-jasmine": "^1.0.0",
    "eslint-plugin-react": "^2.3.0",
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.3.0",
--- a/client/test/karma.conf.js
+++ b/client/test/karma.conf.js
@@ -14,7 +14,7 @@ module.exports = function(config) {
    },
    browserify: {
      debug: true,
-      transform: ['reactify']
+      transform: ['reactify', 'babelify']
    },
    reporters: [
      'dots'