WheelPicker - render tests (#1688)

* add render tests

* pr fixes

* scrollViewHelper

* PR fixes

Author: lidord-wix

jest-setup.js

@@ -1,5 +1,7 @@
 import {NativeModules, AccessibilityInfo} from 'react-native';
 
+require('./node_modules/react-native-reanimated/src/reanimated2/jestUtils').setUpTests();
+
 NativeModules.StatusBarManager = {getHeight: jest.fn()};
 jest.spyOn(AccessibilityInfo, 'isScreenReaderEnabled').mockImplementation(() => new Promise.resolve(false));
 

src/incubator/WheelPicker/Item.tsx

@@ -74,6 +74,7 @@ const WheelPickerItem = memo(({
     >
       <AnimatedText
         text60R
+        testID={`${testID}.text`}
         numberOfLines={1}
         style={[animatedColorStyle, style, fakeLabel ? styles.textWithLabelPadding : styles.textPadding]}
       >

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

@@ -0,0 +1,70 @@
+import _ from 'lodash';
+import React from 'react';
+import {WheelPicker} from '../../../incubator';
+import {Colors} from 'style';
+import {render} from '@testing-library/react-native';
+import {fireOnMomentumScrollEnd} from '../../../uilib-test-renderer';
+
+const ITEM_HEIGHT = 50;
+const NUM_OF_ROWS = 7;
+const onChangeMock = jest.fn();
+
+const TestCase = props => {
+  return (
+    <WheelPicker
+      testID={'wheel'}
+      items={_.times(60, i => i).map(item => ({label: `${item}`, value: item}))}
+      onChange={onChangeMock}
+      numberOfVisibleRows={NUM_OF_ROWS}
+      itemHeight={ITEM_HEIGHT}
+      initialIndex={0}
+      activeTextColor={Colors.red30}
+      inactiveTextColor={Colors.blue30}
+      {...props}
+    />
+  );
+};
+
+describe('WheelPicker', () => {
+  describe('FlatList', () => {
+    it('should call onChange callback after scrolling', () => {
+      const {getByTestId} = render(<TestCase/>);
+      const flatList = getByTestId('wheel.list');
+
+      fireOnMomentumScrollEnd(flatList, {y: 200});
+
+      expect(onChangeMock).toHaveBeenCalledWith(4, 4);
+
+      fireOnMomentumScrollEnd(flatList, {y: 330});
+
+      expect(onChangeMock).toHaveBeenCalledWith(7, 7);
+    });
+
+    it('should present 7 rows', () => {
+      const {getByTestId} = render(<TestCase/>);
+      const flatList = getByTestId('wheel.list');
+
+      expect(flatList.props.height).toBe(NUM_OF_ROWS * ITEM_HEIGHT);
+    });
+  });
+
+  //TODO: make this test work
+  // describe('Item', () => {
+  //   it('should set activeColor to the selected index', () => {
+  //     const {getByTestId} = render(<TestCase/>);
+  //     const flatList = getByTestId('wheel.list');
+  //     const item_0 = getByTestId('wheel.item_0.text');
+  //     const item_4 = getByTestId('wheel.item_4.text');
+  //     const activeStyle = {color: Colors.red30};
+  //     const inactiveStyle = {color: Colors.blue30};
+
+  //     expect(item_0).toHaveAnimatedStyle(activeStyle);
+  //     expect(item_4).toHaveAnimatedStyle(inactiveStyle);
+
+  //     fireEvent(flatList, 'onMomentumScrollEnd', {nativeEvent: {contentOffset: {y: 200}}});
+
+  //     expect(item_0).toHaveAnimatedStyle(inactiveStyle);
+  //     expect(item_4).toHaveAnimatedStyle(activeStyle);
+  //   });
+  // });
+});

src/uilib-test-renderer/index.ts

@@ -1,8 +1,10 @@
 export * from '@testing-library/react-native';
 import {findStyle} from './helper';
+import {fireOnMomentumScrollEnd} from './scrollViewHelper';
 
 export {
-  findStyle
+  findStyle,
+  fireOnMomentumScrollEnd
 };
 
 /* Docs: https://callstack.github.io/react-native-testing-library/docs/api/  */

src/uilib-test-renderer/scrollViewHelper.ts

@@ -0,0 +1,11 @@
+import {fireEvent} from '@testing-library/react-native';
+
+const fireOnMomentumScrollEnd = (component: any, {x, y}: {x?: number; y?: number}) => {
+  fireEvent(component, 'onMomentumScrollEnd', getNativeEvent({x, y}));
+};
+
+const getNativeEvent = ({x, y}: {x?: number; y?: number}) => {
+  return {nativeEvent: {contentOffset: {x, y}}};
+};
+
+export {fireOnMomentumScrollEnd};