Timeline - Add testIDs (#3706)

* Add testID prop to Line, Point, and Timeline components for improved testing

* small type revert

* Remove testID from timelineContainer

* make Line and Point testID prop internal prop

* Timeline driver + test

* Add Point rendering tests and enhance TimelineDriver with getPoint method

* Timeline driver refactor

* Refactor Timeline and Point drivers for improved test structure and style retrieval

* Fix testID prop usage in Line and Point components

* Add TimelineDriver export to testkit index

* Refactor Timeline tests to simplify driver retrieval

* Top/Bottom line moved from sainty, no icon no label test

* Update Timeline sainty tests to include checks for top and bottom lines

* Remove redundant TopLine test

* Add isVisible method to LineDriver and update tests to verify visibility

Author: adids1221

src/components/timeline/Line.tsx

@@ -10,10 +10,11 @@ const ENTRY_POINT_HEIGHT = 2;
 type LinePropsInternal = LineProps & {
   top?: boolean;
   style?: ViewStyle;
+  testID?: string;
 };
 
 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 +26,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}.entryPoint`}
+        />
+      );
     }
   };
 
   const renderLine = () => {
     if (type === LineTypes.DASHED) {
-      return <Dash vertical color={color} containerStyle={dashedLineStyle}/>;
+      return <Dash vertical color={color} containerStyle={dashedLineStyle} testID={testID}/>;
     }
-    return <View style={solidLineStyle}/>;
+    return <View style={solidLineStyle} testID={testID}/>;
   };
 
   return (

src/components/timeline/Point.tsx

@@ -16,10 +16,11 @@ const ICON_SIZE = 16;
 
 type PointPropsInternal = PointProps & {
   onLayout?: (event: LayoutChangeEvent) => void;
+  testID?: string;
 };
 
 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 +46,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}>
       {renderPointContent()}
     </View>
   );

src/components/timeline/__tests__/driver.index.spec.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {TimelineDriver} from '../timeline.driver';
+import {TimelineProps} from '../types';
+import Timeline from '../index';
+import Text from '../../text';
+import Assets from '../../../assets';
+
+const testID = 'test-timeline';
+const labelContent = 2;
+const defaultIcon = Assets.internal.icons.check;
+
+const getDriver = (props?: TimelineProps) => {
+  const renderTree = render(<Timeline testID={testID} {...props}>
+    <Text>Timeline</Text>
+  </Timeline>);
+  return TimelineDriver({renderTree, testID});
+};
+
+describe('Timeline', () => {
+  describe('sanity', () => {
+    it('should render Timeline', () => {
+      const timelineDriver = getDriver();
+      expect(timelineDriver.exists()).toBeTruthy();
+      expect(timelineDriver.getPoint().exists()).toBeTruthy();
+      expect(timelineDriver.getTopLine().exists()).toBeTruthy();
+      expect(timelineDriver.getTopLine().isVisible()).toBeFalsy();
+      expect(timelineDriver.getBottomLine().exists()).toBeFalsy();
+    });
+  });
+
+  describe('Point', () => {
+    describe('with Icon', () => {
+      it('should override icon color when passing iconProps.tintColor', () => {
+        const props = {point: {icon: defaultIcon, iconProps: {tintColor: '#A2387E'}}};
+        const timelineDriver = getDriver(props);
+        const contentStyle = timelineDriver.getPoint().getContentStyle();
+        expect(contentStyle.tintColor).toEqual('#A2387E');
+        expect(contentStyle.color).toBeUndefined();
+      });
+    });
+
+    describe('with Label', () => {
+      it('should override label color when passing labelColor', () => {
+        const props = {point: {label: labelContent, labelColor: '#A2387E'}};
+        const timelineDriver = getDriver(props);
+        const contentStyle = timelineDriver.getPoint().getContentStyle();
+        expect(contentStyle.color).toEqual('#A2387E');
+        expect(contentStyle.tintColor).toBeUndefined();
+      });
+    });
+
+    it('should render Icon when icon and label passed', () => {
+      const props = {point: {icon: defaultIcon, iconProps: {tintColor: '#A2387E'}, label: labelContent}};
+      const timelineDriver = getDriver(props);
+      const contentStyle = timelineDriver.getPoint().getContentStyle();
+      expect(contentStyle.tintColor).toEqual('#A2387E');
+      expect(contentStyle.color).toBeUndefined();
+    });
+
+    it('tintColor and color should be undefined when icon and label are not passed', () => {
+      const timelineDriver = getDriver();
+      const contentStyle = timelineDriver.getPoint().getContentStyle();
+      expect(contentStyle.tintColor).toBeUndefined();
+      expect(contentStyle.color).toBeUndefined();
+    });
+  });
+
+  describe('TopLine', () => {
+    it('should override top line color and width', () => {
+      const props = {topLine: {color: '#00A87E', width: 3}};
+      const timelineDriver = getDriver(props);
+      const topLine = timelineDriver.getTopLine();
+      expect(topLine.exists()).toBeTruthy();
+      const topLineStyle = topLine.getStyle();
+      expect(topLineStyle.backgroundColor).toEqual('#00A87E');
+      expect(topLineStyle.width).toEqual(3);
+    });
+
+    it('should render line with entryPoint', () => {
+      const props = {topLine: {entry: true}};
+      const timelineDriver = getDriver(props);
+      const topLine = timelineDriver.getTopLine();
+      expect(topLine.isEntryPointExists()).toBeTruthy();
+    });
+  });
+
+  describe('BottomLine', () => {
+    it('should render BottomLine', () => {
+      const props = {bottomLine: {}};
+      const timelineDriver = getDriver(props);
+      const bottomLine = timelineDriver.getBottomLine();
+      expect(bottomLine.exists()).toBeTruthy();
+    });
+
+    it('should override bottom line color and width', () => {
+      const props = {bottomLine: {color: '#FFF4D3', width: 5}};
+      const timelineDriver = getDriver(props);
+      const bottomLine = timelineDriver.getBottomLine();
+      expect(bottomLine.exists()).toBeTruthy();
+      const bottomLineStyle = bottomLine.getStyle();
+      expect(bottomLineStyle.backgroundColor).toEqual('#FFF4D3');
+      expect(bottomLineStyle.width).toEqual(5);
+    });
+  });
+});

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 row style={containerStyle} testID={testID}>
       <View style={styles.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/line.driver.ts

@@ -0,0 +1,39 @@
+import {StyleSheet} from 'react-native';
+import {ComponentProps} from '../../testkit/new/Component.driver';
+import {ViewDriver} from '../view/View.driver.new';
+
+export const LineDriver = (props: ComponentProps) => {
+  const lineDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  });
+
+  const entryPointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.entryPoint`
+  });
+
+  const getLine = () => {
+    const exists = (): boolean => {
+      return lineDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(lineDriver.getElement().props.style);
+    };
+    const isVisible = (): boolean => {
+      const height = getStyle().height;
+      return exists() && (height ?? 0) > 0;
+    };
+    const isEntryPointExists = (): boolean => {
+      return entryPointDriver.exists();
+    };
+    const getEntryPointStyle = () => {
+      return entryPointDriver.getStyle();
+    };
+    return {exists, getStyle, isVisible, isEntryPointExists, getEntryPointStyle};
+  };
+
+  return {
+    getLine
+  };
+};

src/components/timeline/point.driver.ts

@@ -0,0 +1,55 @@
+import {StyleSheet} from 'react-native';
+import {ComponentProps} from '../../testkit/new/Component.driver';
+import {TextDriver} from '../text/Text.driver.new';
+import {ImageDriver} from '../image/Image.driver.new';
+import {ViewDriver} from '../view/View.driver.new';
+
+export const PointDriver = (props: ComponentProps) => {
+  const pointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  });
+
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.icon`
+  });
+
+  const getLabel = () => {
+    const exists = (): boolean => {
+      return labelDriver.exists();
+    };
+    return {...labelDriver, exists};
+  };
+
+  const getIcon = () => {
+    const exists = (): boolean => {
+      return iconDriver.exists();
+    };
+    return {...iconDriver, exists};
+  };
+
+  const getPoint = () => {
+    const exists = (): boolean => {
+      return pointDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(pointDriver.getElement().props.style);
+    };
+    const getContentStyle = () => {
+      return getIcon().exists()
+        ? StyleSheet.flatten(getIcon().getElement().props.style)
+        : getLabel().exists() && StyleSheet.flatten(getLabel().getElement().props.style);
+    };
+    return {exists, getStyle, getContentStyle};
+  };
+
+  return {
+    getPoint
+  };
+};

src/components/timeline/timeline.driver.ts

@@ -0,0 +1,40 @@
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {LineDriver} from './line.driver';
+import {PointDriver} from './point.driver';
+
+export const TimelineDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver(props);
+
+  const pointDriver = PointDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.point`
+  });
+
+  const topLineDriver = LineDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.topLine`
+  });
+  const bottomLineDriver = LineDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.bottomLine`
+  });
+
+  const getPoint = () => {
+    return {...pointDriver.getPoint()};
+  };
+
+  const getTopLine = () => {
+    return {...topLineDriver.getLine()};
+  };
+
+  const getBottomLine = () => {
+    return {...bottomLineDriver.getLine()};
+  };
+
+  return {
+    ...driver,
+    getPoint,
+    getTopLine,
+    getBottomLine
+  };
+};

src/components/timeline/types.ts

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

src/testkit/index.ts

@@ -21,4 +21,5 @@ export {PickerDriver} from '../components/picker/Picker.driver.new';
 export {ExpandableOverlayDriver} from '../incubator/expandableOverlay/ExpandableOverlay.driver';
 export {ToastDriver} from '../incubator/toast/Toast.driver.new';
 export {DateTimePickerDriver} from '../components/dateTimePicker/DateTimePicker.driver';
+export {TimelineDriver} from '../components/timeline/timeline.driver';
 export {ChipDriver} from '../components/chip/chip.driver';