only update elements when relevant props change, update parallax tests

Author: jscottsmith

__tests__/Parallax.test.js

@@ -168,50 +168,84 @@ describe('Expect the <Parallax> component', () => {
         expect(controller.removeElement).toBeCalledWith(element);
     });
 
-    it('to update an element in the controller when receiving new props and disable an element if the disable prop is true', () => {
+    it('to update an element in the controller when receiving relevant new props', () => {
         const node = document.createElement('div');
 
         const controller = ParallaxController.init();
         controller.updateElement = jest.fn();
-        controller.resetElementStyles = jest.fn();
 
         let instance;
-
         class StateChanger extends React.Component {
             state = { disabled: false };
-
-            componentDidMount() {
-                this.setState({ disabled: true });
-            }
-
             render() {
                 return (
-                    <Parallax
-                        disabled={this.state.disabled}
-                        ref={ref => (instance = ref)}
-                    />
+                    <Parallax {...this.state} ref={ref => (instance = ref)} />
                 );
             }
         }
 
+        let stateInstance;
         ReactDOM.render(
             <MockProvider controllerMock={controller}>
-                <StateChanger />
+                <StateChanger ref={ref => (stateInstance = ref)} />
             </MockProvider>,
             node
         );
 
+        const testProps = {
+            disabled: true,
+            offsetXMax: 100,
+            offsetXMin: -100,
+            offsetYMax: 100,
+            offsetYMin: -100,
+            slowerScrollRate: false,
+        };
+
+        // trigger an update
+        stateInstance.setState(testProps);
+
         expect(controller.updateElement).toBeCalledWith(instance.element, {
             props: {
-                disabled: instance.props.disabled,
-                offsetXMax: instance.props.offsetXMax,
-                offsetXMin: instance.props.offsetXMin,
-                offsetYMax: instance.props.offsetYMax,
-                offsetYMin: instance.props.offsetYMin,
-                slowerScrollRate: instance.props.slowerScrollRate,
+                ...testProps,
             },
         });
 
+        // should not be called again
+        stateInstance.setState({
+            ...testProps,
+            foo: false,
+            bar: true,
+        });
+
+        expect(controller.updateElement).toHaveBeenCalledTimes(1);
+    });
+
+    it('to reset styles on an elment if the disabled prop is true', () => {
+        const node = document.createElement('div');
+
+        const controller = ParallaxController.init();
+        controller.resetElementStyles = jest.fn();
+
+        let instance;
+        class StateChanger extends React.Component {
+            state = { disabled: false };
+            render() {
+                return (
+                    <Parallax {...this.state} ref={ref => (instance = ref)} />
+                );
+            }
+        }
+
+        let stateInstance;
+        ReactDOM.render(
+            <MockProvider controllerMock={controller}>
+                <StateChanger ref={ref => (stateInstance = ref)} />
+            </MockProvider>,
+            node
+        );
+
+        stateInstance.setState({ disabled: true });
+
         expect(controller.resetElementStyles).toBeCalledWith(instance.element);
     });
 });

src/components/Parallax.js

@@ -67,8 +67,15 @@ export default class Parallax extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        // updates the elements props when changed
-        if (this.props !== nextProps) {
+        // updates the elements props when relevant parallax props change
+        if (
+            this.props.disabled !== nextProps.disabled ||
+            this.props.offsetXMax !== nextProps.offsetXMax ||
+            this.props.offsetXMin !== nextProps.offsetXMin ||
+            this.props.offsetYMax !== nextProps.offsetYMax ||
+            this.props.offsetYMin !== nextProps.offsetYMin ||
+            this.props.slowerScrollRate !== nextProps.slowerScrollRate
+        ) {
             this.controller.updateElement(this.element, {
                 props: {
                     disabled: nextProps.disabled,