container registry

src2/containers/ContainerRegistry.js

@@ -1,12 +1,19 @@
 import React, {Component} from 'react';
 import {AppRegistry} from 'react-native';
+import * as PropsStore from './PropsStore';
+import * as ContainerStore from './ContainerStore';
 
 export function registerContainer(containerKey, getContainerFunc) {
   const OriginalContainer = getContainerFunc();
   const NavigationContainer = wrapContainer(containerKey, OriginalContainer);
+  ContainerStore.saveContainerClass(containerKey, NavigationContainer);
   AppRegistry.registerComponent(containerKey, () => NavigationContainer);
 }
 
+export function getRegisteredContainer(containerKey) {
+  return ContainerStore.getContainerClass(containerKey);
+}
+
 function wrapContainer(containerKey, OriginalContainer) {
   return class extends Component {
     constructor(props) {
@@ -14,20 +21,21 @@ function wrapContainer(containerKey, OriginalContainer) {
       if (!props.screenId) {
         throw new Error(`Screen ${containerKey} does not have a screenId!`);
       }
+      this.screenId = props.screenId;
       this.state = {
-        allProps: {...props}
+        allProps: {...props, ...PropsStore.getPropsForScreenId(this.screenId)}
       };
     }
 
     componentWillReceiveProps(nextProps) {
       this.setState({
-        allProps: {...nextProps}
+        allProps: {...nextProps, ...PropsStore.getPropsForScreenId(this.screenId)}
       });
     }
 
     render() {
       return (
-        <OriginalContainer {...this.state.allProps}/>
+        <OriginalContainer {...this.state.allProps} screenId={this.screenId}/>
       );
     }
   };

src2/containers/ContainerRegistry.test.js

@@ -2,97 +2,125 @@ import _ from 'lodash';
 import {AppRegistry, Text} from 'react-native';
 import React, {Component} from 'react';
 import renderer from 'react-test-renderer';
-import * as PropStore from './PropsStore';
-
-class MyContainer extends Component {
-  render() {
-    const txt = `Hello, ${_.get(this.props, 'name', 'World')}!`;
-    return (
-      <Text>{txt}</Text>
-    );
-  }
-}
 
 describe('ComponentRegistry', () => {
   let uut;
+  let myContainerRef;
+  let testParentRef;
 
-  beforeEach(() => {
-    AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
-    uut = require('./ContainerRegistry');
-  });
+  class MyContainer extends Component {
+    constructor(props) {
+      super(props);
+      myContainerRef = this; //eslint-disable-line
+    }
 
-  describe('registerContainer', () => {
-    function getRegisteredComponentClassFromAppRegistry() {
-      return AppRegistry.registerComponent.mock.calls[0][1]();
+    render() {
+      return <Text>{'Hello, World!'}</Text>;
     }
+  }
 
-    function renderRegisteredContainer(props) {
-      const Container = getRegisteredComponentClassFromAppRegistry();
-      return renderer.create(
-        <Container screenId="screen1" {...props}/>
+  class TestParent extends Component { //eslint-disable-line
+    constructor(props) {
+      super(props);
+      testParentRef = this; //eslint-disable-line
+      this.ChildClass = props.ChildClass;
+      this.state = {propsFromState: {}};
+    }
+
+    render() {
+      const Child = this.ChildClass;
+      return (
+        <Child screenId="screen1" {...this.state.propsFromState}/>
       );
     }
+  }
 
+  beforeEach(() => {
+    uut = require('./ContainerRegistry');
+  });
+
+  afterEach(() => {
+    myContainerRef = null;
+    testParentRef = null;
+  });
+
+  describe('registerContainer', () => {
     it('registers container component by containerKey into AppRegistry', () => {
+      AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
       expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
-
       uut.registerContainer('example.MyContainer.key', () => MyContainer);
-
       expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
       expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyContainer.key');
     });
 
-    it('wraps the container', () => {
-      uut.registerContainer('example.MyContainer', () => MyContainer);
-      const tree = renderRegisteredContainer();
+    it('resulting in a normal component', () => {
+      AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
+      uut.registerContainer('example.MyContainer.key', () => MyContainer);
+      const Container = AppRegistry.registerComponent.mock.calls[0][1]();
+      const tree = renderer.create(<Container screenId="123"/>);
       expect(tree.toJSON().children).toEqual(['Hello, World!']);
     });
+  });
 
-    it('passes props from wrapper into original container', () => {
-      uut.registerContainer('example.MyContainer', () => MyContainer);
-      const tree = renderRegisteredContainer({name: 'Daniel'});
-      expect(tree.toJSON().children).toEqual(['Hello, Daniel!']);
-    });
-
-    it('injects and updates props into original container', () => {
-      uut.registerContainer('example.MyContainer', () => MyContainer);
-
-      const NavigationContainer = getRegisteredComponentClassFromAppRegistry();
-      class TestParent extends Component { //eslint-disable-line
-        constructor(props) {
-          super(props);
-          this.state = {};
-        }
-
-        render() {
-          return (
-            <NavigationContainer screenId="screen1" name={this.state.name}/>
-          );
-        }
-      }
-
-      let testParentRef = null;
-      const tree = renderer.create(
-        <TestParent ref={(r) => testParentRef = r}/>
-      );
+  describe('wrapping NavigationContainer', () => {
+    const containerKey = 'example.MyContainer';
 
-      expect(tree.toJSON().children).toEqual(['Hello, World!']);
-      testParentRef.setState({name: 'Gandalf'});
-      expect(tree.toJSON().children).toEqual(['Hello, Gandalf!']);
+    beforeEach(() => {
+      uut.registerContainer(containerKey, () => MyContainer);
     });
 
     it('asserts has screenId as prop', () => {
-      uut.registerContainer('example.MyContainer.key', () => MyContainer);
-      const NavigationContainer = getRegisteredComponentClassFromAppRegistry();
+      const NavigationContainer = uut.getRegisteredContainer(containerKey);
       expect(() => {
         renderer.create(<NavigationContainer/>);
-      }).toThrow(new Error('Screen example.MyContainer.key does not have a screenId!'));
+      }).toThrow(new Error('Screen example.MyContainer does not have a screenId!'));
+    });
+
+    it('wraps the container and saves to store', () => {
+      const NavigationContainer = uut.getRegisteredContainer(containerKey);
+      const tree = renderer.create(<NavigationContainer screenId={'screen1'}/>);
+      expect(tree.toJSON().children).toEqual(['Hello, World!']);
+      expect(myContainerRef).toBeInstanceOf(MyContainer);
+    });
+
+    it('injects props from wrapper into original container', () => {
+      const NavigationContainer = uut.getRegisteredContainer(containerKey);
+      renderer.create(<NavigationContainer screenId={'screen1'} myProp={'yo'}/>);
+      expect(myContainerRef.props.myProp).toEqual('yo');
+    });
+
+    it('updates props from wrapper into original container', () => {
+      const NavigationContainer = uut.getRegisteredContainer(containerKey);
+      renderer.create(<TestParent ChildClass={NavigationContainer}/>);
+      expect(myContainerRef.props.foo).toEqual(undefined);
+      testParentRef.setState({propsFromState: {foo: 'yo'}});
+      expect(myContainerRef.props.foo).toEqual('yo');
     });
 
     it('pulls props from the PropsStore and injects them into the inner container', () => {
-      const props = {myProp: 1, otherProp: 'hello', yetAnotherProp: {a: 2}};
-      PropStore.setPropsForScreenId('my_screen_1', props);
-      // TODO
+      require('./PropsStore').setPropsForScreenId('screen123', {numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
+      const NavigationContainer = uut.getRegisteredContainer(containerKey);
+      renderer.create(<NavigationContainer screenId={'screen123'}/>);
+      expect(myContainerRef.props).toEqual({screenId: 'screen123', numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
+    });
+
+    it('updates props from PropsStore into inner container', () => {
+      const NavigationContainer = uut.getRegisteredContainer(containerKey);
+      renderer.create(<TestParent ChildClass={NavigationContainer}/>);
+      require('./PropsStore').setPropsForScreenId('screen1', {myProp: 'hello'});
+      expect(myContainerRef.props.foo).toEqual(undefined);
+      expect(myContainerRef.props.myProp).toEqual(undefined);
+      testParentRef.setState({propsFromState: {foo: 'yo'}});
+      expect(myContainerRef.props.foo).toEqual('yo');
+      expect(myContainerRef.props.myProp).toEqual('hello');
+    });
+
+    it('protects screenId from change', () => {
+      const NavigationContainer = uut.getRegisteredContainer(containerKey);
+      renderer.create(<TestParent ChildClass={NavigationContainer}/>);
+      expect(myContainerRef.props.screenId).toEqual('screen1');
+      testParentRef.setState({propsFromState: {screenId: 'ERROR'}});
+      expect(myContainerRef.props.screenId).toEqual('screen1');
     });
   });
 });

src2/index.js

@@ -1 +0,0 @@
-