From e1ea66480350b9ef45e6d731086f6d5d75c2bec9 Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie Date: Wed, 12 Oct 2022 11:30:35 +0330 Subject: [PATCH 1/3] refactor(cashier): :fire: replace `connect` method with `useStore` hook in `deposit` --- .../deposit/crypto-deposit/crypto-deposit.tsx | 43 ++---- .../deposit/deposit-locked/deposit-locked.tsx | 45 +++--- .../cashier/src/pages/deposit/deposit.tsx | 132 +++++------------- 3 files changed, 64 insertions(+), 156 deletions(-) diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx index c68409f93ddc..1e6b0c4494a9 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx @@ -3,32 +3,20 @@ import { Button, ButtonLink, Clipboard, Dropdown, Icon, Loading, Text } from '@d import { localize, Localize } from '@deriv/translations'; import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared'; import QRCode from 'qrcode.react'; -import { connect } from 'Stores/connect'; -import { TRootStore, TClientStore, TCryptoTransactionDetails } from 'Types'; +import { observer } from 'mobx-react-lite'; import RecentTransaction from 'Components/recent-transaction'; +import { useStore } from '../../../hooks'; import './crypto-deposit.scss'; -type TCryptoDeposit = { - api_error: string; - crypto_transactions: Array; - currency: TClientStore['currency']; - deposit_address: string; - is_deposit_address_loading: boolean; - recentTransactionOnMount: () => void; - pollApiForDepositAddress: (poll: boolean) => void; - setIsDeposit: (is_deposit: boolean) => void; -}; +const CryptoDeposit = () => { + const { client, modules } = useStore(); + const { cashier } = modules; + const { currency } = client; + const { onramp, transaction_history, general_store } = cashier; + const { api_error, deposit_address, is_deposit_address_loading, pollApiForDepositAddress } = onramp; + const { crypto_transactions, onMount: recentTransactionOnMount } = transaction_history; + const { setIsDeposit } = general_store; -const CryptoDeposit = ({ - api_error, - currency, - crypto_transactions, - deposit_address, - is_deposit_address_loading, - recentTransactionOnMount, - pollApiForDepositAddress, - setIsDeposit, -}: TCryptoDeposit) => { React.useEffect(() => { recentTransactionOnMount(); }, [recentTransactionOnMount]); @@ -256,13 +244,4 @@ const CryptoDeposit = ({ ); }; -export default connect(({ modules, client }: TRootStore) => ({ - api_error: modules.cashier.onramp.api_error, - crypto_transactions: modules.cashier.transaction_history.crypto_transactions, - currency: client.currency, - deposit_address: modules.cashier.onramp.deposit_address, - is_deposit_address_loading: modules.cashier.onramp.is_deposit_address_loading, - recentTransactionOnMount: modules.cashier.transaction_history.onMount, - pollApiForDepositAddress: modules.cashier.onramp.pollApiForDepositAddress, - setIsDeposit: modules.cashier.general_store.setIsDeposit, -}))(CryptoDeposit); +export default observer(CryptoDeposit); diff --git a/packages/cashier/src/pages/deposit/deposit-locked/deposit-locked.tsx b/packages/cashier/src/pages/deposit/deposit-locked/deposit-locked.tsx index 9c288b8c1cb7..65571ffa8628 100644 --- a/packages/cashier/src/pages/deposit/deposit-locked/deposit-locked.tsx +++ b/packages/cashier/src/pages/deposit/deposit-locked/deposit-locked.tsx @@ -3,29 +3,24 @@ import { useHistory } from 'react-router-dom'; import { routes, WS } from '@deriv/shared'; import { Icon, Checklist, StaticUrl, Text } from '@deriv/components'; import { Localize, localize } from '@deriv/translations'; -import { connect } from 'Stores/connect'; -import { TRootStore, TClientStore } from 'Types'; +import { observer } from 'mobx-react-lite'; import CashierLocked from 'Components/cashier-locked'; +import { useStore } from '../../../hooks'; -type TDepositLocked = { - account_status: TClientStore['account_status']; - is_financial_account: TClientStore['is_financial_account']; - is_financial_information_incomplete: TClientStore['is_financial_information_incomplete']; - is_tnc_needed: TClientStore['is_tnc_needed']; - is_trading_experience_incomplete: TClientStore['is_trading_experience_incomplete']; - onMount: () => void; - standpoint: TClientStore['standpoint']; -}; +const DepositLocked = () => { + const { client, modules } = useStore(); + const { + account_status, + is_financial_account, + is_financial_information_incomplete, + is_tnc_needed, + is_trading_experience_incomplete, + standpoint, + } = client; + const { cashier } = modules; + const { deposit } = cashier; + const { onMountDeposit: onMount } = deposit; -const DepositLocked = ({ - account_status, - is_financial_account, - is_financial_information_incomplete, - is_tnc_needed, - is_trading_experience_incomplete, - onMount, - standpoint, -}: TDepositLocked) => { // handle authentication locked const identity = account_status?.authentication?.identity; const document = account_status?.authentication?.document; @@ -114,12 +109,4 @@ const DepositLocked = ({ ); }; -export default connect(({ client, modules }: TRootStore) => ({ - account_status: client.account_status, - is_financial_account: client.is_financial_account, - is_financial_information_incomplete: client.is_financial_information_incomplete, - is_tnc_needed: client.is_tnc_needed, - is_trading_experience_incomplete: client.is_trading_experience_incomplete, - onMount: modules.cashier.deposit.onMountDeposit, - standpoint: client.standpoint, -}))(DepositLocked); +export default observer(DepositLocked); diff --git a/packages/cashier/src/pages/deposit/deposit.tsx b/packages/cashier/src/pages/deposit/deposit.tsx index aec5877593c3..35f14ccdc468 100644 --- a/packages/cashier/src/pages/deposit/deposit.tsx +++ b/packages/cashier/src/pages/deposit/deposit.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Loading } from '@deriv/components'; -import { connect } from 'Stores/connect'; -import { TRootStore, TClientStore } from 'Types'; +import { observer } from 'mobx-react-lite'; import { Real, Virtual } from 'Components/cashier-container'; import { CashierOnboarding, CashierOnboardingSideNote } from 'Components/cashier-onboarding'; import CashierLocked from 'Components/cashier-locked'; @@ -13,72 +12,44 @@ import RecentTransaction from 'Components/recent-transaction'; import CryptoDeposit from './crypto-deposit'; import DepositLocked from './deposit-locked'; import SideNote from 'Components/side-note'; +import { useStore } from '../../hooks'; type TDeposit = { - can_change_fiat_currency: TClientStore['can_change_fiat_currency']; - container: string; - crypto_transactions: Array; - currency: TClientStore['currency']; - current_currency_type: TClientStore['current_currency_type']; - clearIframe: () => void; - error: { - is_ask_uk_funds_protection?: boolean; - message?: string; - }; - iframe_height: number | string; - iframe_url: string; - is_cashier_locked: boolean; - is_cashier_onboarding: boolean; - is_crypto_transactions_visible: boolean; - is_crypto: boolean; - is_deposit_locked: boolean; - is_deposit: boolean; - is_eu: TClientStore['is_eu']; - is_loading: boolean; - is_switching: TClientStore['is_switching']; - is_system_maintenance: boolean; - is_virtual: TClientStore['is_virtual']; - landing_company_shortcode: TClientStore['landing_company_shortcode']; - onMount: () => void; - recentTransactionOnMount: () => void; - setActiveTab: (container: string) => void; - setErrorMessage: (error: string) => void; - setIsDeposit: (isDeposit: boolean) => void; setSideNotes: (notes: object | null) => void; - standpoint: TClientStore['standpoint']; - tab_index: number; }; -const Deposit = ({ - can_change_fiat_currency, - crypto_transactions, - container, - currency, - current_currency_type, - error, - is_cashier_locked, - is_cashier_onboarding, - is_crypto, - is_crypto_transactions_visible, - is_deposit, - is_deposit_locked, - is_eu, - iframe_height, - iframe_url, - clearIframe, - is_loading, - is_switching, - is_system_maintenance, - is_virtual, - landing_company_shortcode, - onMount, - recentTransactionOnMount, - setActiveTab, - setErrorMessage, - setIsDeposit, - setSideNotes, - tab_index, -}: TDeposit) => { +const Deposit = ({ setSideNotes }: TDeposit) => { + const { client, modules } = useStore(); + const { + can_change_fiat_currency, + currency, + current_currency_type, + is_eu, + is_switching, + is_virtual, + landing_company_shortcode, + } = client; + const { cashier } = modules; + const { iframe, deposit, transaction_history, general_store } = cashier; + const { clearIframe, iframe_height, iframe_url } = iframe; + const { container, error, is_deposit_locked, onMountDeposit: onMount } = deposit; + const { + crypto_transactions, + is_crypto_transactions_visible, + onMount: recentTransactionOnMount, + } = transaction_history; + const { + is_cashier_locked, + is_cashier_onboarding, + is_crypto, + is_deposit, + is_loading, + is_system_maintenance, + setActiveTab, + setIsDeposit, + cashier_route_tab_index: tab_index, + } = general_store; + const is_fiat_currency_banner_visible_for_MF_clients = landing_company_shortcode === 'maltainvest' && !is_crypto && !can_change_fiat_currency && !!iframe_height; React.useEffect(() => { @@ -93,10 +64,10 @@ const Deposit = ({ onMount(); return () => { setIsDeposit(false); - setErrorMessage(''); + error.setErrorMessage({ code: '', message: '' }); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setActiveTab, onMount, container, setErrorMessage]); + }, [setActiveTab, onMount, container, error.setErrorMessage]); React.useEffect(() => { if (typeof setSideNotes === 'function') { if (is_switching || is_deposit) setSideNotes(null); @@ -172,33 +143,4 @@ const Deposit = ({ return ; }; -export default connect(({ client, modules }: TRootStore) => ({ - can_change_fiat_currency: client.can_change_fiat_currency, - clearIframe: modules.cashier.iframe.clearIframe, - container: modules.cashier.deposit.container, - crypto_transactions: modules.cashier.transaction_history.crypto_transactions, - currency: client.currency, - current_currency_type: client.current_currency_type, - error: modules.cashier.deposit.error, - iframe_height: modules.cashier.iframe.iframe_height, - iframe_url: modules.cashier.iframe.iframe_url, - is_cashier_locked: modules.cashier.general_store.is_cashier_locked, - is_cashier_onboarding: modules.cashier.general_store.is_cashier_onboarding, - is_crypto_transactions_visible: modules.cashier.transaction_history.is_crypto_transactions_visible, - is_crypto: modules.cashier.general_store.is_crypto, - is_deposit_locked: modules.cashier.deposit.is_deposit_locked, - is_deposit: modules.cashier.general_store.is_deposit, - is_eu: client.is_eu, - is_loading: modules.cashier.general_store.is_loading, - is_switching: client.is_switching, - is_system_maintenance: modules.cashier.general_store.is_system_maintenance, - is_virtual: client.is_virtual, - landing_company_shortcode: client.landing_company_shortcode, - onMount: modules.cashier.deposit.onMountDeposit, - recentTransactionOnMount: modules.cashier.transaction_history.onMount, - setActiveTab: modules.cashier.general_store.setActiveTab, - setErrorMessage: modules.cashier.deposit.error.setErrorMessage, - setIsDeposit: modules.cashier.general_store.setIsDeposit, - standpoint: client.standpoint, - tab_index: modules.cashier.general_store.cashier_route_tab_index, -}))(Deposit); +export default observer(Deposit); From 6ac1a66ab6a47166d1bca273cc95cce53b70f600 Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie Date: Wed, 12 Oct 2022 14:56:32 +0330 Subject: [PATCH 2/3] fix(cashier): :white_check_mark: fix failing test due to `StoreProvider` not being provided --- .../pages/deposit/__tests__/deposit.spec.tsx | 452 ++++++++++++++++-- .../__tests__/crypto-deposit.spec.tsx | 207 ++++++-- .../__tests__/deposit-locked.spec.tsx | 177 +++---- 3 files changed, 684 insertions(+), 152 deletions(-) diff --git a/packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx b/packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx index e11e19aa9e20..966ccd55b208 100644 --- a/packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx +++ b/packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import Deposit from '../deposit'; +import { StoreProvider } from '../../../hooks'; +import { TRootStore, DeepPartial } from '../../../types'; -jest.mock('Stores/connect.js', () => ({ - __esModule: true, - default: 'mockedDefaultExport', - connect: () => Component => Component, -})); jest.mock('@deriv/components', () => ({ ...jest.requireActual('@deriv/components'), Loading: () =>
Loading
, @@ -49,102 +46,475 @@ jest.mock('../deposit-locked', () => { }); describe('', () => { - const props = { - currency: 'USD', - current_currency_type: 'fiat', - error: { is_ask_uk_funds_protection: false, message: '' }, - is_cashier_locked: false, - is_crypto_transactions_visible: false, - is_deposit: false, - is_deposit_locked: false, - is_eu: false, - is_loading: false, - is_switching: false, - is_system_maintenance: false, - is_virtual: false, - onMount: jest.fn(), - recentTransactionOnMount: jest.fn(), - setActiveTab: jest.fn(), - setIsDeposit: jest.fn(), - setErrorMessage: jest.fn(), - setSideNotes: jest.fn(), - }; - it('should render component', () => { - const { rerender } = render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + const { rerender } = render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('Loading')).toBeInTheDocument(); - rerender(); + rerender(); expect(screen.getByText('Loading')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('Virtual')).toBeInTheDocument(); }); it('should render component', () => { - const { rerender } = render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + const { rerender } = render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('CashierLocked')).toBeInTheDocument(); - rerender(); + rerender( + + ); expect(screen.getByText('CashierLocked')).toBeInTheDocument(); - rerender(); + rerender(); expect(screen.getByText('CashierLocked')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('FundsProtection')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: true, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('DepositLocked')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('CryptoTransactionsHistory')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('Error')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'BTC', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('CryptoDeposit')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('Real')).toBeInTheDocument(); }); it('should render component', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'USD', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('CashierOnboarding')).toBeInTheDocument(); }); it('should trigger "setSideNotes" callback', () => { - render(); + const mockRootStore: DeepPartial = { + client: { + currency: 'UST', + can_change_fiat_currency: false, + current_currency_type: 'fiat', + is_eu: false, + 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() }, + is_deposit_locked: false, + 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(), + }, + }, + }, + }; + + const setSideNotes = jest.fn(); + + render(, { + wrapper: ({ children }) => {children}, + }); - expect(props.setSideNotes).toHaveBeenCalledTimes(2); + expect(setSideNotes).toHaveBeenCalledTimes(2); }); }); diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx index dc642c1ef529..5275ec119998 100644 --- a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx +++ b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx @@ -4,12 +4,8 @@ import CryptoDeposit from '../crypto-deposit'; import { createBrowserHistory } from 'history'; import { Router } from 'react-router'; import { getCurrencyName, isMobile } from '@deriv/shared'; - -jest.mock('Stores/connect.js', () => ({ - __esModule: true, - default: 'mockedDefaultExport', - connect: () => Component => Component, -})); +import { StoreProvider } from '../../../../hooks'; +import { TRootStore, DeepPartial } from '../../../../types'; jest.mock('@deriv/components', () => ({ ...jest.requireActual('@deriv/components'), @@ -33,30 +29,67 @@ jest.mock('Components/recent-transaction', () => { describe('', () => { let history; - const renderWithRouter = component => { + const renderWithRouter = (component, mockRootStore) => { history = createBrowserHistory(); - return render({component}); - }; - - const props = { - api_error: '', - crypto_transactions: [{}], - currency: 'BTC', - deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', - is_deposit_address_loading: false, - pollApiForDepositAddress: jest.fn(), - recentTransactionOnMount: jest.fn(), - setIsDeposit: jest.fn(), + return render({component}, { + wrapper: ({ children }) => {children}, + }); }; it('should show loader', () => { - renderWithRouter(); + const mockRootStore: DeepPartial = { + client: { + currency: 'BTC', + }, + modules: { + cashier: { + onramp: { + is_deposit_address_loading: true, + api_error: '', + deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', + pollApiForDepositAddress: jest.fn(), + }, + transaction_history: { + crypto_transactions: [{}], + onMount: jest.fn(), + }, + general_store: { + setIsDeposit: jest.fn(), + }, + }, + }, + }; + + renderWithRouter(, mockRootStore); expect(screen.getByText('Loading')).toBeInTheDocument(); }); it('should show proper error message and button', () => { - renderWithRouter(); + const mockRootStore: DeepPartial = { + client: { + currency: 'BTC', + }, + modules: { + cashier: { + onramp: { + is_deposit_address_loading: false, + api_error: 'api_error', + deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', + pollApiForDepositAddress: jest.fn(), + }, + transaction_history: { + crypto_transactions: [{}], + onMount: jest.fn(), + }, + general_store: { + setIsDeposit: jest.fn(), + }, + }, + }, + }; + + renderWithRouter(, mockRootStore); expect( screen.getByText( @@ -67,17 +100,63 @@ describe('', () => { }); it('should trigger onClick callback when the user clicks "Refresh" button', () => { - renderWithRouter(); + const mockRootStore: DeepPartial = { + client: { + currency: 'BTC', + }, + modules: { + cashier: { + onramp: { + is_deposit_address_loading: false, + api_error: 'api_error', + deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', + pollApiForDepositAddress: jest.fn(), + }, + transaction_history: { + crypto_transactions: [{}], + onMount: jest.fn(), + }, + general_store: { + setIsDeposit: jest.fn(), + }, + }, + }, + }; + + renderWithRouter(, mockRootStore); const refresh_btn = screen.getByRole('button', { name: 'Refresh' }); fireEvent.click(refresh_btn); - expect(props.pollApiForDepositAddress).toHaveBeenCalledTimes(2); + expect(mockRootStore.modules!.cashier!.onramp!.pollApiForDepositAddress).toHaveBeenCalledTimes(2); }); it('should show proper messages for BTC cryptocurrency', () => { + const mockRootStore: DeepPartial = { + client: { + currency: 'BTC', + }, + modules: { + cashier: { + onramp: { + is_deposit_address_loading: false, + api_error: '', + deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', + pollApiForDepositAddress: jest.fn(), + }, + transaction_history: { + crypto_transactions: [{}], + onMount: jest.fn(), + }, + general_store: { + setIsDeposit: jest.fn(), + }, + }, + }, + }; + (getCurrencyName as jest.Mock).mockReturnValueOnce('Bitcoin'); - renderWithRouter(); + renderWithRouter(, mockRootStore); expect(screen.getByText('Send only Bitcoin (BTC) to this address.')).toBeInTheDocument(); expect( @@ -93,8 +172,31 @@ describe('', () => { }); it('should show proper messages for ETH cryptocurrency', () => { + const mockRootStore: DeepPartial = { + client: { + currency: 'ETH', + }, + modules: { + cashier: { + onramp: { + is_deposit_address_loading: false, + api_error: '', + deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', + pollApiForDepositAddress: jest.fn(), + }, + transaction_history: { + crypto_transactions: [{}], + onMount: jest.fn(), + }, + general_store: { + setIsDeposit: jest.fn(), + }, + }, + }, + }; + (getCurrencyName as jest.Mock).mockReturnValueOnce('Ethereum'); - renderWithRouter(); + renderWithRouter(, mockRootStore); expect(screen.getByText('Send only Ethereum (ETH) to this address.')).toBeInTheDocument(); expect( @@ -105,11 +207,34 @@ describe('', () => { it('should show proper messages for selected options for ETH, USDC, eUSDT cryptocurrency', () => { const checkMessagesForOptions = (currency, token) => { - const { rerender, unmount } = renderWithRouter(); + const mockRootStore: DeepPartial = { + client: { + currency, + }, + modules: { + cashier: { + onramp: { + is_deposit_address_loading: false, + api_error: '', + deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', + pollApiForDepositAddress: jest.fn(), + }, + transaction_history: { + crypto_transactions: [{}], + onMount: jest.fn(), + }, + general_store: { + setIsDeposit: jest.fn(), + }, + }, + }, + }; + + const { rerender, unmount } = renderWithRouter(, mockRootStore); const rerenderAndOpenDropdownOptions = () => { rerender( - + ); const dropdown_display = screen.getByTestId('dti_dropdown_display'); @@ -208,11 +333,35 @@ describe('', () => { }); it('should show "RecentTransactions" in Mobile mode', () => { + const mockRootStore: DeepPartial = { + client: { + currency: 'BTC', + }, + modules: { + cashier: { + onramp: { + is_deposit_address_loading: false, + api_error: '', + deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', + pollApiForDepositAddress: jest.fn(), + }, + transaction_history: { + crypto_transactions: [{}], + onMount: jest.fn(), + }, + general_store: { + setIsDeposit: jest.fn(), + }, + }, + }, + }; + (isMobile as jest.Mock).mockReturnValue(true); render( - - + + , + { wrapper: ({ children }) => {children} } ); expect(screen.getByText('RecentTransactions')).toBeInTheDocument(); diff --git a/packages/cashier/src/pages/deposit/deposit-locked/__tests__/deposit-locked.spec.tsx b/packages/cashier/src/pages/deposit/deposit-locked/__tests__/deposit-locked.spec.tsx index 5950e449e525..968af0c1db09 100644 --- a/packages/cashier/src/pages/deposit/deposit-locked/__tests__/deposit-locked.spec.tsx +++ b/packages/cashier/src/pages/deposit/deposit-locked/__tests__/deposit-locked.spec.tsx @@ -2,98 +2,106 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; import { Checklist } from '@deriv/components'; import DepositLocked from '../deposit-locked'; +import { StoreProvider } from '../../../../hooks'; +import { TRootStore, DeepPartial } from '../../../../types'; -jest.mock('Stores/connect', () => ({ - __esModule: true, - default: 'mockedDefaultExport', - connect: () => Component => Component, -})); +jest.mock('Components/cashier-locked', () => { + const CashierLocked = () => ( +
+
+ We were unable to verify your information automatically. To enable this function, you must complete the + following: +
+
Complete the financial assessment form
+
+ ); + return CashierLocked; +}); describe('', () => { - const onMount = jest.fn(); - const standpoint = { - iom: false, - }; - const account_status = { - authentication: { - identity: { - status: '', - }, - document: { - status: '', - }, - needs_verification: [], - }, - }; - it('should show the proof of identity document verification message', () => { - const poi_account_status = { - authentication: { - identity: { - status: 'pending', + const mockRootStore: DeepPartial = { + client: { + account_status: { + cashier_validation: [], + authentication: { + identity: { + status: 'pending', + }, + document: { + status: 'none', + }, + needs_verification: ['identity'], + }, }, - document: { - status: 'none', - }, - needs_verification: ['identity'], + standpoint: { iom: undefined }, + is_tnc_needed: false, + is_financial_information_incomplete: false, + is_trading_experience_incomplete: false, + is_financial_account: false, }, + modules: { cashier: { deposit: { onMountDeposit: jest.fn() } } }, }; - render( - - ); + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('To enable this feature you must complete the following:')).toBeInTheDocument(); expect(screen.getByText('Check proof of identity document verification status')).toBeInTheDocument(); }); it('should show the proof of address document verification message', () => { - const poa_account_status = { - authentication: { - identity: { - status: 'none', + const mockRootStore: DeepPartial = { + client: { + account_status: { + cashier_validation: [], + authentication: { + identity: { + status: 'none', + }, + document: { + status: 'pending', + }, + needs_verification: ['document'], + }, }, - document: { - status: 'pending', - }, - needs_verification: ['document'], + standpoint: { iom: undefined }, + is_tnc_needed: false, + is_financial_information_incomplete: false, + is_trading_experience_incomplete: false, + is_financial_account: false, }, + modules: { cashier: { deposit: { onMountDeposit: jest.fn() } } }, }; - render( - - ); + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('To enable this feature you must complete the following:')).toBeInTheDocument(); expect(screen.getByText('Check proof of address document verification status')).toBeInTheDocument(); }); it('should show the terms and conditions accept button', () => { - render( - - ); + const mockRootStore: DeepPartial = { + client: { + account_status: { + cashier_validation: [], + authentication: {}, + }, + standpoint: { iom: undefined }, + is_tnc_needed: true, + is_financial_information_incomplete: false, + is_trading_experience_incomplete: false, + is_financial_account: false, + }, + modules: { cashier: { deposit: { onMountDeposit: jest.fn() } } }, + }; + + render(, { + wrapper: ({ children }) => {children}, + }); expect(screen.getByText('To enable this feature you must complete the following:')).toBeInTheDocument(); expect( @@ -104,19 +112,24 @@ describe('', () => { }); it('should show the financial assessment completion message', () => { - standpoint.iom = true; + const mockRootStore: DeepPartial = { + client: { + account_status: { + cashier_validation: [], + authentication: {}, + }, + standpoint: { iom: 'true' }, + is_tnc_needed: false, + is_financial_information_incomplete: true, + is_trading_experience_incomplete: false, + is_financial_account: false, + }, + modules: { cashier: { deposit: { onMountDeposit: jest.fn() } } }, + }; - render( - - ); + render(, { + wrapper: ({ children }) => {children}, + }); expect( screen.getByText( From 2e07b90401ca5fd7eb04a5c2223e3e465622eeaf Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie Date: Wed, 12 Oct 2022 17:29:51 +0330 Subject: [PATCH 3/3] Trigger Build