Merge pull request #5 from JamieDixon/GH-4

Passing in args as per React API. Added shouldComponentUpdate

package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-lifecycle-component",
-  "version": "1.0.6",
+  "version": "2.0.4",
   "description": "A higher order component that accepts lifecycle hook functions as props",
   "main": "lib/index.js",
   "scripts": {
     "build": "npm run clean && babel -d lib src",
     "clean": "rimraf lib",
     "prepublish": "npm run build",
-    "test": "babel-node test.js"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -21,11 +21,17 @@
   "homepage": "https://github.com/JamieDixon/react-lifecycle-component#readme",
   "devDependencies": {
     "babel-cli": "^6.10.1",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.1",
+    "babel-jest": "^18.0.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.5.0",
-    "react": "^0.14.0",
+    "jest": "^18.1.0",
+    "mocha": "^3.2.0",
+    "mocha-jsdom": "^1.1.0",
+    "react": "latest",
+    "react-dom": "^15.4.2",
     "react-redux": "^4.0.0",
+    "react-test-renderer": "^15.4.2",
     "redux": "^3.0.0",
     "rimraf": "^2.5.3"
   },

src/component.js

@@ -12,10 +12,10 @@ export default class Lifecycle extends Component {
 		componentWillUpdate: PropTypes.func
 	}
 
-	execute(fn) {
-		if (fn) {
-			fn();
-		}
+	displayName = 'Lifecycle';
+
+	execute(fn, args = [], defaultValue) {
+		return fn ? fn.call(this, ...args) : defaultValue;
 	}
 
 	componentWillMount() {
@@ -26,22 +26,26 @@ export default class Lifecycle extends Component {
 		this.execute(this.props.componentDidMount);
 	}
 
-	componentWillReceiveProps() {
-		this.execute(this.props.componentWillReceiveProps);
+	componentWillReceiveProps(...args) {
+		this.execute(this.props.componentWillReceiveProps, args);
 	}
 
-	componentWillUpdate() {
-		this.execute(this.props.componentWillUpdate);
+	componentWillUpdate(...args) {
+		this.execute(this.props.componentWillUpdate, args);
 	}
 
-	componentDidUpdate() {
-		this.execute(this.props.componentDidUpdate);
+	componentDidUpdate(...args) {
+		this.execute(this.props.componentDidUpdate, args);
 	}
 
 	componentWillUnmount() {
 		this.execute(this.props.componentWillUnmount);
 	}
 
+	shouldComponentUpdate(...args) {
+		return this.execute(this.props.shouldComponentUpdate, args, true);
+	}
+
 	render() {
 		const Comp = this.props.component;
 		const {
@@ -51,6 +55,7 @@ export default class Lifecycle extends Component {
 			componentWillUpdate,
 			componentDidUpdate,
 			componentWillUnmount,
+			shouldComponentUpdate,
 			...realProps } = this.props;
 		return <Comp {...realProps} />;
 	}

tests/__snapshots__/applyLifecycle.test.js.snap

@@ -0,0 +1,6 @@
+exports[`test Props are passed to wrapped component and can be rendered 1`] = `
+<div>
+  React Lifecycle Component 
+  is the best
+</div>
+`;

tests/applyLifecycle.test.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import applyLifecycle from '../src/applyLifecycle';
+
+class TestComponent extends Component {
+	render() {
+		return <div>React Lifecycle Component</div>;
+	}
+}
+
+class TestComponentTwo extends Component {
+	render() {
+		return <div>React Lifecycle Component {this.props.message}</div>;
+	}
+}
+
+const TestComponentThree = () => <div />;
+
+const lifecycleProps = {
+	componentWillMount: jest.fn()
+}
+
+test('Wrapper component calls lifecycle methods on incoming props', () => {
+	const Wrapped = applyLifecycle(TestComponent, lifecycleProps);
+	const component = renderer.create(<Wrapped  />);
+	expect(lifecycleProps.componentWillMount.mock.calls.length).toEqual(1);
+});
+
+test('Props are passed to wrapped component and can be rendered', () => {
+	const Wrapped = applyLifecycle(TestComponentTwo, lifecycleProps);
+	const component = renderer.create(<Wrapped message="is the best"  />);
+	const tree = component.toJSON();
+	expect(tree).toMatchSnapshot();
+});
+
+
+
+test('Lifecycle hooks receive the correct arguments', () => {
+
+	const lifecycleProps = {
+		componentWillReceiveProps(nextProps) {
+			expect(this.props.name).toEqual('Bob')
+			expect(nextProps.name).toEqual('James');
+		}
+	};
+
+	const node = document.createElement('div');
+	const Wrapped = applyLifecycle(TestComponentThree, lifecycleProps);
+
+	ReactDOM.render(<Wrapped name="Bob" />, node);
+
+	// Re-render to cause componentWillReceiveProps call
+	ReactDOM.render(<Wrapped name="James" />, node);
+});
+
+test('Lifecycle hooks called with the correct context', () => {
+
+	const lifecycleProps = {
+		componentWillReceiveProps(nextProps) {
+			expect(this.displayName).toEqual('Lifecycle');
+		}
+	};
+
+	const node = document.createElement('div');
+	const Wrapped = applyLifecycle(TestComponentThree, lifecycleProps);
+
+	ReactDOM.render(<Wrapped />, node);
+
+	// Re-render to cause componentWillReceiveProps call
+	ReactDOM.render(<Wrapped />, node);
+});