Add e2e for multiple setRoot (#4993)

e2e/SetRoot.test.js

@@ -0,0 +1,16 @@
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+const { elementById } = Utils;
+
+describe('SetRoot', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.NAVIGATION_TAB).tap();
+    await elementById(TestIDs.SET_ROOT_BTN).tap();
+  });
+
+  it('set root multiple times with the same componentId', async () => {
+    await elementById(TestIDs.SET_MULTIPLE_ROOTS_BTN).tap();
+    await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+  });
+});

playground/src/screens/NavigationScreen.js

@@ -9,11 +9,11 @@ const {
   EXTERNAL_COMP_BTN,
   SHOW_STATIC_EVENTS_SCREEN,
   SHOW_ORIENTATION_SCREEN,
-  TOP_BAR_ELEMENT
+  SET_ROOT_BTN
 } = require('../testIDs');
 const Screens = require('./Screens');
 
-class NavigationScreen extends React.Component {
+class NavigationScreen  extends React.Component {
   static options() {
     return {
       topBar: {
@@ -32,6 +32,7 @@ class NavigationScreen extends React.Component {
   render() {
     return (
       <Root componentId={this.props.componentId}>
+        <Button label='Set Root' testID={SET_ROOT_BTN} onPress={this.setRoot} />
         <Button label='Modal' testID={MODAL_BTN} onPress={this.showModal} />
         <Button label='Overlay' testID={OVERLAY_BTN} onPress={this.showOverlay} />
         <Button label='External Component' testID={EXTERNAL_COMP_BTN} onPress={this.externalComponent} />
@@ -45,12 +46,13 @@ class NavigationScreen extends React.Component {
     );
   }
 
+  setRoot = () => Navigation.showModal(Screens.SetRoot);
   showModal = () => Navigation.showModal(Screens.Modal);
   showOverlay = () => Navigation.showModal(Screens.Overlay);
   externalComponent = () => Navigation.showModal(Screens.ExternalComponent);
   pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
   orientation = () => Navigation.showModal(Screens.Orientation);
-  preview = ({ reactTag }) => {
+  preview = ({reactTag}) => {
     Navigation.push(this.props.componentId, {
       component: {
         name: Screens.Pushed,

playground/src/screens/Screens.js

@@ -5,6 +5,7 @@ module.exports = {
   Options: 'Options',
   Stack: 'Stack',
   Modal: 'Modal',
+  SetRoot: 'SetRoot',
   Overlay: 'Overlay',
   OverlayAlert: 'OverlayAlert',
   ScrollViewOverlay: 'ScrollViewOverlay',

playground/src/screens/SetRootScreen.js

@@ -0,0 +1,55 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Navigation = require('./../services/Navigation');
+const {
+  NAVIGATION_TAB,
+  SET_MULTIPLE_ROOTS_BTN
+} = require('../testIDs');
+const Screens = require('./Screens');
+
+class SetRootScreen  extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'Navigation'
+        }
+      },
+      bottomTab: {
+        text: 'Navigation',
+        icon: require('../../img/navigation.png'),
+        testID: NAVIGATION_TAB
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Set Multiple Roots' testID={SET_MULTIPLE_ROOTS_BTN} onPress={this.setMultipleRoot} />
+      </Root>
+    );
+  }
+
+  setMultipleRoot = async () => {
+    await this.setRoot();
+    await this.setRoot();
+  };
+
+  setRoot = async () => await Navigation.setRoot({
+    root: {
+      stack: {
+        id: 'stack',
+        children: [{
+          component: {
+            id: 'component',
+            name: Screens.Pushed
+          }
+        }]
+      }
+    }
+  });
+}
+
+module.exports = SetRootScreen;

playground/src/screens/index.js

@@ -19,6 +19,7 @@ function registerScreens() {
   Navigation.registerComponent(Screens.Stack, () => require('./StackScreen'));
   Navigation.registerComponent(Screens.Pushed, () => require('./PushedScreen'));
   Navigation.registerComponent(Screens.Modal, () => require('./ModalScreen'))
+  Navigation.registerComponent(Screens.SetRoot, () => require('./SetRootScreen'))
   Navigation.registerComponent(Screens.Navigation, () => require('./NavigationScreen'));
   Navigation.registerComponent(Screens.FirstBottomTabsScreen, () => require('./FirstBottomTabScreen'));
   Navigation.registerComponent(Screens.SecondBottomTabsScreen, () => require('./SecondBottomTabScreen'));

playground/src/testIDs.js

@@ -61,6 +61,7 @@ module.exports = {
   DISMISS_UNKNOWN_MODAL_BTN: 'DISMISS_UNKNOWN_MODAL_BTN',
   PUSH_TO_TEST_DID_DISAPPEAR_BTN: 'PUSH_TO_TEST_DID_DISAPPEAR_BTN',
   SET_ROOT_BTN: 'SET_ROOT_BTN',
+  SET_MULTIPLE_ROOTS_BTN: 'SET_MULTIPLE_ROOTS_BTN',
   ADD_BACK_HANDLER: 'ADD_BACK_HANDLER',
   REMOVE_BACK_HANDLER: 'REMOVE_BACK_HANDLER',
   OPEN_LEFT_SIDE_MENU_BTN: 'OPEN_LEFT_SIDE_MENU_BTN',