Add enzyme's mount API for testing.

So, we don't need to use classNames

dist/client/ui/foldable.js

@@ -120,13 +120,13 @@ var Foldable = function (_React$Component) {
           { style: folderSidebarStyle },
           _react2.default.createElement(
             'span',
-            { className: 'foldable-toggle', onClick: this.onToggleCallback },
+            { ref: 'foldable-toggle', onClick: this.onToggleCallback },
             this.state.collapsed ? '►' : '▼'
           )
         ),
         _react2.default.createElement(
           'div',
-          { className: 'foldable-content', style: folderContentStyle },
+          { ref: 'foldable-content', style: folderContentStyle },
           content
         )
       );

package.json

@@ -33,6 +33,7 @@
     "enzyme": "^2.2.0",
     "expect": "^1.6.0",
     "express": "^4.13.3",
+    "jsdom": "^8.4.0",
     "json-stringify-safe": "^5.0.1",
     "node-libs-browser": "^0.5.2",
     "page-bus": "^3.0.1",

scripts/mocha_runner.js

@@ -1,6 +1,24 @@
 require('babel-core/register');
 require('babel-polyfill');
 
+// Add jsdom support, which is required for enzyme.
+var jsdom = require('jsdom').jsdom;
+
+var exposedProperties = ['window', 'navigator', 'document'];
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
 process.on('unhandledRejection', function (error) {
   console.error('Unhandled Promise Rejection:');
   console.error(error && error.stack || error);

src/client/ui/__tests__/foldable.js

@@ -1,6 +1,6 @@
 const { describe, it } = global;
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
 import Foldable from '../foldable';
 
@@ -14,9 +14,8 @@ describe('<Foldable />', function () {
 
       const compactString = '{"name":"test action","args":"things"}';
 
-      const wrap = shallow(<Foldable action={data} />);
-      const content = wrap.find('.foldable-content').first();
-
+      const wrap = mount(<Foldable action={data} />);
+      const content = wrap.ref('foldable-content');
       expect(content.text()).to.equal(compactString);
     });
 
@@ -26,17 +25,16 @@ describe('<Foldable />', function () {
         args: 'things',
       };
 
-      const fullString = '{ "name": "test action",\n  "args": "things"\n}';
+      const fullString = '{\n  "name": "test action",\n  "args": "things"\n}';
 
-      const wrap = shallow(<Foldable action={data} />);
-      const toggle = wrap.find('.foldable-toggle').first();
+      const wrap = mount(<Foldable action={data} />);
+      const toggle = wrap.ref('foldable-toggle');
 
       toggle.simulate('click');
 
       expect(wrap.state()).to.deep.equal({ collapsed: false });
 
-      const content = wrap.find('.foldable-content').first();
-
+      const content = wrap.ref('foldable-content');
       expect(content.text()).to.equal(fullString);
     });
   });

src/client/ui/foldable.js

@@ -66,12 +66,12 @@ class Foldable extends React.Component {
     return (
       <div ref="folder" style={ folderStyle }>
         <div style={ folderSidebarStyle }>
-          <span className="foldable-toggle" onClick={ this.onToggleCallback }>
+          <span ref="foldable-toggle" onClick={ this.onToggleCallback }>
             { this.state.collapsed ? '►' : '▼' }
           </span>
         </div>
 
-        <div className="foldable-content" style={ folderContentStyle }>
+        <div ref="foldable-content" style={ folderContentStyle }>
           { content }
         </div>
       </div>