chore(test): E2E test for tabBarHidden and function to select SFT screens in e2e (#3879)

## Description
This PR introduces E2E Detox automation for the
**test-tabs-tab-bar-hidden** scenario. Key highlights include the
introduction of the selectSingleFeatureTestsScreen helper for
streamlined SFT navigation and a refactor of the scrolling utility to
scrollUntilVisible, enhancing support for complex view hierarchies.

Closes:
software-mansion/react-native-screens-labs#1118

## Changes
- new **test-tabs-tab-bar-hidden e2e** test covering manual scenario
- update in **scenario.md** for this screen with information about
**automation coverage**
- new function **selectSingleFeatureTestsScreen** added to
**e2e_utils.ts** which allow to open screen from SFT category based on
scenarioGroup and screenKey values
- **scrollTo** function from **e2e_utils.ts** updated to
**scrollUntilVisible** and refactored to use two arguments id (of
checked element) and scrolledViewId - to enable using this function
inside SFT scenario groups.
- **ScenarioScreen.tsx** file updated for ScenarioSelect function - new
argument added - groupName - needed to refactored scrollTo function from
e2e_utils.ts
- **index** files were updated with
testID/tabBarItemTestID/tabBarItemAccessibilityLabel needed for detox
- small changes in existing **scenario.md** to apply suggestion from
review - Prerequisites devices OS specified

Author: LKuchno

FabricExample/e2e/e2e-utils.ts

@@ -3,15 +3,15 @@ import { device, expect, element, by } from 'detox';
 export const describeIfiOS =
   device.getPlatform() === 'ios' ? describe : describe.skip;
 
-async function scrollTo(id: string) {
+async function scrollUntilVisible(id: string, scrollViewId: string) {
   await waitFor(element(by.id(id)))
     .toBeVisible()
-    .whileElement(by.id('root-screen-examples-scrollview'))
+    .whileElement(by.id(scrollViewId))
     .scroll(600, 'down', Number.NaN, 0.85);
 }
 
 export async function selectIssueTestScreen(screenName: string) {
-  await scrollTo('root-screen-issue-tests');
+  await scrollUntilVisible('root-screen-issue-tests', 'root-screen-examples-scrollview');
   await element(by.id('root-screen-issue-tests')).tap();
 
   await waitFor(element(by.id('issue-tests-scrollview'))).toBeVisible();
@@ -30,3 +30,16 @@ export async function selectIssueTestScreen(screenName: string) {
   await expect(element(by.id(`issue-tests-${screenName}`))).toBeVisible();
   await element(by.id(`issue-tests-${screenName}`)).tap();
 }
+
+export async function selectSingleFeatureTestsScreen(scenarioGroup: string, screenKey: string) {
+  await scrollUntilVisible('root-screen-single-feature-tests', 'root-screen-examples-scrollview');
+  await element(by.id('root-screen-single-feature-tests')).tap();
+  await waitFor(element(by.id('single-feature-tests-scrollview'))).toBeVisible().withTimeout(3000);
+
+  await scrollUntilVisible(`single-feature-tests-${scenarioGroup}`, 'single-feature-tests-scrollview');
+  await element(by.id(`single-feature-tests-${scenarioGroup}`)).tap();
+  await waitFor(element(by.id(`${scenarioGroup}-scenarios-scrollview`))).toBeVisible().withTimeout(3000);
+
+  await scrollUntilVisible(`${screenKey}`, `${scenarioGroup}-scenarios-scrollview`,);
+  await element(by.id(`${screenKey}`)).tap();
+}

FabricExample/e2e/single-feature-tests/tabs/test-tabs-tab-bar-hidden.e2e.ts

@@ -0,0 +1,46 @@
+import { device, expect, element, by } from 'detox';
+import { selectSingleFeatureTestsScreen } from '../../e2e-utils';
+
+describe('Tab Bar Hidden', () => {
+    beforeAll(async () => {
+        await device.reloadReactNative();
+        await selectSingleFeatureTestsScreen('Tabs', 'test-tabs-tab-bar-hidden');
+    });
+
+    it('Tab Bar Hidden screen should be displayed', async () => {
+        await expect(element(by.id('tab-bar-hidden-switch'))).toBeVisible();
+        await expect(element(by.id('tab-bar-hidden-scrollview'))).toBeVisible();
+    });
+
+    it('Tab Bar should be visible by default after loading screen', async () => {
+        await expect(element(by.label('tabBarHidden: false'))).toExist();
+        // On iOS, we need to check for the whole tab bar visibility as view hierarchy shows individual tab bar items as exist and visible even when UITabBar is invisible. On Android, we can check for the individual tab bar item visibility as they are hidden together with the tab bar.
+        if (device.getPlatform() === 'ios') {
+            await expect(element(by.type('UITabBar'))).toBeVisible();
+        } else {
+            await expect(element(by.id('tab-bar-item-1-id'))).toBeVisible();
+        }
+    });
+
+    it('Tab Bar should be hidden after changing tabBarHidden value to true', async () => {
+        await expect(element(by.id('tab-bar-hidden-switch'))).toHaveLabel('tabBarHidden: false');
+        await element(by.id('tab-bar-hidden-switch')).tap();
+        await expect(element(by.id('tab-bar-hidden-switch'))).toHaveLabel('tabBarHidden: true');
+        if (device.getPlatform() === 'ios') {
+            await expect(element(by.type('UITabBar'))).not.toBeVisible();
+        } else {
+            await expect(element(by.id('tab-bar-item-1-id'))).not.toBeVisible();
+        }
+    });
+
+    it('Tab Bar should reappear after changing tabBarHidden value to false', async () => {
+        await expect(element(by.id('tab-bar-hidden-switch'))).toHaveLabel('tabBarHidden: true');
+        await element(by.id('tab-bar-hidden-switch')).tap();
+        await expect(element(by.id('tab-bar-hidden-switch'))).toHaveLabel('tabBarHidden: false');
+        if (device.getPlatform() === 'ios') {
+            await expect(element(by.type('UITabBar'))).toBeVisible();
+        } else {
+            await expect(element(by.id('tab-bar-item-1-id'))).toBeVisible();
+        }
+    });
+});

apps/src/tests/shared/ScenarioScreen.tsx

@@ -8,9 +8,10 @@ import {
   NavigationIndependentTree,
 } from '@react-navigation/native';
 
-function ScenarioSelect(props: { scenarios: Scenario[] }) {
+function ScenarioSelect(props: { scenarios: Scenario[]; groupName: string }) {
   return (
-    <ScrollView contentInsetAdjustmentBehavior="automatic">
+    <ScrollView contentInsetAdjustmentBehavior="automatic"
+      testID={`${props.groupName}-scenarios-scrollview`}>
       {Object.values(props.scenarios).map(({ name, key, details, platforms }) => (
         <ScenarioButton
           title={name}
@@ -42,7 +43,7 @@ export default function ScenarioSelectionScreen(props: {
               headerLargeTitleEnabled: true,
               headerTitle: props.scenarioGroup.name,
             }}>
-            {() => <ScenarioSelect scenarios={props.scenarioGroup.scenarios} />}
+            {() => <ScenarioSelect scenarios={props.scenarioGroup.scenarios} groupName={props.scenarioGroup.name} />}
           </Stack.Screen>
           {Object.values(props.scenarioGroup.scenarios).map(({ key, AppComponent }) => (
             <Stack.Screen name={key} key={key} component={AppComponent} />

apps/src/tests/single-feature-tests/index.tsx

@@ -26,13 +26,15 @@ type ParamsList = { [k: keyof typeof COMPONENT_SCENARIOS]: undefined } & {
 
 function HomeScreen() {
   return (
-    <ScrollView contentInsetAdjustmentBehavior="automatic">
+    <ScrollView contentInsetAdjustmentBehavior="automatic"
+      testID="single-feature-tests-scrollview"> 
       {Object.entries(COMPONENT_SCENARIOS).map(([key, scenarioGroup]) => (
         <ScenarioButton
           key={key}
           title={scenarioGroup.name}
           route={key}
           details={scenarioGroup.details}
+          testID={`single-feature-tests-${scenarioGroup.name}`}
         />
       ))}
     </ScrollView>

apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md

@@ -4,9 +4,7 @@
 
 ## Prerequisites
 
-- iPhone simulator or device
-- iPad simulator or device (required for `tabSidebar` mode)
-- iOS 18+
+- iOS simulator or device: iPhone and iPad (required for `tabSidebar` mode).
 
 ## Steps
 
@@ -73,4 +71,4 @@
 
 14.  Set tabBarControllerMode = `tabSidebar`
 
-- [ ] Expected: Tab bar displayed at the **bottom**
+- [ ] Expected: Tab bar displayed at the **bottom**

apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-hidden/index.tsx

@@ -22,13 +22,16 @@ function ConfigScreen() {
   const { hostConfig, updateHostConfig } = useTabsHostConfig();
 
   return (
-    <ScrollView style={{ padding: 40 }}>
-      <Text style={{ textAlign: 'center' }}>Change flag value by clicking on button.</Text>
+    <ScrollView style={{ padding: 40 }}
+      testID="tab-bar-hidden-scrollview">
+      <Text style={{ textAlign: 'center' }}>
+        Change flag value by clicking on button.</Text>
       <SettingsSwitch
         style={{ marginTop: 20, marginBottom: 15 }}
         label="tabBarHidden"
         value={hostConfig.tabBarHidden ?? false}
         onValueChange={value => updateHostConfig({ tabBarHidden: value })}
+        testID="tab-bar-hidden-switch"
       />
     </ScrollView>
   );
@@ -40,6 +43,8 @@ const ROUTE_CONFIGS: TabRouteConfig[] = [
     Component: ConfigScreen,
     options: {
       ...DEFAULT_TAB_ROUTE_OPTIONS,
+      tabBarItemTestID: 'tab-bar-item-1-id',
+      tabBarItemAccessibilityLabel: 'First Tab Item',
       title: 'Tab1',
     },
   },

apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-hidden/scenario.md

@@ -1,19 +1,22 @@
 # Test Scenario: tabBarHidden
 
-**E2E test:** No - to be automated
+**E2E test:** Yes, covers all manual scenario steps. For iOS test are covered only for iPhone, e2e is not suitable for iPad execution due to use 'UITabBar' type (on iPad new tab bar at the top is not an instance of UITabBar).
 
 ## Prerequisites
-- iOS 18+ device or simulator
+
+- iOS device or simulator
 - Android emulator
 
 ## Steps
 
 1. Launch the app and navigate to the screen Tab Bar Hidden.
 
 - [ ] Expected: Screen with one Tab in tab bar should be displayed.
+
 2. Toggle `tabBarHidden` to `true`.
 
 - [ ] Expected: Tab bar should disappear immediately.
+
 3. Toggle back to `false`.
 
 - [ ] Expected: Tab bar should reappear.

apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-layout-direction/scenario.md

@@ -4,7 +4,7 @@
 
 ## Prerequisites
 
-- iOS 18+ device or simulator
+- iOS device or simulator
 with at least one RTL language localization configured in Xcode (e.g. empty ar.lproj/InfoPlist.strings), or system language set to Arabic/Hebrew
 - Android emulator
 Android emulator with supportRtl enabled in app manifest
@@ -80,4 +80,4 @@ Note:
 
 12.  System = LTR, forceRTL=true (restart), TabsHost = ltr
 
-- [ ] Expected: Tab bar is LTR (TabsHost wins over forceRTL)
+- [ ] Expected: Tab bar is LTR (TabsHost wins over forceRTL)