From fc8502f80743f5ca3d6a0383ad9c0d6f509aa852 Mon Sep 17 00:00:00 2001
From: Warren Seymour <warren@fountainhead.tech>
Date: Tue, 7 Nov 2017 09:29:14 +0000
Subject: [PATCH] fix(stateParamsObserver): Allow prop changes to apply to
 wrapped component correctly

Changed the order of props and mappedProps so that props takes precendence; allows prop changes on
wrapper component to correctly apply to wrapped component
---
 src/hoc/stateParamsObserver.spec.tsx | 27 +++++++++++++++++++++++----
 src/hoc/stateParamsObserver.tsx      |  2 +-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/hoc/stateParamsObserver.spec.tsx b/src/hoc/stateParamsObserver.spec.tsx
index 9796a74..a3e1bfb 100644
--- a/src/hoc/stateParamsObserver.spec.tsx
+++ b/src/hoc/stateParamsObserver.spec.tsx
@@ -18,7 +18,7 @@ router.stateRegistry.register({
 })
 
 const updateCountedComponent = () => {
-  const self = React.StatelessComponent = () => {
+  const self = React.StatelessComponent = (props: { color: string }) => {
     self.updates += 1;
     return (<div />);
   };
@@ -33,7 +33,7 @@ it('maps state param changes to props', async () => {
   const innerComponent = updateCountedComponent();
   const WrappedComponent = stateParamsObserver(innerComponent);
 
-  const component = mount(<WrappedComponent />, { context: { router } });
+  const component = mount(<WrappedComponent color="red" />, { context: { router } });
   const inner = component.find('InnerComponent');
 
   await router.stateService.go('test', { page: 1 });
@@ -41,7 +41,8 @@ it('maps state param changes to props', async () => {
     '#': null,
     page: 1,
     search: null,
-    showDeleted: null
+    showDeleted: null,
+    color: 'red'
   });
 
   await router.stateService.go('test', { page: 2, showDeleted: true });
@@ -49,7 +50,8 @@ it('maps state param changes to props', async () => {
     '#': null,
     page: 2,
     search: null,
-    showDeleted: true
+    showDeleted: true,
+    color: 'red'
   });
 
   component.unmount();
@@ -123,6 +125,23 @@ it('maps props to wrapped component on mount', async () => {
   });
 });
 
+it('passes through changes to non-observed props', async () => {
+  const innerComponent = updateCountedComponent();
+  const WrappedComponent = stateParamsObserver(innerComponent);
+  const component = mount(<WrappedComponent color="red" />, { context: { router } });
+
+  component.setProps({ color: 'blue' });
+
+  const props = component.find('InnerComponent').props();
+  expect(props).toEqual({
+    '#': null,
+    page: 3,
+    search: 'widgets',
+    showDeleted: true,
+    color: 'blue'
+  });
+});
+
 it('throws an error if @ui-router/rx is not installed', () => {
   const innerComponent = updateCountedComponent();
   const WrappedComponent = stateParamsObserver(innerComponent);
diff --git a/src/hoc/stateParamsObserver.tsx b/src/hoc/stateParamsObserver.tsx
index c8eabf4..0fb80e4 100644
--- a/src/hoc/stateParamsObserver.tsx
+++ b/src/hoc/stateParamsObserver.tsx
@@ -49,8 +49,8 @@ export const stateParamsObserver =
       render() {
         return (
           <Component
-            {...this.props}
             {...this.state.mappedProps}
+            {...this.props}
             ref={this.props.wrappedComponentRef}
           />
         );