How to test slider component with testID?

[daniloab]

• [ ] I have searched existing issues
• [x] I am using the latest multi slider version

I want to test the slider component on my application, but I need to have a testID. Could we implement a one? Where is the component that we can set a testID?

[ptomasroos]

Sure, I don't mind. Feel free to send a pull request and we can add this.

[sytolk]

Maybe we can have something like datetime picker solution: https://stackoverflow.com/a/60746762/2285631

[mannoeu]

Although the documentation says that it accepts the testId attribute, apparently it was not attached in the current version 2.2.2. You can create a patch-package for this in your local repo

diff --git a/node_modules/@ptomasroos/react-native-multi-slider/DefaultMarker.js b/node_modules/@ptomasroos/react-native-multi-slider/DefaultMarker.js
index aeb46ff..e0dcefb 100644
--- a/node_modules/@ptomasroos/react-native-multi-slider/DefaultMarker.js
+++ b/node_modules/@ptomasroos/react-native-multi-slider/DefaultMarker.js
@@ -4,7 +4,7 @@ import { View, StyleSheet, Platform, TouchableHighlight } from 'react-native';
 class DefaultMarker extends React.Component {
   render() {
     return (
-      <TouchableHighlight>
+      <TouchableHighlight accessible accessibilityLabel='marker' testID={this.props.testID}>
         <View
           style={
             this.props.enabled
diff --git a/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js b/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js
index f3114aa..893c17f 100644
--- a/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js
+++ b/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js
@@ -45,6 +45,11 @@ export default class MultiSlider extends React.Component {
     snapped: false,
     vertical: false,
     minMarkerOverlapDistance: 0,
+    testID: {
+      root: '',
+      marker: '',
+      markerLeft: '',
+    },
   };

   constructor(props) {
@@ -473,6 +478,7 @@ export default class MultiSlider extends React.Component {
             >
               {isMarkersSeparated === false ? (
                 <Marker
+                  testID={this.props.testID.marker}
                   enabled={this.props.enabledOne}
                   pressed={this.state.onePressed}
                   markerStyle={this.props.markerStyle}
@@ -484,6 +490,7 @@ export default class MultiSlider extends React.Component {
                 />
               ) : (
                 <MarkerLeft
+                  testID={this.props.testID.markerLeft}
                   enabled={this.props.enabledOne}
                   pressed={this.state.onePressed}
                   markerStyle={this.props.markerStyle}
@@ -511,6 +518,7 @@ export default class MultiSlider extends React.Component {
               >
                 {isMarkersSeparated === false ? (
                   <Marker
+                    testID={this.props.testID.marker}
                     pressed={this.state.twoPressed}
                     markerStyle={this.props.markerStyle}
                     pressedMarkerStyle={this.props.pressedMarkerStyle}
@@ -522,6 +530,7 @@ export default class MultiSlider extends React.Component {
                   />
                 ) : (
                   <MarkerRight
+                    testID={this.props.testID.markerLeft}
                     pressed={this.state.twoPressed}
                     markerStyle={this.props.markerStyle}
                     pressedMarkerStyle={this.props.pressedMarkerStyle}
@@ -540,7 +549,7 @@ export default class MultiSlider extends React.Component {
     );

     return (
-      <View>
+      <View testID={this.props.testID.root}>
         {this.props.enableLabel && (
           <Label
             oneMarkerValue={this.state.valueOne}

And use

import MultiSlider from '@ptomasroos/react-native-multi-slider';

export const Component = () => {
return (
 <MultiSlider
     testID={{
        root: 'MultiSliderRoot',
        marker: 'MultiSliderMarker',
        markerLeft: 'MultiSliderMarkerLeft',
      }
 />
)
}