Merge remote-tracking branch 'origin/7.x.x' into support-drawer-menu-open-mode

Author: d4vidi

.eslintrc.js

@@ -5,6 +5,5 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   env: {
     jest: true,
-    'jest/globals': true,
   },
 };

.gitignore

@@ -244,4 +244,3 @@ Mock.js
 Mock.d.ts
 
 Gemfile.lock
-/playground/ios/.xcode.env.local

babel.config.js

@@ -1,7 +1,7 @@
 module.exports = function (api) {
   api && api.cache(false);
   return {
-    presets: ['module:@react-native/babel-preset'],
+    presets: ['module:metro-react-native-babel-preset'],
     plugins: [
       '@babel/plugin-proposal-export-namespace-from',
       '@babel/plugin-proposal-export-default-from',

e2e/SideMenu.test.js

@@ -3,7 +3,7 @@ import TestIDs from '../playground/src/testIDs';
 
 const { elementByLabel, elementById } = Utils;
 
-describe.e2e('SideMenu', () => {
+describe('SideMenu', () => {
   beforeEach(async () => {
     await device.launchApp({ newInstance: true });
     await elementById(TestIDs.SIDE_MENU_BTN).tap();
@@ -38,13 +38,13 @@ describe.e2e('SideMenu', () => {
     await expect(elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN)).toBeNotVisible();
   });
 
-  it('should rotate', async () => {
+  it.e2e('should rotate', async () => {
     await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
     await device.setOrientation('landscape');
     await expect(elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN)).toBeVisible();
   });
 
-  it(':ios: rotation should update drawer height', async () => {
+  it.e2e(':ios: rotation should update drawer height', async () => {
     await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
     await expect(elementByLabel('left drawer height: 869')).toBeVisible();
     await device.setOrientation('landscape');
@@ -53,23 +53,24 @@ describe.e2e('SideMenu', () => {
     await expect(elementByLabel('left drawer height: 869')).toBeVisible();
   });
 
-  it('should set left drawer width', async () => {
+  it.e2e('should set left drawer width', async () => {
     await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+    await expect(elementById(TestIDs.SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT)).toBeVisible();
     await expect(elementByLabel('left drawer width: 250')).toBeVisible();
   });
 
-  it('should change left drawer width', async () => {
+  it.e2e('should change left drawer width', async () => {
     await elementById(TestIDs.CHANGE_LEFT_SIDE_MENU_WIDTH_BTN).tap();
     await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
     await expect(elementByLabel('left drawer width: 50')).toBeVisible();
   });
 
-  it('should set right drawer width', async () => {
+  it.e2e('should set right drawer width', async () => {
     await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
     await expect(elementByLabel('right drawer width: 250')).toBeVisible();
   });
 
-  it('should change right drawer width', async () => {
+  it.e2e('should change right drawer width', async () => {
     await elementById(TestIDs.CHANGE_RIGHT_SIDE_MENU_WIDTH_BTN).tap();
     await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
     await expect(elementByLabel('right drawer width: 50')).toBeVisible();

e2e/StaticLifecycleEvents.test.js

@@ -1,7 +1,7 @@
 import Utils from './Utils';
 import TestIDs from '../playground/src/testIDs';
 
-const { elementByLabel, elementById, sleep } = Utils;
+const { elementByLabel, elementById } = Utils;
 
 describe('static lifecycle events', () => {
   beforeEach(async () => {
@@ -93,9 +93,6 @@ describe('static lifecycle events', () => {
     await elementById(TestIDs.SET_ROOT_BTN).tap();
     await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
     await elementById(TestIDs.SET_ROOT_BTN).tap();
-    // This sleep is needed in order to synchronize the test rendered with state changes. We can remove it after moving
-    // our mock to work with act(()=>{}) from react-test-renderer
-    await sleep(10);
     await expect(elementByLabel('setRoot complete - previous root is unmounted')).toBeVisible();
   });
 

e2e/assets/overlay_banner_padding.png

@@ -25,7 +25,8 @@ export const ComponentScreen = connect(
     }
 
     isVisible(): boolean {
-      return LayoutStore.isVisibleLayout(this.props.layoutNode);
+      const isVisible = LayoutStore.isVisibleLayout(this.props.layoutNode);
+      return isVisible;
     }
 
     renderTabBar() {

lib/Mock/Components/ComponentScreen.tsx

@@ -4,6 +4,7 @@ import { BottomTabs } from './BottomTabs';
 import { ComponentProps } from '../ComponentProps';
 import { ComponentScreen } from './ComponentScreen';
 import { Stack } from './Stack';
+import { SideMenuRoot, SideMenuCenter, SideMenuLeft, SideMenuRight } from './SideMenu';
 
 export const LayoutComponent = class extends Component<ComponentProps> {
   render() {
@@ -14,6 +15,14 @@ export const LayoutComponent = class extends Component<ComponentProps> {
         return <Stack layoutNode={this.props.layoutNode} />;
       case 'Component':
         return <ComponentScreen layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRoot':
+        return <SideMenuRoot layoutNode={this.props.layoutNode} />;
+      case 'SideMenuLeft':
+        return <SideMenuLeft layoutNode={this.props.layoutNode} />;
+      case 'SideMenuCenter':
+        return <SideMenuCenter layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRight':
+        return <SideMenuRight layoutNode={this.props.layoutNode} />;
     }
 
     return <View />;

lib/Mock/Components/LayoutComponent.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { connect } from '../connect';
+import { ComponentProps } from '../ComponentProps';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+
+export const SideMenuRoot = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = this.props.layoutNode.children;
+      return children.map((child: ParentNode) => {
+        return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+      });
+    }
+  }
+);
+
+class SideMenuComponent extends Component<ComponentProps> {
+  render() {
+    const children = this.props.layoutNode.children;
+    const component = children[0];
+    return <LayoutComponent key={component.nodeId} layoutNode={component} />;
+  }
+}
+export const SideMenuLeft = connect(SideMenuComponent);
+export const SideMenuCenter = connect(SideMenuComponent);
+export const SideMenuRight = connect(SideMenuComponent);

lib/Mock/Components/SideMenu.tsx

@@ -10,8 +10,10 @@ export default class BottomTabsNode extends ParentNode {
     this.selectedIndex = layout.data?.options?.bottomTabs?.currentTabIndex || 0;
   }
 
-  mergeOptions(options: Options) {
-    super.mergeOptions(options);
+  mergeOptions(_options: Options) {
+    super.mergeOptions(_options);
+
+    const { options } = this.data;
     if (options.bottomTabs?.currentTabIndex) {
       this.selectedIndex = options.bottomTabs?.currentTabIndex;
       switchTabByIndex(this, this.selectedIndex);