chore: compare accounts carousel unit test (deriv-com#17306)

packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useEmblaCarousel, { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel-react';
-import CFDCompareAccountsCarouselButton from './CompareAccountsCarouselButton';
+import CompareAccountsCarouselButton from './CompareAccountsCarouselButton';
 import './CompareAccountsCarousel.scss';
 
 type TCompareAccountsCarousel = {
@@ -39,18 +39,8 @@ const CompareAccountsCarousel = ({ children, isRtl = false }: TCompareAccountsCa
             <div className='wallets-compare-accounts-carousel__viewport' ref={emblaRef}>
                 <div className='wallets-compare-accounts-carousel__container'>{children}</div>
             </div>
-            <CFDCompareAccountsCarouselButton
-                enabled={prevBtnEnabled}
-                isNext={false}
-                isRtl={isRtl}
-                onClick={scrollPrev}
-            />
-            <CFDCompareAccountsCarouselButton
-                enabled={nextBtnEnabled}
-                isNext={true}
-                isRtl={isRtl}
-                onClick={scrollNext}
-            />
+            <CompareAccountsCarouselButton enabled={prevBtnEnabled} isNext={false} isRtl={isRtl} onClick={scrollPrev} />
+            <CompareAccountsCarouselButton enabled={nextBtnEnabled} isNext={true} isRtl={isRtl} onClick={scrollNext} />
         </div>
     );
 };

packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx

@@ -11,16 +11,16 @@ type TPrevNextButtonProps = {
     onClick: () => void;
 };
 
-const CFDCompareAccountsCarouselButton = ({ enabled, isNext, isRtl, onClick }: TPrevNextButtonProps) => {
+const CompareAccountsCarouselButton = ({ enabled, isNext, isRtl, onClick }: TPrevNextButtonProps) => {
     const nextButton = isRtl ? (
-        <LabelPairedChevronLeftLgFillIcon fill='#333333' />
+        <LabelPairedChevronLeftLgFillIcon data-testid='dt_compare_accounts_carousel_next_rtl_icon' fill='#333333' />
     ) : (
-        <LabelPairedChevronRightLgFillIcon fill='#333333' />
+        <LabelPairedChevronRightLgFillIcon data-testid='dt_compare_accounts_carousel_next_ltr_icon' fill='#333333' />
     );
     const prevButton = isRtl ? (
-        <LabelPairedChevronRightLgFillIcon fill='#333333' />
+        <LabelPairedChevronRightLgFillIcon data-testid='dt_compare_accounts_carousel_prev_rtl_icon' fill='#333333' />
     ) : (
-        <LabelPairedChevronLeftLgFillIcon fill='#333333' />
+        <LabelPairedChevronLeftLgFillIcon data-testid='dt_compare_accounts_carousel_prev_ltr_icon' fill='#333333' />
     );
 
     return (
@@ -39,4 +39,4 @@ const CFDCompareAccountsCarouselButton = ({ enabled, isNext, isRtl, onClick }: T
     );
 };
 
-export default CFDCompareAccountsCarouselButton;
+export default CompareAccountsCarouselButton;

packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarousel.spec.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CompareAccountsCarousel from '../CompareAccountsCarousel';
+
+const mockScrollPrev = jest.fn();
+const mockScrollNext = jest.fn();
+const mockUseEmblaCarousel = useEmblaCarousel as jest.MockedFunction<typeof useEmblaCarousel>;
+
+jest.mock('embla-carousel-react', () => {
+    return jest.fn(() => [
+        jest.fn(),
+        {
+            canScrollNext: jest.fn(() => false),
+            canScrollPrev: jest.fn(() => true),
+            on: jest.fn(),
+            scrollNext: mockScrollNext,
+            scrollPrev: mockScrollPrev,
+        },
+    ]);
+});
+
+jest.mock('../CompareAccountsCarouselButton', () => {
+    return jest.fn(({ isNext, onClick }: { isNext: boolean; onClick: () => void }) => (
+        <button
+            data-testid={
+                isNext ? 'dt_compare_accounts_carousel_next_button' : 'dt_compare_accounts_carousel_prev_button'
+            }
+            onClick={onClick}
+        >
+            {isNext ? 'Next' : 'Prev'}
+        </button>
+    ));
+});
+
+describe('CompareAccountsCarousel', () => {
+    const defaultProps = {
+        children: <div>Test Child</div>,
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders children correctly', () => {
+        render(<CompareAccountsCarousel {...defaultProps} />);
+
+        expect(screen.getByText('Test Child')).toBeInTheDocument();
+    });
+
+    it('initializes Embla Carousel with correct default options', () => {
+        render(<CompareAccountsCarousel {...defaultProps} />);
+
+        expect(useEmblaCarousel).toHaveBeenCalledWith({
+            align: 0,
+            containScroll: 'trimSnaps',
+            direction: 'ltr',
+        });
+    });
+
+    it('initializes Embla Carousel with RTL direction when isRtl is true', () => {
+        render(<CompareAccountsCarousel {...defaultProps} isRtl={true} />);
+
+        expect(useEmblaCarousel).toHaveBeenCalledWith({
+            align: 0,
+            containScroll: 'trimSnaps',
+            direction: 'rtl',
+        });
+    });
+
+    it('calls scrollPrev when prev button is clicked', () => {
+        render(<CompareAccountsCarousel {...defaultProps} />);
+
+        userEvent.click(screen.getByTestId('dt_compare_accounts_carousel_prev_button'));
+
+        expect(mockScrollPrev).toHaveBeenCalled();
+    });
+
+    it('calls scrollNext when next button is clicked', () => {
+        render(<CompareAccountsCarousel {...defaultProps} />);
+
+        userEvent.click(screen.getByTestId('dt_compare_accounts_carousel_next_button'));
+
+        expect(mockScrollNext).toHaveBeenCalled();
+    });
+
+    it('disables buttons when emblaApi is undefined', () => {
+        mockUseEmblaCarousel.mockReturnValue([jest.fn(), undefined]);
+        render(<CompareAccountsCarousel {...defaultProps} />);
+
+        userEvent.click(screen.getByTestId('dt_compare_accounts_carousel_prev_button'));
+        expect(mockScrollPrev).not.toHaveBeenCalled();
+
+        userEvent.click(screen.getByTestId('dt_compare_accounts_carousel_next_button'));
+        expect(mockScrollNext).not.toHaveBeenCalled();
+    });
+});