TASK: Integrate the test utility package for stateless pure react com…

…ponents #18

Resources/Private/JavaScript/Host/Components/Button/index.js

@@ -35,14 +35,18 @@ const Button = props => {
         ref: btn => {
             const method = isFocused ? 'focus' : 'blur';
 
+            //
             // Initially focus the btn if the propType was set.
+            //
             if (btn !== null) {
                 btn[method]();
             }
         }
     };
 
+    //
     // Disable the btn if the prop was set.
+    //
     if (isDisabled) {
         attributes.disabled = 'disabled';
     }

Resources/Private/JavaScript/Host/Components/Button/index.spec.js

@@ -1,28 +1,51 @@
 import React from 'react';
 import chai from 'chai';
-import TestUtils from 'react-addons-test-utils';
+import {shallowRender} from 'skin-deep';
 import Button from './index.js';
 
-const expect = chai.expect;
+const {expect} = chai;
+
+function renderTree(props) {
+    return shallowRender(
+        <Button {...props}>
+            My button text
+        </Button>
+    );
+}
 
 describe('Button Component', () => {
-    let renderer;
+    it('should render a `<button>` element and the passed text as the label.', () => {
+        const tree = renderTree({
+            isFocused: false,
+            isDisabled: false,
+            style: 'clean',
+            hoverStyle: 'clean',
+            onClick: () => null
+        });
 
-    beforeEach(() => {
-        renderer = TestUtils.createRenderer();
+        expect(tree.getRenderOutput().type).to.equal('button');
+        expect(tree.text()).to.equal('My button text');
     });
 
-    it('should render a button element and the passed children.', () => {
-        const onClickHandler = () => null;
+    it('should add the `disabled` attribute to the `<button>` node if the `isDisabled` prop was passed as `true`.', () => {
+        const disabledTree = renderTree({
+            isFocused: false,
+            isDisabled: true,
+            style: 'clean',
+            hoverStyle: 'clean',
+            onClick: () => null
+        });
 
-        renderer.render(
-            <Button isFocused={false} isDisabled={false} style="clean" hoverStyle="clean" onClick={onClickHandler}>
-                "test"
-            </Button>
-        );
+        expect(disabledTree.toString().indexOf('disabled') > -1).to.equal(true);
 
-        const actualElement = renderer.getRenderOutput();
+        const tree = renderTree({
+            isFocused: false,
+            isDisabled: false,
+            style: 'clean',
+            hoverStyle: 'clean',
+            onClick: () => null
+        });
 
-        expect(actualElement.type).to.equal('button');
+        expect(tree.toString().indexOf('disabled') > -1).to.equal(false);
     });
 });

package.json

@@ -34,6 +34,7 @@
     "redux-devtools": "^2.1.3",
     "sinon": "^1.17.2",
     "sinon-chai": "^2.8.0",
+    "skin-deep": "^0.14.0",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.9"

webpack.testing.config.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const glob = require('glob');
 const config = require('./webpack.shared.config.js');
@@ -16,14 +17,20 @@ const loaders = Object.create(config.module.loaders);
 const resolve = Object.create(config.resolve);
 loaders.push({
     test: /sinon\.js$/,
-    loader: "imports?define=>false,require=>false"
+    loader: 'imports?define=>false,require=>false'
 });
 
 if (!resolve.alias) {
     resolve.alias = {};
 }
 resolve.alias.sinon = 'sinon/pkg/sinon';
 
+//
+// Setup for the
+//
+const plugins = [].concat(config.plugins);
+plugins.push(new webpack.IgnorePlugin(/ReactContext/));
+
 //
 // Export the webpack configuration for the test environment.
 //
@@ -41,5 +48,6 @@ module.exports = Object.assign({}, config, {
         loaders
     },
 
-    resolve
+    resolve,
+    plugins
 });