Add some simple UI tests with enzyme

Author: fritz-c

Diff for: package.json

@@ -53,6 +53,7 @@
     "babel-preset-react": "^6.11.1",
     "cross-env": "^3.0.0",
     "css-loader": "0.x.x",
+    "enzyme": "^2.6.0",
     "eslint": "^3.2.2",
     "eslint-config-blue-hour": "0.x.x",
     "eslint-loader": "^1.5.0",
@@ -63,6 +64,8 @@
     "gh-pages": "^0.12.0",
     "html-webpack-plugin": "^2.22.0",
     "jasmine-core": "^2.4.1",
+    "jasmine-enzyme": "^2.0.0",
+    "json-loader": "^0.5.4",
     "karma": "^1.1.2",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-diff-reporter": "^0.6.2",
@@ -75,6 +78,7 @@
     "postcss-loader": "^1.1.1",
     "react": "^15.3.0",
     "react-addons-shallow-compare": "^15.3.0",
+    "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.3.0",
     "react-hot-loader": "^1.3.0",
     "rimraf": "^2.5.3",

Diff for: src/react-sortable-tree.test.js

@@ -0,0 +1,119 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { mount } from 'enzyme';
+import jasmineEnzyme from 'jasmine-enzyme';
+
+import { AutoSizer } from 'react-virtualized';
+import TreeNode from './tree-node';
+
+import SortableTree from './react-sortable-tree';
+
+describe('<SortableTree />', () => {
+    beforeEach(() => {
+        jasmineEnzyme(); // Add extra matchers like .toHaveStyle() to jasmine
+
+        // Keep react-virtualized's AutoSizer component from hiding everything in
+        // enzyme's rendering environment (which has no height/width, apparently)
+        spyOn(AutoSizer.prototype, 'render').and.callFake(function renderOverride() {
+            return (
+                <div ref={this._setRef}>
+                    {this.props.children({ width: 200, height: 99999 })}
+                </div>
+            );
+        });
+    });
+
+    it('should render nodes for flat data', () => {
+        const wrapper = mount(
+            <SortableTree
+                treeData={[]}
+                onChange={() => {}}
+            />
+        );
+
+        // No nodes
+        expect(wrapper.find(TreeNode).length).toEqual(0);
+
+        // Single node
+        wrapper.setProps({
+            treeData: [{}],
+        });
+        expect(wrapper.find(TreeNode).length).toEqual(1);
+
+        // Two nodes
+        wrapper.setProps({
+            treeData: [{}, {}],
+        });
+        expect(wrapper.find(TreeNode).length).toEqual(2);
+    });
+
+    it('should render nodes for nested, expanded data', () => {
+        const wrapper = mount(
+            <SortableTree
+                treeData={[{ expanded: true, children: [{}] }]}
+                onChange={() => {}}
+            />
+        );
+
+        // Single Nested
+        expect(wrapper.find(TreeNode).length).toEqual(2);
+
+        // Double Nested
+        wrapper.setProps({
+            treeData: [
+                { expanded: true, children: [{ expanded: true, children: [{}] }] },
+            ],
+        });
+        expect(wrapper.find(TreeNode).length).toEqual(3);
+
+        // 2x Double Nested Siblings
+        wrapper.setProps({
+            treeData: [
+                { expanded: true, children: [{ expanded: true, children: [{}] }] },
+                { expanded: true, children: [{ expanded: true, children: [{}] }] },
+            ],
+        });
+        expect(wrapper.find(TreeNode).length).toEqual(6);
+    });
+
+    it('should render nodes for nested, collapsed data', () => {
+        const wrapper = mount(
+            <SortableTree
+                treeData={[{ expanded: false, children: [{}] }]}
+                onChange={() => {}}
+            />
+        );
+
+        // Single Nested
+        expect(wrapper.find(TreeNode).length).toEqual(1);
+
+        // Double Nested
+        wrapper.setProps({
+            treeData: [
+                { expanded: false, children: [{ expanded: false, children: [{}] }] },
+            ],
+        });
+        expect(wrapper.find(TreeNode).length).toEqual(1);
+
+        // 2x Double Nested Siblings, top level of first expanded
+        wrapper.setProps({
+            treeData: [
+                { expanded: true,  children: [{ expanded: false, children: [{}] }] },
+                { expanded: false, children: [{ expanded: false, children: [{}] }] },
+            ],
+        });
+        expect(wrapper.find(TreeNode).length).toEqual(3);
+    });
+
+    it('should change height according to rowHeight prop', () => {
+        const wrapper = mount(
+            <SortableTree
+                treeData={[{ title: 'a' }]}
+                onChange={() => {}}
+                rowHeight={12}
+            />
+        );
+
+        expect(wrapper.find(TreeNode)).toHaveStyle('height', 12);
+    });
+});

Diff for: webpack.config.test.babel.js

@@ -64,8 +64,14 @@ module.exports = {
                 ],
                 include: path.join(__dirname, 'src')
             },
+            { test: /\.json$/, loader: 'json' }, // For the cheerio dependency of enzyme
         ],
     },
+    externals: { // All of these are for enzyme
+        'react/addons': true,
+        'react/lib/ExecutionEnvironment': true,
+        'react/lib/ReactContext': true,
+    },
     devServer: {
         contentBase: 'build',
         port: 3001