react-native-navigation 8.7.4 → 8.7.5

package/src/Mock/Layouts/Node.ts

@@ -0,0 +1,35 @@
+import { Options } from '../../index';
+import ParentNode from './ParentNode';
+
+interface Data {
+  name: string;
+  options: Options;
+}
+
+export type NodeType =
+  | 'Component'
+  | 'ExternalComponent'
+  | 'Stack'
+  | 'BottomTabs'
+  | 'TopTabs'
+  | 'SideMenuRoot'
+  | 'SideMenuLeft'
+  | 'SideMenuRight'
+  | 'SideMenuCenter'
+  | 'SplitView';
+
+export default class Node {
+  readonly nodeId: string;
+  readonly data: Data;
+  readonly type: NodeType;
+  // options: Options;
+  parentNode?: ParentNode;
+
+  constructor(layout: any, type: NodeType, parentNode?: ParentNode) {
+    this.nodeId = layout.id;
+    this.data = layout.data;
+    // this.options = layout.data.options;
+    this.parentNode = parentNode;
+    this.type = type;
+  }
+}

package/src/Mock/Layouts/ParentNode.ts

@@ -0,0 +1,86 @@
+import _ from 'lodash';
+import { OptionsTopBarButton } from '../../interfaces/Options';
+import { Options } from '../../index';
+import { LayoutStore } from '../Stores/LayoutStore';
+import ComponentNode from './ComponentNode';
+import LayoutNodeFactory from './LayoutNodeFactory';
+import Node, { NodeType } from './Node';
+
+export default class ParentNode extends Node {
+  children: ParentNode[];
+
+  constructor(layout: any, type: NodeType, parentNode?: ParentNode) {
+    super(layout, type, parentNode);
+    this.children = layout.children.map((childLayout: any) =>
+      LayoutNodeFactory.create(childLayout, this)
+    );
+  }
+
+  componentDidMount() {}
+
+  componentDidAppear() {
+    this.getVisibleLayout().componentDidAppear();
+  }
+
+  componentDidDisappear() {
+    this.getVisibleLayout().componentDidDisappear();
+  }
+
+  getVisibleLayout(): ComponentNode {
+    return this.children[this.children.length - 1].getVisibleLayout();
+  }
+
+  getTopParent(): Node {
+    if (this.parentNode) return this.parentNode.getTopParent();
+    return this;
+  }
+
+  applyOptions(_options: Options) {
+    this.parentNode?.applyOptions(_options);
+  }
+
+  mergeOptions(options: Options) {
+    this.data.options = _.mergeWith(this.data.options, options, (objValue, srcValue, key) => {
+      if (_.isArray(objValue)) {
+        if (key === 'rightButtons' || key === 'leftButtons') {
+          this.buttonsChanged(objValue, srcValue);
+        }
+        return srcValue;
+      }
+      if (key === 'title' && srcValue.component) {
+        this.titleChanged(objValue, srcValue);
+      }
+    });
+
+    this.parentNode?.mergeOptions(options);
+  }
+
+  buttonsChanged(_oldButtons: OptionsTopBarButton[], _newButtons: OptionsTopBarButton[]) {}
+
+  titleChanged(_oldComponent: any, _newComponent: any) {}
+
+  resolveOptions(): Options {
+    const options = _.merge(_.cloneDeep(this.data.options), this.getVisibleLayout().data.options);
+    return _.merge(_.cloneDeep(LayoutStore.getDefaultOptions()), options);
+  }
+
+  public getStack(): ParentNode | undefined {
+    if (this.type === 'Stack') {
+      return this as ParentNode;
+    } else if (this.parentNode) {
+      return this.parentNode.getStack();
+    }
+
+    return undefined;
+  }
+
+  public getBottomTabs(): ParentNode | undefined {
+    if (this.type === 'BottomTabs') {
+      return this as ParentNode;
+    } else if (this.parentNode) {
+      return this.parentNode.getBottomTabs();
+    }
+
+    return undefined;
+  }
+}

package/src/Mock/Layouts/SideMenu.ts

@@ -0,0 +1,87 @@
+import ParentNode from './ParentNode';
+import ComponentNode from './ComponentNode';
+import { Options } from '../../index';
+import * as layoutActions from '../actions/layoutActions';
+import { NodeType } from './Node';
+
+const isCenterChild = (child: ParentNode) => child.type === 'SideMenuCenter';
+const isLeftChild = (child: ParentNode) => child.type === 'SideMenuLeft';
+const isRightChild = (child: ParentNode) => child.type === 'SideMenuRight';
+
+export default class SideMenuRootNode extends ParentNode {
+  visibleChild: ParentNode;
+
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuRoot', parentNode);
+
+    this.visibleChild = this._getCenterChild();
+    if (!this.visibleChild) {
+      throw new Error('SideMenuRootNode must have a SideMenuCenter child');
+    }
+  }
+
+  applyOptions(_options: Options) {
+    super.applyOptions(_options);
+
+    this._updateVisibility(_options);
+  }
+
+  mergeOptions(options: Options) {
+    super.mergeOptions(options);
+
+    this._updateVisibility(options);
+  }
+
+  /**
+   * @override
+   */
+  getVisibleLayout(): ComponentNode {
+    return this.visibleChild.getVisibleLayout();
+  }
+
+  _updateVisibility(options: Options) {
+    if (options.sideMenu) {
+      if (options.sideMenu.left?.visible) {
+        this.visibleChild = this._getLeftChild();
+        layoutActions.openSideMenu(this.visibleChild);
+      } else if (options.sideMenu.right?.visible) {
+        this.visibleChild = this._getRightChild();
+        layoutActions.openSideMenu(this.visibleChild);
+      } else {
+        this.visibleChild = this._getCenterChild();
+        layoutActions.closeSideMenu(this.visibleChild);
+      }
+    }
+  }
+
+  _getCenterChild = () => this.children.find(isCenterChild) as ParentNode;
+  _getLeftChild = () => this.children.find(isLeftChild) as ParentNode;
+  _getRightChild = () => this.children.find(isRightChild) as ParentNode;
+}
+
+export class SideMenuNode extends ParentNode {
+  constructor(layout: any, type: NodeType, parentNode?: ParentNode) {
+    super(layout, type, parentNode);
+  }
+
+  getVisibleLayout() {
+    return this.children[0].getVisibleLayout();
+  }
+}
+
+export class SideMenuLeftNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuLeft', parentNode);
+  }
+}
+export class SideMenuRightNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuRight', parentNode);
+  }
+}
+
+export class SideMenuCenterNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuCenter', parentNode);
+  }
+}

package/src/Mock/Layouts/StackNode.ts

@@ -0,0 +1,11 @@
+import ParentNode from './ParentNode';
+
+export default class StackNode extends ParentNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'Stack', parentNode);
+  }
+
+  getVisibleLayout() {
+    return this.children[this.children.length - 1].getVisibleLayout();
+  }
+}

package/src/Mock/Stores/EventsStore.ts

@@ -0,0 +1,68 @@
+import {
+  ComponentDidDisappearEvent,
+  ComponentWillAppearEvent,
+  ModalDismissedEvent,
+  ScreenPoppedEvent,
+} from '../../interfaces/ComponentEvents';
+import { ComponentDidAppearEvent, NavigationButtonPressedEvent } from '../../index';
+import { BottomTabPressedEvent, CommandCompletedEvent } from '../../interfaces/Events';
+
+export const events = {
+  navigationButtonPressed: [(_event: NavigationButtonPressedEvent) => {}],
+  componentWillAppear: [(_event: ComponentWillAppearEvent) => {}],
+  componentDidAppear: [(_event: ComponentDidAppearEvent) => {}],
+  componentDidDisappear: [(_event: ComponentDidDisappearEvent) => {}],
+  modalDismissed: [(_event: ModalDismissedEvent) => {}],
+  bottomTabPressed: [(_event: BottomTabPressedEvent) => {}],
+  commandCompleted: [(_event: CommandCompletedEvent) => {}],
+  screenPopped: [(_event: ScreenPoppedEvent) => {}],
+
+  invokeComponentWillAppear: (event: ComponentWillAppearEvent) => {
+    events.componentWillAppear &&
+      events.componentWillAppear.forEach((listener) => {
+        listener(event);
+      });
+  },
+  invokeComponentDidAppear: (event: ComponentDidAppearEvent) => {
+    events.componentDidAppear &&
+      events.componentDidAppear.forEach((listener) => {
+        listener(event);
+      });
+  },
+  invokeComponentDidDisappear: (event: ComponentDidDisappearEvent) => {
+    events.componentDidDisappear &&
+      events.componentDidDisappear.forEach((listener) => {
+        listener(event);
+      });
+  },
+  invokeModalDismissed: (event: ModalDismissedEvent) => {
+    events.modalDismissed &&
+      events.modalDismissed.forEach((listener) => {
+        listener(event);
+      });
+  },
+  invokeNavigationButtonPressed: (event: NavigationButtonPressedEvent) => {
+    events.navigationButtonPressed &&
+      events.navigationButtonPressed.forEach((listener) => {
+        listener(event);
+      });
+  },
+  invokeBottomTabPressed: (event: BottomTabPressedEvent) => {
+    events.bottomTabPressed &&
+      events.bottomTabPressed?.forEach((listener) => {
+        listener(event);
+      });
+  },
+  invokeCommandCompleted: (event: CommandCompletedEvent) => {
+    events.commandCompleted &&
+      events.commandCompleted.forEach((listener) => {
+        listener(event);
+      });
+  },
+  invokeScreenPopped: (event: ScreenPoppedEvent) => {
+    events.screenPopped &&
+      events.screenPopped.forEach((listener) => {
+        listener(event);
+      });
+  },
+};

package/src/Mock/Stores/LayoutStore.ts

@@ -0,0 +1,200 @@
+import _ from 'lodash';
+import BottomTabsNode from '../Layouts/BottomTabsNode';
+import ParentNode from '../Layouts/ParentNode';
+import LayoutNodeFactory from '../Layouts/LayoutNodeFactory';
+import { SideMenuNode } from '../Layouts/SideMenu';
+import StackNode from '../Layouts/StackNode';
+import { Options } from '../../interfaces/Options';
+
+const remx = require('remx');
+
+const state = remx.state({
+  root: {},
+  modals: [],
+  overlays: [],
+  sideMenu: undefined,
+});
+
+const setters = remx.setters({
+  setRoot(layout: ParentNode) {
+    state.modals = [];
+    state.root = layout;
+  },
+  push(layout: ParentNode, stack: StackNode) {
+    stack.children.push(layout);
+  },
+  pop(layoutId: string) {
+    const stack = getters.getLayoutById(layoutId).getStack();
+    if (stack.children.length === 1) return;
+    const poppedChild = stack.children.pop();
+    const newVisibleChild = stack.getVisibleLayout();
+    poppedChild.componentDidDisappear();
+    newVisibleChild.componentDidAppear();
+    return _.clone(poppedChild.nodeId);
+  },
+  popTo(layoutId: string) {
+    const stack = getters.getLayoutById(layoutId).getStack();
+    while (stack.getVisibleLayout().nodeId != layoutId) {
+      stack.children.pop();
+    }
+  },
+  popToRoot(layoutId: string) {
+    const stack = getters.getLayoutById(layoutId).getStack();
+    while (stack.children.length > 1) {
+      stack.children.pop();
+    }
+  },
+  setStackRoot(layoutId: string, layout: any) {
+    const currentLayout = getters.getLayoutById(layoutId);
+    if (currentLayout) {
+      const stack = currentLayout.getStack();
+      stack.children = layout.map((child: any) => LayoutNodeFactory.create(child, stack));
+    }
+  },
+  showOverlay(overlay: ParentNode) {
+    state.overlays.push(overlay);
+  },
+  dismissOverlay(overlayId: string) {
+    _.remove(state.overlays, (overlay: ParentNode) => overlay.nodeId === overlayId);
+  },
+  dismissAllOverlays() {
+    state.overlays = [];
+  },
+  showModal(modal: ParentNode) {
+    state.modals.push(modal);
+  },
+  dismissModal(componentId: string) {
+    const modal = getters.getModalById(componentId);
+    if (modal) {
+      const child = modal.getVisibleLayout();
+      const topParent = child.getTopParent();
+      _.remove(state.modals, (modal: ParentNode) => modal.nodeId === topParent.nodeId);
+    }
+  },
+  dismissAllModals() {
+    state.modals = [];
+  },
+  selectTabIndex(layout: BottomTabsNode, index: number) {
+    getters.getLayoutById(layout.nodeId).selectedIndex = index;
+  },
+  openSideMenu(layout: SideMenuNode) {
+    if (state.sideMenu) {
+      throw new Error(
+        'A side-menu is already open; Mocked-testing of multiple side-menu scenarios is not supported yet.' +
+          ' You can submit a request in https://github.com/wix/react-native-navigation/issues/new/choose.'
+      );
+    }
+    state.sideMenu = layout;
+  },
+  closeSideMenu(_layout: SideMenuNode) {
+    state.sideMenu = undefined;
+  },
+  applyOptions(componentId: string, options: Options) {
+    const layout = getters.getLayoutById(componentId);
+    if (layout) layout.applyOptions(options);
+    else console.warn(`[RNN error] Merge options failure: cannot find layout for: ${componentId}`);
+  },
+  mergeOptions(componentId: string, options: Options) {
+    const layout = getters.getLayoutById(componentId);
+    if (layout) layout.mergeOptions(options);
+    else console.warn(`[RNN error] Merge options failure: cannot find layout for: ${componentId}`);
+  },
+});
+
+const getters = remx.getters({
+  getLayout() {
+    return state.root;
+  },
+  getVisibleLayout() {
+    let layout: ParentNode | undefined;
+    if (state.modals.length > 0) {
+      layout = _.last<ParentNode>(state.modals)!;
+    } else if (!_.isEqual(state.root, {})) {
+      layout = state.root;
+    }
+
+    // Note: While this logic should be fair for all use cases (i.e. even multiple side-menus across tabs),
+    // there is no current test case that justifies it. Nevertheless, it's required to pass the tests,
+    // because otherwise getVisibleLayout() would not be revisited whenever side-menus are opened/closed.
+    if (layout && state.sideMenu && findNode(state.sideMenu.nodeId, layout!)) {
+      layout = state.sideMenu.parentNode;
+    }
+
+    return layout?.getVisibleLayout();
+  },
+  isVisibleLayout(layout: ParentNode) {
+    const nodeId = layout.nodeId;
+    const visibleLayout = getters.getVisibleLayout();
+    return visibleLayout?.nodeId === nodeId;
+  },
+  getModals() {
+    return state.modals;
+  },
+  getOverlays() {
+    return state.overlays;
+  },
+  getLayoutById(layoutId: string) {
+    if (getters.getModalById(layoutId)) return findNode(layoutId, getters.getModalById(layoutId));
+
+    return findNode(layoutId, state.root);
+  },
+  getModalById(layoutId: string) {
+    return _.find(state.modals, (layout) => findNode(layoutId, layout));
+  },
+  getLayoutChildren(layoutId: string) {
+    return getters.getLayoutById(layoutId).children;
+  },
+  getStack(layoutId: string) {
+    return (
+      findStack(layoutId, state.root) ||
+      _.find(state.modals, (layout) => findStack(layoutId, layout))
+    );
+  },
+});
+
+function findNode(layoutId: string, layout: ParentNode): any | ParentNode {
+  if (layoutId === layout.nodeId) {
+    return layout;
+  } else if (layout.children) {
+    for (let i = 0; i < layout.children.length; i += 1) {
+      const child = layout.children[i];
+      const result = findNode(layoutId, child);
+
+      if (result !== false) {
+        return result;
+      }
+    }
+  }
+
+  return false;
+}
+
+function findStack(layoutId: string, layout: ParentNode): any | ParentNode {
+  if (layout.type === 'Stack' && _.find(layout.children, (child) => child.nodeId === layoutId)) {
+    return layout;
+  } else if (layout.children) {
+    for (let i = 0; i < layout.children.length; i += 1) {
+      const child = layout.children[i];
+      const result = findStack(layoutId, child);
+
+      if (result !== false) {
+        return result;
+      }
+    }
+  }
+
+  return false;
+}
+
+let defaultOptions: Options;
+
+export const LayoutStore = {
+  ...getters,
+  ...setters,
+  setDefaultOptions(options: Options) {
+    defaultOptions = options;
+  },
+  getDefaultOptions() {
+    return defaultOptions;
+  },
+};

package/src/Mock/actions/layoutActions.ts

@@ -0,0 +1,21 @@
+import ParentNode from '../Layouts/ParentNode';
+import { SideMenuNode } from '../Layouts/SideMenu';
+import { LayoutStore } from '../Stores/LayoutStore';
+
+export const switchTabByIndex = (bottomTabs: ParentNode | undefined, index: number) => {
+  if (bottomTabs) {
+    LayoutStore.getVisibleLayout().componentDidDisappear();
+    LayoutStore.selectTabIndex(bottomTabs, index);
+    LayoutStore.getVisibleLayout().componentDidAppear();
+  }
+};
+
+export const openSideMenu = (sideMenu: SideMenuNode) => {
+  LayoutStore.openSideMenu(sideMenu);
+  LayoutStore.getVisibleLayout().componentDidAppear();
+};
+
+export const closeSideMenu = (layout: SideMenuNode) => {
+  LayoutStore.getVisibleLayout().componentDidDisappear();
+  LayoutStore.closeSideMenu(layout);
+};

package/src/Mock/connect.ts

@@ -0,0 +1,6 @@
+import { connect as remxConnect } from 'remx';
+
+export function connect<T>(component: T): T {
+  // @ts-ignore
+  return remxConnect()(component);
+}

package/src/Mock/constants.ts

@@ -0,0 +1,2 @@
+export const VISIBLE_SCREEN_TEST_ID = 'VISIBLE_SCREEN_TEST_ID';
+export const VISIBLE_OVERLAY_TEST_ID = 'VISIBLE_OVERLAY_TEST_ID';

package/src/Mock/index.ts

@@ -0,0 +1,16 @@
+export const ApplicationMock = require('./Application').Application;
+
+export * from './constants';
+
+export function mockNativeComponents() {
+  const { NativeCommandsSender } = require('./mocks/NativeCommandsSender');
+  const { NativeEventsReceiver } = require('./mocks/NativeEventsReceiver');
+  const { AppRegistryService } = require('./mocks/AppRegistryService');
+  const { Navigation } = require('react-native-navigation');
+
+  Navigation.mockNativeComponents(
+    new NativeCommandsSender(),
+    new NativeEventsReceiver(),
+    new AppRegistryService()
+  );
+}

package/src/Mock/mocks/AppRegistryService.ts

@@ -0,0 +1,5 @@
+import { ComponentProvider } from 'react-native';
+
+export class AppRegistryService {
+  registerComponent(_appKey: string, _getComponentFunc: ComponentProvider) {}
+}