Skip to content

Request: Add testIDs to UI layer #814

@cjpete

Description

@cjpete

I've used this patch to be able to interact with some of the UI elements with test drivers - it would be great if this was more widely supported in the library in general.

react-native-theoplayer+10.2.2.patch

diff --git a/node_modules/react-native-theoplayer/lib/commonjs/internal/THEOplayerView.js b/node_modules/react-native-theoplayer/lib/commonjs/internal/THEOplayerView.js
index 9324780..3ac51ea 100644
--- a/node_modules/react-native-theoplayer/lib/commonjs/internal/THEOplayerView.js
+++ b/node_modules/react-native-theoplayer/lib/commonjs/internal/THEOplayerView.js
@@ -272,6 +272,7 @@ class THEOplayerView extends _react.PureComponent {
       config,
       style,
       posterStyle,
+      testID,
       children
     } = this.props;
     const {
@@ -279,6 +280,7 @@ class THEOplayerView extends _react.PureComponent {
       poster
     } = this.state;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: testID,
       style: [_THEOplayerView.default.base, style, this.styleOverride()],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(THEOplayerRCTView, {
         ref: this._root,
diff --git a/node_modules/react-native-theoplayer/lib/module/internal/THEOplayerView.js b/node_modules/react-native-theoplayer/lib/module/internal/THEOplayerView.js
index 26b2046..a3b6c81 100644
--- a/node_modules/react-native-theoplayer/lib/module/internal/THEOplayerView.js
+++ b/node_modules/react-native-theoplayer/lib/module/internal/THEOplayerView.js
@@ -266,6 +266,7 @@ export class THEOplayerView extends PureComponent {
       config,
       style,
       posterStyle,
+      testID,
       children
     } = this.props;
     const {
@@ -273,6 +274,7 @@ export class THEOplayerView extends PureComponent {
       poster
     } = this.state;
     return /*#__PURE__*/_jsxs(View, {
+      testID: testID,
       style: [styles.base, style, this.styleOverride()],
       children: [/*#__PURE__*/_jsx(THEOplayerRCTView, {
         ref: this._root,
diff --git a/node_modules/react-native-theoplayer/lib/typescript/api/THEOplayerView.d.ts b/node_modules/react-native-theoplayer/lib/typescript/api/THEOplayerView.d.ts
index 3c58b33..73fd060 100644
--- a/node_modules/react-native-theoplayer/lib/typescript/api/THEOplayerView.d.ts
+++ b/node_modules/react-native-theoplayer/lib/typescript/api/THEOplayerView.d.ts
@@ -27,5 +27,11 @@ export interface THEOplayerViewProps {
      * Callback for when the internal THEOplayer will be destroyed.
      */
     onPlayerDestroy?: (player: THEOplayer) => void;
+    /**
+     * The testID applied to the outer player view. Maps to
+     * accessibilityIdentifier on iOS and resource-id on Android,
+     * enabling identification from UI-automation tools.
+     */
+    testID?: string;
 }
 //# sourceMappingURL=THEOplayerView.d.ts.map
\ No newline at end of file
diff --git a/node_modules/react-native-theoplayer/src/api/THEOplayerView.ts b/node_modules/react-native-theoplayer/src/api/THEOplayerView.ts
index f91ce35..a91c9a4 100644
--- a/node_modules/react-native-theoplayer/src/api/THEOplayerView.ts
+++ b/node_modules/react-native-theoplayer/src/api/THEOplayerView.ts
@@ -32,4 +32,11 @@ export interface THEOplayerViewProps {
    * Callback for when the internal THEOplayer will be destroyed.
    */
   onPlayerDestroy?: (player: THEOplayer) => void;
+
+  /**
+   * The testID applied to the outer player view. Maps to
+   * accessibilityIdentifier on iOS and resource-id on Android,
+   * enabling identification from UI-automation tools.
+   */
+  testID?: string;
 }
diff --git a/node_modules/react-native-theoplayer/src/internal/THEOplayerView.tsx b/node_modules/react-native-theoplayer/src/internal/THEOplayerView.tsx
index 258b32e..56539c2 100644
--- a/node_modules/react-native-theoplayer/src/internal/THEOplayerView.tsx
+++ b/node_modules/react-native-theoplayer/src/internal/THEOplayerView.tsx
@@ -426,11 +426,11 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   }
 
   public render(): React.JSX.Element {
-    const { config, style, posterStyle, children } = this.props;
+    const { config, style, posterStyle, testID, children } = this.props;
     const { posterActive, poster } = this.state;
 
     return (
-      <View style={[styles.base, style, this.styleOverride()]}>
+      <View testID={testID} style={[styles.base, style, this.styleOverride()]}>
         <THEOplayerRCTView
           ref={this._root}
           style={StyleSheet.absoluteFill}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions