Add SideMenu inside BottomTabs e2e

This test checks if mergeOptions are applied correctly on SideMenu child contained inside BottomTabs layout

e2e/ComplexLayout.test.js

@@ -19,4 +19,15 @@ describe('complex layout', () => {
     await elementById(testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK).tap();
     await expect(elementByLabel('External component in deep stack')).toBeVisible();
   });
+
+  test(':android: merge options correctly in SideMenu inside BottomTabs layout', async () => {
+    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
+    await elementById(testIDs.SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB).tap();
+    await elementById(testIDs.SECOND_TAB_BAR_BUTTON).tap();
+    await elementById(testIDs.OPEN_SIDE_MENU).tap();
+    await expect(elementByLabel('This is a left side menu screen')).toBeVisible();
+
+    await elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON).tap();
+    await expect(elementByLabel('This is a left side menu screen')).toBeNotVisible();
+  });
 });

playground/src/screens/ComplexLayout.js

@@ -100,7 +100,8 @@ class ComplexLayout extends Component {
                 options: {
                   bottomTab: {
                     text: 'SideMenu',
-                    icon: require('../images/two.png')
+                    icon: require('../images/two.png'),
+                    testID: testIDs.SECOND_TAB_BAR_BUTTON
                   }
                 }
               }

playground/src/screens/complexlayouts/BottomTabSideMenuScreen.js

@@ -2,10 +2,11 @@ const React = require('react');
 const { Component } = require('react');
 const { View, Button } = require('react-native');
 const { Navigation } = require('react-native-navigation');
+const testIDs = require('../../testIDs');
 
 class BottomTabSideMenuScreen extends Component {
-   onOpenSideMenuPress = () => {
-   Navigation.mergeOptions(this.props.componentId, {
+  onOpenSideMenuPress = () => {
+    Navigation.mergeOptions(this.props.componentId, {
       sideMenu: {
         left: {
           visible: true
@@ -13,21 +14,21 @@ class BottomTabSideMenuScreen extends Component {
       }
     });
   }
-   render() {
+  render() {
     return (
       <View style={styles.root}>
         <Button
           title="Open SideMenu"
           color="blue"
           onPress={this.onOpenSideMenuPress}
-          //TODO: testID for detox 
+          testID={testIDs.OPEN_SIDE_MENU}
         />
       </View>
     );
   }
 }
- module.exports = BottomTabSideMenuScreen;
- const styles = {
+module.exports = BottomTabSideMenuScreen;
+const styles = {
   root: {
     flexGrow: 1,
     justifyContent: 'center',

playground/src/testIDs.js

@@ -71,6 +71,8 @@ module.exports = {
   SHOW_TOPBAR_SEARCHBAR: `SHOW_TOPBAR_SEARCHBAR`,
   SEARCH_RESULT_ITEM: `SEARCH_RESULT_ITEM`,
   HIDE_BOTTOM_TABS_ON_PUSH_BUTTON: `HIDE_BOTTOM_TABS_ON_PUSH_BUTTON`,
+  SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB: `SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB`,
+  OPEN_SIDE_MENU: `OPEN_SIDE_MENU`,
   
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,