Skip to content

Commit 91e4897

Browse files
LKuchnot0maboro
LKuchno
and
t0maboro
authored
refactor(test): add scenario for overrideScrollViewContentInsetAdjustmentBehavior (iOS) (#3957)
## Description This PR adds a manual test scenario for the `overrideScrollViewContentInsetAdjustmentBehavior` prop on `TabsScreen` (iOS). The scenario screen was already present in the codebase but lacked `testID` and `tabBarItemTestID` / `tabBarItemAccessibilityLabel` attributes needed to make it addressable by automated tests, and had no accompanying `scenario.md` document. The screen has been refactored into its own directory (`test-tabs-override-scroll-view-content-inset-ios/`) to follow the convention used by other tab test scenarios, and the scenario key has been updated to match the new directory name. The `scenario.md` covers three distinct cases - `false`, `true`, and the default (prop omitted). No automated e2e test is included in this PR; the scenario is marked as ongoing research. Closes: software-mansion/react-native-screens-labs#1210 ## Changes - **Test/Tabs**: Renamed and moved `override-scroll-view-content-inset.tsx` into a new `test-tabs-override-scroll-view-content-inset-ios/` directory with an `index.tsx` entry point, aligning with the naming convention of sibling test scenarios - **Test/Tabs**: Updated the scenario `key` from `override-scroll-view-content-inset` to `test-tabs-override-scroll-view-content-inset-ios` to match the new directory name - **Test/Tabs**: Added `testID` props to each `ScrollView` (`override-inset-false-scrollview`, `override-inset-true-scrollview`, `override-inset-default-scrollview`) and `tabBarItemTestID` / `tabBarItemAccessibilityLabel` to each tab entry to make them individually addressable by future automated tests - **Test/Tabs**: Added `scenario.md` with a full step-by-step manual verification guide covering all three `overrideScrollViewContentInsetAdjustmentBehavior` states and a cross-tab comparison section - **Test/index**: Updated the tabs scenario index to import from the new module path and export under the new scenario name `TestTabsOverrideScrollViewContentInset` ## Scenario video Note: scenario was updated - now we first scroll down and in next step scroll to top. https://github.com/user-attachments/assets/bd5aef4b-72e1-4ba7-bdf5-be2f0c896c6e --------- Co-authored-by: Tomasz Boroń <[email protected]>
1 parent 7b4b6d6 commit 91e4897

3 files changed

Lines changed: 167 additions & 10 deletions

File tree

‎apps/src/tests/single-feature-tests/tabs/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { ScenarioGroup } from '@apps/tests/shared/helpers';
22

33
import BottomAccessoryScenario from './bottom-accessory-layout';
4-
import OverrideScrollViewContentInsetScenario from './override-scroll-view-content-inset';
4+
import TestTabsOverrideScrollViewContentInset from './test-tabs-override-scroll-view-content-inset-ios';
55
import TestTabsTabBarHidden from './test-tabs-tab-bar-hidden';
66
import TabsScreenOrientationScenario from './tabs-screen-orientation';
77
import TabBarAppearanceDefinedBySelectedTabScenario from './test-tabs-appearance-defined-by-selected-tab';
@@ -18,7 +18,7 @@ import TestTabsSpecialEffectsScrollToTop from './test-tabs-special-effects-scrol
1818

1919
const scenarios = {
2020
BottomAccessoryScenario,
21-
OverrideScrollViewContentInsetScenario,
21+
TestTabsOverrideScrollViewContentInset,
2222
TabBarAppearanceDefinedBySelectedTabScenario,
2323
TestTabsTabBarHidden,
2424
TabsScreenOrientationScenario,

apps/src/tests/single-feature-tests/tabs/override-scroll-view-content-inset.tsx renamed to apps/src/tests/single-feature-tests/tabs/test-tabs-override-scroll-view-content-inset-ios/index.tsx

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { createScenario } from '@apps/tests/shared/helpers';
1010

1111
const scenarioDescription: ScenarioDescription = {
1212
name: 'Override ScrollView Content Inset',
13-
key: 'override-scroll-view-content-inset',
13+
key: 'test-tabs-override-scroll-view-content-inset-ios',
1414
details:
1515
'Tests overrideScrollViewContentInsetAdjustmentBehavior with different static values per tab. ' +
1616
'False: content scrolls behind bars. True/Default: content is inset from bars.',
@@ -19,9 +19,15 @@ const scenarioDescription: ScenarioDescription = {
1919

2020
const ITEM_COUNT = 30;
2121

22-
function ScrollContent({ label }: { label: string }) {
22+
export function ScrollContent({
23+
label,
24+
testID,
25+
}: {
26+
label: string;
27+
testID: string;
28+
}) {
2329
return (
24-
<ScrollView style={styles.scrollView}>
30+
<ScrollView style={styles.scrollView} testID={testID}>
2531
<View style={styles.header}>
2632
<Text style={styles.headerText}>
2733
overrideScrollViewContentInsetAdjustmentBehavior: {label}
@@ -36,16 +42,31 @@ function ScrollContent({ label }: { label: string }) {
3642
);
3743
}
3844

39-
function FalseTab() {
40-
return <ScrollContent label="false" />;
45+
export function FalseTab() {
46+
return (
47+
<ScrollContent
48+
label="false"
49+
testID="override-inset-false-scrollview"
50+
/>
51+
);
4152
}
4253

43-
function TrueTab() {
44-
return <ScrollContent label="true" />;
54+
export function TrueTab() {
55+
return (
56+
<ScrollContent
57+
label="true"
58+
testID="override-inset-true-scrollview"
59+
/>
60+
);
4561
}
4662

4763
function DefaultTab() {
48-
return <ScrollContent label="(not set, defaults to true)" />;
64+
return (
65+
<ScrollContent
66+
label="(not set, defaults to true)"
67+
testID="override-inset-default-scrollview"
68+
/>
69+
);
4970
}
5071

5172
export function App() {
@@ -59,6 +80,7 @@ export function App() {
5980
Component: FalseTab,
6081
options: {
6182
title: 'False',
83+
tabBarItemAccessibilityLabel: 'override-inset-tab-false',
6284
ios: {
6385
overrideScrollViewContentInsetAdjustmentBehavior: false,
6486
icon: { type: 'sfSymbol', name: 'xmark.circle' },
@@ -70,6 +92,7 @@ export function App() {
7092
Component: TrueTab,
7193
options: {
7294
title: 'True',
95+
tabBarItemTestID: 'override-inset-tab-true',
7396
ios: {
7497
overrideScrollViewContentInsetAdjustmentBehavior: true,
7598
icon: { type: 'sfSymbol', name: 'checkmark.circle' },
@@ -81,6 +104,7 @@ export function App() {
81104
Component: DefaultTab,
82105
options: {
83106
title: 'Default',
107+
tabBarItemTestID: 'override-inset-tab-default',
84108
ios: { icon: { type: 'sfSymbol', name: 'circle.dashed' } },
85109
},
86110
},

‎apps/src/tests/single-feature-tests/tabs/test-tabs-override-scroll-view-content-inset-ios/scenario.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Test Scenario: overrideScrollViewContentInsetAdjustmentBehavior
2+
3+
## Details
4+
5+
**Description:** Validates the
6+
`overrideScrollViewContentInsetAdjustmentBehavior` prop on `TabsScreen`
7+
(iOS only). By default, React Native sets ScrollView's
8+
`contentInsetAdjustmentBehavior` to `never`, which prevents the scroll
9+
view from respecting navigation bar and tab bar insets. When this prop
10+
is `true` (the default), the behavior is overridden back to UIKit's
11+
`automatic`, so content is inset from the bars. When set to `false`,
12+
the content scrolls behind the bars without insets.
13+
The test verifies that the three tabs — **False**, **True**, and
14+
**Default** — each exhibit the expected inset behavior and that the
15+
**Default** tab (prop omitted) matches the **True** tab.
16+
17+
**OS test creation version:** iOS: 18.6 and 26.2
18+
19+
## E2E test
20+
21+
Other: Ongoing research.
22+
23+
## Prerequisites
24+
25+
- iOS device or simulator (iPhone)
26+
27+
## Note
28+
29+
- "Content scrolls behind bars" means list items are visible underneath
30+
the navigation bar and/or tab bar when scrolled to the top or bottom
31+
of the list.
32+
- "Content inset from bars" means the first and last list items are
33+
fully visible and never hidden behind a bar, even when the scroll
34+
view is at its extreme positions.
35+
- The navigation bar at the top and the tab bar at the bottom are both
36+
relevant reference points for inset verification.
37+
38+
## Steps
39+
40+
### Baseline
41+
42+
1. Launch the app and navigate to the
43+
**Override Scroll View Content Inset** screen.
44+
45+
- [ ] Expected: Three tabs are displayed in the tab bar: **False**,
46+
**True**, and **Default**. The **False** tab is selected and shows
47+
a scrollable list of 30 items.
48+
49+
---
50+
51+
### `false` — content scrolls behind bars
52+
53+
2. Confirm the **False** tab is active and scroll the list to the bottom.
54+
55+
- [ ] Expected: The last item in the list is partially or fully
56+
obscured behind the tab bar, confirming that no bottom inset is
57+
applied.
58+
59+
3. Scroll the list to the top.
60+
61+
- [ ] Expected: The text label
62+
`overrideScrollViewContentInsetAdjustmentBehavior: false` at
63+
the top of the scroll content is partially or fully obscured
64+
behind the navigation bar, because
65+
`overrideScrollViewContentInsetAdjustmentBehavior` is `false`
66+
and the scroll view uses
67+
`contentInsetAdjustmentBehavior: never`.
68+
69+
---
70+
71+
### `true` — content inset from bars
72+
73+
4. Tap the **True** tab.
74+
75+
- [ ] Expected: The **True** tab becomes active and shows a
76+
scrollable list of 30 items.
77+
78+
5. Scroll the list to the bottom.
79+
80+
- [ ] Expected: The last item is fully visible and is not obscured by
81+
the tab bar. The scroll view respects the bottom inset.
82+
83+
6. Scroll the list to the top.
84+
85+
- [ ] Expected: The text label
86+
`overrideScrollViewContentInsetAdjustmentBehavior: true`
87+
at the top of the scroll content is fully visible below the
88+
navigation bar and not obscured behind it. The scroll view
89+
respects the top inset
90+
(`contentInsetAdjustmentBehavior: automatic`).
91+
92+
---
93+
94+
### Default (prop omitted) — same as `true`
95+
96+
7. Tap the **Default** tab.
97+
98+
- [ ] Expected: The **Default** tab becomes active and shows a
99+
scrollable list of 30 items.
100+
101+
8. Scroll the list to the bottom.
102+
103+
- [ ] Expected: The last item is fully visible and not obscured by
104+
the tab bar — identical behavior to the **True** tab.
105+
106+
9. Scroll the list to the top.
107+
108+
- [ ] Expected: The text label
109+
`overrideScrollViewContentInsetAdjustmentBehavior: (not set, defaults to true)`
110+
at the top of the scroll content
111+
is fully visible below the navigation bar and not obscured
112+
behind it — identical behavior to the **True** tab.
113+
114+
---
115+
116+
### Cross-tab comparison
117+
118+
10. Switch between the **True** tab and the **Default** tab several
119+
times while keeping each list scrolled to the top.
120+
121+
- [ ] Expected: Both tabs show the text label
122+
`overrideScrollViewContentInsetAdjustmentBehavior:` with value `true`
123+
or `(not set, defaults to true)` at the top of the scroll content
124+
is fully visible below the navigation bar and not obscured
125+
behind it. No layout jump or
126+
visual difference between the two tabs.
127+
128+
11. Switch to the **False** tab and scroll to the top, then
129+
immediately switch to the **True** tab.
130+
131+
- [ ] Expected: The **True** tab correctly shows the text label
132+
inset from the navigation bar. No crash or blank screen occurs
133+
during the switch.

0 commit comments

Comments
 (0)