Shayan/feq116/add test for exchange rates hooks (binary-com#8491)

* feat: adding new tests [WIP] * fix: updated exchange_store provider for test files[co-authored by farzin-deriv] * feat: new tests added [WIP] * feat: useTotalCurrency's test added * feat: test for useGetCfdAccounts added * fix: adding remaining tests [WIP] * feat: new tests added * feat: new test added * fix: fixing failed tests [WIP] * feat: all tsts added * Update packages/hooks/src/__tests__/usePlatformDemoAccount.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/usePlatformAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/usePlatformAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * fix: resolved pr comments * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAssetCurrency.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDRealAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useTotalAccountBalance.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDAllAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDAllAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDAllAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDDemoAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDDemoAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDDemoAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDRealAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/hooks/src/__tests__/useCFDRealAccounts.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * fix: fixed ts error in useTotalAccountBalance hook * fix: resolved pr comment * chore: renamed hook --------- Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>
nijil-deriv · May 24, 2023 · 7d9921d · 7d9921d
1 parent dd81757
commit 7d9921d
Show file tree

Hide file tree

Showing 17 changed files with 949 additions and 84 deletions.
diff --git a/packages/appstore/src/components/main-title-bar/asset-summary.tsx b/packages/appstore/src/components/main-title-bar/asset-summary.tsx
@@ -1,71 +1,25 @@
 import React from 'react';
-import { observer } from 'mobx-react-lite';
 import { Text, Popover } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { isMobile } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
 import BalanceText from 'Components/elements/text/balance-text';
-import { useStores } from 'Stores';
 import './asset-summary.scss';
 import TotalAssetsLoader from 'Components/pre-loader/total-assets-loader';
+import { useTotalAccountBalance, useCFDAccounts, usePlatformAccounts } from '@deriv/hooks';
 
-const AssetSummary = () => {
-    const { traders_hub, client, common } = useStores();
-    const {
-        selected_account_type,
-        platform_real_balance,
-        cfd_demo_balance,
-        platform_demo_balance,
-        cfd_real_balance,
-        is_eu_user,
-        no_CR_account,
-        no_MF_account,
-    } = traders_hub;
-    const { is_logging_in, is_switching } = client;
-    const { getExchangeRate } = common;
-
-    const [exchanged_rate_cfd_real, setExchangedRateCfdReal] = React.useState(1);
-    const [exchanged_rate_cfd_demo, setExchangedRateCfdDemo] = React.useState(1);
-
-    React.useEffect(() => {
-        const getCurrentExchangeRate = (
-            currency: string,
-            setExchangeRate: React.Dispatch<React.SetStateAction<number>>,
-            base_currency = platform_real_balance.currency
-        ) => {
-            if (currency) {
-                getExchangeRate(currency, base_currency).then((res: number) => {
-                    setExchangeRate(res);
-                });
-            }
-        };
-
-        if (cfd_real_balance.currency !== platform_real_balance.currency) {
-            getCurrentExchangeRate(cfd_real_balance.currency, setExchangedRateCfdReal);
-        }
-        if (cfd_demo_balance.currency !== platform_demo_balance.currency) {
-            getCurrentExchangeRate(cfd_demo_balance.currency, setExchangedRateCfdDemo, platform_demo_balance.currency);
-        }
-    }, [
-        cfd_demo_balance.currency,
-        cfd_real_balance.currency,
-        getExchangeRate,
-        platform_demo_balance.currency,
-        platform_real_balance.currency,
-    ]);
-
-    const getTotalBalance = () => {
-        if (selected_account_type === 'real') {
-            return {
-                balance: platform_real_balance.balance + cfd_real_balance.balance * exchanged_rate_cfd_real,
-                currency: platform_real_balance.currency,
-            };
-        }
-
-        return {
-            balance: platform_demo_balance.balance + cfd_demo_balance.balance * exchanged_rate_cfd_demo,
-            currency: platform_demo_balance.currency,
-        };
-    };
+const AssetSummary = observer(() => {
+    const { traders_hub, client } = useStore();
+    const { selected_account_type, is_eu_user, no_CR_account, no_MF_account } = traders_hub;
+    const { is_logging_in, is_switching, default_currency } = client;
+    const { real: platform_real_accounts, demo: platform_demo_account } = usePlatformAccounts();
+    const { real: cfd_real_accounts, demo: cfd_demo_accounts } = useCFDAccounts();
+    const platform_real_balance = useTotalAccountBalance(platform_real_accounts);
+    const cfd_real_balance = useTotalAccountBalance(cfd_real_accounts);
+    const cfd_demo_balance = useTotalAccountBalance(cfd_demo_accounts);
+    const is_real = selected_account_type === 'real';
+    const real_total_balance = platform_real_balance.balance + cfd_real_balance.balance;
+    const demo_total_balance = (platform_demo_account?.balance || 0) + cfd_demo_balance.balance;
 
     const has_active_related_deriv_account = !((no_CR_account && !is_eu_user) || (no_MF_account && is_eu_user)); // if selected region is non-eu, check active cr accounts, if selected region is eu- check active mf accounts
     const eu_account = is_eu_user && !no_MF_account;
@@ -98,15 +52,19 @@ const AssetSummary = () => {
                         is_bubble_hover_enabled
                     >
                         <BalanceText
-                            currency={getTotalBalance().currency}
-                            balance={getTotalBalance().balance}
+                            currency={
+                                is_real
+                                    ? platform_real_balance.currency || ''
+                                    : platform_demo_account?.currency || default_currency
+                            }
+                            balance={is_real ? real_total_balance : demo_total_balance}
                             underline_style='dotted'
                         />
                     </Popover>
                 </React.Fragment>
             ) : null}
         </div>
     );
-};
+});
 
-export default observer(AssetSummary);
+export default AssetSummary;
diff --git a/packages/hooks/src/__tests__/useCFDAccounts.spec.tsx b/packages/hooks/src/__tests__/useCFDAccounts.spec.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { renderHook } from '@testing-library/react-hooks';
+import useCFDAccounts from '../useCFDAccounts';
+
+describe('useCFDAccounts', () => {
+    test('should return empty array when client has no CFD accounts', async () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAccounts(), { wrapper });
+
+        expect(result.current.all.length).toBe(0);
+        expect(result.current.demo.length).toBe(0);
+        expect(result.current.real.length).toBe(0);
+    });
+
+    test('should return proper data when client only has CFD demo accounts', async () => {
+        const mock = mockStore({
+            client: {
+                mt5_login_list: [
+                    {
+                        account_type: 'demo',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAccounts(), { wrapper });
+
+        expect(result.current.all.length).toBe(1);
+        expect(result.current.demo.length).toBe(1);
+        expect(result.current.real.length).toBe(0);
+    });
+
+    test('should return proper data when client only has CFD real accounts', async () => {
+        const mock = mockStore({
+            client: {
+                mt5_login_list: [
+                    {
+                        account_type: 'real',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAccounts(), { wrapper });
+
+        expect(result.current.all.length).toBe(1);
+        expect(result.current.demo.length).toBe(0);
+        expect(result.current.real.length).toBe(1);
+    });
+
+    test('should return proper data when client only has both CFD real and demo accounts', async () => {
+        const mock = mockStore({
+            client: {
+                mt5_login_list: [
+                    {
+                        account_type: 'real',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+                dxtrade_accounts_list: [
+                    {
+                        account_type: 'demo',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAccounts(), { wrapper });
+
+        expect(result.current.all.length).toBe(2);
+        expect(result.current.demo.length).toBe(1);
+        expect(result.current.real.length).toBe(1);
+    });
+});
diff --git a/packages/hooks/src/__tests__/useCFDAllAccounts.spec.tsx b/packages/hooks/src/__tests__/useCFDAllAccounts.spec.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { renderHook } from '@testing-library/react-hooks';
+import useCFDAllAccounts from '../useCFDAllAccounts';
+
+describe('useCFDAllAccounts', () => {
+    test('should return empty array when client has no CFD accounts', async () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
+
+        expect(result.current.length).toBe(0);
+    });
+
+    test('should return proper data when client has MT5 accounts', async () => {
+        const mock = mockStore({
+            client: {
+                mt5_login_list: [
+                    {
+                        account_type: 'real',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
+
+        expect(result.current.length).toBe(1);
+    });
+
+    test('should return proper data when client has dxtrade accounts', async () => {
+        const mock = mockStore({
+            client: {
+                dxtrade_accounts_list: [
+                    {
+                        account_type: 'real',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
+
+        expect(result.current.length).toBe(1);
+    });
+
+    test('should return proper data when client has both MT5 and dxtrade accounts', async () => {
+        const mock = mockStore({
+            client: {
+                mt5_login_list: [
+                    {
+                        account_type: 'real',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+                dxtrade_accounts_list: [
+                    {
+                        account_type: 'real',
+                        balance: 1000,
+                        currency: 'USD',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
+
+        expect(result.current.length).toBe(2);
+    });
+});
diff --git a/packages/hooks/src/__tests__/useCFDDemoAccounts.spec.tsx b/packages/hooks/src/__tests__/useCFDDemoAccounts.spec.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { renderHook } from '@testing-library/react-hooks';
+import useCFDDemoAccounts from '../useCFDDemoAccounts';
+
+describe('useCFDDemoAccounts', () => {
+    test('should return empty array when user has no CFD accounts', async () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDDemoAccounts(), { wrapper });
+
+        expect(result.current?.length).toBe(0);
+    });
+
+    test('should return empty array when user has no CFD demo accounts', async () => {
+        const mock = mockStore({
+            client: {
+                mt5_login_list: [
+                    {
+                        account_type: 'real',
+                    },
+                ],
+                dxtrade_accounts_list: [
+                    {
+                        account_type: 'real',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDDemoAccounts(), { wrapper });
+
+        expect(result.current?.length).toBe(0);
+    });
+
+    test('should return proper data when user has CFD demo accounts', async () => {
+        const mock = mockStore({
+            client: {
+                mt5_login_list: [
+                    {
+                        account_type: 'demo',
+                    },
+                ],
+                dxtrade_accounts_list: [
+                    {
+                        account_type: 'real',
+                    },
+                    {
+                        account_type: 'demo',
+                    },
+                ],
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCFDDemoAccounts(), { wrapper });
+
+        expect(result.current?.length).toBe(2);
+    });
+});