chore(test): E2E test-tabs-more-navigation-controller covering part of scenario for iPhone

FabricExample/e2e/single-feature-tests/tabs/test-tabs-more-navigation-controller.e2e.ts

@@ -0,0 +1,100 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS, selectSingleFeatureTestsScreen } from '../../e2e-utils';
+
+describeIfiOS('Tab Bar More Navigation Controller', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+    await selectSingleFeatureTestsScreen(
+      'Tabs',
+      'test-tabs-more-navigation-controller',
+    );
+    await expect(element(by.label('1. onTabSelected: "First"'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "First"')).tap();
+  });
+
+  it('screen should be displayed with 4 tabs and More tab visible', async () => {
+    await expect(
+      element(by.id('test-tabs-more-navigation-controller-view')),
+    ).toBeVisible();
+    await expect(element(by.type('UITabBar'))).toBeVisible();
+    await expect(element(by.id('First'))).toBeVisible();
+    await expect(element(by.id('Second'))).toBeVisible();
+    await expect(element(by.id('Third'))).toBeVisible();
+    await expect(element(by.id('Fourth'))).toBeVisible();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+    await expect(element(by.label('More'))).toExist();
+  });
+
+  it('navigation using tab bar should work correctly', async () => {
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).toBeVisible();
+    await element(by.label('1. onMoreTabSelected')).tap();
+    await expect(element(by.label('Fifth'))).toBeVisible();
+    await expect(element(by.label('Sixth'))).toBeVisible();
+
+    await element(by.label('Fifth')).tap();
+    await expect(element(by.id('Fifth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fifth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.label('Sixth'))).not.toBeVisible();
+
+    await element(by.id('Third')).tap();
+    await expect(element(by.id('Third-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Third"')).tap();
+
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.id('Fifth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fifth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).toBeVisible();
+    await expect(element(by.label('Fifth'))).toBeVisible();
+    await expect(element(by.label('Sixth'))).toBeVisible();
+    await element(by.label('1. onMoreTabSelected')).tap();
+
+    await element(by.label('Sixth')).tap();
+    await expect(element(by.id('Sixth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Sixth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+  });
+
+  it('navigation using programmatic buttons should work correctly', async () => {
+    await element(by.label('Select Fourth')).tap();
+    await expect(element(by.id('Fourth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fourth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+
+    await element(by.label('Select Fifth')).tap();
+    await expect(element(by.id('Fifth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fifth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+
+    await element(by.label('Select First')).tap();
+    await expect(element(by.id('First-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "First"')).tap();
+
+    await element(by.label('Select Sixth')).tap();
+    await expect(element(by.id('Sixth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Sixth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+  });
+
+  it('repeated More tab selection', async () => {
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).toBeVisible();
+    await element(by.label('1. onMoreTabSelected')).tap();
+    await expect(element(by.label('Fifth'))).toBeVisible();
+    await expect(element(by.label('Sixth'))).toBeVisible();
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).not.toBeVisible();
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).not.toBeVisible();
+  });
+});

FabricExample/e2e/single-feature-tests/tabs/test-tabs-tab-bar-more-navigation-controller.e2e.ts

@@ -0,0 +1,100 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS, selectSingleFeatureTestsScreen } from '../../e2e-utils';
+
+describeIfiOS('Tab Bar More Navigation Controller', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+    await selectSingleFeatureTestsScreen(
+      'Tabs',
+      'test-tabs-more-navigation-controller',
+    );
+    await expect(element(by.label('1. onTabSelected: "First"'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "First"')).tap();
+  });
+
+  it('screen should be displayed with 4 tabs and More tab visible', async () => {
+    await expect(
+      element(by.id('test-tabs-more-navigation-controller-view')),
+    ).toBeVisible();
+    await expect(element(by.type('UITabBar'))).toBeVisible();
+    await expect(element(by.id('First'))).toBeVisible();
+    await expect(element(by.id('Second'))).toBeVisible();
+    await expect(element(by.id('Third'))).toBeVisible();
+    await expect(element(by.id('Fourth'))).toBeVisible();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+    await expect(element(by.label('More'))).toExist();
+  });
+
+  it('navigation using tab bar should work correctly', async () => {
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).toBeVisible();
+    await element(by.label('1. onMoreTabSelected')).tap();
+    await expect(element(by.label('Fifth'))).toBeVisible();
+    await expect(element(by.label('Sixth'))).toBeVisible();
+
+    await element(by.label('Fifth')).tap();
+    await expect(element(by.id('Fifth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fifth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.label('Sixth'))).not.toBeVisible();
+
+    await element(by.id('Third')).tap();
+    await expect(element(by.id('Third-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Third"')).tap();
+
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.id('Fifth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fifth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).toBeVisible();
+    await expect(element(by.label('Fifth'))).toBeVisible();
+    await expect(element(by.label('Sixth'))).toBeVisible();
+    await element(by.label('1. onMoreTabSelected')).tap();
+
+    await element(by.label('Sixth')).tap();
+    await expect(element(by.id('Sixth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Sixth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+  });
+
+  it('navigation using programmatic buttons should work correctly', async () => {
+    await element(by.label('Select Fourth')).tap();
+    await expect(element(by.id('Fourth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fourth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+
+    await element(by.label('Select Fifth')).tap();
+    await expect(element(by.id('Fifth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Fifth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+
+    await element(by.label('Select First')).tap();
+    await expect(element(by.id('First-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "First"')).tap();
+
+    await element(by.label('Select Sixth')).tap();
+    await expect(element(by.id('Sixth-content-view'))).toBeVisible();
+    await element(by.label('1. onTabSelected: "Sixth"')).tap();
+    await expect(element(by.id('Fifth'))).not.toBeVisible();
+    await expect(element(by.id('Sixth'))).not.toBeVisible();
+  });
+
+  it('repeated More tab selection', async () => {
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).toBeVisible();
+    await element(by.label('1. onMoreTabSelected')).tap();
+    await expect(element(by.label('Fifth'))).toBeVisible();
+    await expect(element(by.label('Sixth'))).toBeVisible();
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).not.toBeVisible();
+    await element(by.label('More')).atIndex(0).tap();
+    await expect(element(by.label('1. onMoreTabSelected'))).not.toBeVisible();
+  });
+});

apps/src/tests/single-feature-tests/tabs/test-tabs-more-navigation-controller.tsx → apps/src/tests/single-feature-tests/tabs/test-tabs-more-navigation-controller/index.tsx

@@ -11,7 +11,7 @@ import {
 import { CenteredLayoutView } from '@apps/shared/CenteredLayoutView';
 import { ToastProvider, useToast } from '@apps/shared/';
 import { Colors } from '@apps/shared/styling';
-import type { MoreTabSelectedEvent } from 'react-native-screens';
+import type { MoreTabSelectedEvent, TabSelectedEvent } from 'react-native-screens';
 
 const scenarioDescription: ScenarioDescription = {
   name: 'More navigation controller',
@@ -24,7 +24,7 @@ function ContentView() {
   const { routeKey } = useTabsNavigationContext();
   return (
     <CenteredLayoutView>
-      <Text style={{ fontWeight: 'bold', textAlign: 'center' }}>
+      <Text style={{ fontWeight: 'bold', textAlign: 'center' }} testID={`${routeKey}-content-view`}>
         {routeKey}
       </Text>
       <TabsNavigationButtons />
@@ -36,7 +36,8 @@ function TabsNavigationButtons() {
   const nav = useTabsNavigationContext();
 
   return (
-    <View>
+    <View
+      testID='test-tabs-more-navigation-controller-view'>
       <Button title="Select First" onPress={() => nav.selectTab('First')} />
       <Button title="Select Second" onPress={() => nav.selectTab('Second')} />
       <Button title="Select Third" onPress={() => nav.selectTab('Third')} />
@@ -51,32 +52,32 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [
   {
     name: 'First',
     Component: ContentView,
-    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'First' },
+    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'First', tabBarItemTestID: 'First' },
   },
   {
     name: 'Second',
     Component: ContentView,
-    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Second' },
+    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Second', tabBarItemTestID: 'Second' },
   },
   {
     name: 'Third',
     Component: ContentView,
-    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Third' },
+    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Third', tabBarItemTestID: 'Third' },
   },
   {
     name: 'Fourth',
     Component: ContentView,
-    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Fourth' },
+    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Fourth', tabBarItemTestID: 'Fourth' },
   },
   {
     name: 'Fifth',
     Component: ContentView,
-    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Fifth' },
+    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Fifth', tabBarItemTestID: 'Fifth' },
   },
   {
     name: 'Sixth',
     Component: ContentView,
-    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Sixth' },
+    options: { ...DEFAULT_TAB_ROUTE_OPTIONS, title: 'Sixth', tabBarItemTestID: 'Sixth' },
   },
 ];
 
@@ -104,9 +105,15 @@ function AppContents() {
             2,
           )}`;
           console.warn(message);
-          toast.push({ message, backgroundColor: Colors.GreenLight60 });
+          toast.push({ message: 'onMoreTabSelected', backgroundColor: Colors.GreenLight60 });
         },
       }}
+      onTabSelected={(event: NativeSyntheticEvent<TabSelectedEvent>) => {
+        toast.push({
+          backgroundColor: Colors.BlueLight100,
+          message: `onTabSelected: ${JSON.stringify(event.nativeEvent.selectedScreenKey)}`,
+        });
+      }}
     />
   );
 }