refactor: make infinit loop optional

deriv-com · Oct 17, 2024 · e8525a0 · e8525a0
1 parent 8e46efa
commit e8525a0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 30 deletions.
diff --git a/packages/trader/src/AppV2/Components/Carousel/__tests__/carousel.spec.tsx b/packages/trader/src/AppV2/Components/Carousel/__tests__/carousel.spec.tsx
@@ -10,6 +10,8 @@ jest.mock('react-swipeable', () => ({
     })),
 }));
 const data_test_id = 'dt_page';
+const next_button = 'Next';
+const prev_button = 'Previous';
 const mock_pages = [
     {
         id: 1,
@@ -24,8 +26,8 @@ const mock_pages = [
 const MockHeader: React.ComponentProps<typeof Carousel>['header'] = ({ current_index, onNextClick, onPrevClick }) => (
     <React.Fragment>
         <div>Current Index: {current_index}</div>
-        <button onClick={onNextClick}>Next</button>
-        <button onClick={onPrevClick}>Previous</button>
+        <button onClick={onNextClick}>{next_button}</button>
+        <button onClick={onPrevClick}>{prev_button}</button>
     </React.Fragment>
 );
 
@@ -35,7 +37,7 @@ const mock_props = {
 };
 
 describe('Carousel', () => {
-    it('should render all passed pages', () => {
+    it('renders all passed pages', () => {
         render(<Carousel {...mock_props} />);
         expect(screen.getAllByTestId(data_test_id)).toHaveLength(mock_pages.length);
     });
@@ -55,67 +57,75 @@ describe('Carousel', () => {
         expect(onMouseDown).toBeCalled();
     });
 
-    it('should set index to 1 if user clicks on "Next"', async () => {
+    it('sets index to 1 if user clicks on "Next"', async () => {
         render(<Carousel {...mock_props} />);
-        userEvent.click(screen.getByText('Next'));
+        userEvent.click(screen.getByText(next_button));
         await screen.findByText('Current Index: 1');
     });
 
-    it('should set index to 0 if user clicks on "Previous"', async () => {
+    it('sets index to 0 if user clicks on "Previous"', async () => {
         render(<Carousel {...mock_props} />);
-        userEvent.click(screen.getByText('Next'));
-        userEvent.click(screen.getByText('Previous'));
+        userEvent.click(screen.getByText(next_button));
+        userEvent.click(screen.getByText(prev_button));
         await screen.findByText('Current Index: 0');
     });
 
-    it('should handle controlled component behavior', () => {
+    it('handles controlled component behavior', () => {
         const setCurrentIndex = jest.fn();
         render(<Carousel {...mock_props} current_index={0} setCurrentIndex={setCurrentIndex} />);
 
-        userEvent.click(screen.getByText('Next'));
+        userEvent.click(screen.getByText(next_button));
         expect(setCurrentIndex).toHaveBeenCalledWith(1);
 
-        userEvent.click(screen.getByText('Previous'));
+        userEvent.click(screen.getByText(prev_button));
         expect(setCurrentIndex).toHaveBeenCalledWith(mock_pages.length - 1);
     });
 
-    it('should cycle through pages correctly', async () => {
-        render(<Carousel {...mock_props} />);
+    it('cycles through pages correctly if is_infinite_loop === true', async () => {
+        render(<Carousel {...mock_props} is_infinite_loop={true} />);
 
-        userEvent.click(screen.getByText('Next'));
+        const next = screen.getByText(next_button);
+        userEvent.click(next);
         await screen.findByText('Current Index: 1');
 
-        userEvent.click(screen.getByText('Next'));
+        userEvent.click(next);
         await screen.findByText('Current Index: 0');
 
-        userEvent.click(screen.getByText('Previous'));
+        userEvent.click(screen.getByText(prev_button));
         await screen.findByText('Current Index: 1');
     });
 
-    it('should call setCurrentIndex if provided on next click', () => {
+    it('cycles through pages correctly if is_infinite_loop !== true', async () => {
+        render(<Carousel {...mock_props} />);
+
+        const next = screen.getByText(next_button);
+        userEvent.click(next);
+        await screen.findByText('Current Index: 1');
+
+        userEvent.click(next);
+        await screen.findByText('Current Index: 1');
+
+        userEvent.click(screen.getByText(prev_button));
+        await screen.findByText('Current Index: 0');
+    });
+
+    it('calls setCurrentIndex if provided on next click', () => {
         const setCurrentIndex = jest.fn();
         render(<Carousel {...mock_props} current_index={0} setCurrentIndex={setCurrentIndex} />);
-        userEvent.click(screen.getByText('Next'));
+        userEvent.click(screen.getByText(next_button));
         expect(setCurrentIndex).toHaveBeenCalledWith(1);
     });
 
-    it('should call setCurrentIndex if provided on previous click', () => {
+    it('calls setCurrentIndex if provided on previous click', () => {
         const setCurrentIndex = jest.fn();
         render(<Carousel {...mock_props} current_index={1} setCurrentIndex={setCurrentIndex} />);
-        userEvent.click(screen.getByText('Previous'));
+        userEvent.click(screen.getByText(prev_button));
         expect(setCurrentIndex).toHaveBeenCalledWith(0);
     });
 
-    it('should wrap around to the first page when clicking next on the last page', () => {
-        render(<Carousel {...mock_props} />);
-        userEvent.click(screen.getByText('Next'));
-        userEvent.click(screen.getByText('Next'));
-        expect(screen.getByText('Current Index: 0')).toBeInTheDocument();
-    });
-
-    it('should wrap around to the last page when clicking previous on the first page', () => {
+    it('wraps around to the last page when clicking previous on the first page', () => {
         render(<Carousel {...mock_props} />);
-        userEvent.click(screen.getByText('Previous'));
+        userEvent.click(screen.getByText(next_button));
         expect(screen.getByText('Current Index: 1')).toBeInTheDocument();
     });
 });
diff --git a/packages/trader/src/AppV2/Components/Carousel/carousel.tsx b/packages/trader/src/AppV2/Components/Carousel/carousel.tsx
@@ -8,12 +8,22 @@ type TCarousel = {
     current_index?: number;
     header?: typeof CarouselHeader;
     is_swipeable?: boolean;
+    is_infinite_loop?: boolean;
     pages: { id: number; component: JSX.Element }[];
     title?: React.ReactNode;
     setCurrentIndex?: (arg: number) => void;
 };
 
-const Carousel = ({ classname, current_index, header, is_swipeable, pages, setCurrentIndex, title }: TCarousel) => {
+const Carousel = ({
+    classname,
+    current_index,
+    header,
+    is_swipeable,
+    is_infinite_loop,
+    pages,
+    setCurrentIndex,
+    title,
+}: TCarousel) => {
     const [internalIndex, setInternalIndex] = React.useState(0);
 
     const HeaderComponent = header;
@@ -22,11 +32,13 @@ const Carousel = ({ classname, current_index, header, is_swipeable, pages, setCu
     const index = isControlled ? current_index : internalIndex;
 
     const handleNextClick = () => {
+        if (!is_infinite_loop && index + 1 >= pages.length) return;
         const newIndex = (index + 1) % pages.length;
         isControlled ? setCurrentIndex?.(newIndex) : setInternalIndex(newIndex);
     };
 
     const handlePrevClick = () => {
+        if (!is_infinite_loop && index - 1 < 0) return;
         const newIndex = (index - 1 + pages.length) % pages.length;
         isControlled ? setCurrentIndex?.(newIndex) : setInternalIndex(newIndex);
     };