diff --git a/apps/src/tests/single-feature-tests/tabs/index.ts b/apps/src/tests/single-feature-tests/tabs/index.ts index 0b75a5afae..528be6c2af 100644 --- a/apps/src/tests/single-feature-tests/tabs/index.ts +++ b/apps/src/tests/single-feature-tests/tabs/index.ts @@ -12,6 +12,7 @@ import TestTabsSimpleNav from './test-tabs-simple-nav'; import TestTabsMoreNavigationController from './test-tabs-more-navigation-controller'; import TestTabsStaleStateUpdateRejection from './test-tabs-stale-update-rejection'; import TestTabsTabBarMinimizeBehavior from './test-tabs-tab-bar-minimize-behavior-ios'; +import TestTabsTabBarControllerMode from './test-tabs-tab-bar-controller-mode-ios'; const scenarios = { BottomAccessoryScenario, @@ -26,6 +27,7 @@ const scenarios = { TestTabsMoreNavigationController, TestTabsStaleStateUpdateRejection, TestTabsTabBarMinimizeBehavior, + TestTabsTabBarControllerMode, }; const TabsScenarioGroup: ScenarioGroup = { diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx new file mode 100644 index 0000000000..863789f4de --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/index.tsx @@ -0,0 +1,125 @@ +import { + TabsContainerWithHostConfigContext, + type TabRouteConfig, + useTabsHostConfig, + DEFAULT_TAB_ROUTE_OPTIONS, +} from '@apps/shared/gamma/containers/tabs'; +import React from 'react'; +import { View, Text, ScrollView, StyleSheet } from 'react-native'; +import { Scenario } from '@apps/tests/shared/helpers'; +import { SettingsPicker } from '@apps/shared'; +import {TabBarControllerMode } from 'react-native-screens'; + +const SCENARIO: Scenario = { + name: 'Tab Bar Controller Mode', + key: 'test-tabs-tab-bar-controller-mode-ios', + details: 'Test different tab bar modes.', + platforms: ['ios'], + AppComponent: App, +}; + +export default SCENARIO; + +function ConfigScreen() { + const { hostConfig, updateHostConfig } = useTabsHostConfig(); + return ( + + + + Controls whether the tab bar is displayed as a bar or + sidebar.{'\n'}Test tabSidebar on iPad — on iPhone it collapses + back to a tab bar automatically. + + + label="tabBarControllerMode" + value={hostConfig.ios?.tabBarControllerMode ?? 'automatic'} + onValueChange={value => + updateHostConfig({ ios: { tabBarControllerMode: value } }) + } + items={['automatic', 'tabBar', 'tabSidebar']} + /> + + + ); +} + +function TestScreen() { + return ( + + {Array.from({ length: 40 }, (_, i) => ( + + Row {i + 1} — scroll to test tabBarMinimizeBehavior + + ))} + + ); +}; + +const ROUTE_CONFIGS: TabRouteConfig[] = [ + { + name: 'Tab1', + Component: ConfigScreen, + options: { + ...DEFAULT_TAB_ROUTE_OPTIONS, + title: 'Tab1', + }, + }, + { + name: 'Tab2', + Component: TestScreen, + options: { + ...DEFAULT_TAB_ROUTE_OPTIONS, + title: 'Tab2', + + }, + }, +]; + +export function App() { + return ; +}; + +const styles = { + sectionHeader: { + fontSize: 13, + fontWeight: '600' as const, + textTransform: 'uppercase' as const, + color: '#888', + letterSpacing: 0.5, + marginTop: 24, + marginBottom: 4, + }, + description: { + fontSize: 13, + color: '#555', + marginBottom: 6, + marginTop: 12, + textAlign: 'center' as const, + }, + scrollItem: { + padding: 16, + borderBottomWidth: StyleSheet.hairlineWidth, + borderBottomColor: '#e0e0e0', + }, + centeredScreen: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + padding: 24, + gap: 12, + }, + screenLabel: { + fontSize: 17, + fontWeight: '600', + textAlign: 'center', + }, + screenHint: { + fontSize: 14, + color: '#555', + textAlign: 'center', + lineHeight: 20, + }, +} diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md new file mode 100644 index 0000000000..506508dcd8 --- /dev/null +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-tab-bar-controller-mode-ios/scenario.md @@ -0,0 +1,76 @@ +# Test Scenario: tabBarControllerMode + +**E2E:** Not automated - test will be added at least for iPad to check sidebar visibility. + +## Prerequisites + +- iPhone simulator or device +- iPad simulator or device (required for `tabSidebar` mode) +- iOS 18+ + +## Steps + +### iPad + +1. Launch the app and navigate to the **Tab Bar Controller Mode** screen. + +- [ ] Expected: Tab bar displayed at the top with Tab1 and Tab2. Picker defaults to `automatic` + +2. Ensure that tabBarControllerMode = `automatic` + +- [ ] Expected: Tab bar displayed according to iPadOS default behavior for current orientation + +3. Change app window size to correspond to iPhone view. + +- [ ] Expected: Tab bar displayed at the **bottom** + +4. Resize app to full screen. + Set tabBarControllerMode = `tabBar` + +- [ ] Expected: Tab bar displayed without sidebar option - even if iPadOS would default do it + +5. Change app window size to correspond to iPhone view. + +- [ ] Expected: Tab bar displayed at the **bottom** + +6. Resize app to full screen. + Set tabBarControllerMode = `tabSidebar`, test on **iPad landscape** orientation + +- [ ] Expected: Navigation displayed as a **sidebar** on the leading edge + +7. Keep tabBarControllerMode = `tabSidebar`, test on **iPad portrait** + +- [ ] Expected: Sidebar adapts or collapses — tab items still accessible + +8. Change app window size to correspond to iPhone view. + +- [ ] Expected: Tab bar displayed at the **bottom** without sidebar option. + +9. Resize app to full screen. + Cycle through `automatic` → `tabBar` → `tabSidebar` → `automatic` + +- [ ] Expected: UI transitions immediately with each change, no crash or layout freeze + +10. Switch tabs (Tab1 ↔ Tab2) while cycling through all modes. + +- [ ] Expected: Tab switching works correctly in all three modes. + +--- + +### Simple check on iPhone + +11. Launch the app and navigate to the **Tab Bar Controller Mode** screen. + +- [ ] Expected: Tab bar displayed at the bottom with Tab1 and Tab2. Picker defaults to `automatic` + +12. Set tabBarControllerMode = `automatic` + +- [ ] Expected: Tab bar displayed at the **bottom** + +13. Set tabBarControllerMode = `tabBar` + +- [ ] Expected: Tab bar displayed at the **bottom** + +14. Set tabBarControllerMode = `tabSidebar` + +- [ ] Expected: Tab bar displayed at the **bottom** \ No newline at end of file