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 () => {