side menus

integration/env.test.js

@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 describe('test environment', () => {
   it('handles object spread', () => {
     const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
@@ -10,4 +11,18 @@ describe('test environment', () => {
     const result = await new Promise((r) => r('hello'));
     expect(result).toEqual('hello');
   });
+
+  it('lodash equality tests', () => {
+    expect(_.eq('hello', 'hello')).toBe(true);
+    expect(_.isEqual('hello', 'hello')).toBe(true);
+
+    expect(_.eq('hello', Object('hello'))).toBe(false);
+    expect(_.isEqual('hello', Object('hello'))).toBe(true);
+
+    const a = {};
+    const b = {};
+
+    expect(_.eq(a, b)).toBe(false);
+    expect(_.isEqual(a, b)).toBe(true);
+  });
 });

playground/e2e/app.test.js

@@ -8,12 +8,12 @@ describe('app', () => {
   });
 
   it('switch to tab based app', () => {
-    elementByLabel('Switch to tab based app').tap();
+    elementById('btnSwitchToTabs').tap();
     expect(elementByLabel('This is a tab screen')).toBeVisible();
   });
 
-  xit('switch to tabs with side menus', () => {
-    elementByLabel('Switch to tab based app with side menus').tap();
+  it('switch to tabs with side menus', () => {
+    elementById('btnSwitchToTabsWithMenus').tap();
     // expect(elementByLabel('This is a tab screen')).toBeVisible();
   });
 });
@@ -21,3 +21,7 @@ describe('app', () => {
 function elementByLabel(label) {
   return element(by.label(label));
 }
+
+function elementById(id) {
+  return element(by.id(id));
+}

playground/src/containers/WelcomeScreen.js

@@ -4,12 +4,24 @@ import { View, Text, Button } from 'react-native';
 import Navigation from 'react-native-navigation';
 
 class WelcomeScreen extends Component {
+  constructor(props) {
+    super(props);
+  }
+
   render() {
     return (
       <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
+          testId="btnSwitchToTabs"
+          title="Switch to tab based app"
+          onPress={this.onClickSwitchToTabs}
+        />
+        <Button
+          testId="btnSwitchToTabsWithMenus"
+          title="Switch to tab based app with side menus"
+          onPress={this.onClickSwitchToTabsWithSideMenus}
+        />
       </View>
     );
   }

src/commands/LayoutTreeParser.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import * as _ from 'lodash';
 
 export default class LayoutTreeParser {
   constructor(uniqueIdProvider) {
@@ -6,16 +6,72 @@ export default class LayoutTreeParser {
   }
 
   parseFromSimpleJSON(simpleJsonApi) {
-    if (simpleJsonApi.tabs) {
+    // TOOD deepclone
+
+    if (simpleJsonApi.sideMenu) {
       return {
-        type: 'Tabs',
-        id: this.uniqueIdProvider.generate(`Tabs`),
-        children: _.map(simpleJsonApi.tabs, (t) => this.createContainerStackWithContainer(t.container))
+        type: 'SideMenuRoot',
+        id: this.uniqueIdProvider.generate('SideMenuRoot'),
+        children: this.createSideMenuChildren(simpleJsonApi)
       };
     }
+    if (simpleJsonApi.tabs) {
+      return this.createTabs(simpleJsonApi.tabs);
+    }
+
     return this.createContainerStackWithContainer(simpleJsonApi.container);
   }
 
+  createSideMenuChildren(layout) {
+    const children = [];
+    if (layout.sideMenu.left) {
+      children.push({
+        type: 'SideMenuLeft',
+        id: this.uniqueIdProvider.generate('SideMenuLeft'),
+        children: [
+          this.createContainer(layout.sideMenu.left)
+        ]
+      });
+    }
+    children.push({
+      type: 'SideMenuCenter',
+      id: this.uniqueIdProvider.generate('SideMenuCenter'),
+      children: [
+        this.createContainerStackWithContainer(layout.container)
+      ]
+    });
+    return children;
+
+    // (simpleJsonApi.sideMenu, (v, k) => {
+    //       if (_.isEqual(k, 'left')) {
+    //         return {
+    //           type: 'SideMenuLeft',
+    //           id: this.uniqueIdProvider.generate('SideMenuLeft'),
+    //           children: [
+    //             this.createContainer(v)
+    //           ]
+    //         };
+    //       } else if (_.isEqual(k, 'right')) {
+    //         return {
+    //           type: 'SideMenuRight',
+    //           id: this.uniqueIdProvider.generate('SideMenuRight'),
+    //           children: [
+    //             this.createContainer(v)
+    //           ]
+    //         };
+    //       }
+    //       return undefined;
+    //     })
+  }
+
+  createTabs(tabs) {
+    return {
+      type: 'Tabs',
+      id: this.uniqueIdProvider.generate(`Tabs`),
+      children: _.map(tabs, (t) => this.createContainerStackWithContainer(t.container))
+    };
+  }
+
   createContainerStackWithContainer(container) {
     return {
       type: 'ContainerStack',
@@ -28,7 +84,7 @@ export default class LayoutTreeParser {
 
   createContainer(container) {
     return {
-      data: _.merge({}, container),
+      data: container,
       type: 'Container',
       id: this.uniqueIdProvider.generate(`Container`),
       children: []

src/commands/LayoutTreeParser.test.js

@@ -127,30 +127,42 @@ describe('LayoutTreeParser', () => {
   xit('parses side menus', () => {
     expect(uut.parseFromSimpleJSON(SimpleLayouts.singleWithSideMenu))
       .toEqual({
-        type: 'SideMenus',
-        id: 'SideMenus+UNIQUE_ID',
+        type: 'SideMenuRoot',
+        id: 'SideMenuRoot+UNIQUE_ID',
         children: [
           {
-            type: 'Container',
-            id: 'Container+UNIQUE_ID',
-            data: {
-              name: 'com.example.SideMenu'
-            },
-            children: []
-          },
-          {
-            type: 'ContainerStack',
-            id: 'ContainerStack+UNIQUE_ID',
+            type: 'SideMenuLeft',
+            id: 'SideMenuLeft+UNIQUE_ID',
             children: [
               {
                 type: 'Container',
                 id: 'Container+UNIQUE_ID',
                 data: {
-                  name: 'com.example.MyScreen'
+                  name: 'com.example.SideMenu'
                 },
                 children: []
               }
             ]
+          },
+          {
+            type: 'SideMenuCenter',
+            id: 'SideMenuCenter+UNIQUE_ID',
+            children: [
+              {
+                type: 'ContainerStack',
+                id: 'ContainerStack+UNIQUE_ID',
+                children: [
+                  {
+                    type: 'Container',
+                    id: 'Container+UNIQUE_ID',
+                    data: {
+                      name: 'com.example.MyScreen'
+                    },
+                    children: []
+                  }
+                ]
+              }
+            ]
           }
         ]
       });

wallaby.js

@@ -2,13 +2,18 @@
 'use strict';
 process.env.BABEL_ENV = 'test';
 const babelOptions = require('./package.json').babel.env.test;
-module.exports = function(wallaby) {
+module.exports = function (wallaby) {
   return {
     env: {
       type: 'node',
       runner: 'node'
     },
 
+    // workers: {
+    //   initial: 1,
+    //   regular: 1
+    // },
+
     testFramework: 'jest',
 
     files: [
@@ -28,7 +33,7 @@ module.exports = function(wallaby) {
       '**/*.js': wallaby.compilers.babel(babelOptions)
     },
 
-    setup: function(w) {
+    setup: function (w) {
       require('babel-polyfill');
       w.testFramework.configure(require('./package.json').jest);
     }