renamed to screens

src2/Navigation.js

@@ -1,7 +1,7 @@
-import * as ContainerRegistry from './containers/ContainerRegistry';
+import * as ScreenRegistry from './screens/ScreenRegistry';
 
-export function registerContainer(containerKey, getContainerFunc) {
-  ContainerRegistry.registerContainer(containerKey, getContainerFunc);
+export function registerScreen(screenKey, getScreenFunc) {
+  ScreenRegistry.registerScreen(screenKey, getScreenFunc);
 }
 
 export function startApp(params) {

src2/Navigation.test.js

@@ -3,18 +3,18 @@ import _ from 'lodash';
 describe('Navigation', () => {
   let Navigation;
   let Commands;
-  let ContainerRegistry;
+  let ScreenRegistry;
 
   beforeEach(() => {
-    jest.mock('./containers/ContainerRegistry');
+    jest.mock('./screens/ScreenRegistry');
     Navigation = require('./Navigation');
     Commands = require('./commands/Commands');
-    ContainerRegistry = require('./containers/ContainerRegistry');
+    ScreenRegistry = require('./screens/ScreenRegistry');
   });
 
   it('exposes static commands', () => {
     _.forEach([
-      Navigation.registerContainer,
+      Navigation.registerScreen,
       Navigation.startApp,
       Navigation.push,
       Navigation.pop,
@@ -30,11 +30,11 @@ describe('Navigation', () => {
     ], (f) => expect(f).toBeInstanceOf(Function));
   });
 
-  it('delegates register container to container registry', () => {
-    expect(ContainerRegistry.registerContainer).not.toHaveBeenCalled();
+  it('delegates register screen to screen registry', () => {
+    expect(ScreenRegistry.registerScreen).not.toHaveBeenCalled();
     const fn = jest.fn();
-    Navigation.registerContainer('key', fn);
-    expect(ContainerRegistry.registerContainer).toHaveBeenCalledTimes(1);
-    expect(ContainerRegistry.registerContainer).toHaveBeenCalledWith('key', fn);
+    Navigation.registerScreen('key', fn);
+    expect(ScreenRegistry.registerScreen).toHaveBeenCalledTimes(1);
+    expect(ScreenRegistry.registerScreen).toHaveBeenCalledWith('key', fn);
   });
 });

src2/containers/ContainerRegistry.js

@@ -1,38 +0,0 @@
-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);
-}
-
-function wrapContainer(containerKey, OriginalContainer) {
-  return class extends Component {
-    constructor(props) {
-      super(props);
-      if (!props.screenId) {
-        throw new Error(`Screen ${containerKey} does not have a screenId!`);
-      }
-      this.state = {
-        screenId: props.screenId,
-        allProps: {...props, ...PropsStore.getPropsForScreenId(props.screenId)}
-      };
-    }
-
-    componentWillReceiveProps(nextProps) {
-      this.setState({
-        allProps: {...nextProps, ...PropsStore.getPropsForScreenId(this.state.screenId)}
-      });
-    }
-
-    render() {
-      return (
-        <OriginalContainer {...this.state.allProps} screenId={this.state.screenId}/>
-      );
-    }
-  };
-}

src2/containers/ContainerRegistry.test.js

@@ -1,130 +0,0 @@
-import {AppRegistry, Text} from 'react-native';
-import React, {Component} from 'react';
-import renderer from 'react-test-renderer';
-
-describe('ComponentRegistry', () => {
-  let uut;
-  let myContainerRef;
-  let testParentRef;
-  let containerStore;
-
-  class MyContainer extends Component {
-    constructor(props) {
-      super(props);
-      myContainerRef = this; //eslint-disable-line
-    }
-
-    render() {
-      return <Text>{'Hello, World!'}</Text>;
-    }
-  }
-
-  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');
-    containerStore = require('./ContainerStore');
-  });
-
-  afterEach(() => {
-    myContainerRef = null;
-    testParentRef = null;
-  });
-
-  describe('registerContainer', () => {
-    beforeEach(() => {
-      AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
-    });
-
-    it('registers container component by containerKey into AppRegistry', () => {
-      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('resulting in a normal component', () => {
-      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!']);
-    });
-  });
-
-  describe('NavigationContainer wrapping', () => {
-    const containerKey = 'example.MyContainer';
-
-    beforeEach(() => {
-      uut.registerContainer(containerKey, () => MyContainer);
-    });
-
-    it('must have screenId as prop', () => {
-      const NavigationContainer = containerStore.getContainerClass(containerKey);
-      expect(() => {
-        renderer.create(<NavigationContainer/>);
-      }).toThrow(new Error('Screen example.MyContainer does not have a screenId!'));
-    });
-
-    it('wraps the container and saves to store', () => {
-      const NavigationContainer = containerStore.getContainerClass(containerKey);
-      expect(NavigationContainer).not.toBeInstanceOf(MyContainer);
-      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 = containerStore.getContainerClass(containerKey);
-      renderer.create(<NavigationContainer screenId={'screen1'} myProp={'yo'}/>);
-      expect(myContainerRef.props.myProp).toEqual('yo');
-    });
-
-    it('updates props from wrapper into original container', () => {
-      const NavigationContainer = containerStore.getContainerClass(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', () => {
-      require('./PropsStore').setPropsForScreenId('screen123', {numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
-      const NavigationContainer = containerStore.getContainerClass(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 = containerStore.getContainerClass(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 = containerStore.getContainerClass(containerKey);
-      renderer.create(<TestParent ChildClass={NavigationContainer}/>);
-      expect(myContainerRef.props.screenId).toEqual('screen1');
-      testParentRef.setState({propsFromState: {screenId: 'ERROR'}});
-      expect(myContainerRef.props.screenId).toEqual('screen1');
-    });
-  });
-});

src2/containers/ContainerStore.js

@@ -1,11 +0,0 @@
-const state = {
-  containersByKey: {}
-};
-
-export function saveContainerClass(containerKey, containerClass) {
-  state.containersByKey[containerKey] = containerClass;
-}
-
-export function getContainerClass(containerKey) {
-  return state.containersByKey[containerKey];
-}

src2/containers/ContainerStore.test.js

@@ -1,19 +0,0 @@
-describe('ContainerStore', () => {
-  let uut;
-
-  beforeEach(() => {
-    uut = require('./ContainerStore');
-  });
-
-  class Component {
-    //
-  }
-  class MyComponent extends Component {
-    //
-  }
-
-  it('holds containers classes by containerKey', () => {
-    uut.saveContainerClass('example.mykey', MyComponent);
-    expect(uut.getContainerClass('example.mykey')).toEqual(MyComponent);
-  });
-});

src2/screens/ScreenRegistry.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import {AppRegistry} from 'react-native';
+import * as PropsStore from './PropsStore';
+import * as ScreenStore from './ScreenStore';
+
+export function registerScreen(screenKey, getScreenFunc) {
+  const OriginalScreen = getScreenFunc();
+  const NavigationScreen = wrapScreen(screenKey, OriginalScreen);
+  ScreenStore.saveScreenClass(screenKey, NavigationScreen);
+  AppRegistry.registerComponent(screenKey, () => NavigationScreen);
+}
+
+export const bla = {};
+
+function wrapScreen(screenKey, OriginalScreen) {
+  return class extends Component {
+    constructor(props) {
+      super(props);
+      if (!props.screenId) {
+        throw new Error(`Screen ${screenKey} does not have a screenId!`);
+      }
+      this.state = {
+        screenId: props.screenId,
+        allProps: {...props, ...PropsStore.getPropsForScreenId(props.screenId)}
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      this.setState({
+        allProps: {...nextProps, ...PropsStore.getPropsForScreenId(this.state.screenId)}
+      });
+    }
+
+    render() {
+      return (
+        <OriginalScreen
+          ref={(r) => bla.ref = r}
+          {...this.state.allProps}
+          screenId={this.state.screenId}
+        />
+      );
+    }
+  };
+}

src2/screens/ScreenRegistry.test.js

@@ -0,0 +1,130 @@
+import {AppRegistry, Text} from 'react-native';
+import React, {Component} from 'react';
+import renderer from 'react-test-renderer';
+
+describe('ComponentRegistry', () => {
+  let uut;
+  let myScreenRef;
+  let testParentRef;
+  let screenStore;
+
+  class MyScreen extends Component {
+    constructor(props) {
+      super(props);
+      myScreenRef = this; //eslint-disable-line
+    }
+
+    render() {
+      return <Text>{'Hello, World!'}</Text>;
+    }
+  }
+
+  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('./ScreenRegistry');
+    screenStore = require('./ScreenStore');
+  });
+
+  afterEach(() => {
+    myScreenRef = null;
+    testParentRef = null;
+  });
+
+  describe('registerScreen', () => {
+    beforeEach(() => {
+      AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
+    });
+
+    it('registers screen component by screenKey into AppRegistry', () => {
+      expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
+      uut.registerScreen('example.MyScreen.key', () => MyScreen);
+      expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
+      expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyScreen.key');
+    });
+
+    it('resulting in a normal component', () => {
+      uut.registerScreen('example.MyScreen.key', () => MyScreen);
+      const Screen = AppRegistry.registerComponent.mock.calls[0][1]();
+      const tree = renderer.create(<Screen screenId="123"/>);
+      expect(tree.toJSON().children).toEqual(['Hello, World!']);
+    });
+  });
+
+  describe('NavigationScreen wrapping', () => {
+    const screenKey = 'example.MyScreen';
+
+    beforeEach(() => {
+      uut.registerScreen(screenKey, () => MyScreen);
+    });
+
+    it('must have screenId as prop', () => {
+      const NavigationScreen = screenStore.getScreenClass(screenKey);
+      expect(() => {
+        renderer.create(<NavigationScreen/>);
+      }).toThrow(new Error('Screen example.MyScreen does not have a screenId!'));
+    });
+
+    it('wraps the screen and saves to store', () => {
+      const NavigationScreen = screenStore.getScreenClass(screenKey);
+      expect(NavigationScreen).not.toBeInstanceOf(MyScreen);
+      const tree = renderer.create(<NavigationScreen screenId={'screen1'}/>);
+      expect(tree.toJSON().children).toEqual(['Hello, World!']);
+      expect(myScreenRef).toBeInstanceOf(MyScreen);
+    });
+
+    it('injects props from wrapper into original screen', () => {
+      const NavigationScreen = screenStore.getScreenClass(screenKey);
+      renderer.create(<NavigationScreen screenId={'screen1'} myProp={'yo'}/>);
+      expect(myScreenRef.props.myProp).toEqual('yo');
+    });
+
+    it('updates props from wrapper into original screen', () => {
+      const NavigationScreen = screenStore.getScreenClass(screenKey);
+      renderer.create(<TestParent ChildClass={NavigationScreen}/>);
+      expect(myScreenRef.props.foo).toEqual(undefined);
+      testParentRef.setState({propsFromState: {foo: 'yo'}});
+      expect(myScreenRef.props.foo).toEqual('yo');
+    });
+
+    it('pulls props from the PropsStore and injects them into the inner screen', () => {
+      require('./PropsStore').setPropsForScreenId('screen123', {numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
+      const NavigationScreen = screenStore.getScreenClass(screenKey);
+      renderer.create(<NavigationScreen screenId={'screen123'}/>);
+      expect(myScreenRef.props).toEqual({screenId: 'screen123', numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
+    });
+
+    it('updates props from PropsStore into inner screen', () => {
+      const NavigationScreen = screenStore.getScreenClass(screenKey);
+      renderer.create(<TestParent ChildClass={NavigationScreen}/>);
+      require('./PropsStore').setPropsForScreenId('screen1', {myProp: 'hello'});
+      expect(myScreenRef.props.foo).toEqual(undefined);
+      expect(myScreenRef.props.myProp).toEqual(undefined);
+      testParentRef.setState({propsFromState: {foo: 'yo'}});
+      expect(myScreenRef.props.foo).toEqual('yo');
+      expect(myScreenRef.props.myProp).toEqual('hello');
+    });
+
+    it('protects screenId from change', () => {
+      const NavigationScreen = screenStore.getScreenClass(screenKey);
+      renderer.create(<TestParent ChildClass={NavigationScreen}/>);
+      expect(myScreenRef.props.screenId).toEqual('screen1');
+      testParentRef.setState({propsFromState: {screenId: 'ERROR'}});
+      expect(myScreenRef.props.screenId).toEqual('screen1');
+    });
+  });
+});

src2/screens/ScreenStore.js

@@ -0,0 +1,11 @@
+const state = {
+  screensByKey: {}
+};
+
+export function saveScreenClass(screenKey, ScreenClass) {
+  state.screensByKey[screenKey] = ScreenClass;
+}
+
+export function getScreenClass(screenKey) {
+  return state.screensByKey[screenKey];
+}

src2/screens/ScreenStore.test.js

@@ -0,0 +1,19 @@
+describe('ScreenStore', () => {
+  let uut;
+
+  beforeEach(() => {
+    uut = require('./ScreenStore');
+  });
+
+  class Component {
+    //
+  }
+  class MyComponent extends Component {
+    //
+  }
+
+  it('holds screens classes by screenKey', () => {
+    uut.saveScreenClass('example.mykey', MyComponent);
+    expect(uut.getScreenClass('example.mykey')).toEqual(MyComponent);
+  });
+});