testkit new useScrollabe driver, new Carousel driver for testings (#2713)

* testkit new useScrollabe driver, new Carousel driver for testings

* Fixed review notes

* fixed review notes

Author: adids1221

src/components/carousel/Carousel.driver.new.ts

@@ -0,0 +1,13 @@
+import {CarouselProps} from './types';
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {useScrollableDriver, ScrollProps} from '../../testkit/new/useScrollable.driver';
+
+export const CarouselDriver = (props: ComponentProps) => {
+  const driver = useScrollableDriver<CarouselProps>(useComponentDriver(props));
+
+  const scroll = (props: ScrollProps) => {
+    return driver.scroll(props);
+  };
+
+  return {...driver, scroll};
+};

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

@@ -2,22 +2,18 @@ import {map} from 'lodash';
 import React from 'react';
 import {Text, View} from 'react-native';
 import {fireOnMomentumScrollEnd} from '../../../uilib-test-renderer';
+import {render} from '@testing-library/react-native';
 import Carousel from '../index';
 import {Constants} from '../../../commons/new';
-import {CarouselDriver} from '../Carousel.driver';
+import {CarouselDriver} from '../Carousel.driver.new';
 
 const numberOfPagesShown = 5;
 const onChangePageMock = jest.fn();
 const onScrollMock = jest.fn();
 const testID = 'carousel';
 const TestCase = (props: any) => {
   return (
-    <Carousel
-      testID={testID}
-      onChangePage={onChangePageMock}
-      onScroll={onScrollMock}
-      {...props}
-    >
+    <Carousel testID={testID} onChangePage={onChangePageMock} onScroll={onScrollMock} {...props}>
       {map([...Array(numberOfPagesShown)], (_, index) => (
         <Page key={index}>
           <Text testID={`page-${index}`}>Page #{index}</Text>
@@ -27,7 +23,7 @@ const TestCase = (props: any) => {
   );
 };
 
-const Page = ({children, ...others}:{children: React.ReactNode, others?: any}) => {
+const Page = ({children, ...others}: {children: React.ReactNode; others?: any}) => {
   return (
     <View {...others} style={{flex: 1}}>
       {children}
@@ -36,41 +32,43 @@ const Page = ({children, ...others}:{children: React.ReactNode, others?: any}) =
 };
 
 describe('Carousel render tests', () => {
-  afterEach(() => CarouselDriver.clear());
-
   describe('initialPage', () => {
     it('should be set to default initialPage', async () => {
-      const driver = new CarouselDriver({component: <TestCase/>, testID});
+      const renderTree = render(<TestCase/>);
+      const driver = CarouselDriver({renderTree, testID});
 
       expect((await driver.getContentOffset()).x).toBe(0);
     });
 
     it('should be set to initialPage = 2', async () => {
-      const driver = new CarouselDriver({component: <TestCase initialPage={2}/>, testID});
+      const renderTree = render(<TestCase initialPage={2}/>);
+      const driver = CarouselDriver({renderTree, testID});
 
       expect((await driver.getContentOffset()).x).toBe(Constants.screenWidth * 2);
     });
   });
 
   describe('onScroll', () => {
     it('should trigger onScroll from the second scroll', async () => {
-      const driver = new CarouselDriver({component: <TestCase/>, testID});
+      const renderTree = render(<TestCase/>);
+      const driver = CarouselDriver({renderTree, testID});
 
-      await driver.scroll(Constants.screenWidth); //NOTE: first scroll doesn't fire onScroll
+      await driver.scroll({x: Constants.screenWidth}); //NOTE: first scroll doesn't fire onScroll
       expect(onScrollMock).not.toHaveBeenCalled();
 
-      await driver.scroll(Constants.screenWidth);
+      await driver.scroll({x: Constants.screenWidth});
       expect(onScrollMock).toHaveBeenCalled();
     });
   });
 
   describe('onChangePage', () => {
     it('should trigger onChangePage with current page', async () => {
-      const driver = new CarouselDriver({component: <TestCase/>, testID});
+      const renderTree = render(<TestCase/>);
+      const driver = CarouselDriver({renderTree, testID});
       const scrollView = await driver.getElement();
 
-      await driver.scroll(Constants.screenWidth); //NOTE: first scroll doesn't fire onScroll
-      await driver.scroll(Constants.screenWidth);
+      await driver.scroll({x: Constants.screenWidth}); //NOTE: first scroll doesn't fire onScroll
+      await driver.scroll({x: Constants.screenWidth});
       expect(onChangePageMock).not.toHaveBeenCalled();
 
       fireOnMomentumScrollEnd(scrollView, {x: Constants.screenWidth});

src/testkit/new/useScrollable.driver.ts

@@ -0,0 +1,38 @@
+import {fireEvent} from '@testing-library/react-native';
+import {ComponentDriverResult} from './Component.driver';
+import {ScrollViewProps, NativeScrollEvent, NativeScrollPoint} from 'react-native';
+
+type ScrollableDriverOptions = Omit<NativeScrollEvent, 'contentOffset'>;
+
+type ContentOffset = Partial<NativeScrollPoint>;
+
+export type ScrollProps = ContentOffset & {options?: ScrollableDriverOptions};
+
+export interface ScrollableDriverResult<Props> extends ComponentDriverResult<Props> {
+  scroll: (contentOffset: ContentOffset, options?: ScrollableDriverOptions) => void;
+}
+
+export type ScrollableDriverProps = Partial<Pick<ScrollViewProps, 'contentOffset'>>;
+
+export const useScrollableDriver = <
+  Props extends ScrollableDriverProps,
+  DriverProps extends ComponentDriverResult<Props> = ComponentDriverResult<Props> // Allows for chaining multiple drivers
+>(
+    driver: DriverProps
+  ): ScrollableDriverResult<Props> & DriverProps => {
+  const getContentOffset = async () => await driver.getElement().props.contentOffset;
+  const scroll = ({x = 0, y = 0}, options?: ScrollableDriverOptions) => {
+    fireEvent.scroll(driver.getElement(), {
+      nativeEvent: {
+        ...options,
+        contentOffset: {x, y}
+      }
+    });
+  };
+
+  return {
+    ...driver,
+    getContentOffset,
+    scroll
+  };
+};