Infra/timeline driver

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}.${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

@@ -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}.container`}>
       {renderPointContent()}
     </View>
   );

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

@@ -0,0 +1,63 @@
+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 {...props}>
+    <Text>Timeline</Text>
+  </Timeline>);
+  const timelineDriver = TimelineDriver({renderTree, testID});
+  return {timelineDriver};
+};
+
+describe('Timeline', () => {
+  describe('Label', () => {
+    const timelineProps = {testID, point: {label: labelContent, icon: undefined}};
+    it('should render Label', () => {
+      const {timelineDriver} = getDriver(timelineProps);
+      expect(timelineDriver.getLabel().exists()).toBeTruthy();
+      const content = timelineDriver.getLabel().getText();
+      expect(content).toEqual(labelContent.toString());
+    });
+
+    it('should not render Label', () => {
+      timelineProps.point.icon = defaultIcon;
+      const {timelineDriver} = getDriver(timelineProps);
+      expect(timelineDriver.getLabel().exists()).toBeFalsy();
+    });
+  });
+
+  describe('Icon', () => {
+    const timelineProps = {testID, point: {icon: defaultIcon}};
+    it('should render Icon', () => {
+      const {timelineDriver} = getDriver(timelineProps);
+      expect(timelineDriver.getIcon().exists()).toBeTruthy();
+    });
+  });
+
+  describe('Lines', () => {
+    const timelineProps = {
+      testID,
+      point: {icon: defaultIcon},
+      topLine: {color: 'red'},
+      bottomLine: {color: 'blue'}
+    };
+    it('should render top and bottom lines', () => {
+      const {timelineDriver} = getDriver(timelineProps);
+      expect(timelineDriver.getTopLine().exists()).toBeTruthy();
+      expect(timelineDriver.getBottomLine().exists()).toBeTruthy();
+      const topLineColor = timelineDriver.getTopLine().getTopLineStyle().backgroundColor;
+      const bottomLineColor = timelineDriver.getBottomLine().getBottomLineStyle().backgroundColor;
+      expect(topLineColor).toEqual('red');
+      expect(bottomLineColor).toEqual('blue');
+    });
+  });
+});

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/timeline.driver.ts

@@ -0,0 +1,115 @@
+import {StyleSheet} from 'react-native';
+import {useComponentDriver, 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 TimelineDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver(props);
+
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.point.label`
+  });
+
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.point.icon`
+  });
+
+  const solidTopLineDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.topLine.solidLine`
+  });
+
+  const dashedTopLineDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.topLine.dashedLine`
+  });
+
+  const topLinePointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.topLine.startPoint`
+  });
+
+  const solidBottomLineDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.bottomLine.solidLine`
+  });
+
+  const dashedBottomLineDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.bottomLine.dashedLine`
+  });
+
+  const bottomLinePointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.bottomLine.endPoint`
+  });
+
+  const getLabel = () => {
+    const exists = (): boolean => {
+      return labelDriver.exists();
+    };
+    const getText = () => {
+      return labelDriver.getText();
+    };
+    return {exists, getText};
+  };
+
+  const getIcon = () => {
+    const exists = (): boolean => {
+      return iconDriver.exists();
+    };
+    const getIconSource = () => {
+      return iconDriver.getElement().props.source;
+    };
+    const getIconStyle = () => {
+      return StyleSheet.flatten(iconDriver.getElement().props.style);
+    };
+
+    return {exists, getIconSource, getIconStyle};
+  };
+
+  const getTopLine = () => {
+    const exists = (): boolean => {
+      return solidTopLineDriver.exists() || dashedTopLineDriver.exists();
+    };
+    const getTopLineStyle = () => {
+      if (dashedTopLineDriver.exists()) {
+        return StyleSheet.flatten(dashedTopLineDriver.getElement().props.style);
+      } else if (solidTopLineDriver.exists()) {
+        return StyleSheet.flatten(solidTopLineDriver.getElement().props.style);
+      }
+    };
+    const getTopLinePointStyle = () => {
+      return StyleSheet.flatten(topLinePointDriver.getElement().props.style);
+    };
+    return {exists, getTopLineStyle, getTopLinePointStyle};
+  };
+
+  const getBottomLine = () => {
+    const exists = (): boolean => {
+      return solidBottomLineDriver.exists() || dashedBottomLineDriver.exists();
+    };
+    const getBottomLineStyle = () => {
+      if (dashedBottomLineDriver.exists()) {
+        return StyleSheet.flatten(dashedBottomLineDriver.getElement().props.style);
+      } else if (solidBottomLineDriver.exists()) {
+        return StyleSheet.flatten(solidBottomLineDriver.getElement().props.style);
+      }
+    };
+    const getBottomLinePointStyle = () => {
+      return StyleSheet.flatten(bottomLinePointDriver.getElement().props.style);
+    };
+    return {exists, getBottomLineStyle, getBottomLinePointStyle};
+  };
+
+  return {
+    ...driver,
+    getLabel,
+    getIcon,
+    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;