Merge remote-tracking branch 'origin' into release

Author: nitzanyiz

src/components/WheelPicker/WheelPicker.driver.tsx

@@ -0,0 +1,40 @@
+import {FlatListProps} from 'react-native';
+import {WheelPickerProps, WheelPickerItemProps, ITEM_HEIGHT} from './index';
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {useScrollableDriver} from '../../testkit/new/useScrollable.driver';
+import {TextDriver} from '../../components/text/Text.driver.new';
+
+export const WheelPickerDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver<WheelPickerProps>(props);
+
+  const listDriver = useScrollableDriver<FlatListProps<WheelPickerItemProps>>(useComponentDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.list`
+  }));
+
+  const itemsLength = listDriver.getProps().data?.length ?? 0;
+
+  const moveToItem = (index: number, itemHeight: number = ITEM_HEIGHT, numberOfRows: number = itemsLength) => {
+    listDriver.triggerEvent('onMomentumScrollEnd', {
+      contentOffset: {x: 0, y: itemHeight * index},
+      contentSize: {height: numberOfRows * itemHeight, width: 400},
+      layoutMeasurement: {height: 100, width: 400}
+    });
+  };
+
+  const getListHeight = () => {
+    //@ts-expect-error
+    return listDriver.getProps().height;
+  };
+
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+
+  const getLabel = () => {
+    return labelDriver.getText();
+  };
+
+  return {...driver, ...listDriver, getListHeight, moveToItem, getLabel};
+};

src/components/WheelPicker/WheelPickerItem.driver.tsx

@@ -0,0 +1,25 @@
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+// import {usePressableDriver} from '../../testkit';
+import {TextDriver} from '../../components/text/Text.driver.new';
+// import {WheelPickerItemProps} from './index';
+
+
+export const WheelPickerItemDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver(props);
+  // const driver = usePressableDriver<WheelPickerItemProps>(useComponentDriver(props));
+
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.text`
+  });
+
+  const getLabel = () => {
+    return labelDriver.getText();
+  };
+
+  const getLabelStyle = () => {
+    return labelDriver.getStyle(); // NOTE: when there's active/inactive colors the color will be animated sharedValue instead of string
+  };  
+
+  return {...driver, getLabel, getLabelStyle};
+};

src/components/WheelPicker/__tests__/index.spec.js

@@ -0,0 +1,120 @@
+import _ from 'lodash';
+import React from 'react';
+import {render /* , act, waitFor */} from '@testing-library/react-native';
+import {Colors} from '../../../style';
+import WheelPicker from '../index';
+import {WheelPickerDriver} from '../WheelPicker.driver';
+import {WheelPickerItemDriver} from '../WheelPickerItem.driver';
+
+const ITEM_HEIGHT = 50;
+const NUM_OF_ROWS = 10;
+const testID = 'wheel';
+const onChange = jest.fn();
+
+const TestCase = props => {
+  return (
+    <WheelPicker
+      testID={testID}
+      items={_.times(60, i => i).map(item => ({label: `item #${item}`, value: item, testID: `${item}`}))}
+      initialValue={0}
+      onChange={onChange}
+      numberOfVisibleRows={NUM_OF_ROWS}
+      itemHeight={ITEM_HEIGHT}
+      activeTextColor={Colors.red30}
+      inactiveTextColor={Colors.blue30}
+      {...props}
+    />
+  );
+};
+
+describe('WheelPicker', () => {
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('FlatList', () => {
+    it('should present $NUM_OF_ROWS rows', () => {
+      const renderTree = render(<TestCase/>);
+      const driver = WheelPickerDriver({renderTree, testID});
+      expect(driver.getListHeight()).toBe(NUM_OF_ROWS * ITEM_HEIGHT);
+    });
+
+    it('should call onChange after scrolling ends with default itemHeight and numberOfRows', () => {
+      const props = {itemHeight: undefined, numberOfVisibleRows: undefined};
+      const renderTree = render(<TestCase {...props}/>);
+      const driver = WheelPickerDriver({renderTree, testID});
+
+      driver.moveToItem(4);
+      expect(onChange).toHaveBeenCalledWith(4, 4);
+
+      driver.moveToItem(7);
+      expect(onChange).toHaveBeenCalledWith(7, 7);
+    });
+
+    it('should call onChange after scrolling ends', () => {
+      const renderTree = render(<TestCase/>);
+      const driver = WheelPickerDriver({renderTree, testID});
+
+      driver.moveToItem(4, ITEM_HEIGHT);
+      expect(onChange).toHaveBeenCalledWith(4, 4);
+
+      driver.moveToItem(7, ITEM_HEIGHT);
+      expect(onChange).toHaveBeenCalledWith(7, 7);
+    });
+  });
+
+  describe('initialValue', () => {
+    it('should not call onChange when initialValue is updated', () => {
+      const renderTree = render(<TestCase/>);
+      renderTree.rerender(<TestCase initialValue={2}/>);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('label', () => {
+    it('should return label', () => {
+      const label = 'Hours';
+      const renderTree = render(<TestCase label={label}/>);
+      const driver = WheelPickerDriver({renderTree, testID});
+      expect(driver.getLabel()).toEqual(label);
+    });
+  });
+
+  describe('PickerItem', () => {
+    it('should get first item\'s label', () => {
+      const renderTree = render(<TestCase/>);
+      const index = 0;
+      const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
+      expect(driver.getLabel()).toEqual('item #0');
+    });
+
+    it('should get first item\'s text style when no active/inactive colors', () => {
+      const renderTree = render(<TestCase textStyle={{color: Colors.green30}}/>);
+      const index = 0;
+      const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
+      expect(driver.getLabelStyle()?.color).toEqual(Colors.green30);
+    });
+
+    //TODO: Fix these test's using AnimatedStyle mocking
+    // it('should call onChange after second item is pressed', async () => {
+    //   const renderTree = render(<TestCase/>);
+    //   const index = 1;
+    //   const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
+
+    //   driver.press();
+
+    //   expect(await onChange).toHaveBeenCalledTimes(1);
+    //   expect(onChange).toHaveBeenCalledWith(1);
+    // });
+
+    // it('should not call onChange after first item is pressed', async () => {
+    //   const renderTree = render(<TestCase/>);
+    //   const index = 0;
+    //   const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
+
+    //   driver.press();
+
+    //   expect(onChange).not.toHaveBeenCalledTimes(1);
+    // });
+  });
+});

src/components/WheelPicker/__tests__/index.spec.tsx

@@ -23,6 +23,7 @@ import {WheelPickerAlign} from './types';
 export {WheelPickerAlign};
 
 const AnimatedFlatList = Animated.createAnimatedComponent<FlatListProps<ItemProps>>(FlatList);
+export const ITEM_HEIGHT = 44;
 
 export interface WheelPickerProps {
   /**
@@ -101,7 +102,7 @@ export interface WheelPickerProps {
 
 const WheelPicker = ({
   items: propItems,
-  itemHeight = 44,
+  itemHeight = ITEM_HEIGHT,
   numberOfVisibleRows = 5,
   activeTextColor = Colors.$textPrimary,
   inactiveTextColor,
@@ -232,14 +233,14 @@ const WheelPicker = ({
         activeColor={activeTextColor}
         inactiveColor={inactiveTextColor}
         style={textStyle}
+        testID={`${testID}.item_${index}`}
         {...item}
         disableRTL={shouldDisableRTL}
         fakeLabel={label}
         fakeLabelStyle={labelStyle}
         fakeLabelProps={fakeLabelProps}
         centerH={!label}
         onSelect={selectItem}
-        testID={`${testID}.item_${index}`}
       />
     );
   },
@@ -296,7 +297,14 @@ const WheelPicker = ({
       // @ts-expect-error
       <View style={labelContainerStyle} width={flatListWidth} pointerEvents="none">
         <View style={labelInnerContainerStyle} centerV pointerEvents="none">
-          <Text {...labelMargins} text80M {...labelProps} color={activeTextColor} style={labelStyle}>
+          <Text
+            {...labelMargins}
+            text80M
+            {...labelProps}
+            color={activeTextColor}
+            style={labelStyle}
+            testID={`${testID}.label`}
+          >
             {label}
           </Text>
         </View>
@@ -310,7 +318,8 @@ const WheelPicker = ({
     label,
     labelProps,
     activeTextColor,
-    labelStyle
+    labelStyle,
+    testID
   ]);
 
   const fader = useMemo(() => (position: FaderPosition) => {

src/components/WheelPicker/index.tsx

@@ -227,7 +227,7 @@ class Hint extends Component<HintProps, HintState> {
 
     if (!this.state.targetLayoutInWindow || this.props.onBackgroundPress) {
       setTimeout(() => {
-        this.targetRef?.measureInWindow((x: number, y: number, width: number, height: number) => {
+        this.targetRef?.measureInWindow?.((x: number, y: number, width: number, height: number) => {
           const targetLayoutInWindow = {x, y, width, height};
           this.setState({targetLayoutInWindow});
         });

src/components/hint/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import MaskedInput from '../new';
+import Text from '../../../components/text';
+import {TextFieldDriver} from '../../textField/TextField.driver.new';
+
+const testID = 'field';
+
+const TestCase = () => {
+  return <MaskedInput testID={testID} renderMaskedText={(text?: string) => <Text>{text}</Text>}/>;
+};
+
+describe('MaskedInput (new)', () => {
+  it('Sanity - it renders', () => {
+    const renderTree = render(<TestCase/>);
+    const mainInputDriver = TextFieldDriver({renderTree, testID});
+    mainInputDriver.exists();
+  });
+});

src/components/maskedInput/__tests__/maskedInput.new.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import MaskedInput from '../old';
+import Text from '../../../components/text';
+import {TextFieldDriver} from '../../textField/TextField.driver.new';
+
+const testID = 'field';
+
+const TestCase = () => {
+  // @ts-expect-error - this has an error, but this is an old component and I don't want to spend time fixing it
+  return <MaskedInput testID={testID} renderMaskedText={(text?: string) => <Text>{text}</Text>}/>;
+};
+
+describe('MaskedInput (old)', () => {
+  it('Sanity - it renders', () => {
+    const renderTree = render(<TestCase/>);
+    const mainInputDriver = TextFieldDriver({renderTree, testID});
+    mainInputDriver.exists();
+  });
+});

src/components/maskedInput/__tests__/maskedInput.old.spec.tsx

@@ -0,0 +1,15 @@
+import {ModalProps} from './index';
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {ButtonDriver} from '../button/Button.driver.new';
+
+export const ModalDriver = (props: ComponentProps) => {
+  const {renderTree, testID} = props;
+  const driver = useComponentDriver<ModalProps>(props);
+  const overlayDriver = ButtonDriver({renderTree, testID: `${testID}.TouchableOverlay`});
+
+  const isVisible = () => {
+    return !!driver.getProps().visible;
+  };
+
+  return {...driver, isVisible, pressOnBackground: overlayDriver.press};
+};