refactoring, injecting deps

src/Navigation.js

@@ -1,19 +1,21 @@
-import * as ContainerRegistry from './containers/ContainerRegistry';
-
-import nativeCommandsSender from './adapters/NativeCommandsSender';
+import NativeCommandsSender from './adapters/NativeCommandsSender';
 import NativeEventsReceiver from './adapters/NativeEventsReceiver';
 import UniqueIdProvider from './adapters/UniqueIdProvider';
+
+import Store from './containers/Store';
+import ContainerRegistry from './containers/ContainerRegistry';
 import Commands from './commands/Commands';
 
 class Navigation {
   constructor() {
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();
-    this.commands = new Commands(nativeCommandsSender, this.uniqueIdProvider);
+    this.containerRegistry = new ContainerRegistry(new Store());
+    this.commands = new Commands(new NativeCommandsSender(), this.uniqueIdProvider);
   }
 
   registerContainer(containerName, getContainerFunc) {
-    ContainerRegistry.registerContainer(containerName, getContainerFunc);
+    this.containerRegistry.registerContainer(containerName, getContainerFunc);
   }
 
   startApp(params) {

src/Navigation.test.js

@@ -1,26 +1,23 @@
 describe('Navigation', () => {
   let Navigation;
-  let ContainerRegistry;
 
   beforeEach(() => {
-    jest.mock('./containers/ContainerRegistry');
-    ContainerRegistry = require('./containers/ContainerRegistry');
-
     jest.mock('./adapters/UniqueIdProvider');
     jest.mock('./adapters/NativeCommandsSender');
     jest.mock('./adapters/NativeEventsReceiver');
 
+    jest.mock('./containers/ContainerRegistry');
     jest.mock('./commands/Commands');
 
     Navigation = require('./Navigation');
   });
 
   it('registerContainer delegates to ContainerRegistry', () => {
-    expect(ContainerRegistry.registerContainer).not.toHaveBeenCalled();
+    expect(Navigation.containerRegistry.registerContainer).not.toHaveBeenCalled();
     const fn = jest.fn();
     Navigation.registerContainer('name', fn);
-    expect(ContainerRegistry.registerContainer).toHaveBeenCalledTimes(1);
-    expect(ContainerRegistry.registerContainer).toHaveBeenCalledWith('name', fn);
+    expect(Navigation.containerRegistry.registerContainer).toHaveBeenCalledTimes(1);
+    expect(Navigation.containerRegistry.registerContainer).toHaveBeenCalledWith('name', fn);
   });
 
   it('startApp delegates to Commands', () => {

src/adapters/NativeCommandsSender.js

@@ -1,4 +1,11 @@
 import {NativeModules} from 'react-native';
 
-const singleton = NativeModules.RNNBridgeModule;
-export default singleton;
+export default class NativeCommandsSender {
+  constructor() {
+    this.nativeCommandsModule = NativeModules.RNNBridgeModule;
+  }
+
+  startApp(layoutTree) {
+    this.nativeCommandsModule.startApp(layoutTree);
+  }
+}

src/adapters/NativeCommandsSender.test.js

@@ -0,0 +1,17 @@
+describe('NativeCommandsSender', () => {
+  let uut, mockNativeModule;
+
+  beforeEach(() => {
+    mockNativeModule = {
+      startApp: jest.fn()
+    };
+    require('react-native').NativeModules.RNNBridgeModule = mockNativeModule;
+    const NativeCommandsSender = require('./NativeCommandsSender').default;
+    uut = new NativeCommandsSender();
+  });
+
+  it('delegates to native', () => {
+    uut.startApp();
+    expect(mockNativeModule.startApp).toHaveBeenCalledTimes(1);
+  });
+});

src/commands/Commands.test.js

@@ -1,15 +1,15 @@
 describe('Commands', () => {
   let uut;
-  const nativeCommandsSender = {
+  const mockCommandsSender = {
     startApp: jest.fn()
   };
-  const uniqueIdProvider = {
+  const mockIdProvider = {
     generate: (prefix) => `${prefix}UNIQUE`
   };
 
   beforeEach(() => {
     const Commands = require('./Commands').default;
-    uut = new Commands(nativeCommandsSender, uniqueIdProvider);
+    uut = new Commands(mockCommandsSender, mockIdProvider);
   });
 
   describe('startApp', () => {
@@ -19,7 +19,7 @@ describe('Commands', () => {
           name: 'com.example.MyScreen'
         }
       });
-      expect(nativeCommandsSender.startApp).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.startApp).toHaveBeenCalledTimes(1);
       //TODO
     });
   });

src/commands/ValidCommands.js

@@ -1,91 +1,91 @@
-export const singleScreenApp = {
-  container: {
-    name: 'com.example.MyScreen'
-  }
-};
-
-export const tabBasedApp = {
-  tabs: [
-    {
-      container: {
-        name: 'com.example.FirstTab'
-      }
-    },
-    {
-      container: {
-        name: 'com.example.SecondTab'
-      }
-    },
-    {
-      container: {
-        name: 'com.example.FirstTab'
-      }
-    }
-  ]
-};
-
-export const singleWithSideMenu = {
-  container: {
-    name: 'com.example.MyScreen'
-  },
-  sideMenu: {
-    left: {
-      container: {
-        name: 'com.example.MyScreen'
-      }
-    }
-  }
-};
-
-export const singleWithRightSideMenu = {
-  container: {
-    name: 'com.example.MyScreen'
-  },
-  sideMenu: {
-    right: {
-      name: 'com.example.Menu'
-    }
-  }
-};
-
-export const singleWithBothMenus = {
-  container: {
-    name: 'com.example.MyScreen'
-  },
-  sideMenu: {
-    left: {
-      name: 'com.example.Menu1'
-    },
-    right: {
-      name: 'com.example.Menu2'
-    }
-  }
-};
-
-export const tabBasedWithSideMenu = {
-  tabs: [
-    {
-      container: {
-        name: 'com.example.FirstTab'
-      }
-    },
-    {
-      container: {
-        name: 'com.example.SecondTab'
-      }
-    },
-    {
-      container: {
-        name: 'com.example.FirstTab'
-      }
-    }
-  ],
-  sideMenu: {
-    left: {
-      name: 'com.example.Menu1'
-    },
-    right: {
-      name: 'com.example.Menu2'
-    }
-  }
-};
+//export const singleScreenApp = {
+//  container: {
+//    name: 'com.example.MyScreen'
+//  }
+//};
+//
+//export const tabBasedApp = {
+//  tabs: [
+//    {
+//      container: {
+//        name: 'com.example.FirstTab'
+//      }
+//    },
+//    {
+//      container: {
+//        name: 'com.example.SecondTab'
+//      }
+//    },
+//    {
+//      container: {
+//        name: 'com.example.FirstTab'
+//      }
+//    }
+//  ]
+//};
+//
+//export const singleWithSideMenu = {
+//  container: {
+//    name: 'com.example.MyScreen'
+//  },
+//  sideMenu: {
+//    left: {
+//      container: {
+//        name: 'com.example.MyScreen'
+//      }
+//    }
+//  }
+//};
+//
+//export const singleWithRightSideMenu = {
+//  container: {
+//    name: 'com.example.MyScreen'
+//  },
+//  sideMenu: {
+//    right: {
+//      name: 'com.example.Menu'
+//    }
+//  }
+//};
+//
+//export const singleWithBothMenus = {
+//  container: {
+//    name: 'com.example.MyScreen'
+//  },
+//  sideMenu: {
+//    left: {
+//      name: 'com.example.Menu1'
+//    },
+//    right: {
+//      name: 'com.example.Menu2'
+//    }
+//  }
+//};
+//
+//export const tabBasedWithSideMenu = {
+//  tabs: [
+//    {
+//      container: {
+//        name: 'com.example.FirstTab'
+//      }
+//    },
+//    {
+//      container: {
+//        name: 'com.example.SecondTab'
+//      }
+//    },
+//    {
+//      container: {
+//        name: 'com.example.FirstTab'
+//      }
+//    }
+//  ],
+//  sideMenu: {
+//    left: {
+//      name: 'com.example.Menu1'
+//    },
+//    right: {
+//      name: 'com.example.Menu2'
+//    }
+//  }
+//};

src/containers/ContainerRegistry.js

@@ -1,41 +1,15 @@
-import React, {Component} from 'react';
 import {AppRegistry} from 'react-native';
-
-import * as Store from './Store';
-
-export function registerContainer(containerName, getContainerFunc) {
-  const OriginalContainer = getContainerFunc();
-  const NavigationContainer = wrapContainer(containerName, OriginalContainer);
-  Store.setContainerClass(containerName, NavigationContainer);
-  AppRegistry.registerComponent(containerName, () => NavigationContainer);
-}
-
-function wrapContainer(containerName, OriginalContainer) {
-  return class extends Component {
-    constructor(props) {
-      super(props);
-      if (!props.containerId) {
-        throw new Error(`Container ${containerName} does not have a containerId!`);
-      }
-      this.state = {
-        containerId: props.containerId,
-        allProps: {...props, ...Store.getPropsForContainerId(props.containerId)}
-      };
-    }
-
-    componentWillReceiveProps(nextProps) {
-      this.setState({
-        allProps: {...nextProps, ...Store.getPropsForContainerId(this.state.containerId)}
-      });
-    }
-
-    render() {
-      return (
-        <OriginalContainer
-          {...this.state.allProps}
-          containerId={this.state.containerId}
-        />
-      );
-    }
-  };
+import ContainerWrapper from './ContainerWrapper';
+
+export default class ContainerRegistry {
+  constructor(store) {
+    this.store = store;
+  }
+
+  registerContainer(containerName, getContainerFunc) {
+    const OriginalContainer = getContainerFunc();
+    const NavigationContainer = ContainerWrapper.wrap(containerName, OriginalContainer, this.store);
+    this.store.setContainerClass(containerName, NavigationContainer);
+    AppRegistry.registerComponent(containerName, () => NavigationContainer);
+  }
 }

src/containers/ContainerRegistry.test.js

@@ -4,122 +4,31 @@ import renderer from 'react-test-renderer';
 
 describe('ContainerRegistry', () => {
   let uut;
-  let store;
-  let myContainerRef;
-  let testParentRef;
 
   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 containerId="container1" {...this.state.propsFromState}/>
-      );
-    }
-  }
-
   beforeEach(() => {
-    uut = require('./ContainerRegistry');
-    store = require('./Store');
+    AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
+    const ContainerRegistry = require('./ContainerRegistry').default;
+    const Store = require('./Store').default;
+    uut = new ContainerRegistry(new Store());
   });
 
-  describe('registerContainer', () => {
-    beforeEach(() => {
-      AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
-    });
-
-    it('registers container component by containerName into AppRegistry', () => {
-      expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
-      uut.registerContainer('example.MyContainer.name', () => MyContainer);
-      expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
-      expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyContainer.name');
-    });
-
-    it('resulting in a normal component', () => {
-      uut.registerContainer('example.MyContainer.name', () => MyContainer);
-      const Container = AppRegistry.registerComponent.mock.calls[0][1]();
-      const tree = renderer.create(<Container containerId="123"/>);
-      expect(tree.toJSON().children).toEqual(['Hello, World!']);
-    });
+  it('registers container component by containerName into AppRegistry', () => {
+    expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
+    uut.registerContainer('example.MyContainer.name', () => MyContainer);
+    expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
+    expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyContainer.name');
   });
 
-  describe('NavigationContainer wrapping passed container', () => {
-    const containerName = 'example.MyContainer';
-
-    beforeEach(() => {
-      uut.registerContainer(containerName, () => MyContainer);
-    });
-
-    it('must have containerId as prop', () => {
-      const NavigationContainer = store.getContainerClass(containerName);
-      expect(() => {
-        renderer.create(<NavigationContainer/>);
-      }).toThrow(new Error('Container example.MyContainer does not have a containerId!'));
-    });
-
-    it('wraps the container and saves to store', () => {
-      const NavigationContainer = store.getContainerClass(containerName);
-      expect(NavigationContainer).not.toBeInstanceOf(MyContainer);
-      const tree = renderer.create(<NavigationContainer containerId={'container1'}/>);
-      expect(tree.toJSON().children).toEqual(['Hello, World!']);
-      expect(myContainerRef).toBeInstanceOf(MyContainer);
-    });
-
-    it('injects props from wrapper into original container', () => {
-      const NavigationContainer = store.getContainerClass(containerName);
-      renderer.create(<NavigationContainer containerId={'container1'} myProp={'yo'}/>);
-      expect(myContainerRef.props.myProp).toEqual('yo');
-    });
-
-    it('updates props from wrapper into original container', () => {
-      const NavigationContainer = store.getContainerClass(containerName);
-      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', () => {
-      store.setPropsForContainerId('container123', {numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
-      const NavigationContainer = store.getContainerClass(containerName);
-      renderer.create(<NavigationContainer containerId={'container123'}/>);
-      expect(myContainerRef.props).toEqual({containerId: 'container123', numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
-    });
-
-    it('updates props from PropsStore into inner container', () => {
-      const NavigationContainer = store.getContainerClass(containerName);
-      renderer.create(<TestParent ChildClass={NavigationContainer}/>);
-      store.setPropsForContainerId('container1', {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 containerId from change', () => {
-      const NavigationContainer = store.getContainerClass(containerName);
-      renderer.create(<TestParent ChildClass={NavigationContainer}/>);
-      expect(myContainerRef.props.containerId).toEqual('container1');
-      testParentRef.setState({propsFromState: {containerId: 'ERROR'}});
-      expect(myContainerRef.props.containerId).toEqual('container1');
-    });
+  it('resulting in a normal component', () => {
+    uut.registerContainer('example.MyContainer.name', () => MyContainer);
+    const Container = AppRegistry.registerComponent.mock.calls[0][1]();
+    const tree = renderer.create(<Container containerId="123"/>);
+    expect(tree.toJSON().children).toEqual(['Hello, World!']);
   });
 });

src/containers/ContainerWrapper.js

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+
+export default class ContainerWrapper {
+  static wrap(containerName, OriginalContainer, propStore) {
+    return class extends Component {
+      constructor(props) {
+        super(props);
+        if (!props.containerId) {
+          throw new Error(`Container ${containerName} does not have a containerId!`);
+        }
+        this.state = {
+          containerId: props.containerId,
+          allProps: {...props, ...propStore.getPropsForContainerId(props.containerId)}
+        };
+      }
+
+      componentWillReceiveProps(nextProps) {
+        this.setState({
+          allProps: {...nextProps, ...propStore.getPropsForContainerId(this.state.containerId)}
+        });
+      }
+
+      render() {
+        return (
+          <OriginalContainer
+            {...this.state.allProps}
+            containerId={this.state.containerId}
+          />
+        );
+      }
+    };
+  }
+}

src/containers/ContainerWrapper.test.js

@@ -0,0 +1,99 @@
+import React, {Component} from 'react';
+import {AppRegistry, Text} from 'react-native';
+import renderer from 'react-test-renderer';
+
+describe('ContainerWrapper', () => {
+  let ContainerWrapper;
+  let myContainerRef;
+  let testParentRef;
+  let store;
+  const containerName = 'example.MyContainer';
+
+  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 containerId="container1" {...this.state.propsFromState}/>
+      );
+    }
+  }
+
+  beforeEach(() => {
+    ContainerWrapper = require('./ContainerWrapper').default;
+    const Store = require('./Store').default;
+    store = new Store();
+  });
+
+  it('must have containerId as prop', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    expect(() => {
+      renderer.create(<NavigationContainer/>);
+    }).toThrow(new Error('Container example.MyContainer does not have a containerId!'));
+  });
+
+  it('wraps the container and saves to store', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    expect(NavigationContainer).not.toBeInstanceOf(MyContainer);
+    const tree = renderer.create(<NavigationContainer containerId={'container1'}/>);
+    expect(tree.toJSON().children).toEqual(['Hello, World!']);
+    expect(myContainerRef).toBeInstanceOf(MyContainer);
+  });
+
+  it('injects props from wrapper into original container', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    renderer.create(<NavigationContainer containerId={'container1'} myProp={'yo'}/>);
+    expect(myContainerRef.props.myProp).toEqual('yo');
+  });
+
+  it('updates props from wrapper into original container', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    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 store and injects them into the inner container', () => {
+    store.setPropsForContainerId('container123', {numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    renderer.create(<NavigationContainer containerId={'container123'}/>);
+    expect(myContainerRef.props).toEqual({containerId: 'container123', numberProp: 1, stringProp: 'hello', objectProp: {a: 2}});
+  });
+
+  it('updates props from store into inner container', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    renderer.create(<TestParent ChildClass={NavigationContainer}/>);
+    store.setPropsForContainerId('container1', {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 containerId from change', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    renderer.create(<TestParent ChildClass={NavigationContainer}/>);
+    expect(myContainerRef.props.containerId).toEqual('container1');
+    testParentRef.setState({propsFromState: {containerId: 'ERROR'}});
+    expect(myContainerRef.props.containerId).toEqual('container1');
+  });
+});

src/containers/Store.js

@@ -1,22 +1,24 @@
 import _ from 'lodash';
 
-const state = {
-  propsByContainerId: {},
-  containersByName: {}
-};
+export default class Store {
+  constructor() {
+    this.propsByContainerId = {};
+    this.containersByName = {};
+  }
 
-export function setPropsForContainerId(containerId, props) {
-  _.set(state.propsByContainerId, containerId, props);
-}
+  setPropsForContainerId(containerId, props) {
+    _.set(this.propsByContainerId, containerId, props);
+  }
 
-export function getPropsForContainerId(containerId) {
-  return _.get(state.propsByContainerId, containerId, {});
-}
+  getPropsForContainerId(containerId) {
+    return _.get(this.propsByContainerId, containerId, {});
+  }
 
-export function setContainerClass(containerName, ContainerClass) {
-  state.containersByName[containerName] = ContainerClass;
-}
+  setContainerClass(containerName, ContainerClass) {
+    this.containersByName[containerName] = ContainerClass;
+  }
 
-export function getContainerClass(containerName) {
-  return state.containersByName[containerName];
+  getContainerClass(containerName) {
+    return this.containersByName[containerName];
+  }
 }

src/containers/Store.test.js

@@ -2,7 +2,8 @@ describe('Store', () => {
   let uut;
 
   beforeEach(() => {
-    uut = require('./Store');
+    const Store = require('./Store').default;
+    uut = new Store();
   });
 
   it('initial state', () => {