layout tree crawling

playground/e2e/app.test.js

@@ -12,9 +12,15 @@ describe('app', () => {
     expect(elementByLabel('This is tab 1')).toBeVisible();
   });
 
+  it('passing props and functions', () => {
+    elementByLabel('Switch to tab based app').tap();
+    expect(elementByLabel('Hello from a function!')).toBeVisible();
+  });
+
   xit('switch to tabs with side menus', () => {
     elementByLabel('Switch to tab based app with side menus').tap();
-    // expect(elementByLabel('This is a tab screen')).toBeVisible();
+    elementByLabel('Switch to tab based app with side menus').swipeRight();
+    expect(elementByLabel('This is a side menu screen')).toBeVisible();
   });
 });
 

playground/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "quickinstall": "node ./scripts/quickInstall.js",
-    "start": "adb reverse tcp:8081 tcp:8081; watchman watch-del-all; react-native start --reset-cache",
+    "start": "adb reverse tcp:8081 tcp:8081; watchman watch-del-all; react-native start",
     "xcode": "open ios/playground.xcodeproj",
     "android": "cd android && ./gradlew installDebug",
     "e2e": "node ./scripts/e2e.ios.js"

playground/src/containers/SimpleScreen.js

@@ -3,13 +3,22 @@ import { View, Text } from 'react-native';
 
 class SimpleScreen extends Component {
   render() {
-    const text = this.props.text || 'Simple Screen';
     return (
       <View style={styles.root}>
-        <Text style={styles.h1}>{text}</Text>
+        <Text style={styles.h1}>{this.props.text || 'Simple Screen'}</Text>
+        {this.renderTextFromFunctionInProps()}
       </View>
     );
   }
+
+  renderTextFromFunctionInProps() {
+    if (!this.props.myFunction) {
+      return undefined;
+    }
+    return (
+      <Text style={styles.h1}>{this.props.myFunction()}</Text>
+    );
+  }
 }
 export default SimpleScreen;
 

playground/src/containers/WelcomeScreen.js

@@ -25,7 +25,8 @@ class WelcomeScreen extends Component {
           container: {
             name: 'com.example.SimpleScreen',
             passProps: {
-              text: 'This is tab 1'
+              text: 'This is tab 1',
+              myFunction: () => 'Hello from a function!'
             }
           }
         },

src/commands/Commands.js

@@ -1,23 +1,19 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 import LayoutTreeParser from './LayoutTreeParser';
+import LayoutTreeCrawler from './LayoutTreeCrawler';
 
 export default class Commands {
   constructor(nativeCommandsSender, uniqueIdProvider, store) {
     this.nativeCommandsSender = nativeCommandsSender;
-    this.layoutTreeParser = new LayoutTreeParser(uniqueIdProvider);
-    this.store = store;
+    this.uniqueIdProvider = uniqueIdProvider;
+    this.layoutTreeParser = new LayoutTreeParser();
+    this.layoutTreeCrawler = new LayoutTreeCrawler(uniqueIdProvider, store);
   }
 
   setRoot(simpleApi) {
-    const layout = this.layoutTreeParser.parseFromSimpleJSON(simpleApi);
-    this._savePassProps(layout);
+    const input = _.cloneDeep(simpleApi);
+    const layout = this.layoutTreeParser.parseFromSimpleJSON(input);
+    this.layoutTreeCrawler.crawl(layout);
     this.nativeCommandsSender.setRoot(layout);
   }
-
-  _savePassProps(node) {
-    if (node.type === 'Container') {
-      this.store.setPropsForContainerId(node.id, node.data.passProps);
-    }
-    _.forEach(node.children, (child) => this._savePassProps(child));
-  }
 }

src/commands/Commands.test.js

@@ -8,7 +8,9 @@ describe('Commands', () => {
   beforeEach(() => {
     const NativeCommandsSender = jest.genMockFromModule('../adapters/NativeCommandsSender').default;
     mockCommandsSender = new NativeCommandsSender();
+
     const mockIdProvider = { generate: (prefix) => `${prefix}+UNIQUE_ID` };
+
     const Store = require('../containers/Store').default;
     store = new Store();
 
@@ -17,7 +19,7 @@ describe('Commands', () => {
   });
 
   describe('setRoot', () => {
-    it('sends setRoot to native after parsing into layoutTree', () => {
+    it('sends setRoot to native after parsing into a correct layout tree', () => {
       uut.setRoot({
         container: {
           name: 'com.example.MyScreen'
@@ -41,6 +43,12 @@ describe('Commands', () => {
       });
     });
 
+    it('deep clones input to avoid mutation errors', () => {
+      const obj = {};
+      uut.setRoot({ container: { inner: obj } });
+      expect(mockCommandsSender.setRoot.mock.calls[0][0].children[0].data.inner).not.toBe(obj);
+    });
+
     it('passProps into containers', () => {
       expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
       uut.setRoot(SimpleLayouts.singleScreenWithAditionalParams);

src/commands/LayoutTreeCrawler.js

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import LayoutTypes from './LayoutTypes';
+
+export default class LayoutTreeCrawler {
+  constructor(uniqueIdProvider, store) {
+    this.uniqueIdProvider = uniqueIdProvider;
+    this.store = store;
+    this.crawl = this.crawl.bind(this);
+  }
+
+  crawl(node) {
+    this._assertKnownLayoutType(node.type);
+    node.id = this.uniqueIdProvider.generate(node.type);
+    node.data = node.data || {};
+    node.children = node.children || [];
+    if (node.type === LayoutTypes.Container) {
+      this.store.setPropsForContainerId(node.id, node.data.passProps);
+    }
+    _.forEach(node.children, this.crawl);
+  }
+
+  _assertKnownLayoutType(type) {
+    if (!_.includes(LayoutTypes, type)) {
+      throw new Error(`Unknown layout type ${type}`);
+    }
+  }
+}

src/commands/LayoutTreeCrawler.test.js

@@ -0,0 +1,47 @@
+import LayoutTypes from './LayoutTypes';
+
+describe('LayoutTreeCrawler', () => {
+  let uut;
+  let store;
+
+  beforeEach(() => {
+    const LayoutTreeCrawler = require('./LayoutTreeCrawler').default;
+    const uniqueIdProvider = { generate: (prefix) => `${prefix}+UNIQUE_ID` };
+    const Store = require('../containers/Store').default;
+    store = new Store();
+
+    uut = new LayoutTreeCrawler(uniqueIdProvider, store);
+  });
+
+  it('crawls a layout tree and adds unique id to each node', () => {
+    const node = { type: LayoutTypes.Container, children: [{ type: LayoutTypes.Tabs }] };
+    uut.crawl(node);
+    expect(node.id).toEqual('Container+UNIQUE_ID');
+    expect(node.children[0].id).toEqual('Tabs+UNIQUE_ID');
+  });
+
+  it('crawls a layout tree and ensures data exists', () => {
+    const node = { type: LayoutTypes.Container, children: [{ type: LayoutTypes.Tabs }] };
+    uut.crawl(node);
+    expect(node.data).toEqual({});
+    expect(node.children[0].data).toEqual({});
+  });
+
+  it('crawls a layout tree and ensures children exists', () => {
+    const node = { type: LayoutTypes.Container, children: [{ type: LayoutTypes.Tabs }] };
+    uut.crawl(node);
+    expect(node.children[0].children).toEqual([]);
+  });
+
+  it('crawls a layout tree and asserts known layout type', () => {
+    const node = { type: LayoutTypes.Container, children: [{ type: 'Bob' }] };
+    expect(() => uut.crawl(node)).toThrow(new Error('Unknown layout type Bob'));
+  });
+
+  it('saves passProps into store for Container nodes', () => {
+    const node = { type: LayoutTypes.Tabs, children: [{ type: LayoutTypes.Container, data: { passProps: { myProp: 123 } } }] };
+    expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
+    uut.crawl(node);
+    expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({ myProp: 123 });
+  });
+});

src/commands/LayoutTreeParser.js

@@ -1,85 +1,68 @@
 import * as _ from 'lodash';
-
-const Types = {
-  Container: 'Container',
-  ContainerStack: 'ContainerStack',
-  Tabs: 'Tabs',
-  SideMenuRoot: 'SideMenuRoot',
-  SideMenuCenter: 'SideMenuCenter',
-  SideMenuLeft: 'SideMenuLeft',
-  SideMenuRight: 'SideMenuRight'
-};
+import LayoutTypes from './LayoutTypes';
 
 export default class LayoutTreeParser {
-  constructor(uniqueIdProvider) {
-    this.uniqueIdProvider = uniqueIdProvider;
-  }
-
+  /**
+   * returns correct layout tree of {type, children, data?}
+   */
   parseFromSimpleJSON(simpleJsonApi) {
-    const input = _.cloneDeep(simpleJsonApi);
-    if (input.sideMenu) {
-      return this._createSideMenu(input);
+    if (simpleJsonApi.sideMenu) {
+      return this._createSideMenu(simpleJsonApi);
     }
-    if (input.tabs) {
-      return this._createTabs(input.tabs);
+    if (simpleJsonApi.tabs) {
+      return this._createTabs(simpleJsonApi.tabs);
     }
-    return this._createContainerStackWithContainer(input.container);
-  }
-
-  _node(node) {
-    node.id = this.uniqueIdProvider.generate(node.type);
-    node.children = node.children || [];
-    node.data = node.data || {};
-    return node;
+    return this._createContainerStackWithContainer(simpleJsonApi.container);
   }
 
   _createTabs(tabs) {
-    return this._node({
-      type: Types.Tabs,
+    return {
+      type: LayoutTypes.Tabs,
       children: _.map(tabs, (t) => this._createContainerStackWithContainer(t.container))
-    });
+    };
   }
 
   _createContainerStackWithContainer(container) {
-    return this._node({
-      type: Types.ContainerStack,
+    return {
+      type: LayoutTypes.ContainerStack,
       children: [this._createContainer(container)]
-    });
+    };
   }
 
   _createContainer(container) {
-    return this._node({
-      type: Types.Container,
-      data: container
-    });
+    return {
+      type: LayoutTypes.Container,
+      data: container,
+      children: []
+    };
   }
 
   _createSideMenu(layout) {
-    return this._node({
-      type: Types.SideMenuRoot,
+    return {
+      type: LayoutTypes.SideMenuRoot,
       children: this._createSideMenuChildren(layout)
-    });
+    };
   }
 
   _createSideMenuChildren(layout) {
     const children = [];
     if (layout.sideMenu.left) {
-      children.push(this._node({
-        type: Types.SideMenuLeft,
+      children.push({
+        type: LayoutTypes.SideMenuLeft,
         children: [this._createContainer(layout.sideMenu.left.container)]
-      }));
+      });
     }
-    children.push(this._node({
-      type: Types.SideMenuCenter,
+    children.push({
+      type: LayoutTypes.SideMenuCenter,
       children: [
         layout.tabs ? this._createTabs(layout.tabs) : this._createContainerStackWithContainer(layout.container)
       ]
-    }));
+    });
     if (layout.sideMenu.right) {
-      children.push(this._node({
-        type: Types.SideMenuRight,
+      children.push({
+        type: LayoutTypes.SideMenuRight,
         children: [this._createContainer(layout.sideMenu.right.container)]
-      }));
+      });
     }
     return children;
   }

src/commands/LayoutTreeParser.test.js

@@ -4,45 +4,17 @@ describe('LayoutTreeParser', () => {
   let uut;
 
   beforeEach(() => {
-    const uniqueIdProvider = { generate: (prefix) => `${prefix}+UNIQUE_ID` };
     const LayoutTreeParser = require('./LayoutTreeParser').default;
-    uut = new LayoutTreeParser(uniqueIdProvider);
-  });
-
-  it('adds uniqueId to containers', () => {
-    const input = { container: {} };
-    expect(uut.parseFromSimpleJSON(input))
-      .toEqual({
-        type: 'ContainerStack',
-        id: 'ContainerStack+UNIQUE_ID',
-        children: [
-          {
-            type: 'Container',
-            id: 'Container+UNIQUE_ID',
-            data: {},
-            children: []
-          }
-        ],
-        data: {}
-      });
-  });
-
-  it('deep clones to avoid mutations', () => {
-    const obj = {};
-    const result = uut.parseFromSimpleJSON({ container: { foo: obj } });
-    expect(result.children[0].data.foo).not.toBe(obj);
+    uut = new LayoutTreeParser();
   });
 
   it('parses single screen', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenApp))
       .toEqual({
         type: 'ContainerStack',
-        id: 'ContainerStack+UNIQUE_ID',
-        data: {},
         children: [
           {
             type: 'Container',
-            id: 'Container+UNIQUE_ID',
             data: {
               name: 'com.example.MyScreen'
             },
@@ -56,12 +28,9 @@ describe('LayoutTreeParser', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithAditionalParams))
       .toEqual({
         type: 'ContainerStack',
-        id: 'ContainerStack+UNIQUE_ID',
-        data: {},
         children: [
           {
             type: 'Container',
-            id: 'Container+UNIQUE_ID',
             children: [],
             data: {
               name: 'com.example.MyScreen',
@@ -82,17 +51,12 @@ describe('LayoutTreeParser', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.tabBasedApp))
       .toEqual({
         type: 'Tabs',
-        id: 'Tabs+UNIQUE_ID',
-        data: {},
         children: [
           {
             type: 'ContainerStack',
-            id: 'ContainerStack+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 children: [],
                 data: {
                   name: 'com.example.ATab'
@@ -102,12 +66,9 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'ContainerStack',
-            id: 'ContainerStack+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 children: [],
                 data: {
                   name: 'com.example.SecondTab'
@@ -117,12 +78,9 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'ContainerStack',
-            id: 'ContainerStack+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 children: [],
                 data: {
                   name: 'com.example.ATab'
@@ -138,17 +96,12 @@ describe('LayoutTreeParser', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.singleWithSideMenu))
       .toEqual({
         type: 'SideMenuRoot',
-        id: 'SideMenuRoot+UNIQUE_ID',
-        data: {},
         children: [
           {
             type: 'SideMenuLeft',
-            id: 'SideMenuLeft+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 data: {
                   name: 'com.example.SideMenu'
                 },
@@ -158,17 +111,12 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'SideMenuCenter',
-            id: 'SideMenuCenter+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'ContainerStack',
-                id: 'ContainerStack+UNIQUE_ID',
-                data: {},
                 children: [
                   {
                     type: 'Container',
-                    id: 'Container+UNIQUE_ID',
                     data: {
                       name: 'com.example.MyScreen'
                     },
@@ -186,22 +134,15 @@ describe('LayoutTreeParser', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.singleWithRightSideMenu))
       .toEqual({
         type: 'SideMenuRoot',
-        id: 'SideMenuRoot+UNIQUE_ID',
-        data: {},
         children: [
           {
             type: 'SideMenuCenter',
-            id: 'SideMenuCenter+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'ContainerStack',
-                id: 'ContainerStack+UNIQUE_ID',
-                data: {},
                 children: [
                   {
                     type: 'Container',
-                    id: 'Container+UNIQUE_ID',
                     data: {
                       name: 'com.example.MyScreen'
                     },
@@ -213,12 +154,9 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'SideMenuRight',
-            id: 'SideMenuRight+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 data: {
                   name: 'com.example.SideMenu'
                 },
@@ -234,17 +172,12 @@ describe('LayoutTreeParser', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.singleWithBothMenus))
       .toEqual({
         type: 'SideMenuRoot',
-        id: 'SideMenuRoot+UNIQUE_ID',
-        data: {},
         children: [
           {
             type: 'SideMenuLeft',
-            id: 'SideMenuLeft+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 data: {
                   name: 'com.example.Menu1'
                 },
@@ -254,17 +187,12 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'SideMenuCenter',
-            id: 'SideMenuCenter+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'ContainerStack',
-                id: 'ContainerStack+UNIQUE_ID',
-                data: {},
                 children: [
                   {
                     type: 'Container',
-                    id: 'Container+UNIQUE_ID',
                     data: {
                       name: 'com.example.MyScreen'
                     },
@@ -276,12 +204,9 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'SideMenuRight',
-            id: 'SideMenuRight+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 data: {
                   name: 'com.example.Menu2'
                 },
@@ -297,17 +222,12 @@ describe('LayoutTreeParser', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.tabBasedWithBothSideMenus))
       .toEqual({
         type: 'SideMenuRoot',
-        id: 'SideMenuRoot+UNIQUE_ID',
-        data: {},
         children: [
           {
             type: 'SideMenuLeft',
-            id: 'SideMenuLeft+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 data: {
                   name: 'com.example.Menu1'
                 },
@@ -317,22 +237,15 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'SideMenuCenter',
-            id: 'SideMenuCenter+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Tabs',
-                id: 'Tabs+UNIQUE_ID',
-                data: {},
                 children: [
                   {
                     type: 'ContainerStack',
-                    id: 'ContainerStack+UNIQUE_ID',
-                    data: {},
                     children: [
                       {
                         type: 'Container',
-                        id: 'Container+UNIQUE_ID',
                         data: {
                           name: 'com.example.FirstTab'
                         },
@@ -342,12 +255,9 @@ describe('LayoutTreeParser', () => {
                   },
                   {
                     type: 'ContainerStack',
-                    id: 'ContainerStack+UNIQUE_ID',
-                    data: {},
                     children: [
                       {
                         type: 'Container',
-                        id: 'Container+UNIQUE_ID',
                         data: {
                           name: 'com.example.SecondTab'
                         },
@@ -361,12 +271,9 @@ describe('LayoutTreeParser', () => {
           },
           {
             type: 'SideMenuRight',
-            id: 'SideMenuRight+UNIQUE_ID',
-            data: {},
             children: [
               {
                 type: 'Container',
-                id: 'Container+UNIQUE_ID',
                 data: {
                   name: 'com.example.Menu2'
                 },

src/commands/LayoutTypes.js

@@ -0,0 +1,9 @@
+export default {
+  Container: 'Container',
+  ContainerStack: 'ContainerStack',
+  Tabs: 'Tabs',
+  SideMenuRoot: 'SideMenuRoot',
+  SideMenuCenter: 'SideMenuCenter',
+  SideMenuLeft: 'SideMenuLeft',
+  SideMenuRight: 'SideMenuRight'
+};