Skip to content

Commit b37a9ff

Browse files
adrienne-derivadrienne-deriv
authored
[FEQ] P2P-V2 My Profile balance test (#13398)
* chore: removed responsive root * chore: reverted old changes * chore: added tests for profile balance * Update MyProfileBalance.spec.tsx * Update MyProfileBalance.spec.tsx
1 parent 59f2303 commit b37a9ff

File tree

5 files changed

+132
-10
lines changed

5 files changed

+132
-10
lines changed

‎packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const AvailableP2PBalanceModal = ({ isModalOpen, onRequestClose }: TAvailableP2P
2121
onRequestClose={onRequestClose}
2222
shouldCloseOnOverlayClick={false}
2323
style={customStyles}
24+
testId='dt_p2p_v2_available_p2p_balance_modal'
2425
>
2526
<Text as='p' weight='bold'>
2627
Available Deriv P2P Balance

‎packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM
8181
// TODO: below modal will be rewritten to use @deriv/ui modal
8282
<Modal
8383
className='p2p-v2-daily-limit-modal'
84+
data-testid='dt_p2p_v2_daily_limit_modal'
8485
isOpen={isModalOpen}
8586
onRequestClose={onRequestClose}
8687
style={customStyles}

‎packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/MyProfileBalance.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const MyProfileBalance = () => {
1212
const { data: advertiserInfo } = useAdvertiserStats();
1313
const { data: activeAccount } = useActiveAccount();
1414
const { isDesktop } = useDevice();
15-
const [shouldShowDailyLimitModal, setShouldShowDailyLimitModal] = useState(false);
1615
const [shouldShowAvailableBalanceModal, setShouldShowAvailableBalanceModal] = useState(false);
1716

1817
const currency = activeAccount?.currency || 'USD';
@@ -44,19 +43,15 @@ const MyProfileBalance = () => {
4443
isModalOpen={shouldShowAvailableBalanceModal}
4544
onRequestClose={() => setShouldShowAvailableBalanceModal(false)}
4645
/>
47-
<DailyLimitModal
48-
currency={currency}
49-
isModalOpen={shouldShowDailyLimitModal}
50-
onRequestClose={() => setShouldShowDailyLimitModal(false)}
51-
/>
5246
<div className='p2p-v2-my-profile-balance'>
53-
<div className='p2p-v2-my-profile-balance__amount'>
47+
<div className='p2p-v2-my-profile-balance__amount' data-testid='dt_p2p_v2_available_balance_amount'>
5448
<div>
5549
<Text color='less-prominent' size={isDesktop ? 'sm' : 'xs'}>
5650
Available Deriv P2P Balance
5751
</Text>
5852
<LabelPairedCircleInfoMdRegularIcon
5953
className='cursor-pointer fill-gray-400'
54+
data-testid='dt_p2p_v2_available_balance_icon'
6055
onClick={() => setShouldShowAvailableBalanceModal(true)}
6156
/>
6257
</div>
@@ -70,7 +65,7 @@ const MyProfileBalance = () => {
7065
<div className='p2p-v2-my-profile-balance__item' key={type}>
7166
<Text size={isDesktop ? 'sm' : 'xs'}>{type}</Text>
7267
<div className='p2p-v2-my-profile-balance__item-limits'>
73-
<div>
68+
<div data-testid={`dt_p2p_v2_profile_balance_daily_${type.toLowerCase()}_limit`}>
7469
<Text color='less-prominent' size={isDesktop ? 'sm' : 'xs'}>
7570
Daily limit
7671
</Text>
@@ -82,7 +77,9 @@ const MyProfileBalance = () => {
8277
{dailyLimit}
8378
</Text>
8479
</div>
85-
<div>
80+
<div
81+
data-testid={`dt_p2p_v2_profile_balance_available_${type.toLowerCase()}_limit`}
82+
>
8683
<Text color='less-prominent' size={isDesktop ? 'sm' : 'xs'}>
8784
Available
8885
</Text>

‎packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/__tests__/MyProfileBalance.spec.tsx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import React from 'react';
2+
import { APIProvider } from '@deriv/api';
3+
import { render, screen, within } from '@testing-library/react';
4+
import userEvent from '@testing-library/user-event';
5+
import MyProfileBalance from '../MyProfileBalance';
6+
7+
const wrapper = ({ children }: { children: JSX.Element }) => (
8+
<APIProvider>
9+
<div id='v2_modal_root' />
10+
{children}
11+
</APIProvider>
12+
);
13+
14+
let mockUseAdvertiserStats = {
15+
data: {
16+
balance_available: 50000,
17+
daily_buy_limit: 500,
18+
daily_sell_limit: 500,
19+
dailyAvailableBuyLimit: 10,
20+
dailyAvailableSellLimit: 10,
21+
fullName: 'Jane Doe',
22+
isEligibleForLimitUpgrade: false,
23+
name: 'Jane',
24+
show_name: 0,
25+
},
26+
isLoading: false,
27+
};
28+
const mockUseActiveAccount = {
29+
data: {
30+
currency: 'USD',
31+
},
32+
isLoading: false,
33+
};
34+
35+
jest.mock('@/hooks', () => ({
36+
...jest.requireActual('@/hooks'),
37+
useAdvertiserStats: jest.fn(() => mockUseAdvertiserStats),
38+
}));
39+
40+
jest.mock('@deriv/api', () => ({
41+
...jest.requireActual('@deriv/api'),
42+
useActiveAccount: jest.fn(() => mockUseActiveAccount),
43+
}));
44+
45+
describe('MyProfileBalance', () => {
46+
it('should render the correct balance', () => {
47+
render(<MyProfileBalance />, { wrapper });
48+
const availableBalanceNode = screen.getByTestId('dt_p2p_v2_available_balance_amount');
49+
expect(within(availableBalanceNode).getByText('50,000.00 USD')).toBeInTheDocument();
50+
51+
const balanceInfoIcon = screen.getByTestId('dt_p2p_v2_available_balance_icon');
52+
userEvent.click(balanceInfoIcon);
53+
expect(screen.getByTestId('dt_p2p_v2_available_p2p_balance_modal')).toBeInTheDocument();
54+
const okButton = screen.getByRole('button', {
55+
name: 'Ok',
56+
});
57+
userEvent.click(okButton);
58+
expect(screen.queryByTestId('dt_p2p_v2_available_p2p_balance_modal')).not.toBeInTheDocument();
59+
});
60+
61+
it('should render the correct limits', () => {
62+
mockUseAdvertiserStats = {
63+
data: {
64+
...mockUseAdvertiserStats.data,
65+
daily_buy_limit: 500,
66+
daily_sell_limit: 2000,
67+
dailyAvailableBuyLimit: 100,
68+
dailyAvailableSellLimit: 600,
69+
},
70+
isLoading: false,
71+
};
72+
render(<MyProfileBalance />, { wrapper });
73+
const dailyBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_buy_limit');
74+
expect(within(dailyBuyLimitNode).getByText('500 USD')).toBeInTheDocument();
75+
const availableBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_available_buy_limit');
76+
expect(within(availableBuyLimitNode).getByText('100.00 USD')).toBeInTheDocument();
77+
78+
const dailySellLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_sell_limit');
79+
expect(within(dailySellLimitNode).getByText('2000 USD')).toBeInTheDocument();
80+
const dailyAvailableSellLimit = screen.getByTestId('dt_p2p_v2_profile_balance_available_sell_limit');
81+
expect(within(dailyAvailableSellLimit).getByText('600.00 USD')).toBeInTheDocument();
82+
});
83+
it('should render eligibility for daily limit upgrade', () => {
84+
mockUseAdvertiserStats = {
85+
data: {
86+
...mockUseAdvertiserStats.data,
87+
isEligibleForLimitUpgrade: true,
88+
},
89+
isLoading: false,
90+
};
91+
render(<MyProfileBalance />, { wrapper });
92+
expect(screen.getByTestId('dt_p2p_v2_profile_daily_limit')).toBeInTheDocument();
93+
94+
const openDailyLimitModalBtn = screen.getByRole('button', {
95+
name: 'Increase my limits',
96+
});
97+
userEvent.click(openDailyLimitModalBtn);
98+
const hideDailyLimitBtn = screen.getByRole('button', {
99+
name: 'No',
100+
});
101+
userEvent.click(hideDailyLimitBtn);
102+
expect(screen.queryByTestId('dt_p2p_v2_daily_limit_modal')).not.toBeInTheDocument();
103+
});
104+
it('should render the correct default values', () => {
105+
mockUseAdvertiserStats = {
106+
// @ts-expect-error To clear the mocked values and assert the default values
107+
data: {},
108+
isLoading: false,
109+
};
110+
render(<MyProfileBalance />, { wrapper });
111+
const availableBalanceNode = screen.getByTestId('dt_p2p_v2_available_balance_amount');
112+
expect(within(availableBalanceNode).getByText('0.00 USD')).toBeInTheDocument();
113+
const dailyBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_buy_limit');
114+
expect(within(dailyBuyLimitNode).getByText('0.00 USD')).toBeInTheDocument();
115+
const availableBuyLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_available_buy_limit');
116+
expect(within(availableBuyLimitNode).getByText('0.00 USD')).toBeInTheDocument();
117+
118+
const dailySellLimitNode = screen.getByTestId('dt_p2p_v2_profile_balance_daily_sell_limit');
119+
expect(within(dailySellLimitNode).getByText('0.00 USD')).toBeInTheDocument();
120+
const dailyAvailableSellLimit = screen.getByTestId('dt_p2p_v2_profile_balance_available_sell_limit');
121+
expect(within(dailyAvailableSellLimit).getByText('0.00 USD')).toBeInTheDocument();
122+
});
123+
});

‎packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const MyProfileDailyLimit = () => {
1313

1414
return (
1515
<>
16-
<div className='p2p-v2-my-profile-daily-limit'>
16+
<div className='p2p-v2-my-profile-daily-limit' data-testid='dt_p2p_v2_profile_daily_limit'>
1717
<Text color='less-prominent' lineHeight='sm' size='xs'>
1818
Want to increase your daily limits to{' '}
1919
<Text color='less-prominent' lineHeight='sm' size='xs' weight='bold'>

0 commit comments

Comments
 (0)