Modal unmount e2e test (#3215)

* Update docs

Outdated onAppLaunched part is changed

I just started to a project with v2 and I realized this part of the documentation was wrong. I searched a bit and find this 2 commits: 

104e3f97fd

1d2680c5aa

So, that part is probably forgotten

* Modal unmount e2e test

* Modal unmount e2e test changes.

e2e/Modals.test.js

@@ -21,6 +21,16 @@ describe('modal', () => {
     await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
   });
 
+  it(':android: unmount modal when dismissed', async () => {
+    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await expect(elementById(testIDs.MODAL_SCREEN)).toBeVisible();
+    await elementById(testIDs.MODAL_LIFECYCLE_BUTTON).tap();
+    await expect(elementByLabel('didAppear')).toBeVisible();
+    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await expect(elementByLabel('componentWillUnmount')).toBeVisible();
+    await elementByLabel('OK').atIndex(0).tap();
+  });
+
   it('show multiple modals', async () => {
     await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();

playground/src/screens/LifecycleScreen.js

@@ -37,7 +37,9 @@ class LifecycleScreen extends Component {
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
         <Button title='Push to test didDisappear' testID={testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON} onPress={this.onClickPush} />
-        <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={() => this.onClickPop()} />
+        {this.props.isModal ?
+          (<Button title='Dismiss' testID={testIDs.DISMISS_MODAL_BUTTON} onPress={() => this.onClickDismiss()} />)
+          : (<Button title='Pop' testID={testIDs.POP_BUTTON} onPress={() => this.onClickPop()} />)}
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
@@ -50,6 +52,10 @@ class LifecycleScreen extends Component {
   onClickPop() {
     Navigation.pop(this.props.componentId);
   }
+
+  onClickDismiss() {
+    Navigation.dismissModal(this.props.componentId);
+  }
 }
 module.exports = LifecycleScreen;
 

playground/src/screens/ModalScreen.js

@@ -26,6 +26,7 @@ class ModalScreen extends Component {
     this.onClickDismissAllModals = this.onClickDismissAllModals.bind(this);
     this.onClickPushScreen = this.onClickPushScreen.bind(this);
     this.onShowModalWithDeepStack = this.onShowModalWithDeepStack.bind(this);
+    this.onClickModalLifecycle = this.onClickModalLifecycle.bind(this);
   }
 
   render() {
@@ -37,6 +38,7 @@ class ModalScreen extends Component {
         <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} />
+        <Button title='Test Modal Lifecycle' testID={testIDs.MODAL_LIFECYCLE_BUTTON} onPress={this.onClickModalLifecycle} />
         <Button title='Push screen' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPushScreen} />
         <Button title='Show Modal With Stack' testID={testIDs.MODAL_WITH_STACK_BUTTON} onPress={this.onShowModalWithDeepStack} />
         {this.getPreviousModalId() ? (<Button title='Dismiss Previous Modal' testID={testIDs.DISMISS_PREVIOUS_MODAL_BUTTON}
@@ -89,6 +91,20 @@ class ModalScreen extends Component {
     Navigation.dismissAllModals();
   }
 
+  onClickModalLifecycle() {
+    Navigation.showModal({
+      component: {
+        name: 'navigation.playground.LifecycleScreen',
+        passProps: {
+          isModal: true,
+        },
+        options: {
+          animated: false
+        }
+      }
+    });
+  }
+
   onClickPushScreen() {
     Navigation.push(this.props.componentId, {
       component: {

playground/src/testIDs.js

@@ -59,6 +59,7 @@ module.exports = {
   EXTERNAL_COMPONENT_IN_STACK: `EXTERNAL_COMPONENT_IN_STACK`,
   EXTERNAL_COMPONENT_IN_DEEP_STACK: `EXTERNAL_COMPONENT_IN_DEEP_STACK`,
   SET_STACK_ROOT_BUTTON: `SET_STACK_ROOT_BUTTON`,
+  MODAL_LIFECYCLE_BUTTON: `MODAL_LIFECYCLE_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,