refactoring, push e2e

ios/RNN.h

@@ -6,10 +6,11 @@
 
 @interface RNN : NSObject
 
+@property (readonly) BOOL isReadyToReceiveCommands;
+@property (readonly) RCTBridge* bridge;
+
 +(instancetype)instance;
 
 -(void)bootstrap:(NSURL*)jsCodeLocation launchOptions:(NSDictionary*)launchOptions;
 
--(RCTBridge*)bridge;
-
 @end

ios/RNN.m

@@ -7,12 +7,11 @@
 
 @interface RNN()
 @property RNNEventEmitter* eventEmitter;
+@property (readwrite) RCTBridge* bridge;
+@property (readwrite) BOOL isReadyToReceiveCommands;
 @end
 
 @implementation RNN
-{
-	RCTBridge* bridge;
-}
 
 +(instancetype)instance
 {
@@ -39,7 +38,7 @@
 	
 	[self registerForJsEvents];
 	// this will load the JS bundle
-	bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
+	self.bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
 }
 
 -(void)registerForJsEvents
@@ -54,6 +53,7 @@
 
 -(void)onJavaScriptLoaded
 {
+	self.isReadyToReceiveCommands = true;
 	[self.eventEmitter sendOnAppLaunched];
 }
 
@@ -62,9 +62,4 @@
 	UIApplication.sharedApplication.delegate.window.rootViewController = nil;
 }
 
--(RCTBridge *)bridge
-{
-	return bridge;
-}
-
 @end

ios/RNNBridgeModule.m

@@ -14,9 +14,17 @@ RCT_EXPORT_MODULE();
 
 RCT_EXPORT_METHOD(setRoot:(NSDictionary*)layout)
 {
+	[self assertReady];
 	UIApplication.sharedApplication.delegate.window.rootViewController = [[RNNControllerFactory new] createRootViewController:layout];
 	[UIApplication.sharedApplication.delegate.window makeKeyAndVisible];
 }
 
+-(void)assertReady
+{
+	if (!RNN.instance.isReadyToReceiveCommands) {
+		@throw [NSException exceptionWithName:@"BridgeNotLoadedError" reason:@"Bridge not yet loaded! Send commands after Navigation.events().onAppLaunched() has been called." userInfo:nil];
+	}
+}
+
 @end
 

ios/RNNControllerFactory.m

@@ -90,7 +90,7 @@
 	
 	RCTRootView *reactView = [[RCTRootView alloc] initWithBridge:RNN.instance.bridge
 													  moduleName:containerName
-											   initialProperties:@{@"containerId": node.nodeId}];
+											   initialProperties:@{@"id": node.nodeId}];
 	
 	UIViewController* controller = [UIViewController new];
 	controller.view = reactView;

playground/e2e/app.test.js

@@ -13,6 +13,11 @@ describe('app', () => {
     expect(elementByLabel('Hello from a function!')).toBeVisible();
   });
 
+  xit('push screen', () => {
+    elementByLabel('Push').tap();
+    expect(elementByLabel('Pushed screen')).toBeVisible();
+  });
+
   xit('switch to tabs with side menus', () => {
     elementByLabel('Switch to tab based app with side menus').tap();
     elementByLabel('Switch to tab based app with side menus').swipeRight();

playground/src/app.js

@@ -13,4 +13,3 @@ export function start() {
     });
   });
 }
-

playground/src/containers/WelcomeScreen.js

@@ -6,6 +6,7 @@ import Navigation from 'react-native-navigation';
 class WelcomeScreen extends Component {
   constructor(props) {
     super(props);
+    this.onClickPush = this.onClickPush.bind(this);
   }
 
   render() {
@@ -13,7 +14,9 @@ class WelcomeScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1}>{`React Native Navigation!`}</Text>
         <Button title="Switch to tab based app" onPress={this.onClickSwitchToTabs} />
-        <Button title="Switch to tab based app with side menus" onPress={this.onClickSwitchToTabsWithSideMenus} />
+        <Button title="Switch to app with side menus" onPress={this.onClickSwitchToSideMenus} />
+        <Button title="Push" onPress={this.onClickPush} />
+        <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
       </View>
     );
   }
@@ -42,7 +45,7 @@ class WelcomeScreen extends Component {
     });
   }
 
-  onClickSwitchToTabsWithSideMenus() {
+  onClickSwitchToSideMenus() {
     Navigation.setRoot({
       tabs: [
         {
@@ -52,7 +55,7 @@ class WelcomeScreen extends Component {
         },
         {
           container: {
-            name: 'com.example.WelcomeScreen'
+            name: 'com.example.SimpleScreen'
           }
         },
         {
@@ -63,14 +66,27 @@ class WelcomeScreen extends Component {
       ],
       sideMenu: {
         left: {
-          name: 'com.example.SimpleScreen'
+          container: {
+            name: 'com.example.SimpleScreen'
+          }
         },
         right: {
-          name: 'com.example.SimpleScreen'
+          container: {
+            name: 'com.example.SimpleScreen'
+          }
         }
       }
     });
   }
+
+  onClickPush() {
+    Navigation.on(this.props.id).push({
+      name: 'com.example.SimpleScreen',
+      passProps: {
+        text: 'Pushed screen'
+      }
+    });
+  }
 }
 
 export default WelcomeScreen;
@@ -85,6 +101,11 @@ const styles = {
   h1: {
     fontSize: 24,
     textAlign: 'center',
-    margin: 10
+    margin: 30
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 80
   }
 };

src/Navigation.js

@@ -20,7 +20,7 @@ class Navigation {
   }
 
   setRoot(params) {
-    this.commands.setRoot(params);
+    return this.commands.setRoot(params);
   }
 
   events() {

src/Navigation.test.js

@@ -20,9 +20,11 @@ describe('Navigation', () => {
     expect(Navigation.containerRegistry.registerContainer).toHaveBeenCalledWith('name', fn);
   });
 
-  it('setRoot delegates to Commands', () => {
+  it('setRoot delegates to Commands', async () => {
+    Navigation.commands.setRoot.mockReturnValue(Promise.resolve('result'));
     const params = {};
-    Navigation.setRoot(params);
+    const result = await Navigation.setRoot(params);
+    expect(result).toEqual('result');
     expect(Navigation.commands.setRoot).toHaveBeenCalledTimes(1);
     expect(Navigation.commands.setRoot).toHaveBeenCalledWith(params);
   });

src/adapters/NativeCommandsSender.js

@@ -7,5 +7,6 @@ export default class NativeCommandsSender {
 
   setRoot(layoutTree) {
     this.nativeCommandsModule.setRoot(layoutTree);
+    return Promise.resolve(layoutTree);
   }
 }

src/adapters/NativeCommandsSender.test.js

@@ -14,4 +14,9 @@ describe('NativeCommandsSender', () => {
     uut.setRoot();
     expect(mockNativeModule.setRoot).toHaveBeenCalledTimes(1);
   });
+
+  it('returns promise with resolved layout', async () => {
+    const result = await uut.setRoot({});
+    expect(result).toBeDefined();
+  });
 });

src/commands/Commands.js

@@ -14,6 +14,6 @@ export default class Commands {
     const input = _.cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parseFromSimpleJSON(input);
     this.layoutTreeCrawler.crawl(layout);
-    this.nativeCommandsSender.setRoot(layout);
+    return this.nativeCommandsSender.setRoot(layout);
   }
 }

src/commands/Commands.test.js

@@ -54,5 +54,11 @@ describe('Commands', () => {
       uut.setRoot(SimpleLayouts.singleScreenWithAditionalParams);
       expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual(SimpleLayouts.passProps);
     });
+
+    it('returns a promise with the resolved layout', async () => {
+      mockCommandsSender.setRoot.mockReturnValue(Promise.resolve('the resolved layout'));
+      const result = await uut.setRoot({ container: { name: 'com.example.MyScreen' } });
+      expect(result).toEqual('the resolved layout');
+    });
   });
 });

src/containers/ContainerRegistry.test.js

@@ -28,7 +28,7 @@ describe('ContainerRegistry', () => {
   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" />);
+    const tree = renderer.create(<Container id="123" />);
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
   });
 });

src/containers/ContainerWrapper.js

@@ -5,18 +5,18 @@ export default class ContainerWrapper {
     return class extends Component {
       constructor(props) {
         super(props);
-        if (!props.containerId) {
-          throw new Error(`Container ${containerName} does not have a containerId!`);
+        if (!props.id) {
+          throw new Error(`Container ${containerName} does not have an id!`);
         }
         this.state = {
-          containerId: props.containerId,
-          allProps: { ...props, ...propStore.getPropsForContainerId(props.containerId) }
+          id: props.id,
+          allProps: { ...props, ...propStore.getPropsForContainerId(props.id) }
         };
       }
 
       componentWillReceiveProps(nextProps) {
         this.setState({
-          allProps: { ...nextProps, ...propStore.getPropsForContainerId(this.state.containerId) }
+          allProps: { ...nextProps, ...propStore.getPropsForContainerId(this.state.id) }
         });
       }
 
@@ -24,7 +24,7 @@ export default class ContainerWrapper {
         return (
           <OriginalContainer
             {...this.state.allProps}
-            containerId={this.state.containerId}
+            id={this.state.id}
           />
         );
       }

src/containers/ContainerWrapper.test.js

@@ -31,7 +31,7 @@ describe('ContainerWrapper', () => {
     render() {
       const Child = this.ChildClass;
       return (
-        <Child containerId="container1" {...this.state.propsFromState} />
+        <Child id="container1" {...this.state.propsFromState} />
       );
     }
   }
@@ -42,24 +42,24 @@ describe('ContainerWrapper', () => {
     store = new Store();
   });
 
-  it('must have containerId as prop', () => {
+  it('must have id as prop', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
     expect(() => {
       renderer.create(<NavigationContainer />);
-    }).toThrow(new Error('Container example.MyContainer does not have a containerId!'));
+    }).toThrow(new Error('Container example.MyContainer does not have an id!'));
   });
 
   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'} />);
+    const tree = renderer.create(<NavigationContainer id={'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'} />);
+    renderer.create(<NavigationContainer id={'container1'} myProp={'yo'} />);
     expect(myContainerRef.props.myProp).toEqual('yo');
   });
 
@@ -74,8 +74,8 @@ describe('ContainerWrapper', () => {
   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 } });
+    renderer.create(<NavigationContainer id={'container123'} />);
+    expect(myContainerRef.props).toEqual({ id: 'container123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
   });
 
   it('updates props from store into inner container', () => {
@@ -89,11 +89,11 @@ describe('ContainerWrapper', () => {
     expect(myContainerRef.props.myProp).toEqual('hello');
   });
 
-  it('protects containerId from change', () => {
+  it('protects id 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');
+    expect(myContainerRef.props.id).toEqual('container1');
+    testParentRef.setState({ propsFromState: { id: 'ERROR' } });
+    expect(myContainerRef.props.id).toEqual('container1');
   });
 });

yarn.lock

@@ -1948,8 +1948,8 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
 escodegen-wallaby@^1.6.7:
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/escodegen-wallaby/-/escodegen-wallaby-1.6.8.tgz#903afc307b1a0df4a79797e523157fade70b1165"
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/escodegen-wallaby/-/escodegen-wallaby-1.6.10.tgz#abffe3301b20df346229b51cf1e827873aff1e06"
   dependencies:
     esprima "^2.7.1"
     estraverse "^1.9.1"
@@ -2797,7 +2797,7 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-iconv-lite@0.4.11:
+iconv-lite@0.4.11, iconv-lite@^0.4.5:
   version "0.4.11"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.11.tgz#2ecb42fd294744922209a2e7c404dac8793d8ade"
 
@@ -2805,7 +2805,7 @@ iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
-iconv-lite@^0.4.13, iconv-lite@^0.4.5, iconv-lite@~0.4.13:
+iconv-lite@^0.4.13, iconv-lite@~0.4.13:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
 
@@ -3414,8 +3414,8 @@ joi@^6.6.1:
     topo "1.x.x"
 
 js-tokens@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
 js-yaml@^3.5.1, js-yaml@^3.7.0:
   version "3.7.0"