From 082db108d971f93a9838fa67e1a19c10bc85358e Mon Sep 17 00:00:00 2001 From: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com> Date: Wed, 30 Oct 2024 18:58:39 +0800 Subject: [PATCH] chore: compare accounts carousel unit test (#17306) --- .../FlowProvider/AccountFlow/AccountFlow.tsx | 116 ------------------ .../AccountFlow/VerificationFlow.tsx | 116 ------------------ .../FlowProvider/AccountFlow/index.ts | 1 - .../CompareAccountsCarousel.tsx | 16 +-- .../CompareAccountsCarouselButton.tsx | 12 +- .../CompareAccountsCarousel.spec.tsx | 98 +++++++++++++++ .../CompareAccountsCarouselButton.spec.tsx | 83 +++++++++++++ .../__tests__/CompareAccountsRoute.spec.tsx | 14 +++ 8 files changed, 204 insertions(+), 252 deletions(-) delete mode 100644 packages/wallets/docs/examples/FlowProvider/AccountFlow/AccountFlow.tsx delete mode 100644 packages/wallets/docs/examples/FlowProvider/AccountFlow/VerificationFlow.tsx delete mode 100644 packages/wallets/docs/examples/FlowProvider/AccountFlow/index.ts create mode 100644 packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarousel.spec.tsx create mode 100644 packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarouselButton.spec.tsx create mode 100644 packages/wallets/src/routes/CompareAccountsRoute/__tests__/CompareAccountsRoute.spec.tsx diff --git a/packages/wallets/docs/examples/FlowProvider/AccountFlow/AccountFlow.tsx b/packages/wallets/docs/examples/FlowProvider/AccountFlow/AccountFlow.tsx deleted file mode 100644 index 4aa6d7468358..000000000000 --- a/packages/wallets/docs/examples/FlowProvider/AccountFlow/AccountFlow.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react'; -import { ModalStepWrapper } from '../../../../src/components/Base/ModalStepWrapper'; -import { FlowProvider, TFlowProviderContext, useFlow } from '../../../../src/components/FlowProvider'; -import { useModal } from '../../../../src/components/ModalProvider'; -import VerificationFlow from './VerificationFlow'; - -const PasswordScreen = () => { - return ( -
- Password Screen in Account Flow -
- ); -}; - -const ScreenB = () => { - const { formValues, setFormValues } = useFlow(); - return ( -
-

Screen B

- setFormValues('testb', e.target.value)} - style={{ border: '1px solid black', padding: '4px', width: '100%' }} - type='text' - value={formValues.testb} - /> - setFormValues('testa', e.target.value)} - style={{ border: '1px solid black', padding: '4px', width: '100%' }} - type='text' - value={formValues.testa} - /> -
- ); -}; - -const ScreenA = () => { - const { formValues, setFormValues } = useFlow(); - - return ( -
- setFormValues('testa', e.target.value)} - style={{ border: '1px solid black', padding: '4px', width: '100%' }} - type='text' - value={formValues.testa} - /> -
- ); -}; - -const JurisdictionScreen = () => { - return ( -
-

Jurisdiction Screen

-
- ); -}; - -const screens = { - aScreen: , - bScreen: , - JurisdictionScreen: , - passwordScreen: , -}; - -const AccountFlow = () => { - const { show } = useModal(); - const nextFlowHandler = ({ - currentScreenId, - switchNextScreen, - switchScreen, - }: TFlowProviderContext) => { - switch (currentScreenId) { - case 'bScreen': - show(); - break; - case 'passwordScreen': - switchScreen('bScreen'); - break; - default: - switchNextScreen(); - } - }; - - return ( - - {context => { - return ( - ( - - )} - title='Account Flow' - > - {context.WalletScreen} - - ); - }} - - ); -}; - -export default AccountFlow; diff --git a/packages/wallets/docs/examples/FlowProvider/AccountFlow/VerificationFlow.tsx b/packages/wallets/docs/examples/FlowProvider/AccountFlow/VerificationFlow.tsx deleted file mode 100644 index 76401f2f4972..000000000000 --- a/packages/wallets/docs/examples/FlowProvider/AccountFlow/VerificationFlow.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react'; -import { ModalWrapper } from '../../../../src/components/Base'; -import { ModalStepWrapper } from '../../../../src/components/Base/ModalStepWrapper'; -import { FlowProvider, TFlowProviderContext, useFlow } from '../../../../src/components/FlowProvider'; -import { useModal } from '../../../../src/components/ModalProvider'; - -const PasswordScreen = () => { - return ( -
- Password Screen in Verification Flow -
- ); -}; - -const ScreenB = () => { - const { formValues, setFormValues } = useFlow(); - return ( -
-

Screen X in Verification Flow

- setFormValues('testb', e.target.value)} - style={{ border: '1px solid black', padding: '4px', width: '100%' }} - type='text' - value={formValues.testb} - /> - setFormValues('testa', e.target.value)} - style={{ border: '1px solid black', padding: '4px', width: '100%' }} - type='text' - value={formValues.testa} - /> -
- ); -}; - -const ScreenA = () => { - const { formValues, setFormValues } = useFlow(); - - return ( -
- setFormValues('testa', e.target.value)} - style={{ border: '1px solid black', padding: '4px', width: '100%' }} - type='text' - value={formValues.testa} - /> -
- ); -}; - -const SuccessModal = () => { - return ( - -
-

SUCCESS MODAL!

-
- - ); -}; - -const screens = { - aScreen: , - bScreen: , - passwordScreen: , -}; - -const VerificationFlow = () => { - const { show } = useModal(); - const nextFlowHandler = ({ currentScreenId, switchNextScreen }: TFlowProviderContext) => { - switch (currentScreenId) { - case 'bScreen': - show(); - break; - default: - switchNextScreen(); - } - }; - - return ( - - {context => { - return ( - ( - - )} - title='Verification Flow' - > - {context.WalletScreen} - - ); - }} - - ); -}; - -export default VerificationFlow; diff --git a/packages/wallets/docs/examples/FlowProvider/AccountFlow/index.ts b/packages/wallets/docs/examples/FlowProvider/AccountFlow/index.ts deleted file mode 100644 index be5aa3dc896b..000000000000 --- a/packages/wallets/docs/examples/FlowProvider/AccountFlow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AccountFlow } from './AccountFlow'; diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx index 2445cc751aad..92eb12adfbe8 100644 --- a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx +++ b/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
{children}
- - + + ); }; diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx index 865558b05815..cc117728163a 100644 --- a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx +++ b/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 ? ( - + ) : ( - + ); const prevButton = isRtl ? ( - + ) : ( - + ); return ( @@ -39,4 +39,4 @@ const CFDCompareAccountsCarouselButton = ({ enabled, isNext, isRtl, onClick }: T ); }; -export default CFDCompareAccountsCarouselButton; +export default CompareAccountsCarouselButton; diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarousel.spec.tsx b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarousel.spec.tsx new file mode 100644 index 000000000000..af0cc0930e40 --- /dev/null +++ b/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; + +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 }) => ( + + )); +}); + +describe('CompareAccountsCarousel', () => { + const defaultProps = { + children:
Test Child
, + }; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('renders children correctly', () => { + render(); + + expect(screen.getByText('Test Child')).toBeInTheDocument(); + }); + + it('initializes Embla Carousel with correct default options', () => { + render(); + + expect(useEmblaCarousel).toHaveBeenCalledWith({ + align: 0, + containScroll: 'trimSnaps', + direction: 'ltr', + }); + }); + + it('initializes Embla Carousel with RTL direction when isRtl is true', () => { + render(); + + expect(useEmblaCarousel).toHaveBeenCalledWith({ + align: 0, + containScroll: 'trimSnaps', + direction: 'rtl', + }); + }); + + it('calls scrollPrev when prev button is clicked', () => { + render(); + + userEvent.click(screen.getByTestId('dt_compare_accounts_carousel_prev_button')); + + expect(mockScrollPrev).toHaveBeenCalled(); + }); + + it('calls scrollNext when next button is clicked', () => { + render(); + + 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(); + + 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(); + }); +}); diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarouselButton.spec.tsx b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarouselButton.spec.tsx new file mode 100644 index 000000000000..5c6b26aa2e67 --- /dev/null +++ b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/__tests__/CompareAccountsCarouselButton.spec.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import CompareAccountsCarouselButton from '../CompareAccountsCarouselButton'; + +jest.mock('../../../../../components/Base', () => ({ + IconButton: ({ + children, + className, + disabled, + icon, + onClick, + }: { + children: React.ReactNode; + className: string; + disabled: boolean; + icon: React.ReactNode; + onClick: () => void; + }) => ( + + ), +})); + +describe('CompareAccountsCarouselButton', () => { + const defaultProps = { + enabled: true, + isNext: false, + isRtl: false, + onClick: jest.fn(), + }; + + it('renders correctly for previous button', () => { + render(); + + expect(screen.getByTestId('dt_compare_accounts_carousel_button')).toHaveClass( + 'wallets-compare-accounts-carousel-button--prev' + ); + expect(screen.getByTestId('dt_compare_accounts_carousel_prev_ltr_icon')).toBeInTheDocument(); + }); + + it('renders correctly for next button', () => { + render(); + + expect(screen.getByTestId('dt_compare_accounts_carousel_button')).toHaveClass( + 'wallets-compare-accounts-carousel-button--next' + ); + expect(screen.getByTestId('dt_compare_accounts_carousel_next_ltr_icon')).toBeInTheDocument(); + }); + + it('handles RTL for previous button', () => { + render(); + + expect(screen.getByTestId('dt_compare_accounts_carousel_prev_rtl_icon')).toBeInTheDocument(); + }); + + it('handles RTL for next button', () => { + render(); + + expect(screen.getByTestId('dt_compare_accounts_carousel_next_rtl_icon')).toBeInTheDocument(); + }); + + it('disables button when enabled is false', () => { + render(); + + expect(screen.getByTestId('dt_compare_accounts_carousel_button')).toBeDisabled(); + }); + + it('calls onClick event when button is clicked', () => { + const mockOnClick = jest.fn(); + render(); + + userEvent.click(screen.getByTestId('dt_compare_accounts_carousel_button')); + expect(mockOnClick).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/wallets/src/routes/CompareAccountsRoute/__tests__/CompareAccountsRoute.spec.tsx b/packages/wallets/src/routes/CompareAccountsRoute/__tests__/CompareAccountsRoute.spec.tsx new file mode 100644 index 000000000000..a1a050138270 --- /dev/null +++ b/packages/wallets/src/routes/CompareAccountsRoute/__tests__/CompareAccountsRoute.spec.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import CompareAccountsRoute from '../CompareAccountsRoute'; + +jest.mock('../../../features/cfd/screens/CompareAccounts', () => ({ + CompareAccountsScreen: () =>
Mocked Compare Accounts Screen
, +})); + +describe('CompareAccountsRoute', () => { + it('renders the CompareAccountsScreen component', () => { + render(); + expect(screen.getByText('Mocked Compare Accounts Screen')).toBeInTheDocument(); + }); +});