navigation bars e2e with testIDs (#2365)

e2e/ScreenStyle.test.js

@@ -10,14 +10,14 @@ describe('screen style', () => {
 
   it('declare a navigationOptions on container component', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Static Title').and(by.type('UILabel')))).toBeVisible();
+    await expect(element(by.label('Static Title'))).toBeVisible();
   });
 
   it('change title on container component', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Static Title').and(by.type('UILabel')))).toBeVisible();
+    await expect(element(by.label('Static Title'))).toBeVisible();
     await elementById(testIDs.DYNAMIC_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Dynamic Title').and(by.type('UILabel')))).toBeVisible();
+    await expect(element(by.label('Dynamic Title'))).toBeVisible();
   });
 
   it('set dynamic options with valid options will do something and not crash', async () => {
@@ -30,20 +30,20 @@ describe('screen style', () => {
   it('hides Tab Bar when pressing on Hide Top Bar and shows it when pressing on Show Top Bar', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await elementById(testIDs.HIDE_TOP_BAR_BUTTON).tap();
-    await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
     await elementById(testIDs.SHOW_TOP_BAR_BUTTON).tap();
-    await expect(element(by.type('UINavigationBar'))).toBeVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
   });
 
   it('hides topBar onScroll down and shows it on scroll up', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await elementById(testIDs.SCROLLVIEW_SCREEN_BUTTON).tap();
     await elementById(testIDs.TOGGLE_TOP_BAR_HIDE_ON_SCROLL).tap();
-    await expect(element(by.type('UINavigationBar'))).toBeVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
     await element(by.id(testIDs.SCROLLVIEW_ELEMENT)).swipe('up', 'fast');
-    await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
     await element(by.id(testIDs.SCROLLVIEW_ELEMENT)).swipe('down', 'fast');
-    await expect(element(by.type('UINavigationBar'))).toBeVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
   });
 
   it('makes topBar transparent and opaque', async () => {
@@ -61,18 +61,18 @@ describe('screen style', () => {
   });
 
   it('hide Tab Bar', async () => {
-    await elementByLabel('Switch to tab based app').tap();
-    await expect(element(by.type('UITabBar'))).toBeVisible();
-    await elementByLabel('Hide Tab Bar').tap();
-    await expect(element(by.type('UITabBar'))).toBeNotVisible();
+    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
+    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
+    await elementById(testIDs.HIDE_BOTTOM_TABS_BUTTON).tap();
+    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeNotVisible();
   });
 
   it('show Tab Bar', async () => {
-    await elementByLabel('Switch to tab based app').tap();
-    await elementByLabel('Hide Tab Bar').tap();
-    await expect(element(by.type('UITabBar'))).toBeNotVisible();
-    await elementByLabel('Show Tab Bar').tap();
-    await expect(element(by.type('UITabBar'))).toBeVisible();
+    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
+    await elementById(testIDs.HIDE_BOTTOM_TABS_BUTTON).tap();
+    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeNotVisible();
+    await elementById(testIDs.SHOW_BOTTOM_TABS_BUTTON).tap();
+    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
   });
 
   it('side menu visibility - left', async () => {

playground/src/containers/OptionsScreen.js

@@ -19,7 +19,8 @@ class OptionsScreen extends Component {
         largeTitle: false,
         hidden: false,
         textFontSize: 16,
-        textFontFamily: 'HelveticaNeue-Italic'
+        textFontFamily: 'HelveticaNeue-Italic',
+        testID: testIDs.TOP_BAR_ELEMENT
       },
       rightButtons: [{
         id: BUTTON_ONE,

playground/src/containers/TextScreen.js

@@ -7,6 +7,13 @@ const Navigation = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
 class TextScreen extends Component {
+  static get navigationOptions() {
+    return {
+      bottomTabs: {
+        testID: testIDs.BOTTOM_TABS_ELEMENT
+      }
+    };
+  }
 
   render() {
     return (
@@ -16,8 +23,8 @@ class TextScreen extends Component {
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
         <Button title={'Set Tab Badge'} testID={testIDs.SET_TAB_BADGE_BUTTON} onPress={() => this.onButtonPress()} />
         <Button title={'Switch To Tab 2'} testID={testIDs.SWITCH_SECOND_TAB_BUTTON} onPress={() => this.onClickSwitchToTab()} />
-        <Button title="Hide Tab Bar" onPress={() => this.hideTabBar(true)} />
-        <Button title="Show Tab Bar" onPress={() => this.hideTabBar(false)} />
+        <Button title="Hide Tab Bar" testID={testIDs.HIDE_BOTTOM_TABS_BUTTON} onPress={() => this.hideTabBar(true)} />
+        <Button title="Show Tab Bar" testID={testIDs.SHOW_BOTTOM_TABS_BUTTON} onPress={() => this.hideTabBar(false)} />
         <Button title="Show Left Side Menu" testID={testIDs.SHOW_LEFT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('left')} />
         <Button title="Show Right Side Menu" testID={testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('right')} />
       </View>

playground/src/testIDs.js

@@ -40,14 +40,18 @@ module.exports = {
   SHOW_RIGHT_SIDE_MENU_BUTTON: `SHOW_RIGHT_SIDE_MENU_BUTTON`,
   HIDE_LEFT_SIDE_MENU_BUTTON: `HIDE_LEFT_SIDE_MENU_BUTTON`,
   HIDE_RIGHT_SIDE_MENU_BUTTON: `HIDE_RIGHT_SIDE_MENU_BUTTON`,
+  HIDE_BOTTOM_TABS_BUTTON: `HIDE_BOTTOM_TABS_BUTTON`,
+  SHOW_BOTTOM_TABS_BUTTON: `SHOW_BOTTOM_TABS_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,
-  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`,
+  BOTTOM_TABS_ELEMENT: `BOTTOM_TABS_ELEMENT`,
+  TOP_BAR_ELEMENT: `TOP_BAR_ELEMENT`,
 
   // Headers
   WELCOME_SCREEN_HEADER: `WELCOME_SCREEN_HEADER`,
   PUSHED_SCREEN_HEADER: `PUSHED_SCREEN_HEADER`,
   OPTIONS_SCREEN_HEADER: `OPTIONS_SCREEN_HEADER`,
-  MODAL_SCREEN: `MODAL_SCREEN`
+  MODAL_SCREEN: `MODAL_SCREEN`,
+  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`
 };