From fdf4bbaf9c56dbfd3fb8fc3f9f0cdfa5adc1899f Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Wed, 17 May 2023 13:38:41 +0800 Subject: [PATCH] thisyahlen/chore: add test coverage for currency switcher card index component (#8313) * chore: add test coverage for currency switcher card index component * fix: move up observer --------- Co-authored-by: hirad-deriv --- .../__tests__/index.spec.tsx | 85 +++++++++++++++++++ .../currency-switcher-card/index.tsx | 10 +-- packages/stores/src/mockStore.ts | 7 +- packages/stores/types.ts | 1 + 4 files changed, 95 insertions(+), 8 deletions(-) create mode 100644 packages/appstore/src/components/currency-switcher-card/__tests__/index.spec.tsx diff --git a/packages/appstore/src/components/currency-switcher-card/__tests__/index.spec.tsx b/packages/appstore/src/components/currency-switcher-card/__tests__/index.spec.tsx new file mode 100644 index 000000000000..8ea983d0a707 --- /dev/null +++ b/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: () =>
DemoAccountCard
, +})); + +jest.mock('../real/real-account-switcher', () => ({ + __esModule: true, + default: () =>
RealAccountSwitcher
, +})); + +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 }) => ( + {children} + ); + + const { container } = render(, { 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 }) => ( + {children} + ); + + const { container } = render(, { 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 }) => ( + {children} + ); + + const { container } = render(, { 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 }) => ( + {children} + ); + + const { container } = render(, { wrapper }); + expect(container).toBeInTheDocument(); + expect(container).toHaveTextContent('RealAccountSwitcher'); + }); +}); diff --git a/packages/appstore/src/components/currency-switcher-card/index.tsx b/packages/appstore/src/components/currency-switcher-card/index.tsx index 1fe3548b5354..55255deef8f8 100644 --- a/packages/appstore/src/components/currency-switcher-card/index.tsx +++ b/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 ; } return null; -}; +}); -export default observer(CurrencySwitcherCard); +export default CurrencySwitcherCard; diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index 08b4a51dd9d6..4376c01995fe 100644 --- a/packages/stores/src/mockStore.ts +++ b/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(), diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 7e59e06a05f1..9d25f49d857b 100644 --- a/packages/stores/types.ts +++ b/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; };