diff --git a/packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx b/packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx new file mode 100644 index 000000000000..5c6d95a30761 --- /dev/null +++ b/packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx @@ -0,0 +1,615 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { useDepositLocked } from '@deriv/hooks'; +import { ContentFlag } from '@deriv/shared'; +import { mockStore } from '@deriv/stores'; +import CashierProviders from '../../../cashier-providers'; +import Deposit from '../deposit'; +import { TRootStore } from '../../../types'; + +jest.mock('@deriv/hooks', () => ({ + ...jest.requireActual('@deriv/hooks'), + useDepositLocked: jest.fn(() => false), +})); + +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + Loading: () =>
Loading
, +})); + +jest.mock('Components/cashier-container/virtual', () => { + const CashierContainerVirtual = () =>
Virtual
; + return CashierContainerVirtual; +}); + +jest.mock('Components/cashier-locked', () => { + const CashierLocked = () =>
CashierLocked
; + return CashierLocked; +}); + +jest.mock('Components/funds-protection', () => { + const FundsProtection = () =>
FundsProtection
; + return FundsProtection; +}); + +jest.mock('Components/crypto-transactions-history', () => { + const CryptoTransactionsHistory = () =>
CryptoTransactionsHistory
; + return CryptoTransactionsHistory; +}); + +jest.mock('Components/error', () => { + const ErrorComponent = () =>
Error
; + return ErrorComponent; +}); + +jest.mock('../crypto-deposit', () => { + const CryptoDeposit = () =>
CryptoDeposit
; + return CryptoDeposit; +}); + +jest.mock('Components/cashier-container/real', () => { + const CashierContainerReal = () =>
Real
; + return CashierContainerReal; +}); + +jest.mock('Components/cashier-onboarding/cashier-onboarding', () => { + const CashierOnboarding = () =>
CashierOnboarding
; + return CashierOnboarding; +}); + +jest.mock('../deposit-locked', () => { + const DepositLocked = () =>
DepositLocked
; + return DepositLocked; +}); + +describe('', () => { + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: true, + is_virtual: false, + }, + modules: { + cashier: { + iframe: { + iframe_url: '', + }, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + + is_deposit: false, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + const { rerender } = render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('Loading')).toBeInTheDocument(); + + rerender(); + + expect(screen.getByText('Loading')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: true, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: false, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('Virtual')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: true, + is_deposit: false, + is_loading: false, + is_system_maintenance: true, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + const { rerender } = render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('CashierLocked')).toBeInTheDocument(); + + rerender(); + + expect(screen.getByText('CashierLocked')).toBeInTheDocument(); + + rerender(); + + expect(screen.getByText('CashierLocked')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: true, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: false, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('FundsProtection')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'real', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_deposit_lock: useDepositLocked.mockReturnValue(true), + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: false, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('DepositLocked')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_deposit_lock: useDepositLocked.mockReturnValue(false), + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: true, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: false, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('CryptoTransactionsHistory')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: 'error', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: true, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('Error')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'BTC', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: false, + is_loading: false, + is_crypto: true, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { is_low_risk_cr_eu_real: true }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('CryptoDeposit')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: true, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('Real')).toBeInTheDocument(); + }); + + it('should render component', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_deposit: false, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(screen.getByText('CashierOnboarding')).toBeInTheDocument(); + }); + + it('should trigger "setSideNotes" callback', () => { + const mockRootStore = mockStore({ + client: { + mt5_login_list: [ + { + account_type: 'demo', + sub_account_type: 'financial_stp', + }, + ], + currency: 'UST', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_switching: false, + is_virtual: false, + }, + modules: { + cashier: { + iframe: {}, + transaction_history: { + crypto_transactions: [{}], + is_crypto_transactions_visible: false, + onMount: jest.fn(), + }, + deposit: { + error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() }, + onMountDeposit: jest.fn(), + }, + general_store: { + is_cashier_locked: false, + is_crypto: true, + is_deposit: true, + is_loading: false, + is_system_maintenance: false, + setActiveTab: jest.fn(), + setIsDeposit: jest.fn(), + }, + }, + }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, + }); + + const setSideNotes = jest.fn(); + + render(, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(setSideNotes).toHaveBeenCalledTimes(2); + }); +}); diff --git a/packages/cashier/src/pages/deposit/deposit.tsx b/packages/cashier/src/pages/deposit/deposit.tsx index db58053b126f..3891c56cdcf6 100644 --- a/packages/cashier/src/pages/deposit/deposit.tsx +++ b/packages/cashier/src/pages/deposit/deposit.tsx @@ -97,7 +97,7 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => { } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currency, tab_index, crypto_transactions, crypto_transactions.length, is_cashier_onboarding, iframe_height]); + }, [currency, tab_index, crypto_transactions, crypto_transactions?.length, is_cashier_onboarding, iframe_height]); if ((is_switching || (is_loading && !iframe_url)) && !is_crypto_transactions_visible) { return ; diff --git a/packages/cashier/src/stores/__tests__/general-store.spec.ts b/packages/cashier/src/stores/__tests__/general-store.spec.ts index 6ded77eb2611..c2a4027c1c16 100644 --- a/packages/cashier/src/stores/__tests__/general-store.spec.ts +++ b/packages/cashier/src/stores/__tests__/general-store.spec.ts @@ -1,6 +1,6 @@ import { configure } from 'mobx'; import { waitFor } from '@testing-library/react'; -import { routes } from '@deriv/shared'; +import { routes, ContentFlag } from '@deriv/shared'; import GeneralStore from '../general-store'; import type { TWebSocket, TRootStore } from 'Types'; @@ -76,6 +76,7 @@ beforeEach(() => { ui: { toggleSetCurrencyModal: jest.fn(), }, + traders_hub: { content_flag: ContentFlag.CR_DEMO }, }; WS = { authorized: { @@ -104,20 +105,20 @@ describe('GeneralStore', () => { expect(general_store.is_crypto).toBeTruthy(); }); - // it('should return false if is_p2p_visible equal to false when is_p2p_enabled property was called', () => { - // expect(general_store.is_p2p_enabled).toBeFalsy(); - // }); + it('should return false if is_p2p_visible equal to false when is_p2p_enabled property was called', () => { + expect(general_store.is_p2p_enabled).toBeFalsy(); + }); - // it('should return false if is_p2p_visible equal to true and the client is from eu country when is_p2p_enabled property was called', () => { - // general_store.setIsP2pVisible(true); - // general_store.root_store.client.is_eu = true; - // expect(general_store.is_p2p_enabled).toBeFalsy(); - // }); + it('should return true if is_p2p_visible equal to true and the client is not from eu country when is_p2p_enabled property was called', () => { + general_store.setIsP2pVisible(true); + expect(general_store.is_p2p_enabled).toBeTruthy(); + }); - // it('should return true if is_p2p_visible equal to true and the client is not from eu country when is_p2p_enabled property was called', () => { - // general_store.setIsP2pVisible(true); - // expect(general_store.is_p2p_enabled).toBeTruthy(); - // }); + it('should return false if is_p2p_visible equal to true and the client is from eu country when is_p2p_enabled property was called', () => { + general_store.setIsP2pVisible(true); + general_store.root_store.traders_hub.content_flag = ContentFlag.EU_REAL; + expect(general_store.is_p2p_enabled).toBeFalsy(); + }); // TODO: fix this test once website_status is called after authorized card has been released // it('should show p2p in cashier onboarding if the user account is not virtual, and he has USD account', async () => {