add test to check for detail pane titles

client/app/scripts/components/__tests__/node-details-test.js

@@ -0,0 +1,31 @@
+describe('NodeDetails', () => {
+  let NodeDetails;
+  let nodes;
+  let nodeId;
+  let details;
+  const React = require('react');
+  const Immutable = require('immutable');
+  const TestUtils = require('react/lib/ReactTestUtils');
+
+  beforeEach(() => {
+    NodeDetails = require('../node-details.js');
+    nodes = Immutable.OrderedMap();
+    nodeId = 'n1';
+  });
+
+  it('shows n/a when node was not found', () => {
+    const c = TestUtils.renderIntoDocument(<NodeDetails nodes={nodes} nodeId={nodeId} />);
+    const notFound = TestUtils.findRenderedDOMComponentWithClass(c, 'node-details-header-notavailable');
+    expect(notFound).toBeDefined();
+  });
+
+  it('show label of node with title', () => {
+    nodes = nodes.set(nodeId, Immutable.fromJS({id: nodeId}));
+    details = {label_major: 'Node 1', tables: []};
+    const c = TestUtils.renderIntoDocument(<NodeDetails nodes={nodes} nodeId={nodeId} details={details} />);
+
+    const title = TestUtils.findRenderedDOMComponentWithClass(c, 'node-details-header-label');
+    expect(title.getDOMNode().textContent).toBe('Node 1');
+  });
+
+});

client/app/scripts/components/node-details.js

@@ -47,7 +47,7 @@ const NodeDetails = React.createClass({
 
   render: function() {
     const details = this.props.details;
-    const nodeExists = this.props.nodes[this.props.nodeId];
+    const nodeExists = this.props.nodes && this.props.nodes.has(this.props.nodeId);
 
     if (!nodeExists) {
       return this.renderNotAvailable();
@@ -58,7 +58,7 @@ const NodeDetails = React.createClass({
     }
 
     const style = {
-      'background-color': this.getNodeColorDark(details.label_major)
+      'backgroundColor': this.getNodeColorDark(details.label_major)
     };
 
     return (

client/test/karma.conf.js

@@ -4,6 +4,7 @@ module.exports = function(config) {
       'PhantomJS'
     ],
     files: [
+      './polyfill.js',
       {
         pattern: 'tests.webpack.js',
         watched: false

client/test/polyfill.js

@@ -0,0 +1,21 @@
+/**
+ * Function.prototype.bind polyfill used by PhantomJS
+ */
+if (typeof Function.prototype.bind != 'function') {
+  Function.prototype.bind = function bind(obj) {
+    var args = Array.prototype.slice.call(arguments, 1),
+      self = this,
+      nop = function() {
+      },
+      bound = function() {
+        return self.apply(
+          this instanceof nop ? this : (obj || {}), args.concat(
+            Array.prototype.slice.call(arguments)
+          )
+        );
+      };
+    nop.prototype = this.prototype || {};
+    bound.prototype = new nop();
+    return bound;
+  };
+}