test(e2e): add test for mounted screens order (attach after initial tab)

Author: asafkorem

e2e/BottomTabs.test.js

@@ -11,6 +11,12 @@ describe('BottomTabs', () => {
     await expect(elementByLabel('First Tab')).toBeVisible();
   });
 
+  it.e2e('should mount first tab first', async () => {
+    await expect(elementById(TestIDs.MOUNTED_SCREENS_TEXT)).toHaveText(
+      'Mounted screens: FirstBottomTabsScreen, SecondBottomTabsScreen'
+    );
+  });
+
   it('switch to tab by index', async () => {
     await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
     await expect(elementByLabel('First Tab')).toBeNotVisible();

playground/src/screens/FirstBottomTabScreen.tsx

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { NavigationProps, Options } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Navigation from './../services/Navigation';
 import Screens from './Screens';
 import { component } from '../commons/Layouts';
 import testIDs from '../testIDs';
+import { Text } from 'react-native';
+
+export class MountedBottomTabScreensState {
+  static mountedBottomTabScreens: string[] = [];
+  static callback: (mountedBottomTabScreens: string[]) => void = () => {};
+
+  static addScreen(screen: string) {
+    this.mountedBottomTabScreens.push(screen);
+    this.callback(this.mountedBottomTabScreens);
+  }
+}
 
 const {
   SWITCH_TAB_BY_INDEX_BTN,
@@ -16,9 +27,14 @@ const {
   SHOW_TABS_BTN,
   HIDE_TABS_PUSH_BTN,
   FIRST_TAB_BAR_BUTTON,
+  MOUNTED_SCREENS_TEXT,
 } = testIDs;
 
-export default class FirstBottomTabScreen extends React.Component<NavigationProps> {
+interface NavigationState {
+  mountedBottomTabScreens: string[];
+}
+
+export default class FirstBottomTabScreen extends Component<NavigationProps, NavigationState> {
   static options(): Options {
     return {
       layout: {
@@ -38,6 +54,19 @@ export default class FirstBottomTabScreen extends React.Component<NavigationProp
     };
   }
 
+  constructor(props: NavigationProps) {
+    super(props);
+    this.state = { mountedBottomTabScreens: [] };
+
+    MountedBottomTabScreensState.callback = (mountedBottomTabScreens: string[]) => {
+      this.setState({ mountedBottomTabScreens: mountedBottomTabScreens });
+    };
+  }
+
+  componentDidMount() {
+    MountedBottomTabScreensState.addScreen('FirstBottomTabScreen');
+  }
+
   badgeVisible = true;
   bottomTabPressedListener = Navigation.events().registerBottomTabPressedListener((event) => {
     if (event.tabIndex == 2) {
@@ -71,6 +100,10 @@ export default class FirstBottomTabScreen extends React.Component<NavigationProp
         />
         <Button label="Push" onPress={this.push} />
         <Button label="Add border and shadow" onPress={this.modifyBottomTabs} />
+
+        <Text testID={MOUNTED_SCREENS_TEXT}>
+          Mounted screens: {this.state.mountedBottomTabScreens.join(', ')}
+        </Text>
       </Root>
     );
   }

playground/src/screens/SecondBottomTabScreen.tsx

@@ -6,6 +6,7 @@ import Screens from './Screens';
 import Navigation from './../services/Navigation';
 import { stack, component } from './../commons/Layouts';
 import testIDs from '../testIDs';
+import { MountedBottomTabScreensState } from './FirstBottomTabScreen';
 
 const {
   SIDE_MENU_INSIDE_BOTTOM_TABS_BTN,
@@ -40,6 +41,10 @@ export default class SecondBottomTabScreen extends React.Component<NavigationPro
     };
   }
 
+  componentDidMount() {
+    MountedBottomTabScreensState.addScreen('SecondBottomTabScreen');
+  }
+
   render() {
     return (
       <Root componentId={this.props.componentId}>

playground/src/testIDs.ts

@@ -211,6 +211,7 @@ const testIDs = {
   TOGGLE_REACT_DECLARED_MODAL: 'TOGGLE_REACT_DECLARED_MODAL',
   REPLACE_TAB_TEST_ID: 'REPLACE_TAB_TEST_ID',
   REPLACED_TAB: 'REPLACED_TAB',
+  MOUNTED_SCREENS_TEXT: 'MOUNTED_SCREENS_TEXT',
 
   //External Component Buttons
   EXTERNAL_DISMISS_MODAL_BTN: 'EXTERNAL_DISMISS_MODAL_BTN',