Merge pull request #152 from FormidableLabs/enhancer-test

Enhancer tests and examples

.eslintrc

@@ -1,5 +1,4 @@
-ecmaFeatures:
-    jsx: true
+parser: "babel-eslint"
 
 env:
     browser: true
@@ -178,7 +177,7 @@ rules:
     func-style: [2, "expression"] # enforces use of function expressions
     key-spacing: 2                 # enforces spacing between keys and values in object literal properties
     max-nested-callbacks: [2, 4]   # specify the maximum depth callbacks can be nested
-    new-cap: 2                     # require a capital letter for constructors
+    new-cap: 0                     # require a capital letter for constructors
     new-parens: 2                  # disallow the omission of parentheses when invoking a constructor with no arguments
     no-array-constructor: 2        # disallow use of the Array constructor
     no-lonely-if: 0                # disallow if as the only statement in an else block

examples/app.jsx

@@ -5,8 +5,11 @@ var ComputedWell = require("./components/computed-well.jsx");
 var Style = require("../modules/components/style.js");
 var Radium = require("../modules");
 
-var HoverMessage = React.createClass(Radium.wrap({
-  render: function () {
+//
+// Radium with ES6 class syntax
+//
+class HoverMessage extends React.Component {
+  render() {
     return (
       <div>
         <button key="button" style={{':hover': {}}}>Hover me!</button>
@@ -16,7 +19,8 @@ var HoverMessage = React.createClass(Radium.wrap({
       </div>
     )
   }
-}));
+}
+HoverMessage = Radium.Enhancer(HoverMessage);
 
 var TwoSquares = React.createClass(Radium.wrap({
   render: function () {
@@ -57,10 +61,10 @@ var App = React.createClass(Radium.wrap({
 
     return (
       <div>
-        <p><TwoSquares /></p>
-
         <p><HoverMessage /></p>
 
+        <p><TwoSquares /></p>
+
         <p><Spinner /></p>
 
         <p>

examples/components/button.jsx

@@ -1,14 +1,8 @@
+var Radium = require('../../modules');
 var React = require('react');
-var Radium = require('../../modules/index');
-var { MatchMediaItem } = Radium;
 
-var Button = React.createClass(Radium.wrap({
-  propTypes: {
-    color: React.PropTypes.string,
-    onClick: React.PropTypes.func
-  },
-
-  render: function () {
+class Button extends React.Component {
+  render() {
     return (
       <button
         onClick={this.props.onClick}
@@ -21,7 +15,12 @@ var Button = React.createClass(Radium.wrap({
       </button>
     );
   }
-}));
+}
+
+Button.propTypes = {
+  color: React.PropTypes.string,
+  onClick: React.PropTypes.func
+};
 
 var styles = {
   base: {
@@ -71,4 +70,4 @@ var styles = {
   }
 };
 
-module.exports = Button;
+module.exports = Radium.Enhancer(Button);

jest/preprocessor.js

@@ -1,6 +1,15 @@
-var ReactTools = require('react-tools');
+var babel = require('babel');
+var path = require('path');
+
+var targetPath = path.resolve(__dirname + '/../modules');
+
 module.exports = {
-  process: function(src) {
-    return ReactTools.transform(src);
+  process: function(src, file) {
+    // Keep it fast by only running babel over Radium code
+    if (file.indexOf(targetPath) !== 0) {
+      return src;
+    }
+
+    return  babel.transform(src).code;
   }
 };

modules/__tests__/enhancer-test.js

@@ -0,0 +1,110 @@
+/* eslint-env jasmine */
+/* global jest */
+
+'use strict';
+
+jest.dontMock('../enhancer.js');
+jest.dontMock('../wrap-utils.js');
+
+var resolveStyles = require('../resolve-styles.js');
+var Enhancer = require('../enhancer.js');
+
+var {Component} = require('react');
+
+describe('Enhancer', () => {
+  it('sets up initial state', () => {
+    class Composed extends Component { }
+    var Enhanced = Enhancer(Composed);
+
+    var instance = new Enhanced();
+
+    expect(instance.state).toEqual({_radiumStyleState: {}});
+  });
+
+  it('merges with existing state', () => {
+    class Composed extends Component {
+      constructor () {
+        super();
+        this.state = {foo: 'bar'};
+      }
+    }
+    var Enhanced = Enhancer(Composed);
+
+    var instance = new Enhanced();
+
+
+    expect(instance.state).toEqual(
+      {foo: 'bar', _radiumStyleState: {}}
+    );
+  });
+
+  it('calls existing render function, then resolveStyles', () => {
+    var renderMock = jest.genMockFunction();
+    class Composed extends Component {
+      render () {
+        renderMock();
+        return null;
+      }
+    }
+    var Enhanced = Enhancer(Composed);
+
+    var instance = new Enhanced();
+    instance.render();
+
+    expect(renderMock).toBeCalled();
+    expect(resolveStyles).toBeCalled();
+  });
+
+  it('calls existing componentWillUnmount function', () => {
+    var existingComponentWillUnmount = jest.genMockFunction();
+    class Composed extends Component {
+      componentWillUnmount () {
+        existingComponentWillUnmount();
+      }
+    }
+    var Enhanced = Enhancer(Composed);
+
+    var instance = new Enhanced();
+    instance.componentWillUnmount();
+
+    expect(existingComponentWillUnmount).toBeCalled();
+  });
+
+  it('removes mouse up listener on componentWillUnmount', () => {
+    var removeMouseUpListener = jest.genMockFunction();
+    class Composed extends Component {
+      constructor () {
+        super();
+        this._radiumMouseUpListener = { remove: removeMouseUpListener };
+      }
+    }
+    var Enhanced = Enhancer(Composed);
+
+    var instance = new Enhanced();
+    instance.componentWillUnmount();
+
+    expect(removeMouseUpListener).toBeCalled();
+  });
+
+  it('removes media query listeners on componentWillUnmount', () => {
+    var mediaQueryListenersByQuery = {
+      '(min-width: 1000px)': { remove: jest.genMockFunction() },
+      '(max-width: 600px)': { remove: jest.genMockFunction() },
+      '(min-resolution: 2dppx)': { remove: jest.genMockFunction() }
+    };
+    class Composed extends Component {
+      constructor () {
+        super();
+        this._radiumMediaQueryListenersByQuery = mediaQueryListenersByQuery;
+      }
+    }
+    var Enhanced = Enhancer(Composed);
+
+    var instance = new Enhanced();
+    instance.componentWillUnmount();
+
+    Object.keys(mediaQueryListenersByQuery).forEach(function (key) {
+      expect(mediaQueryListenersByQuery[key].remove).toBeCalled();
+    });
+  });
+});

package.json

@@ -27,14 +27,14 @@
     "lodash": "^3.2.0"
   },
   "devDependencies": {
-    "babel": "^5.3.1",
-    "babel-core": "^5.3.1",
+    "babel": "^5.3.3",
+    "babel-core": "^5.3.3",
+    "babel-eslint": "^3.1.1",
     "babel-loader": "^5.0.0",
     "coveralls": "^2.11.2",
     "eslint": "^0.19.0",
     "jest-cli": "^0.4.0",
     "react": ">=0.12.0 <0.14.0",
-    "react-tools": "^0.13.3",
     "webpack": "^1.5.3",
     "webpack-dev-server": "^1.7.0"
   },
@@ -47,7 +47,9 @@
     "collectCoverageOnlyFrom": {
       "modules/get-state.js": true,
       "modules/resolve-styles.js": true,
-      "modules/wrap.js": true
+      "modules/wrap.js": true,
+      "modules/wrap-utils.js": true,
+      "modules/enhancer.js": true
     },
     "unmockedModulePathPatterns": [
       "lodash",