Add external components e2e, resolve navigationItem from external component (#5861)

* Add external components e2e, resolve navigationItem from external component

* Update ExternalComponent.test.js

* Update ExternalComponent.test.js

* Fix lint

e2e/ExternalComponent.test.js

@@ -20,4 +20,25 @@ describe('External Component', () => {
     await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('External component in deep stack')).toBeVisible();
   });
+
+  test(':ios: Dismiss modal from external component should not crash', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementByLabel('This is an external component')).toBeVisible();
+    await elementById(TestIDs.EXTERNAL_DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_SCREEN)).toBeVisible();
+  });
+
+  test(':ios: Top bar buttons should be visible', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementByLabel('This is an external component')).toBeVisible();
+    await expect(elementById(TestIDs.EXTERNAL_TOP_BAR_RIGHT_BTN)).toBeVisible();
+  });
+
+  test(':ios: Dismiss modal from external component should not crash when registered to modalDismissed event', async () => {
+    await elementById(TestIDs.REGISTER_MODAL_DISMISS_EVENT_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementByLabel('This is an external component')).toBeVisible();
+    await elementById(TestIDs.EXTERNAL_DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_SCREEN)).toBeVisible();
+  });
 });

lib/ios/RNNCustomViewController.m

@@ -12,9 +12,25 @@
 }
 
 - (void)viewDidLoad {
-    [super viewDidLoad];
-    [self addTestLabel];
-    [[self view] setBackgroundColor:UIColor.whiteColor];
+	[super viewDidLoad];
+	[self addTestLabel];
+	[self addDismissModalButton];
+	[self addNavigationBarButtons];
+	
+	[[self view] setBackgroundColor:UIColor.whiteColor];
+}
+
+- (void)dismissModal {
+	[self dismissViewControllerAnimated:YES completion:nil];
+}
+
+- (void)addDismissModalButton {
+	UIButton* dismissModalButton = [[UIButton alloc] initWithFrame:CGRectMake(self.view.center.x - 70, 300, 140, 50)];
+	dismissModalButton.backgroundColor = UIColor.systemBlueColor;
+	dismissModalButton.accessibilityIdentifier = @"EXTERNAL_DISMISS_MODAL_BTN";
+	[dismissModalButton setTitle:@"Dismiss modal" forState:UIControlStateNormal];
+	[dismissModalButton addTarget:self action:@selector(dismissModal) forControlEvents:UIControlEventTouchDown];
+	[self.view addSubview:dismissModalButton];
 }
 
 - (void)addTestLabel {
@@ -27,4 +43,14 @@
 	[self.view addSubview:label];
 }
 
+- (void)addNavigationBarButtons {
+	UIBarButtonItem* rightButton = [[UIBarButtonItem alloc] initWithTitle:@"Right button" style:UIBarButtonItemStylePlain target:self action:@selector(rightButtonPressed)];
+	rightButton.accessibilityIdentifier = @"EXTERNAL_TOP_BAR_RIGHT_BTN";
+	self.navigationItem.rightBarButtonItem = rightButton;
+}
+
+- (void)rightButtonPressed {
+	
+}
+
 @end

lib/ios/RNNExternalViewController.m

@@ -1,6 +1,8 @@
 #import "RNNExternalViewController.h"
 
-@implementation RNNExternalViewController
+@implementation RNNExternalViewController {
+    UIViewController* _boundViewController;
+}
 
 - (instancetype)initWithLayoutInfo:(RNNLayoutInfo *)layoutInfo eventEmitter:(RNNEventEmitter *)eventEmitter presenter:(RNNComponentPresenter *)presenter options:(RNNNavigationOptions *)options defaultOptions:(RNNNavigationOptions *)defaultOptions viewController:(UIViewController *)viewController {
 	self = [super initWithLayoutInfo:layoutInfo rootViewCreator:nil eventEmitter:eventEmitter presenter:presenter options:options defaultOptions:defaultOptions];
@@ -9,11 +11,16 @@
 }
 
 - (void)bindViewController:(UIViewController *)viewController {
+    _boundViewController = viewController;
     [self addChildViewController:viewController];
     [self.view addSubview:viewController.view];
     [viewController didMoveToParentViewController:self];
 }
 
+- (UINavigationItem *)navigationItem {
+    return _boundViewController.navigationItem;
+}
+
 - (void)loadView {
 	self.view = [UIView new];
 }

playground/src/components/Root.js

@@ -5,7 +5,7 @@ const { KeyboardAwareInsetsView } = require('react-native-keyboard-tracking-view
 const { showTextInputToTestKeyboardInteraction } = require('../flags');
 
 module.exports = (props) =>
-  <SafeAreaView style={styles.root}>
+  <SafeAreaView style={styles.root} testID={props.testID}>
     <ScrollView contentContainerStyle={[styles.scrollView, props.style]}>
       {props.children}
       {renderFooter(props)}

playground/src/screens/ExternalComponentScreen.js

@@ -6,7 +6,8 @@ const Navigation = require('../services/Navigation');
 const { stack } = require('../commons/Layouts');
 const {
   PUSH_BTN,
-  MODAL_BTN
+  MODAL_BTN,
+  REGISTER_MODAL_DISMISS_EVENT_BTN
 } = require('../testIDs');
 
 class ExternalComponentScreen extends React.Component {
@@ -25,10 +26,15 @@ class ExternalComponentScreen extends React.Component {
       <Root componentId={this.props.componentId}>
         <Button label='Push' testID={PUSH_BTN} onPress={this.push} />
         <Button label='Show Modal' testID={MODAL_BTN} onPress={this.modal} />
+        <Button label='Register modal dismiss event' testID={REGISTER_MODAL_DISMISS_EVENT_BTN} onPress={this.registerModalDismissEvent} />
       </Root>
     );
   }
 
+  registerModalDismissEvent = () => Navigation.events().registerModalDismissedListener(() => {
+    
+  });
+
   push = () => Navigation.push(this, {
     externalComponent: {
       name: Screens.NativeScreen,

playground/src/screens/NavigationScreen.js

@@ -11,7 +11,8 @@ const {
   SHOW_STATIC_EVENTS_SCREEN,
   SHOW_ORIENTATION_SCREEN,
   SET_ROOT_BTN,
-  PAGE_SHEET_MODAL_BTN
+  PAGE_SHEET_MODAL_BTN,
+  NAVIGATION_SCREEN
 } = require('../testIDs');
 const Screens = require('./Screens');
 
@@ -33,7 +34,7 @@ class NavigationScreen extends React.Component {
 
   render() {
     return (
-      <Root componentId={this.props.componentId}>
+      <Root componentId={this.props.componentId} testID={NAVIGATION_SCREEN}>
         <Button label='Set Root' testID={SET_ROOT_BTN} onPress={this.setRoot} />
         <Button label='Modal' testID={MODAL_BTN} onPress={this.showModal} />
         {Platform.OS === 'ios' && <Button label='PageSheet modal' testID={PAGE_SHEET_MODAL_BTN} onPress={this.showPageSheetModal} />}

playground/src/testIDs.js

@@ -89,6 +89,7 @@ module.exports = {
   SEARCH_BTN: 'SEARCH_BTN',
   SET_STACK_ROOT_BTN: 'SET_STACK_ROOT_BTN',
   SET_STACK_ROOT_WITH_ID_BTN: 'SET_STACK_ROOT_WITH_ID_BTN',
+  NAVIGATION_SCREEN: `NAVIGATION_SCREEN`,
 
   // Buttons
   TAB_BASED_APP_BUTTON: `TAB_BASED_APP_BUTTON`,
@@ -135,7 +136,12 @@ module.exports = {
   SHOW_LIFECYCLE_BTN: 'SHOW_LIFECYCLE_BTN',
   CHANGE_BUTTON_PROPS: 'CHANGE_BUTTON_PROPS',
   GOTO_BUTTONS_SCREEN: 'GOTO_BUTTONS_SCREEN',
+  REGISTER_MODAL_DISMISS_EVENT_BTN: 'REGISTER_MODAL_DISMISS_EVENT_BTN',
   HIDE_PREVIOUS_SCREEN_TOP_BAR: 'HIDE_PREVIOUS_SCREEN_TOP_BAR',
+  
+  //External Component Buttons
+  EXTERNAL_DISMISS_MODAL_BTN: 'EXTERNAL_DISMISS_MODAL_BTN',
+  EXTERNAL_TOP_BAR_RIGHT_BTN: 'EXTERNAL_TOP_BAR_RIGHT_BTN',
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,