ScrollView: handling testID correctly for horizontal scroll view (#48254)

Summary:
Fixes https://github.com/facebook/react-native/issues/46180

This PR fixes the `testID` not being set as a `resource-id` in the `HorizontalScrollView`.

Currently the `resource-id` is being set correctly when we use a vertical scroll view (this is done [here](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L156) for reference) but we still miss setting this when we use a horizontal one as the managers for both components are different.

## Changelog:

[ANDROID][FIXED] - Handling `testID` correctly for horizontal scroll view

Pull Request resolved: https://github.com/facebook/react-native/pull/48254

Test Plan:
Render a simple `ScrollView` component with `horizontal` set as `true` and pass a `testID` property as shown:

```tsx
function Playground() {
  return (
    <ScrollView testID="customScrollViewTestId" horizontal>
      <View
        style={{
          marginVertical: 400,
          backgroundColor: 'white',
          padding: 14,
          margin: 50,
          width: 200,
          height: 200,
        }}
      />
    </ScrollView>
  );
}
```

Open Maestro Studio and search for **customScrollViewTestId** in the search bar.

<details>
<summary>Before the fix: The `testID` is not found. (See screenshot)</summary>

![image](https://github.com/user-attachments/assets/9f1c6438-e105-468e-8bf4-4e2238824f9f)
</details>

<details>
<summary>See the same in Appium. (See screenshot)</summary>

<img width="900" alt="image" src="https://github.com/user-attachments/assets/4f1a7858-4549-45b2-bb5f-d0b3485e5d69" />

</details>

 ---

Apply this fix, and search again in Maestro Studio.

<details>
<summary>After the fix: The `testID` is now recognised and can be found in the search bar. (See screenshot)</summary>

![image](https://github.com/user-attachments/assets/371f6d1f-5a41-461b-b276-7c0e702ee1e2)
</details>

<details>
<summary>See the same in Appium. (See screenshot)</summary>

<img width="891" alt="image" src="https://github.com/user-attachments/assets/ef03310c-c1ab-4ef7-b2c5-60c3b8d84c10" />

</details>

Reviewed By: tdn120, mdvacca

Differential Revision: D67201619

Pulled By: javache

fbshipit-source-id: 016faf724a482e0eca6dedfbf94dd9ea56255757
This commit is contained in:
Mateo Guzmán
2024-12-13 12:39:31 -08:00
committed by Facebook GitHub Bot
parent ed36e896ac
commit 81c74cd35f
2 changed files with 17 additions and 0 deletions
@@ -6700,6 +6700,7 @@ public class com/facebook/react/views/scroll/ReactHorizontalScrollView : android
public fun onChildViewRemoved (Landroid/view/View;Landroid/view/View;)V
protected fun onDetachedFromWindow ()V
public fun onDraw (Landroid/graphics/Canvas;)V
public fun onInitializeAccessibilityNodeInfo (Landroid/view/accessibility/AccessibilityNodeInfo;)V
public fun onInterceptTouchEvent (Landroid/view/MotionEvent;)Z
protected fun onLayout (ZIIII)V
public fun onLayoutChange (Landroid/view/View;IIIIIIII)V
@@ -26,6 +26,7 @@ import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.accessibility.AccessibilityNodeInfo;
import android.widget.HorizontalScrollView;
import android.widget.OverScroller;
import androidx.annotation.Nullable;
@@ -33,6 +34,7 @@ import androidx.core.view.ViewCompat;
import com.facebook.common.logging.FLog;
import com.facebook.infer.annotation.Assertions;
import com.facebook.infer.annotation.Nullsafe;
import com.facebook.react.R;
import com.facebook.react.animated.NativeAnimatedModule;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.common.ReactConstants;
@@ -143,6 +145,20 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
setClipChildren(false);
}
@Override
public void onInitializeAccessibilityNodeInfo(AccessibilityNodeInfo info) {
super.onInitializeAccessibilityNodeInfo(info);
// Expose the testID prop as the resource-id name of the view. Black-box E2E/UI testing
// frameworks, which interact with the UI through the accessibility framework, do not have
// access to view tags. This allows developers/testers to avoid polluting the
// content-description with test identifiers.
final String testId = (String) this.getTag(R.id.react_test_id);
if (testId != null) {
info.setViewIdResourceName(testId);
}
}
public boolean getScrollEnabled() {
return mScrollEnabled;
}