chore(test): e2e and scenario for tabs specialEffects scrollToTop

FabricExample/e2e/e2e-utils.ts

@@ -1,8 +1,12 @@
 import { device, expect, element, by } from 'detox';
+import { AndroidElementAttributes, IosElementAttributes } from 'detox/detox';
 
 export const describeIfiOS =
   device.getPlatform() === 'ios' ? describe : describe.skip;
 
+export const describeIfAndroid =
+  device.getPlatform() === 'android' ? describe : describe.skip;
+
 async function scrollUntilVisible(id: string, scrollViewId: string) {
   await waitFor(element(by.id(id)))
     .toBeVisible()
@@ -62,3 +66,27 @@ export async function selectSingleFeatureTestsScreen(
   );
   await element(by.id(`${screenKey}`)).tap();
 }
+type ElementAttributes = IosElementAttributes | AndroidElementAttributes;
+
+export async function getElementAttributes(
+  testLabel: string,
+): Promise<ElementAttributes> {
+  const attrs = await element(by.label(testLabel)).getAttributes();
+
+  if ('elements' in attrs) {
+    throw new Error(
+      `Multiple elements (${attrs.elements.length}) found for label: "${testLabel}". `
+    );
+  }
+
+  return attrs as ElementAttributes;
+}
+
+export async function forceTapByLabeliOS(testLabel: string) {
+  const elementAttributes = await getElementAttributes(testLabel);
+  const { x, y, width, height } = elementAttributes.frame;
+  await device.tap({
+    x: x + width / 2,
+    y: y + height / 2,
+  });
+}

FabricExample/e2e/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top.e2e.ts

@@ -0,0 +1,87 @@
+import { device, expect, element, by } from 'detox';
+import {
+  selectSingleFeatureTestsScreen,
+  forceTapByLabeliOS,
+} from '../../e2e-utils';
+
+async function forceSelectTabByLabel(label: string) {
+  if (device.getPlatform() === 'ios') {
+    await forceTapByLabeliOS(label);
+  } else {
+    await element(by.label(label)).tap();
+  }
+}
+
+describe('Tabs specialEffects — scrollToTop', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+    await selectSingleFeatureTestsScreen(
+      'Tabs',
+      'test-tabs-special-effects-scroll-to-top',
+    );
+  });
+
+  it('should display tab bar and Tab1 scrollable list on load', async () => {
+    await expect(element(by.id('tab1-scrollview'))).toBeVisible();
+    await expect(element(by.id('tab1-item-1'))).toBeVisible();
+    if (device.getPlatform() === 'ios') {
+      await expect(element(by.type('UITabBar'))).toBeVisible();
+    } else {
+      await expect(element(by.id('tab1-tab-item'))).toBeVisible();
+      await expect(element(by.id('tab2-tab-item'))).toBeVisible();
+      await expect(element(by.id('tab3-tab-item'))).toBeVisible();
+    }
+  });
+
+  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 expect(element(by.id('tab1-item-1'))).not.toBeVisible();
+
+    await forceSelectTabByLabel('tab1-tab-item-label');
+
+    await waitFor(element(by.id('tab1-item-1')))
+      .toBeVisible()
+      .withTimeout(3000);
+  });
+
+  it('Tab2 (scrollToTop: false) — re-tapping active tab preserves scroll position', async () => {
+    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 expect(element(by.id('tab2-item-1'))).not.toBeVisible();
+
+    await forceSelectTabByLabel('tab2-tab-item-label');
+
+    await expect(element(by.id('tab2-item-1'))).not.toBeVisible();
+  });
+
+  it('Tab3 (no specialEffects) — re-tapping active tab scrolls list back to top', async () => {
+    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 expect(element(by.id('tab3-item-1'))).not.toBeVisible();
+
+    await forceSelectTabByLabel('tab3-tab-item-label');
+
+    await waitFor(element(by.id('tab3-item-1')))
+      .toBeVisible()
+      .withTimeout(3000);
+  });
+
+  it('Tab1 (scrollToTop: true) — switching away and back preserves scroll position', async () => {
+    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 expect(element(by.id('tab1-item-1'))).not.toBeVisible();
+
+    await forceSelectTabByLabel('tab3-tab-item-label');
+    await expect(element(by.id('tab3-item-1'))).toBeVisible();
+
+    await forceSelectTabByLabel('tab1-tab-item-label');
+
+    await expect(element(by.id('tab1-item-1'))).not.toBeVisible();
+  });
+});

apps/src/tests/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top/index.tsx

@@ -9,19 +9,23 @@ import {
 } from '@apps/shared/gamma/containers/tabs';
 
 const scenarioDescription: ScenarioDescription = {
-  name: 'Tabs scrollToTop special effect',
+  name: 'Tabs special effect scroll to top',
   key: 'test-tabs-special-effects-scroll-to-top',
   details:
-    'Test settings of scrollToTop specialEffect.',
+    'Test settings of specialEffect scrollToTop.',
   platforms: ['ios', 'android'],
 };
 
-export function ScrollScreen() {
+interface ScrollScreenProps {
+  tabName: string;
+}
+
+export function ScrollScreen({ tabName }: ScrollScreenProps) {
   return (
-    <ScrollView>
+    <ScrollView testID={`${tabName}-scrollview`}>
       <Text style={styles.hint}>Scroll Screen — scroll down or re-tap the tab.</Text>
       {Array.from({ length: 50 }, (_, i) => (
-        <Text key={i} style={styles.item}>
+        <Text key={i} testID={`${tabName}-item-${i + 1}`} style={styles.item}>
           Item {i + 1}
         </Text>
       ))}
@@ -32,10 +36,12 @@ export function ScrollScreen() {
 const TAB_CONFIGS: TabRouteConfig[] = [
   {
     name: 'Tab1',
-    Component: ScrollScreen,
+    Component: () => <ScrollScreen tabName="tab1" />,
     options: {
       ...DEFAULT_TAB_ROUTE_OPTIONS,
       title: 'Tab1',
+      tabBarItemTestID: 'tab1-tab-item',
+      tabBarItemAccessibilityLabel: 'tab1-tab-item-label',
       specialEffects: {
         repeatedTabSelection: {
           scrollToTop: true,
@@ -45,10 +51,12 @@ const TAB_CONFIGS: TabRouteConfig[] = [
   },
   {
     name: 'Tab2',
-    Component: ScrollScreen,
+    Component: () => <ScrollScreen tabName="tab2" />,
     options: {
       ...DEFAULT_TAB_ROUTE_OPTIONS,
       title: 'Tab2',
+      tabBarItemTestID: 'tab2-tab-item',
+      tabBarItemAccessibilityLabel: 'tab2-tab-item-label',
       specialEffects: {
         repeatedTabSelection: {
           scrollToTop: false
@@ -58,10 +66,12 @@ const TAB_CONFIGS: TabRouteConfig[] = [
   },
   {
     name: 'Tab3',
-    Component: ScrollScreen,
+    Component: () => <ScrollScreen tabName="tab3" />,
     options: {
       ...DEFAULT_TAB_ROUTE_OPTIONS,
       title: 'Tab3',
+      tabBarItemTestID: 'tab3-tab-item',
+      tabBarItemAccessibilityLabel: 'tab3-tab-item-label',
     },
   },
 ];

apps/src/tests/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top/scenario.md

@@ -11,7 +11,7 @@ that there is no scroll-to-top behavior when it is disabled or absent.
 
 ## E2E test
 
-Other: ongoing research.
+Yes: Covers all manual scenario steps.
 
 ## Prerequisites
 
@@ -28,7 +28,7 @@ list of 50 items.
 
 ### scrollToTop: true
 
-1. Launch the app and navigate to the screen **Tabs specialEffects**.
+1. Launch the app and navigate to the screen **Tabs special effect scroll to top**.
 
 - [ ] Expected: Three tabs (Tab1, Tab2, Tab3) are visible in the tab bar.
 Tab1 is active and displays a scrollable list of items.