From b7c08b7ea856e2b4f81cb30aa16b38aa725bf246 Mon Sep 17 00:00:00 2001 From: Yogev Ben David Date: Sun, 31 Jul 2022 20:18:04 +0300 Subject: [PATCH] [Mock] Fix bottomTabs lifecycle events (#7572) --- e2e/BottomTabs.test.js | 26 +++++++++++++++---- e2e/StaticLifecycleEvents.test.js | 1 - lib/Mock/Components/ComponentScreen.tsx | 3 ++- lib/Mock/Layouts/BottomTabsNode.ts | 6 ++--- lib/Mock/actions/layoutActions.ts | 10 +++++++ .../src/screens/SecondBottomTabScreen.tsx | 19 ++++++++++++++ .../src/screens/StaticLifecycleOverlay.tsx | 14 +++++----- 7 files changed, 63 insertions(+), 16 deletions(-) create mode 100644 lib/Mock/actions/layoutActions.ts diff --git a/e2e/BottomTabs.test.js b/e2e/BottomTabs.test.js index 6135759801f..36d9321fb56 100644 --- a/e2e/BottomTabs.test.js +++ b/e2e/BottomTabs.test.js @@ -122,20 +122,36 @@ describe('BottomTabs', () => { await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap(); await elementById(TestIDs.FIRST_TAB_BAR_BUTTON).tap(); - Android.pressBack(); + Android.pressBack(); await expect(elementByLabel('Second Tab')).toBeVisible(); - Android.pressBack(); + Android.pressBack(); await expect(elementByLabel('First Tab')).toBeVisible(); - Android.pressBack(); + Android.pressBack(); await expect(elementByLabel('Second Tab')).toBeVisible(); - Android.pressBack(); + Android.pressBack(); await expect(elementByLabel('First Tab')).toBeVisible(); - Android.pressBack(); + Android.pressBack(); await expect(elementByLabel('First Tab')).toBeNotVisible(); await expect(elementByLabel('Second Tab')).toBeNotVisible(); }); + + it('Switch tab should send lifecycle events', async () => { + await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap(); + await elementById(TestIDs.STATIC_EVENTS_OVERLAY_BTN).tap(); + await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap(); + await elementById(TestIDs.FIRST_TAB_BAR_BUTTON).tap(); + await expect( + elementByLabel('componentWillAppear | FirstBottomTabsScreen | Component') + ).toBeVisible(); + await expect( + elementByLabel('componentDidDisappear | SecondBottomTabsScreen | Component') + ).toBeVisible(); + await expect( + elementByLabel('componentDidAppear | FirstBottomTabsScreen | Component') + ).toBeVisible(); + }); }); diff --git a/e2e/StaticLifecycleEvents.test.js b/e2e/StaticLifecycleEvents.test.js index 47272700e29..87ce3becb07 100644 --- a/e2e/StaticLifecycleEvents.test.js +++ b/e2e/StaticLifecycleEvents.test.js @@ -89,7 +89,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(); - await expect(elementByLabel('setRoot complete - previous root is unmounted')).toBeVisible(); }); diff --git a/lib/Mock/Components/ComponentScreen.tsx b/lib/Mock/Components/ComponentScreen.tsx index eef2b8da38a..21b0a80168d 100644 --- a/lib/Mock/Components/ComponentScreen.tsx +++ b/lib/Mock/Components/ComponentScreen.tsx @@ -8,6 +8,7 @@ import { connect } from '../connect'; import { TopBar } from './TopBar'; import { events } from '../Stores/EventsStore'; import _ from 'lodash'; +import { switchTabByIndex } from '../actions/layoutActions'; export const ComponentScreen = connect( class extends Component { @@ -41,7 +42,7 @@ export const ComponentScreen = connect( tabIndex: i, }); if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true)) - LayoutStore.selectTabIndex(this.props.layoutNode.getBottomTabs(), i); + switchTabByIndex(this.props.layoutNode.getBottomTabs(), i); }} /> {bottomTabOptions?.badge} diff --git a/lib/Mock/Layouts/BottomTabsNode.ts b/lib/Mock/Layouts/BottomTabsNode.ts index d8fc42da967..8d304a173c0 100644 --- a/lib/Mock/Layouts/BottomTabsNode.ts +++ b/lib/Mock/Layouts/BottomTabsNode.ts @@ -1,6 +1,6 @@ import _ from 'lodash'; import { Options } from '../../src/index'; -import { LayoutStore } from '../Stores/LayoutStore'; +import { switchTabByIndex } from '../actions/layoutActions'; import ParentNode from './ParentNode'; export default class BottomTabsNode extends ParentNode { @@ -13,7 +13,7 @@ export default class BottomTabsNode extends ParentNode { super.mergeOptions(options); if (options.bottomTabs?.currentTabIndex) { this.selectedIndex = options.bottomTabs?.currentTabIndex; - LayoutStore.selectTabIndex(this, this.selectedIndex); + switchTabByIndex(this, this.selectedIndex); } if (options.bottomTabs?.currentTabId) { const index = _.findIndex( @@ -21,7 +21,7 @@ export default class BottomTabsNode extends ParentNode { (child) => child.nodeId === options?.bottomTabs?.currentTabId ); if (index !== -1) this.selectedIndex = index; - LayoutStore.selectTabIndex(this, this.selectedIndex); + switchTabByIndex(this, this.selectedIndex); } } diff --git a/lib/Mock/actions/layoutActions.ts b/lib/Mock/actions/layoutActions.ts new file mode 100644 index 00000000000..aef0261aacf --- /dev/null +++ b/lib/Mock/actions/layoutActions.ts @@ -0,0 +1,10 @@ +import ParentNode from '../Layouts/ParentNode'; +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(); + } +}; diff --git a/playground/src/screens/SecondBottomTabScreen.tsx b/playground/src/screens/SecondBottomTabScreen.tsx index 5dbe4f3bb80..d2cffb7111a 100644 --- a/playground/src/screens/SecondBottomTabScreen.tsx +++ b/playground/src/screens/SecondBottomTabScreen.tsx @@ -17,6 +17,7 @@ const { HIDE_TABS_PUSH_BTN, SECOND_TAB_BAR_BTN, SET_BADGE_BTN, + STATIC_EVENTS_OVERLAY_BTN, } = testIDs; export default class SecondBottomTabScreen extends React.Component { @@ -58,6 +59,11 @@ export default class SecondBottomTabScreen extends React.Component +