diff --git a/FabricExample/e2e/e2e-utils.ts b/FabricExample/e2e/e2e-utils.ts index 65d38c04e9..72c7b931ab 100644 --- a/FabricExample/e2e/e2e-utils.ts +++ b/FabricExample/e2e/e2e-utils.ts @@ -7,7 +7,7 @@ export const describeIfiOS = export const describeIfAndroid = device.getPlatform() === 'android' ? describe : describe.skip; -async function scrollUntilVisible(id: string, scrollViewId: string) { +export async function scrollUntilVisible(id: string, scrollViewId: string) { await waitFor(element(by.id(id))) .toBeVisible() .whileElement(by.id(scrollViewId)) @@ -72,18 +72,18 @@ export async function getElementAttributes( testLabel: string, ): Promise { const attrs = await element(by.label(testLabel)).getAttributes(); - + if ('elements' in attrs) { throw new Error( - `Multiple elements (${attrs.elements.length}) found for label: "${testLabel}". ` + `Multiple elements (${attrs.elements.length}) found for label: "${testLabel}". `, ); } - + return attrs as ElementAttributes; } /** - * Performs a coordinate-based tap on iOS to interact with an element that may be + * Performs a coordinate-based tap on iOS to interact with an element that may be * obstructed by other UI layers, bypassing Detox's default visibility checks. */ export async function forceTapByLabeliOS(testLabel: string) { diff --git a/FabricExample/e2e/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top.e2e.ts b/FabricExample/e2e/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top.e2e.ts index ce268e7e00..01fba5f2fb 100644 --- a/FabricExample/e2e/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top.e2e.ts +++ b/FabricExample/e2e/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top.e2e.ts @@ -1,11 +1,11 @@ import { device, expect, element, by } from 'detox'; import { + scrollUntilVisible, selectSingleFeatureTestsScreen, forceTapByLabeliOS, } from '../../e2e-utils'; - /** - * Selects a tab bar item. On iOS, this uses a forced coordinate tap to + * Selects a tab bar item. On iOS, this uses a forced coordinate tap to * ensure the tab is selected even if it is obstructed by the iOS 26 Liquid Glass lens. */ async function forceSelectTabByLabel(label: string) { @@ -38,7 +38,7 @@ describe('Tabs specialEffects — scrollToTop', () => { }); it('Tab1 (scrollToTop: true) — re-tapping active tab scrolls list back to top', async () => { - await element(by.id('tab1-scrollview')).scroll(300, 'down', NaN, 0.85); + await scrollUntilVisible('tab1-item-22', 'tab1-scrollview'); await expect(element(by.id('tab1-item-1'))).not.toBeVisible(); await forceSelectTabByLabel('tab1-tab-item-label'); @@ -52,7 +52,7 @@ describe('Tabs specialEffects — scrollToTop', () => { await element(by.id('tab2-tab-item')).tap(); await expect(element(by.id('tab2-item-1'))).toBeVisible(); - await element(by.id('tab2-scrollview')).scroll(300, 'down', NaN, 0.85); + await scrollUntilVisible('tab2-item-22', 'tab2-scrollview'); await expect(element(by.id('tab2-item-1'))).not.toBeVisible(); await forceSelectTabByLabel('tab2-tab-item-label'); @@ -64,7 +64,7 @@ describe('Tabs specialEffects — scrollToTop', () => { await element(by.id('tab3-tab-item')).tap(); await expect(element(by.id('tab3-item-1'))).toBeVisible(); - await element(by.id('tab3-scrollview')).scroll(300, 'down', NaN, 0.85); + await scrollUntilVisible('tab3-item-22', 'tab3-scrollview'); await expect(element(by.id('tab3-item-1'))).not.toBeVisible(); await forceSelectTabByLabel('tab3-tab-item-label'); @@ -78,7 +78,7 @@ describe('Tabs specialEffects — scrollToTop', () => { await forceSelectTabByLabel('tab1-tab-item-label'); await expect(element(by.id('tab1-item-1'))).toBeVisible(); - await element(by.id('tab1-scrollview')).scroll(300, 'down', NaN, 0.85); + await scrollUntilVisible('tab1-item-22', 'tab1-scrollview'); await expect(element(by.id('tab1-item-1'))).not.toBeVisible(); await forceSelectTabByLabel('tab3-tab-item-label'); diff --git a/apps/src/tests/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top/index.tsx b/apps/src/tests/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top/index.tsx index 99b01e4cd1..11cf651d35 100644 --- a/apps/src/tests/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top/index.tsx +++ b/apps/src/tests/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ScrollView, StyleSheet, Text } from 'react-native'; +import { Platform, ScrollView, StyleSheet, Text } from 'react-native'; import type { ScenarioDescription } from '@apps/tests/shared/helpers'; import { createScenario } from '@apps/tests/shared/helpers'; import { @@ -7,6 +7,7 @@ import { type TabRouteConfig, DEFAULT_TAB_ROUTE_OPTIONS, } from '@apps/shared/gamma/containers/tabs'; +import { SafeAreaView } from 'react-native-screens/experimental'; const scenarioDescription: ScenarioDescription = { name: 'Tabs special effect scroll to top', @@ -22,14 +23,21 @@ interface ScrollScreenProps { export function ScrollScreen({ tabName }: ScrollScreenProps) { return ( - - Scroll Screen — scroll down or re-tap the tab. - {Array.from({ length: 50 }, (_, i) => ( - - Item {i + 1} - - ))} - + + + Scroll Screen — scroll down or re-tap the tab. + {Array.from({ length: 50 }, (_, i) => ( + + Item {i + 1} + + ))} + + ); }