fix(stateParamsObserver): Allow prop changes to apply to wrapped comp…

…onent 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

@@ -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,23 +33,25 @@ 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 });
   expect(inner.props()).toEqual({
     '#': null,
     page: 1,
     search: null,
-    showDeleted: null
+    showDeleted: null,
+    color: 'red'
   });
 
   await router.stateService.go('test', { page: 2, showDeleted: true });
   expect(inner.props()).toEqual({
     '#': 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);

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}
           />
         );