V2 e2e Test IDs (#2304)

* refactored e2e tests to work with testIDs

* lint fix

* android e2e fixed

e2e/Modals.test.js

@@ -1,6 +1,7 @@
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const elementByLabel = Utils.elementByLabel;
+const { elementByLabel, elementById } = Utils;
 
 describe('modal', () => {
   beforeEach(async () => {
@@ -8,87 +9,87 @@ describe('modal', () => {
   });
 
   it('show modal', async () => {
-    await elementByLabel('Show Modal').tap();
-    await expect(elementByLabel('Modal Screen')).toBeVisible();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.MODAL_SCREEN)).toBeVisible();
   });
 
   it('dismiss modal', async () => {
-    await elementByLabel('Show Modal').tap();
-    await expect(elementByLabel('Modal Screen')).toBeVisible();
-    await elementByLabel('Dismiss Modal').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.MODAL_SCREEN)).toBeVisible();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('show multiple modals', async () => {
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementByLabel('Dismiss Modal').tap();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Dismiss Modal').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('dismiss unknown screen id', async () => {
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Dismiss Unknown Modal').tap();
+    await elementById(testIDs.DISMISS_UNKNOWN_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Dismiss Modal').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('dismiss modal by id which is not the top most', async () => {
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementByLabel('Dismiss Previous Modal').tap();
+    await elementById(testIDs.DISMISS_PREVIOUS_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementByLabel('Dismiss Modal').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('dismiss all previous modals by id when they are below top presented modal', async () => {
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
 
-    await elementByLabel('Dismiss ALL Previous Modals').tap();
+    await elementById(testIDs.DISMISS_ALL_PREVIOUS_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
 
-    await elementByLabel('Dismiss Modal').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('dismiss some modal by id deep in the stack', async () => {
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
 
-    await elementByLabel('Dismiss First In Stack').tap();
+    await elementById(testIDs.DISMISS_FIRST_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
 
-    await elementByLabel('Dismiss Modal').tap();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
 
-    await elementByLabel('Dismiss Modal').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('dismissAllModals', async () => {
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementByLabel('Show Modal').tap();
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementByLabel('Dismiss All Modals').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.DISMISS_ALL_MODALS_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 });

e2e/Orientations.test.js

@@ -1,7 +1,8 @@
 
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const elementByLabel = Utils.elementByLabel;
+const { elementById } = Utils;
 
 describe('orientation', () => {
   beforeEach(async () => {
@@ -14,45 +15,45 @@ describe('orientation', () => {
   });
 
   it('default allows all', async () => {
-    await elementByLabel('Orientation').tap();
-    await elementByLabel('default').tap();
+    await elementById(testIDs.ORIENTATION_BUTTON).tap();
+    await elementById(testIDs.DEFAULT_ORIENTATION_BUTTON).tap();
     await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
     await device.setOrientation('landscape');
     await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
     await device.setOrientation('portrait');
     await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
-    await elementByLabel('Dismiss').tap();
+    await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
   it('landscape and portrait array', async () => {
-    await elementByLabel('Orientation').tap();
-    await elementByLabel('landscape and portrait').tap();
+    await elementById(testIDs.ORIENTATION_BUTTON).tap();
+    await elementById(testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON).tap();
     await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
     await device.setOrientation('landscape');
     await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
     await device.setOrientation('portrait');
     await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
-    await elementByLabel('Dismiss').tap();
+    await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
   it('portrait only', async () => {
-    await elementByLabel('Orientation').tap();
-    await elementByLabel('portrait only').tap();
+    await elementById(testIDs.ORIENTATION_BUTTON).tap();
+    await elementById(testIDs.PORTRAIT_ORIENTATION_BUTTON).tap();
     await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
     await device.setOrientation('landscape');
     await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
     await device.setOrientation('portrait');
     await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
-    await elementByLabel('Dismiss').tap();
+    await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
   it('landscape only', async () => {
-    await elementByLabel('Orientation').tap();
-    await elementByLabel('landscape only').tap();
+    await elementById(testIDs.ORIENTATION_BUTTON).tap();
+    await elementById(testIDs.LANDSCAPE_ORIENTATION_BUTTON).tap();
     await device.setOrientation('landscape');
     await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
     await device.setOrientation('portrait');
     await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
-    await elementByLabel('Dismiss').tap();
+    await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 });

e2e/ScreenStack.test.js

@@ -1,6 +1,7 @@
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const elementByLabel = Utils.elementByLabel;
+const { elementByLabel, elementById } = Utils;
 
 describe('screen stack', () => {
   beforeEach(async () => {
@@ -8,44 +9,44 @@ describe('screen stack', () => {
   });
 
   it('push and pop screen', async () => {
-    await elementByLabel('Push').tap();
-    await expect(elementByLabel('Pushed Screen')).toBeVisible();
-    await elementByLabel('Pop').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+    await elementById(testIDs.POP_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('pop screen deep in the stack', async () => {
-    await elementByLabel('Push').tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
     await expect(elementByLabel('Stack Position: 1')).toBeVisible();
-    await elementByLabel('Push').tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
     await expect(elementByLabel('Stack Position: 2')).toBeVisible();
-    await elementByLabel('Pop Previous').tap();
+    await elementById(testIDs.POP_PREVIOUS_BUTTON).tap();
     await expect(elementByLabel('Stack Position: 2')).toBeVisible();
-    await elementByLabel('Pop').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.POP_BUTTON).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('pop to specific id', async () => {
-    await elementByLabel('Push').tap();
-    await elementByLabel('Push').tap();
-    await elementByLabel('Push').tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
     await expect(elementByLabel('Stack Position: 3')).toBeVisible();
-    await elementByLabel('Pop To Stack Position 1').tap();
+    await elementById(testIDs.POP_STACK_POSITION_ONE_BUTTON).tap();
     await expect(elementByLabel('Stack Position: 1')).toBeVisible();
   });
 
   it('pop to root', async () => {
-    await elementByLabel('Push').tap();
-    await elementByLabel('Push').tap();
-    await elementByLabel('Push').tap();
-    await elementByLabel('Pop To Root').tap();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await elementById(testIDs.POP_TO_ROOT).tap();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('switch to tab', async () => {
-    await elementByLabel('Switch to tab based app').tap();
+    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
     await expect(elementByLabel('This is tab 1')).toBeVisible();
-    await elementByLabel('Switch To Tab 2').tap();
+    await elementById(testIDs.SWITCH_SECOND_TAB_BUTTON).tap();
     await expect(elementByLabel('This is tab 1')).toBeNotVisible();
     await expect(elementByLabel('This is tab 2')).toBeVisible();
   });

e2e/ScreenStyle.test.js

@@ -1,6 +1,7 @@
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const { elementByLabel, elementById } = Utils;
+const { elementById, elementByLabel } = Utils;
 
 describe('screen style', () => {
   beforeEach(async () => {
@@ -8,40 +9,40 @@ describe('screen style', () => {
   });
 
   it('declare a navigationOptions on container component', async () => {
-    await elementByLabel('Push Options Screen').tap();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await expect(element(by.label('Static Title').and(by.type('UILabel')))).toBeVisible();
   });
 
   it('change title on container component', async () => {
-    await elementByLabel('Push Options Screen').tap();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await expect(element(by.label('Static Title').and(by.type('UILabel')))).toBeVisible();
-    await elementByLabel('Dynamic Options').tap();
+    await elementById(testIDs.DYNAMIC_OPTIONS_BUTTON).tap();
     await expect(element(by.label('Dynamic Title').and(by.type('UILabel')))).toBeVisible();
   });
 
   it('set dynamic options with valid options will do something and not crash', async () => {
     // we have no way of testing individual styles for the screen
-    await elementByLabel('Push Options Screen').tap();
-    await elementByLabel('Dynamic Options').tap();
-    await expect(element(by.label('Options Screen'))).toBeVisible();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.DYNAMIC_OPTIONS_BUTTON).tap();
+    await expect(elementById(testIDs.OPTIONS_SCREEN_HEADER)).toBeVisible();
   });
 
   it('hides Tab Bar when pressing on Hide Top Bar and shows it when pressing on Show Top Bar', async () => {
-    await elementByLabel('Push Options Screen').tap();
-    await elementByLabel('Hide Top Bar').tap();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.HIDE_TOP_BAR_BUTTON).tap();
     await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
-    await elementByLabel('Show Top Bar').tap();
+    await elementById(testIDs.SHOW_TOP_BAR_BUTTON).tap();
     await expect(element(by.type('UINavigationBar'))).toBeVisible();
   });
 
   it('hides topBar onScroll down and shows it on scroll up', async () => {
-    await elementByLabel('Push Options Screen').tap();
-    await elementByLabel('scrollView Screen').tap();
-    await elementByLabel('Toggle Top Bar Hide On Scroll').tap();
+    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 element(by.id('scrollView')).swipe('up', 'fast');
+    await element(by.id(testIDs.SCROLLVIEW_ELEMENT)).swipe('up', 'fast');
     await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
-    await element(by.id('scrollView')).swipe('down', 'fast');
+    await element(by.id(testIDs.SCROLLVIEW_ELEMENT)).swipe('down', 'fast');
     await expect(element(by.type('UINavigationBar'))).toBeVisible();
   });
 
@@ -54,8 +55,8 @@ describe('screen style', () => {
   });
 
   it('set Tab Bar badge on a current Tab', async () => {
-    await elementByLabel('Switch to tab based app').tap();
-    await elementByLabel('Set Tab Badge').tap();
+    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
+    await elementById(testIDs.SET_TAB_BADGE_BUTTON).tap();
     await expect(element(by.text('TeSt'))).toBeVisible();
   });
 
@@ -75,7 +76,7 @@ describe('screen style', () => {
   });
 
   it('set right buttons', async () => {
-    await elementByLabel('Push Options Screen').tap();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await expect(elementById('buttonOne')).toBeVisible();
     await elementById('buttonOne').tap();
     await expect(elementById('buttonTwo')).toBeVisible();
@@ -84,7 +85,7 @@ describe('screen style', () => {
   });
 
   it('set left buttons', async () => {
-    await elementByLabel('Push Options Screen').tap();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await expect(elementById('buttonLeft')).toBeVisible();
   });
 });

e2e/TopLevelApi.test.js

@@ -1,6 +1,7 @@
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const elementByLabel = Utils.elementByLabel;
+const { elementByLabel, elementById } = Utils;
 
 describe('top level api', () => {
   beforeEach(async () => {
@@ -8,31 +9,31 @@ describe('top level api', () => {
   });
 
   it('shows welcome screen', async () => {
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
   it('switch to tab based app, passProps and functions', async () => {
-    await elementByLabel('Switch to tab based app').tap();
+    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
     await expect(elementByLabel('This is tab 1')).toBeVisible();
     await expect(elementByLabel('Hello from a function!')).toBeVisible();
   });
 
   it('switch to tabs with side menus', async () => {
-    await elementByLabel('Switch to app with side menus').tap();
+    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
     await elementByLabel('This is a side menu center screen tab 1').swipe('right');
     await expect(elementByLabel('This is a left side menu screen')).toBeVisible();
   });
 
   it('screen lifecycle', async () => {
-    await elementByLabel('Push Lifecycle Screen').tap();
+    await elementById(testIDs.PUSH_LIFECYCLE_BUTTON).tap();
     await expect(elementByLabel('didAppear')).toBeVisible();
-    await elementByLabel('Push to test didDisappear').tap();
+    await elementById(testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON).tap();
     await expect(elementByLabel('Alert')).toBeVisible();
     await expect(elementByLabel('didDisappear')).toBeVisible();
   });
 
   it('unmount is called on pop', async () => {
-    await elementByLabel('Push Lifecycle Screen').tap();
+    await elementById(testIDs.PUSH_LIFECYCLE_BUTTON).tap();
     await expect(elementByLabel('didAppear')).toBeVisible();
     await Utils.tapBackIos();
     await expect(elementByLabel('componentWillUnmount')).toBeVisible();
@@ -47,9 +48,9 @@ describe('reload app', async () => {
   });
 
   it('push a screen to ensure its not there after reload', async () => {
-    await elementByLabel('Push').tap();
+    await elementById(testIDs.PUSH_BUTTON).tap();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
     await device.reloadReactNative();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 });

e2e/Utils.js

@@ -1,6 +1,6 @@
 module.exports = {
   elementByLabel: (label) => {
-    return element(by.label(label));
+    return element(by.text(label));
   },
   elementById: (id) => {
     return element(by.id(id));

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -81,7 +81,7 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 	}
 
 	@ReactMethod
-	public void pop(final String onContainerId, final Promise promise) {
+	public void pop(final String onContainerId, final ReadableMap options, final Promise promise) {
 		handle(new Runnable() {
 			@Override
 			public void run() {

playground/src/containers/LifecycleScreen.js

@@ -4,6 +4,7 @@ const { Component } = require('react');
 const { View, Text, Button, Platform } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 class LifecycleScreen extends Component {
   constructor(props) {
@@ -53,7 +54,7 @@ class LifecycleScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
-        <Button title="Push to test didDisappear" onPress={this.onClickPush} />
+        <Button title="Push to test didDisappear" testID={testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON} onPress={this.onClickPush} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/containers/ModalScreen.js

@@ -6,6 +6,7 @@ const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 class ModalScreen extends Component {
   static get navigationOptions() {
@@ -28,15 +29,15 @@ class ModalScreen extends Component {
   render() {
     return (
       <View style={styles.root}>
-        <Text style={styles.h1}>{`Modal Screen`}</Text>
+        <Text style={styles.h1} testID={testIDs.MODAL_SCREEN}>{`Modal Screen`}</Text>
         <Text style={styles.footer}>{`Modal Stack Position: ${this.getModalPosition()}`}</Text>
-        <Button title="Show Modal" onPress={this.onClickShowModal} />
-        <Button title="Dismiss Modal" onPress={this.onClickDismissModal} />
-        <Button title="Dismiss Unknown Modal" onPress={this.onClickDismissUnknownModal} />
-        <Button title="Dismiss All Modals" onPress={this.onClickDismissAllModals} />
-        {this.getPreviousModalId() ? (<Button title="Dismiss Previous Modal" onPress={this.onClickDismissPreviousModal} />) : undefined}
-        {this.props.previousModalIds ? (<Button title="Dismiss ALL Previous Modals" onPress={this.onClickDismissAllPreviousModals} />) : undefined}
-        {this.props.previousModalIds ? (<Button title="Dismiss First In Stack" onPress={this.onClickDismissFirstInStack} />) : undefined}
+        <Button title="Show Modal" testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
+        <Button title="Dismiss Modal" testID={testIDs.DISMISS_MODAL_BUTTON} onPress={this.onClickDismissModal} />
+        <Button title="Dismiss Unknown Modal" testID={testIDs.DISMISS_UNKNOWN_MODAL_BUTTON} onPress={this.onClickDismissUnknownModal} />
+        <Button title="Dismiss All Modals" testID={testIDs.DISMISS_ALL_MODALS_BUTTON} onPress={this.onClickDismissAllModals} />
+        {this.getPreviousModalId() ? (<Button title="Dismiss Previous Modal" testID={testIDs.DISMISS_PREVIOUS_MODAL_BUTTON} onPress={this.onClickDismissPreviousModal} />) : undefined}
+        {this.props.previousModalIds ? (<Button title="Dismiss ALL Previous Modals" testID={testIDs.DISMISS_ALL_PREVIOUS_MODAL_BUTTON} onPress={this.onClickDismissAllPreviousModals} />) : undefined}
+        {this.props.previousModalIds ? (<Button title="Dismiss First In Stack" testID={testIDs.DISMISS_FIRST_MODAL_BUTTON} onPress={this.onClickDismissFirstInStack} />) : undefined}
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/containers/OptionsScreen.js

@@ -4,6 +4,7 @@ const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 const BUTTON_ONE = 'buttonOne';
 const BUTTON_TWO = 'buttonTwo';
@@ -49,16 +50,16 @@ class OptionsScreen extends Component {
   render() {
     return (
       <View style={styles.root}>
-        <Text style={styles.h1}>{`Options Screen`}</Text>
-        <Button title="Dynamic Options" onPress={this.onClickDynamicOptions} />
-        <Button title="Show Top Bar" onPress={this.onClickShowTopBar} />
-        <Button title="Hide Top Bar" onPress={this.onClickHideTopBar} />
+        <Text style={styles.h1} testID={testIDs.OPTIONS_SCREEN_HEADER}>{`Options Screen`}</Text>
+        <Button title="Dynamic Options" testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
+        <Button title="Show Top Bar" testID={testIDs.SHOW_TOP_BAR_BUTTON} onPress={this.onClickShowTopBar} />
+        <Button title="Hide Top Bar" testID={testIDs.HIDE_TOP_BAR_BUTTON} onPress={this.onClickHideTopBar} />
         <Button title="Top Bar Transparent" onPress={this.onClickTopBarTransparent} />
         <Button title="Top Bar Opaque" onPress={this.onClickTopBarOpaque} />
-        <Button title="scrollView Screen" onPress={this.onClickScrollViewScreen} />
+        <Button title="scrollView Screen" testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
         <Button title="Custom Transition" onPress={this.onClickCustomTranstition} />
-        <Button title="Show custom alert" onPress={this.onClickAlert} />
-        <Button title="Show snackbar" onPress={this.onClickSnackbar} />
+        <Button title="Show custom alert" testID={testIDs.SHOW_CUSTOM_ALERT_BUTTON} onPress={this.onClickAlert} />
+        <Button title="Show snackbar" testID={testIDs.SHOW_SNACKBAR_BUTTON} onPress={this.onClickSnackbar} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/containers/OrientationDetectScreen.js

@@ -4,6 +4,7 @@ const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 class OrientationDetectScreen extends Component {
   constructor(props) {
@@ -20,7 +21,7 @@ class OrientationDetectScreen extends Component {
     return (
       <View style={styles.root} onLayout={this.detectHorizontal}>
         <Text style={styles.h1}>{`Orientation Screen`}</Text>
-        <Button title="Dismiss" onPress={() => Navigation.dismissModal(this.props.containerId)} />
+        <Button title="Dismiss" testID={testIDs.DISMISS_BUTTON} onPress={() => Navigation.dismissModal(this.props.containerId)} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
         <Text style={styles.footer} testID="currentOrientation">{this.state.horizontal ? 'Landscape' : 'Portrait'}</Text>
       </View>

playground/src/containers/OrientationSelectScreen.js

@@ -3,6 +3,7 @@ const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 class OrientationSelectScreen extends Component {
 
@@ -10,10 +11,10 @@ class OrientationSelectScreen extends Component {
     return (
       <View style={styles.root}>
         <Text style={styles.h1}>{`Orientation Menu`}</Text>
-        <Button title="default" onPress={() => this.onClickOrientationScreen('default')} />
-        <Button title="landscape and portrait" onPress={() => this.onClickOrientationScreen(['landscape', 'portrait'])} />
-        <Button title="portrait only" onPress={() => this.onClickOrientationScreen('portrait')} />
-        <Button title="landscape only" onPress={() => this.onClickOrientationScreen(['landscape'])} />
+        <Button title="default" testID={testIDs.DEFAULT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('default')} />
+        <Button title="landscape and portrait" testID={testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape', 'portrait'])} />
+        <Button title="portrait only" testID={testIDs.PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('portrait')} />
+        <Button title="landscape only" testID={testIDs.LANDSCAPE_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape'])} />
       </View>
     );
   }

playground/src/containers/PushedScreen.js

@@ -6,6 +6,7 @@ const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 class PushedScreen extends Component {
   constructor(props) {
@@ -21,13 +22,13 @@ class PushedScreen extends Component {
     const stackPosition = this.getStackPosition();
     return (
       <View style={styles.root}>
-        <Text style={styles.h1}>{`Pushed Screen`}</Text>
+        <Text testID={testIDs.PUSHED_SCREEN_HEADER} style={styles.h1}>{`Pushed Screen`}</Text>
         <Text style={styles.h2}>{`Stack Position: ${stackPosition}`}</Text>
-        <Button title="Push" onPress={this.onClickPush} />
-        <Button title="Pop" onPress={this.onClickPop} />
-        <Button title="Pop Previous" onPress={this.onClickPopPrevious} />
-        <Button title="Pop To Root" onPress={this.onClickPopToRoot} />
-        {stackPosition > 2 && <Button title="Pop To Stack Position 1" onPress={this.onClickPopToFirstPosition} />}
+        <Button title="Push" testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+        <Button title="Pop" testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
+        <Button title="Pop Previous" testID={testIDs.POP_PREVIOUS_BUTTON} onPress={this.onClickPopPrevious} />
+        <Button title="Pop To Root" testID={testIDs.POP_TO_ROOT} onPress={this.onClickPopToRoot} />
+        {stackPosition > 2 && <Button title="Pop To Stack Position 1" testID={testIDs.POP_STACK_POSITION_ONE_BUTTON} onPress={this.onClickPopToFirstPosition} />}
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/containers/ScrollViewScreen.js

@@ -4,6 +4,7 @@ const { Component } = require('react');
 const { StyleSheet, ScrollView, View, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 class ScrollViewScreen extends Component {
   static get navigationOptions() {
@@ -25,9 +26,9 @@ class ScrollViewScreen extends Component {
   render() {
     return (
       <View>
-        <ScrollView testID="scrollView" contentContainerStyle={styles.contentContainer}>
+        <ScrollView testID={testIDs.SCROLLVIEW_ELEMENT} contentContainerStyle={styles.contentContainer}>
           <View>
-            <Button title="Toggle Top Bar Hide On Scroll" onPress={this.onClickToggleTopBarHideOnScroll} />
+            <Button title="Toggle Top Bar Hide On Scroll" testID={testIDs.TOGGLE_TOP_BAR_HIDE_ON_SCROLL} onPress={this.onClickToggleTopBarHideOnScroll} />
           </View>
         </ScrollView>
       </View>

playground/src/containers/TextScreen.js

@@ -4,6 +4,7 @@ const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
+const testIDs = require('../testIDs');
 
 class TextScreen extends Component {
 
@@ -13,8 +14,8 @@ class TextScreen extends Component {
         <Text style={styles.h1}>{this.props.text || 'Text Screen'}</Text>
         {this.renderTextFromFunctionInProps()}
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
-        <Button title={'Set Tab Badge'} onPress={() => this.onButtonPress()} />
-        <Button title="Switch To Tab 2" onPress={() => this.onClickSwitchToTab()} />
+        <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)} />
       </View>

playground/src/containers/WelcomeScreen.js

@@ -1,6 +1,9 @@
 const React = require('react');
 const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
+
+const testIDs = require('../testIDs');
+
 const Navigation = require('react-native-navigation');
 
 class WelcomeScreen extends Component {
@@ -24,16 +27,16 @@ class WelcomeScreen extends Component {
   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 app with side menus" onPress={this.onClickSwitchToSideMenus} />
-        <Button title="Push Lifecycle Screen" onPress={this.onClickLifecycleScreen} />
-        <Button title="Push" onPress={this.onClickPush} />
-        <Button title="Push Options Screen" onPress={this.onClickPushOptionsScreen} />
-        <Button title="Back Handler" onPress={this.onClickBackHandler} />
-        <Button title="Show Modal" onPress={this.onClickShowModal} />
-        <Button title="Show Redbox" onPress={this.onClickShowRedbox} />
-        <Button title="Orientation" onPress={this.onClickPushOrientationMenuScreen} />
+        <Text testID={testIDs.WELCOME_SCREEN_HEADER} style={styles.h1}>{`React Native Navigation!`}</Text>
+        <Button title="Switch to tab based app" testID={testIDs.TAB_BASED_APP_BUTTON} onPress={this.onClickSwitchToTabs} />
+        <Button title="Switch to app with side menus" testID={testIDs.TAB_BASED_APP_SIDE_BUTTON} onPress={this.onClickSwitchToSideMenus} />
+        <Button title="Push Lifecycle Screen" testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
+        <Button title="Push" testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+        <Button title="Push Options Screen" testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
+        <Button title="Back Handler" testID={testIDs.BACK_HANDLER_BUTTON} onPress={this.onClickBackHandler} />
+        <Button title="Show Modal" testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
+        <Button title="Show Redbox" testID={testIDs.SHOW_REDBOX_BUTTON} onPress={this.onClickShowRedbox} />
+        <Button title="Orientation" testID={testIDs.ORIENTATION_BUTTON} onPress={this.onClickPushOrientationMenuScreen} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/testIDs.js

@@ -0,0 +1,48 @@
+
+module.exports = {
+
+  // Buttons
+  TAB_BASED_APP_BUTTON: `TAB_BASED_APP_BUTTON`,
+  TAB_BASED_APP_SIDE_BUTTON: `TAB_BASED_APP_SIDE_BUTTON`,
+  PUSH_LIFECYCLE_BUTTON: `PUSH_LIFECYCLE_BUTTON`,
+  PUSH_BUTTON: `PUSH_BUTTON`,
+  PUSH_OPTIONS_BUTTON: `PUSH_OPTIONS_BUTTON`,
+  BACK_HANDLER_BUTTON: `BACK_HANDLER_BUTTON`,
+  SHOW_MODAL_BUTTON: `SHOW_MODAL_BUTTON`,
+  SHOW_REDBOX_BUTTON: `SHOW_REDBOX_BUTTON`,
+  ORIENTATION_BUTTON: `ORIENTATION_BUTTON`,
+  DISMISS_MODAL_BUTTON: `DISMISS_MODAL_BUTTON`,
+  DISMISS_UNKNOWN_MODAL_BUTTON: `DISMISS_UNKNOWN_MODAL_BUTTON`,
+  DISMISS_ALL_MODALS_BUTTON: `DISMISS_ALL_MODALS_BUTTON`,
+  DISMISS_PREVIOUS_MODAL_BUTTON: `DISMISS_PREVIOUS_MODAL_BUTTON`,
+  DISMISS_ALL_PREVIOUS_MODAL_BUTTON: `DISMISS_ALL_PREVIOUS_MODAL_BUTTON`,
+  DISMISS_FIRST_MODAL_BUTTON: `DISMISS_FIRST_MODAL_BUTTON`,
+  DEFAULT_ORIENTATION_BUTTON: `DEFAULT_ORIENTATION_BUTTON`,
+  LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON: `LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON`,
+  PORTRAIT_ORIENTATION_BUTTON: `PORTRAIT_ORIENTATION_BUTTON`,
+  LANDSCAPE_ORIENTATION_BUTTON: `LANDSCAPE_ORIENTATION_BUTTON`,
+  DISMISS_BUTTON: `DISMISS_BUTTON`,
+  POP_BUTTON: `POP_BUTTON`,
+  POP_PREVIOUS_BUTTON: `POP_PREVIOUS_BUTTON`,
+  POP_TO_ROOT: `POP_TO_ROOT`,
+  POP_STACK_POSITION_ONE_BUTTON: `POP_STACK_POSITION_ONE_BUTTON`,
+  SWITCH_SECOND_TAB_BUTTON: `SWITCH_SECOND_TAB_BUTTON`,
+  DYNAMIC_OPTIONS_BUTTON: `DYNAMIC_OPTIONS_BUTTON`,
+  SHOW_TOP_BAR_BUTTON: `SHOW_TOP_BAR_BUTTON`,
+  HIDE_TOP_BAR_BUTTON: `HIDE_TOP_BAR_BUTTON`,
+  SCROLLVIEW_SCREEN_BUTTON: `SCROLLVIEW_SCREEN_BUTTON`,
+  SHOW_CUSTOM_ALERT_BUTTON: `SHOW_CUSTOM_ALERT_BUTTON`,
+  SHOW_SNACKBAR_BUTTON: `SHOW_SNACKBAR_BUTTON`,
+  TOGGLE_TOP_BAR_HIDE_ON_SCROLL: `TOGGLE_TOP_BAR_HIDE_ON_SCROLL`,
+  SET_TAB_BADGE_BUTTON: `SET_TAB_BADGE_BUTTON`,
+  PUSH_TO_TEST_DID_DISAPPEAR_BUTTON: `PUSH_TO_TEST_DID_DISAPPEAR_BUTTON`,
+
+  // Elements
+  SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,
+
+  // Headers
+  WELCOME_SCREEN_HEADER: `WELCOME_SCREEN_HEADER`,
+  PUSHED_SCREEN_HEADER: `PUSHED_SCREEN_HEADER`,
+  OPTIONS_SCREEN_HEADER: `OPTIONS_SCREEN_HEADER`,
+  MODAL_SCREEN: `MODAL_SCREEN`
+};