Timeline - Add testIDs

src/components/timeline/Line.tsx

@@ -13,7 +13,7 @@ type LinePropsInternal = LineProps & {
 };
 
 const Line = React.memo((props: LinePropsInternal) => {
-  const {type, color = 'transparent', entry, top, style, width = LINE_WIDTH} = props;
+  const {type, color = 'transparent', entry, top, style, width = LINE_WIDTH, testID} = props;
 
   const solidLineStyle = useMemo(() => {
     return [style, styles.line, {width, backgroundColor: color}];
@@ -25,15 +25,20 @@ const Line = React.memo((props: LinePropsInternal) => {
 
   const renderStartPoint = () => {
     if (entry) {
-      return <View style={[styles.entryPoint, {backgroundColor: color}]}/>;
+      return (
+        <View
+          style={[styles.entryPoint, {backgroundColor: color}]}
+          testID={`${testID}.${top ? 'startPoint' : 'endPoint'}`}
+        />
+      );
     }
   };
 
   const renderLine = () => {
     if (type === LineTypes.DASHED) {
-      return <Dash vertical color={color} containerStyle={dashedLineStyle}/>;
+      return <Dash vertical color={color} containerStyle={dashedLineStyle} testID={`${testID}.dashedLine`}/>;
     }
-    return <View style={solidLineStyle}/>;
+    return <View style={solidLineStyle} testID={`${testID}.solidLine`}/>;
   };
 
   return (

src/components/timeline/Point.tsx

@@ -19,7 +19,7 @@ type PointPropsInternal = PointProps & {
 };
 
 const Point = (props: PointPropsInternal) => {
-  const {icon, iconProps, removeIconBackground, label, type, color, onLayout} = props;
+  const {icon, iconProps, removeIconBackground, label, type, color, onLayout, testID} = props;
 
   const pointStyle = useMemo(() => {
     const hasOutline = type === PointTypes.OUTLINE;
@@ -45,18 +45,20 @@ const Point = (props: PointPropsInternal) => {
     const tintColor = removeIconBackground ? Colors.$iconDefault : Colors.$iconDefaultLight;
     const iconSize = removeIconBackground ? undefined : ICON_SIZE;
     if (icon) {
-      return <Icon tintColor={tintColor} {...iconProps} size={iconSize} source={icon}/>;
+      return (
+        <Icon testID={`${testID}.icon`} tintColor={tintColor} {...iconProps} size={iconSize} source={icon}/>
+      );
     } else if (label) {
       return (
-        <Text recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
+        <Text testID={`${testID}.label`} recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
           {label}
         </Text>
       );
     }
   };
 
   return (
-    <View center style={pointStyle} onLayout={onLayout}>
+    <View center style={pointStyle} onLayout={onLayout} testID={`${testID}.container`}>
       {renderPointContent()}
     </View>
   );

src/components/timeline/index.tsx

@@ -20,7 +20,7 @@ const ENTRY_POINT_HEIGHT = 2;
 
 const Timeline = (props: TimelineProps) => {
   const themeProps = useThemeProps(props, 'Timeline');
-  const {topLine, bottomLine, point, children} = themeProps;
+  const {topLine, bottomLine, point, children, testID} = themeProps;
   const [anchorMeasurements, setAnchorMeasurements] = useState<Layout | undefined>();
   const [contentContainerMeasurements, setContentContainerMeasurements] = useState<Layout | undefined>();
   const [pointMeasurements, setPointMeasurements] = useState<Layout | undefined>();
@@ -96,6 +96,7 @@ const Timeline = (props: TimelineProps) => {
   const renderTopLine = () => {
     return (
       <Line
+        testID={`${testID}.topLine`}
         {...topLine}
         top
         style={topLineStyle}
@@ -108,6 +109,7 @@ const Timeline = (props: TimelineProps) => {
     if (bottomLine) {
       return (
         <Line
+          testID={`${testID}.bottomLine`}
           {...bottomLine}
           style={styles.bottomLine}
           color={bottomLine?.color || getStateColor(bottomLine?.state)}
@@ -117,10 +119,15 @@ const Timeline = (props: TimelineProps) => {
   };
 
   return (
-    <View row style={containerStyle}>
-      <View style={styles.timelineContainer}>
+    <View row style={containerStyle} testID={testID}>
+      <View style={styles.timelineContainer} testID={`${testID}.timelineContainer`}>
         {renderTopLine()}
-        <Point {...point} onLayout={onPointLayout} color={point?.color || getStateColor(point?.state)}/>
+        <Point
+          {...point}
+          onLayout={onPointLayout}
+          color={point?.color || getStateColor(point?.state)}
+          testID={`${testID}.point`}
+        />
         {renderBottomLine()}
       </View>
       <View style={styles.contentContainer} onLayout={onContentContainerLayout} ref={contentContainerRef}>
@@ -136,7 +143,6 @@ Timeline.states = StateTypes;
 Timeline.lineTypes = LineTypes;
 Timeline.pointTypes = PointTypes;
 
-
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: Spacings.s5

src/components/timeline/types.ts

@@ -27,7 +27,8 @@ export type LineProps = {
   /** to mark as entry point */
   entry?: boolean;
   width?: number;
-}
+  testID?: string;
+};
 
 export type PointProps = {
   state?: StateTypes | `${StateTypes}`;
@@ -40,7 +41,8 @@ export type PointProps = {
   labelColor?: string;
   /** to align point to this view's center */
   anchorRef?: React.MutableRefObject<undefined>;
-}
+  testID?: string;
+};
 
 export type Layout = {
   x: number;