From 637142b3cce5a3e10780e75b349b4d1e814e2f09 Mon Sep 17 00:00:00 2001
From: Matt Lisivick <matt@relaypayments.com>
Date: Fri, 23 Dec 2022 12:02:46 -0500
Subject: [PATCH] Add testIDs for e2e testing

---
 src/index.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index 39abb17a..b61aab81 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -72,6 +72,10 @@ interface SegmentedControlProps {
    * Badge Text Styles
    */
   badgeTextStyle?: TextStyle;
+  /**
+   * Base Test ID of component to be used for testing
+   */
+  testIDPrefix?: string
 }
 
 const defaultShadowStyle = {
@@ -95,6 +99,8 @@ const DEFAULT_SPRING_CONFIG = {
   restDisplacementThreshold: 0.001,
 };
 
+const DEFAULT_TEST_PREFIX = 'segmented-control';
+
 const SegmentedControl: React.FC<SegmentedControlProps> = ({
   segments,
   currentIndex,
@@ -110,6 +116,7 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
   activeBadgeStyle,
   inactiveBadgeStyle,
   badgeTextStyle,
+  testIDPrefix = DEFAULT_TEST_PREFIX,
 }: SegmentedControlProps) => {
   const width = widthPercentageToDP('100%') - containerMargin * 2;
   const translateValue = width / segments.length;
@@ -179,9 +186,11 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
 
   return (
     <Animated.View
+      testID={`${testIDPrefix}-container`}
       style={[styles.defaultSegmentedControlWrapper, segmentedControlWrapper]}
     >
       <Animated.View
+        testID={`${testIDPrefix}-tile`}
         style={[
           styles.movingSegmentStyle,
           defaultShadowStyle,
@@ -196,12 +205,14 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
       {segments.map((segment, index) => {
         return (
           <Pressable
+            testID={`${testIDPrefix}-segment-${index}`}
             onPress={() => memoizedTabPressCallback(index)}
             key={index}
             style={[styles.touchableContainer, pressableWrapper]}
           >
             <View style={styles.textWrapper}>
               <Text
+                testID={`${testIDPrefix}-segment-${index}-text`}
                 style={[
                   currentIndex === index
                     ? finalisedActiveTextStyle
@@ -212,6 +223,7 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
               </Text>
               {badgeValues[index] && (
                 <View
+                  testID={`${testIDPrefix}-segment-${index}-badge`}
                   style={[
                     styles.defaultBadgeContainerStyle,
                     currentIndex === index