[Navigation Mock] Fix bottomTabPressed event (wix#7368)

Author: yogevbd

e2e/BottomTabs.test.js

@@ -106,4 +106,11 @@ describe('BottomTabs', () => {
     await elementById(TestIDs.POP_BTN).tap();
     await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
   });
+
+  it('invoke bottomTabPressed event', async () => {
+    await elementById(TestIDs.THIRD_TAB_BAR_BTN).tap();
+    await expect(elementByLabel('BottomTabPressed')).toBeVisible();
+    await elementByLabel('OK').tap();
+    await expect(elementByLabel('First Tab')).toBeVisible();
+  });
 });

lib/src/Mock/Components/ComponentScreen.tsx

@@ -6,6 +6,8 @@ import { VISIBLE_SCREEN_TEST_ID } from '../constants';
 import { LayoutStore } from '../Stores/LayoutStore';
 import { connect } from '../connect';
 import { TopBar } from './TopBar';
+import { events } from '../Stores/EventsStore';
+import _ from 'lodash';
 
 export const ComponentScreen = connect(
   class extends Component<ComponentProps> {
@@ -34,7 +36,13 @@ export const ComponentScreen = connect(
             <Button
               testID={bottomTabOptions?.testID}
               title={bottomTabOptions?.text || ''}
-              onPress={() => LayoutStore.selectTabIndex(this.props.layoutNode.getBottomTabs(), i)}
+              onPress={() => {
+                events.invokeBottomTabPressed({
+                  tabIndex: i,
+                });
+                if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true))
+                  LayoutStore.selectTabIndex(this.props.layoutNode.getBottomTabs(), i);
+              }}
             />
             <Text>{bottomTabOptions?.badge}</Text>
           </View>
@@ -46,6 +54,9 @@ export const ComponentScreen = connect(
 
     render() {
       const Component = Navigation.mock.store.getWrappedComponent(this.props.layoutNode.data.name);
+      if (!Component)
+        throw new Error(`${this.props.layoutNode.data.name} has not been registered.`);
+
       return (
         <View testID={this.isVisible() ? VISIBLE_SCREEN_TEST_ID : undefined}>
           {this.props.layoutNode.getStack() && (

lib/src/Mock/Stores/EventsStore.ts

@@ -4,13 +4,15 @@ import {
   ModalDismissedEvent,
 } from '../../interfaces/ComponentEvents';
 import { ComponentDidAppearEvent, NavigationButtonPressedEvent } from '../../index';
+import { BottomTabPressedEvent } from '../../interfaces/Events';
 
 export const events = {
   navigationButtonPressed: [(_event: NavigationButtonPressedEvent) => {}],
   componentWillAppear: [(_event: ComponentWillAppearEvent) => {}],
   componentDidAppear: [(_event: ComponentDidAppearEvent) => {}],
   componentDidDisappear: [(_event: ComponentDidDisappearEvent) => {}],
   modalDismissed: [(_event: ModalDismissedEvent) => {}],
+  bottomTabPressed: [(_event: BottomTabPressedEvent) => {}],
   invokeComponentWillAppear: (event: ComponentWillAppearEvent) => {
     events.componentWillAppear &&
       events.componentWillAppear.forEach((listener) => {
@@ -41,4 +43,10 @@ export const events = {
         listener(event);
       });
   },
+  invokeBottomTabPressed: (event: BottomTabPressedEvent) => {
+    events.bottomTabPressed &&
+      events.bottomTabPressed?.forEach((listener) => {
+        listener(event);
+      });
+  },
 };

lib/src/Mock/mocks/NativeEventsReceiver.ts

@@ -73,10 +73,13 @@ export class NativeEventsReceiver {
   }
 
   public registerBottomTabPressedListener(
-    _callback: (data: BottomTabPressedEvent) => void
+    callback: (data: BottomTabPressedEvent) => void
   ): EmitterSubscription {
+    events.bottomTabPressed.push(callback);
     return {
-      remove: () => {},
+      remove: () => {
+        _.remove(events.bottomTabPressed, (value) => value === callback);
+      },
     } as EmitterSubscription;
   }
 

playground/src/screens/FirstBottomTabScreen.tsx

@@ -38,6 +38,11 @@ export default class FirstBottomTabScreen extends React.Component<NavigationComp
 
   dotVisible = true;
   badgeVisible = true;
+  bottomTabPressedListener = Navigation.events().registerBottomTabPressedListener((event) => {
+    if (event.tabIndex == 2) {
+      alert('BottomTabPressed');
+    }
+  });
 
   render() {
     return (
@@ -68,6 +73,10 @@ export default class FirstBottomTabScreen extends React.Component<NavigationComp
     );
   }
 
+  componentWillUnmount() {
+    this.bottomTabPressedListener.remove();
+  }
+
   modifyBottomTabs = () => {
     Navigation.mergeOptions(this.props.componentId, {
       bottomTabs: {

playground/src/screens/LayoutsScreen.tsx

@@ -75,7 +75,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
 
   stack = () => Navigation.showModal(stack(Screens.Stack, 'StackId'));
 
-  bottomTabs = () =>
+  bottomTabs = () => {
     Navigation.showModal({
       bottomTabs: {
         children: [
@@ -88,6 +88,18 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
             },
             'SecondTab'
           ),
+          {
+            component: {
+              name: Screens.Pushed,
+              options: {
+                bottomTab: {
+                  selectTabOnPress: false,
+                  text: 'Tab 3',
+                  testID: testIDs.THIRD_TAB_BAR_BTN,
+                },
+              },
+            },
+          },
         ],
         options: {
           bottomTabs: {
@@ -96,6 +108,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
         },
       },
     });
+  };
 
   sideMenu = () =>
     Navigation.showModal({