Skip to content

Not possible to pass TestID to the tabs #873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dwightdhooge opened this issue Jul 11, 2024 · 4 comments · Fixed by #891
Closed

Not possible to pass TestID to the tabs #873

dwightdhooge opened this issue Jul 11, 2024 · 4 comments · Fixed by #891

Comments

@dwightdhooge
Copy link

dwightdhooge commented Jul 11, 2024

Possible to add testID to the tabs ? so we can identify It easiliy in automation

<TouchableOpacity style={[styles.container, tabStyle]} disabled={!enabled} onPress={onSelect} accessibilityHint={accessibilityHint} testID={testID}
...

@markymc
Copy link

markymc commented Sep 17, 2024

@dwightdhooge I made a patch-package patch for this:

Create patches/@react-native-segmented-control+segmented-control+2.5.2.patch

Paste:

diff --git a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
index 7a29d1c..087e7f0 100644
--- a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
+++ b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
@@ -26,7 +26,8 @@ type Props = $ReadOnly<{|
   fontStyle?: FontStyle,
   activeFontStyle?: FontStyle,
   tabStyle?: ViewStyle,
-  appearance?: 'dark' | 'light' | null,
+  appearance ?: 'dark' | 'light' | null,
+  testID?: string,
   accessibilityHint?: string,
 |}>;
 
@@ -46,6 +47,7 @@ export const SegmentedControlTab = ({
   activeFontStyle = {},
   appearance,
   tabStyle,
+  testID,
   accessibilityHint,
 }: Props): React.Node => {
   const colorSchemeHook = useColorScheme();
@@ -93,7 +95,7 @@ export const SegmentedControlTab = ({
       accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       accessibilityState={{selected: selected, disabled: !enabled}}>
-      <View style={styles.default}>
+      <View testID={value} style={styles.default}>
         {typeof value === 'number' || typeof value === 'object' ? (
           <Image source={value} style={styles.segmentImage} />
         ) : isBase64(value) ? (

@Naturalclar would be amazing to have this in the lib so a patch isn't needed.

@Naturalclar
Copy link
Member

@markymc thanks for the ping! will make a PR and publish new version today

@markymc
Copy link

markymc commented Sep 17, 2024

@Naturalclar thanks so much for the quick response!

(Also I see you're just down the road in Chiba! I'm in Shibuya 😊)

@markymc
Copy link

markymc commented Sep 17, 2024

@Naturalclar I just tried the new version and for some reason now my tests (Cypress on Web) are failing. However, if I apply the following change, they start passing again:

diff --git a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js
index 99bdc2e..7779de8 100644
--- a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js
+++ b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js
@@ -112,6 +112,7 @@ const SegmentedControl = ({
           values.map((value, index) => {
             return (
               <SegmentedControlTab
+                testID={value}
                 enabled={enabled}
                 selected={selectedIndex === index}
                 accessibilityHint={`${

Actually, looking at my initial patch, I don't really understand how my tests ever passed! There's no testID passed to the SegmentedControlTab from the SegmentedControl, so of course a testID doesn't get set!

I'm in the middle of a lot of dependency upgrades so I'm not sure what changed that causes those tests to not pass now (or conversely why they were passing when they shouldn't have), but if I find out I'll let you know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants