diff --git a/packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx b/packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx index f6cffebad4c3..5a9e4c42a71c 100644 --- a/packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx +++ b/packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx @@ -21,6 +21,7 @@ const AvailableP2PBalanceModal = ({ isModalOpen, onRequestClose }: TAvailableP2P onRequestClose={onRequestClose} shouldCloseOnOverlayClick={false} style={customStyles} + testId='dt_p2p_v2_available_p2p_balance_modal' > Available Deriv P2P Balance diff --git a/packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx b/packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx index 2a4cff65ea1e..13d3ec501605 100644 --- a/packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx +++ b/packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx @@ -81,6 +81,7 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM // TODO: below modal will be rewritten to use @deriv/ui modal { const { data: advertiserInfo } = useAdvertiserStats(); const { data: activeAccount } = useActiveAccount(); const { isDesktop } = useDevice(); - const [shouldShowDailyLimitModal, setShouldShowDailyLimitModal] = useState(false); const [shouldShowAvailableBalanceModal, setShouldShowAvailableBalanceModal] = useState(false); const currency = activeAccount?.currency || 'USD'; @@ -44,19 +43,15 @@ const MyProfileBalance = () => { isModalOpen={shouldShowAvailableBalanceModal} onRequestClose={() => setShouldShowAvailableBalanceModal(false)} /> - setShouldShowDailyLimitModal(false)} - />
-
+
Available Deriv P2P Balance setShouldShowAvailableBalanceModal(true)} />
@@ -70,7 +65,7 @@ const MyProfileBalance = () => {
{type}
-
+
Daily limit @@ -82,7 +77,9 @@ const MyProfileBalance = () => { {dailyLimit}
-
+
Available diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/__tests__/MyProfileBalance.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/__tests__/MyProfileBalance.spec.tsx new file mode 100644 index 000000000000..6ea017021918 --- /dev/null +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/__tests__/MyProfileBalance.spec.tsx @@ -0,0 +1,123 @@ +import React from 'react'; +import { APIProvider } from '@deriv/api'; +import { render, screen, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import MyProfileBalance from '../MyProfileBalance'; + +const wrapper = ({ children }: { children: JSX.Element }) => ( + +
+ {children} + +); + +let mockUseAdvertiserStats = { + data: { + balance_available: 50000, + daily_buy_limit: 500, + daily_sell_limit: 500, + dailyAvailableBuyLimit: 10, + dailyAvailableSellLimit: 10, + fullName: 'Jane Doe', + isEligibleForLimitUpgrade: false, + name: 'Jane', + show_name: 0, + }, + isLoading: false, +}; +const mockUseActiveAccount = { + data: { + currency: 'USD', + }, + isLoading: false, +}; + +jest.mock('@/hooks', () => ({ + ...jest.requireActual('@/hooks'), + useAdvertiserStats: jest.fn(() => mockUseAdvertiserStats), +})); + +jest.mock('@deriv/api', () => ({ + ...jest.requireActual('@deriv/api'), + useActiveAccount: jest.fn(() => mockUseActiveAccount), +})); + +describe('MyProfileBalance', () => { + it('should render the correct balance', () => { + render(, { wrapper }); + const availableBalanceNode = screen.getByTestId('dt_p2p_v2_available_balance_amount'); + expect(within(availableBalanceNode).getByText('50,000.00 USD')).toBeInTheDocument(); + + const balanceInfoIcon = screen.getByTestId('dt_p2p_v2_available_balance_icon'); + userEvent.click(balanceInfoIcon); + expect(screen.getByTestId('dt_p2p_v2_available_p2p_balance_modal')).toBeInTheDocument(); + const okButton = screen.getByRole('button', { + name: 'Ok', + }); + userEvent.click(okButton); + expect(screen.queryByTestId('dt_p2p_v2_available_p2p_balance_modal')).not.toBeInTheDocument(); + }); + + it('should render the correct limits', () => { + mockUseAdvertiserStats = { + data: { + ...mockUseAdvertiserStats.data, + daily_buy_limit: 500, + daily_sell_limit: 2000, + dailyAvailableBuyLimit: 100, + dailyAvailableSellLimit: 600, + }, + isLoading: false, + }; + render(, { wrapper }); + const dailyBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_buy_limit'); + expect(within(dailyBuyLimitNode).getByText('500 USD')).toBeInTheDocument(); + const availableBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_available_buy_limit'); + expect(within(availableBuyLimitNode).getByText('100.00 USD')).toBeInTheDocument(); + + const dailySellLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_sell_limit'); + expect(within(dailySellLimitNode).getByText('2000 USD')).toBeInTheDocument(); + const dailyAvailableSellLimit = screen.getByTestId('dt_p2p_v2_profile_balance_available_sell_limit'); + expect(within(dailyAvailableSellLimit).getByText('600.00 USD')).toBeInTheDocument(); + }); + it('should render eligibility for daily limit upgrade', () => { + mockUseAdvertiserStats = { + data: { + ...mockUseAdvertiserStats.data, + isEligibleForLimitUpgrade: true, + }, + isLoading: false, + }; + render(, { wrapper }); + expect(screen.getByTestId('dt_p2p_v2_profile_daily_limit')).toBeInTheDocument(); + + const openDailyLimitModalBtn = screen.getByRole('button', { + name: 'Increase my limits', + }); + userEvent.click(openDailyLimitModalBtn); + const hideDailyLimitBtn = screen.getByRole('button', { + name: 'No', + }); + userEvent.click(hideDailyLimitBtn); + expect(screen.queryByTestId('dt_p2p_v2_daily_limit_modal')).not.toBeInTheDocument(); + }); + it('should render the correct default values', () => { + mockUseAdvertiserStats = { + // @ts-expect-error To clear the mocked values and assert the default values + data: {}, + isLoading: false, + }; + render(, { wrapper }); + const availableBalanceNode = screen.getByTestId('dt_p2p_v2_available_balance_amount'); + expect(within(availableBalanceNode).getByText('0.00 USD')).toBeInTheDocument(); + const dailyBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_buy_limit'); + expect(within(dailyBuyLimitNode).getByText('0.00 USD')).toBeInTheDocument(); + const availableBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_available_buy_limit'); + expect(within(availableBuyLimitNode).getByText('0.00 USD')).toBeInTheDocument(); + + const dailySellLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_sell_limit'); + expect(within(dailySellLimitNode).getByText('0.00 USD')).toBeInTheDocument(); + const dailyAvailableSellLimit = screen.getByTestId('dt_p2p_v2_profile_balance_available_sell_limit'); + expect(within(dailyAvailableSellLimit).getByText('0.00 USD')).toBeInTheDocument(); + }); +}); diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.tsx index 6860f1923efa..f42f32389e49 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.tsx @@ -13,7 +13,7 @@ const MyProfileDailyLimit = () => { return ( <> -
+
Want to increase your daily limits to{' '}