thisyahlen/chore: add test coverage for currency switcher card index …

…component (binary-com#8313)

* chore: add test coverage for currency switcher card index component

* fix: move up observer

---------

Co-authored-by: hirad-deriv <hirad@re-work.dev>

packages/appstore/src/components/currency-switcher-card/__tests__/index.spec.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import CurrencySwitcherCard from '../index';
+import { render } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+jest.mock('../demo/demo-account-card', () => ({
+    __esModule: true,
+    default: () => <div>DemoAccountCard</div>,
+}));
+
+jest.mock('../real/real-account-switcher', () => ({
+    __esModule: true,
+    default: () => <div>RealAccountSwitcher</div>,
+}));
+
+describe('CurrencySwitcherCard', () => {
+    it('should render empty div if user has no real account', () => {
+        const mock = mockStore({
+            traders_hub: {
+                is_real: true,
+            },
+            client: {
+                has_any_real_account: false,
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<CurrencySwitcherCard />, { wrapper });
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('should render demo account card if user is in demo', () => {
+        const mock = mockStore({
+            traders_hub: {
+                is_demo: true,
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<CurrencySwitcherCard />, { wrapper });
+        expect(container).toBeInTheDocument();
+        expect(container).toHaveTextContent('DemoAccountCard');
+    });
+
+    it('should render real account switcher if user is in real and not an eu user', () => {
+        const mock = mockStore({
+            traders_hub: {
+                is_real: true,
+                is_eu_user: false,
+            },
+            client: {
+                has_any_real_account: true,
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<CurrencySwitcherCard />, { wrapper });
+        expect(container).toBeInTheDocument();
+        expect(container).toHaveTextContent('RealAccountSwitcher');
+    });
+
+    it('should render real account switcher if user is in real and is an eu user', () => {
+        const mock = mockStore({
+            traders_hub: {
+                is_real: true,
+                is_eu_user: true,
+            },
+            client: {
+                has_maltainvest_account: true,
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<CurrencySwitcherCard />, { wrapper });
+        expect(container).toBeInTheDocument();
+        expect(container).toHaveTextContent('RealAccountSwitcher');
+    });
+});

packages/appstore/src/components/currency-switcher-card/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import DemoAccountCard from './demo/demo-account-card';
 import RealAccountSwitcher from './real/real-account-switcher';
-import { useStores } from 'Stores/index';
+import { useStore } from '@deriv/stores';
 
-const CurrencySwitcherCard = () => {
-    const { traders_hub, client } = useStores();
+const CurrencySwitcherCard = observer(() => {
+    const { traders_hub, client } = useStore();
     const { has_any_real_account, has_maltainvest_account } = client;
     const { is_real, is_demo, is_eu_user } = traders_hub;
 
@@ -19,6 +19,6 @@ const CurrencySwitcherCard = () => {
         return <DemoAccountCard />;
     }
     return null;
-};
+});
 
-export default observer(CurrencySwitcherCard);
+export default CurrencySwitcherCard;

packages/stores/src/mockStore.ts

@@ -191,6 +191,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             setTwoFAStatus: jest.fn(),
             has_changed_two_fa: false,
             setTwoFAChangedStatus: jest.fn(),
+            has_any_real_account: false,
             real_account_creation_unlock_date: 0,
         },
         common: {
@@ -265,16 +266,16 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_low_risk_cr_eu_real: false,
             is_real_wallets_upgrade_on: false,
             toggleWalletsUpgrade: jest.fn(),
+            is_demo: false,
+            financial_restricted_countries: false,
+            selected_account_type: 'real',
             no_CR_account: false,
             no_MF_account: false,
             multipliers_account_status: '',
-            selected_account_type: '',
             openFailedVerificationModal: jest.fn(),
-            financial_restricted_countries: false,
             setTogglePlatformType: jest.fn(),
             setSelectedAccount: jest.fn(),
             toggleAccountTransferModal: jest.fn(),
-            is_demo: false,
         },
         menu: {
             attach: jest.fn(),

packages/stores/types.ts

@@ -195,6 +195,7 @@ type TClientStore = {
     setTwoFAStatus: (status: boolean) => void;
     has_changed_two_fa: boolean;
     setTwoFAChangedStatus: (status: boolean) => void;
+    has_any_real_account: boolean;
     real_account_creation_unlock_date: number;
 };