Carousel - render tests - first tests

Author: Inbal-Tish

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

@@ -0,0 +1,89 @@
+import {map} from 'lodash';
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+import {Text, View} from 'react-native';
+import {Constants} from '../../../helpers';
+import Carousel from '../index';
+
+
+const numberOfPagesShown = 5;
+const eventData = {
+  nativeEvent: {
+    contentOffset: {
+      x: Constants.screenWidth
+    }
+  }
+};
+const onChangePageMock = jest.fn();
+const onScrollMock = jest.fn();
+const props = {
+  testID: 'carousel',
+  initialPage: 0,
+  pagingEnabled: true,
+  autoplay: false,
+  autoplayInterval: 4000,
+  horizontal: true,
+  onChangePage: onChangePageMock,
+  onScroll: onScrollMock
+  //animatedScrollOffset: // set to check Animated
+};
+
+const Page = ({children, ...others}) => {
+  return (
+    <View {...others} style={{flex: 1}}>
+      {children}
+    </View>
+  );
+};
+
+describe('Carousel tests', () => {
+  describe('default setup', () => {
+    it('should be set to default', () => {
+      const component = render(<Carousel {...props}>
+        {map([...Array(numberOfPagesShown)], (_, index) => (
+          <Page key={index}>
+            <Text testID={`page-${index}`}>Page #{index}</Text>
+          </Page>
+        ))}
+      </Carousel>);
+      component.getByText('Page #0'); // Validates that the text is there
+    });
+
+    it('should trigger onScroll from the second scroll', () => {
+      const component = render(<Carousel {...props}>
+        {map([...Array(numberOfPagesShown)], (_, index) => (
+          <Page key={index}>
+            <Text>Page #{index}</Text>
+          </Page>
+        ))}
+      </Carousel>);
+      const scrollView = component.getByTestId('carousel.scrollView');
+
+      fireEvent.scroll(scrollView, eventData); //NOTE: first scroll will no fire onScroll
+      expect(onScrollMock).not.toHaveBeenCalled();
+
+      fireEvent.scroll(scrollView, eventData);
+      expect(onScrollMock).toHaveBeenCalled();
+    });
+
+    it('should trigger onChangePage with current page', async () => {
+      const component = render(<Carousel {...props}>
+        {map([...Array(numberOfPagesShown)], (_, index) => (
+          <Page key={index}>
+            <Text>Page #{index}</Text>
+          </Page>
+        ))}
+      </Carousel>);
+      const scrollView = component.getByTestId('carousel.scrollView');
+
+      fireEvent.scroll(scrollView, eventData); //NOTE: first scroll will no fire onScroll
+      fireEvent.scroll(scrollView, eventData);
+      expect(onChangePageMock).not.toHaveBeenCalled();
+      
+      await new Promise((r) => setTimeout(r, 2000));
+      fireEvent(scrollView, 'onMomentumScrollEnd', eventData);
+      expect(onChangePageMock).toHaveBeenCalled();
+      expect(onChangePageMock).toHaveBeenCalledWith(1, 0, {isAutoScrolled: false});
+    });
+  });
+});

src/components/carousel/index.tsx

@@ -53,6 +53,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const defaultPageWidth = props.loop || !props.pageWidth ? Constants.screenWidth : props.pageWidth;
     const pageHeight = props.pageHeight ?? Constants.screenHeight;
     this.isAutoScrolled = false;
+    
     this.state = {
       containerWidth: undefined,
       // @ts-ignore (defaultProps)
@@ -198,6 +199,27 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     this.setState({currentPage: this.getCalcIndex(pageIndex)}, () => this.updateOffset(animated));
   }
 
+  goToNextPage() {
+    const {currentPage} = this.state;
+    const pagesCount = presenter.getChildrenLength(this.props);
+    const {loop} = this.props;
+    let nextPageIndex;
+
+    if (loop) {
+      nextPageIndex = currentPage + 1;
+    } else {
+      nextPageIndex = Math.min(pagesCount - 1, currentPage + 1);
+    }
+
+    this.goToPage(nextPageIndex, true);
+
+    // in case of a loop, after we advanced right to the cloned first page,
+    // we return silently to the real first page
+    if (loop && currentPage === pagesCount) {
+      this.goToPage(0, false);
+    }
+  }
+
   getCalcIndex(index: number): number {
     // to handle scrollView index issue in Android's RTL layout
     if (Constants.isRTL && Constants.isAndroid) {
@@ -217,8 +239,10 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     if (containerWidth) {
       const spacings = pageWidth === containerWidth ? 0 : this.getItemSpacings(this.props);
       const initialBreak = pageWidth - (containerWidth - pageWidth - spacings) / 2;
-      const snapToOffsets = _.times(presenter.getChildrenLength(this.props),
-        index => initialBreak + index * pageWidth + this.getContainerMarginHorizontal());
+      const snapToOffsets = _.times(
+        presenter.getChildrenLength(this.props),
+        index => initialBreak + index * pageWidth + this.getContainerMarginHorizontal()
+      );
       return snapToOffsets;
     }
   };
@@ -233,6 +257,18 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     return horizontal ? pagingEnabled && !this.shouldUsePageWidth() : true;
   }
 
+  shouldAllowAccessibilityLayout() {
+    const {allowAccessibleLayout} = this.props;
+    return allowAccessibleLayout && Constants.accessibility.isScreenReaderEnabled;
+  }
+
+  onContentSizeChange = () => {
+    // this is to handle initial scroll position (content offset)
+    if (Constants.isAndroid) {
+      this.updateOffset();
+    }
+  };
+
   onContainerLayout = ({
     nativeEvent: {
       layout: {width: containerWidth, height: containerHeight}
@@ -249,54 +285,22 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     this.setState({containerWidth, pageWidth, pageHeight, initialOffset});
   };
 
-  shouldAllowAccessibilityLayout() {
-    const {allowAccessibleLayout} = this.props;
-    return allowAccessibleLayout && Constants.accessibility.isScreenReaderEnabled;
-  }
-
-  onContentSizeChange = () => {
-    // this is to handle initial scroll position (content offset)
-    if (Constants.isAndroid) {
-      this.updateOffset();
-    }
-  };
-
   onMomentumScrollEnd = () => {
     // finished full page scroll
     const {currentStandingPage, currentPage} = this.state;
     const index = this.getCalcIndex(currentPage);
-
     const pagesCount = presenter.getChildrenLength(this.props);
+
     if (index < pagesCount) {
       this.setState({currentStandingPage: index});
+
       if (currentStandingPage !== index) {
         this.props.onChangePage?.(index, currentStandingPage, {isAutoScrolled: this.isAutoScrolled});
         this.isAutoScrolled = false;
       }
     }
   };
 
-  goToNextPage() {
-    const {currentPage} = this.state;
-    const pagesCount = presenter.getChildrenLength(this.props);
-    const {loop} = this.props;
-
-    let nextPageIndex;
-    if (loop) {
-      nextPageIndex = currentPage + 1;
-    } else {
-      nextPageIndex = Math.min(pagesCount - 1, currentPage + 1);
-    }
-
-    this.goToPage(nextPageIndex, true);
-
-    // in case of a loop, after we advanced right to the cloned first page,
-    // we return silently to the real first page
-    if (loop && currentPage === pagesCount) {
-      this.goToPage(0, false);
-    }
-  }
-
   onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     if (!this.skippedInitialScroll) {
       this.skippedInitialScroll = true;
@@ -307,7 +311,6 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const {pageWidth, pageHeight} = this.state;
     const offsetX = event.nativeEvent.contentOffset.x;
     const offsetY = event.nativeEvent.contentOffset.y;
-
     const offset = horizontal ? offsetX : offsetY;
     const pageSize = horizontal ? pageWidth : pageHeight;
 
@@ -333,11 +336,17 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   };
 
   // @ts-ignore
-  onScrollEvent = Animated.event([{nativeEvent: {contentOffset: {y: this.props?.animatedScrollOffset?.y, x: this.props?.animatedScrollOffset?.x}}}],
-    {
-      useNativeDriver: true,
-      listener: this.onScroll
-    });
+  onScrollEvent = Animated.event([
+    {nativeEvent: 
+      {contentOffset: 
+        {y: this.props?.animatedScrollOffset?.y, x: this.props?.animatedScrollOffset?.x}
+      }
+    }
+  ],
+  {
+    useNativeDriver: true,
+    listener: this.onScroll
+  });
 
   renderChild = (child: ReactNode, key: Key): JSX.Element | undefined => {
     if (child) {
@@ -436,11 +445,12 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   renderAccessibleLayout() {
-    const {containerStyle, children} = this.props;
+    const {containerStyle, children, testID} = this.props;
 
     return (
       <View style={containerStyle} onLayout={this.onContainerLayout}>
         <ScrollView
+          testID={`${testID}.scrollView`}
           ref={this.carousel}
           showsVerticalScrollIndicator={false}
           pagingEnabled
@@ -457,7 +467,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   renderCarousel() {
-    const {containerStyle, animated, horizontal, animatedScrollOffset, ...others} = this.props;
+    const {containerStyle, animated, horizontal, animatedScrollOffset, testID, ...others} = this.props;
     const {initialOffset} = this.state;
     const scrollContainerStyle = this.shouldUsePageWidth()
       ? {paddingRight: this.getItemSpacings(this.props)}
@@ -466,8 +476,14 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const marginBottom = Math.max(0, this.getContainerPaddingVertical() - 16);
     const ScrollContainer = animatedScrollOffset ? Animated.ScrollView : ScrollView;
     return (
-      <View animated={animated} style={[{marginBottom}, containerStyle]} onLayout={this.onContainerLayout}>
+      <View
+        animated={animated}
+        style={[{marginBottom}, containerStyle]}
+        onLayout={this.onContainerLayout}
+        testID={testID}
+      >
         <ScrollContainer
+          testID={`${testID}.scrollView`}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           decelerationRate="fast"
@@ -502,7 +518,7 @@ export default asBaseComponent<CarouselProps, Carousel & {pageControlPositions:
 const styles = StyleSheet.create({
   counter: {
     paddingHorizontal: 8,
-    paddingVertical: 3, // height: 24,
+    paddingVertical: 3,
     borderRadius: 20,
     backgroundColor: Colors.rgba(Colors.black, 0.6),
     position: 'absolute',