From dc88aed06f0d03c458f2716bf0d9ac033e110c3a Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Tue, 25 Apr 2023 11:41:19 +0800 Subject: [PATCH 1/4] chore: test case for jurisdiction card --- .../__test__/jurisdiction-card.spec.tsx | 264 ++++++++++++++++++ .../jurisdiction-modal/jurisdiction-card.tsx | 1 + 2 files changed, 265 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx new file mode 100644 index 000000000000..67e78711c6a0 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx @@ -0,0 +1,264 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import RootStore from 'Stores/index'; +import JurisdictionCard from '../jurisdiction-card'; +import { Jurisdiction } from '@deriv/shared'; + +describe('JurisdictionCard', () => { + const mock_store = { + common: {}, + client: {}, + ui: {}, + }; + const mock_context = new RootStore(mock_store); + let mock_props = { + account_type: 'financial', + disabled: false, + context: mock_context, + jurisdiction_selected_shortcode: '', + setJurisdictionSelectedShortcode: jest.fn(), + type_of_card: Jurisdiction.SVG, + financial_available_accounts: [ + { + market_type: 'financial' as const, + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: Jurisdiction.SVG, + sub_account_type: '', + }, + ], + synthetic_available_accounts: [ + { + market_type: 'gaming' as const, + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: Jurisdiction.SVG, + sub_account_type: '', + }, + ], + card_flip_status: { + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }, + flipCard: jest.fn(), + }; + beforeEach(() => { + mock_props = { + account_type: 'financial', + disabled: false, + context: mock_context, + jurisdiction_selected_shortcode: '', + setJurisdictionSelectedShortcode: jest.fn(), + type_of_card: Jurisdiction.SVG, + financial_available_accounts: [ + { + market_type: 'financial' as const, + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: Jurisdiction.SVG, + sub_account_type: '', + }, + ], + synthetic_available_accounts: [ + { + market_type: 'gaming' as const, + name: '', + requirements: { + after_first_deposit: { + financial_assessment: [''], + }, + compliance: { + mt5: [''], + tax_information: [''], + }, + signup: [''], + }, + shortcode: Jurisdiction.SVG, + sub_account_type: '', + }, + ], + card_flip_status: { + svg: false, + bvi: false, + vanuatu: false, + labuan: false, + maltainvest: false, + }, + flipCard: jest.fn(), + }; + }); + + it('should render JurisdictionCard with svg card', () => { + render(); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('170+')).toBeInTheDocument(); + expect(screen.getByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Spreads from')).toBeInTheDocument(); + expect(screen.getByText('0.6 pips')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); + }); + + it('should render JurisdictionCard with vanuatu card', () => { + mock_props.type_of_card = Jurisdiction.VANUATU; + render(); + expect(screen.getByText('Vanuatu')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('90+')).toBeInTheDocument(); + expect(screen.getByText('Forex, Stock indices, Commodities and Cryptocurrencies')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Spreads from')).toBeInTheDocument(); + expect(screen.getByText('0.5 pips')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect(screen.getByText('Learn more')).toBeInTheDocument(); + expect(screen.getByText('about verifications needed.')).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Vanuatu Financial Services Commission')).toBeInTheDocument(); + }); + + it('should render JurisdictionCard with maltainvest card', () => { + mock_props.type_of_card = Jurisdiction.MALTA_INVEST; + render(); + expect(screen.getByText('Malta')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('140+')).toBeInTheDocument(); + expect( + screen.getByText('Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies') + ).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:30')).toBeInTheDocument(); + expect(screen.getByText('Spreads from')).toBeInTheDocument(); + expect(screen.getByText('0.5 pips')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect(screen.getByText('Learn more')).toBeInTheDocument(); + expect(screen.getByText('about verifications needed.')).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect( + screen.getByText('Malta Financial Services Authority (MFSA) (licence no. IS/70156)') + ).toBeInTheDocument(); + }); + + it('should render JurisdictionCard with bvi card', () => { + mock_props.type_of_card = Jurisdiction.BVI; + render(); + expect(screen.getByText('British Virgin Islands')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('170+')).toBeInTheDocument(); + expect(screen.getByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Spreads from')).toBeInTheDocument(); + expect(screen.getByText('0.5 pips')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect(screen.getByText('Learn more')).toBeInTheDocument(); + expect(screen.getByText('about verifications needed.')).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect( + screen.getByText('British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)') + ).toBeInTheDocument(); + }); + + it('should render JurisdictionCard with labuan card', () => { + mock_props.type_of_card = Jurisdiction.LABUAN; + render(); + expect(screen.getByText('Straight-through processing')).toBeInTheDocument(); + expect(screen.getByText('Labuan')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('90+')).toBeInTheDocument(); + expect(screen.getByText('Forex and Cryptocurrencies')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:100')).toBeInTheDocument(); + expect(screen.getByText('Spreads from')).toBeInTheDocument(); + expect(screen.getByText('0.6 pips')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect(screen.getByText('Learn more')).toBeInTheDocument(); + expect(screen.getByText('about verifications needed.')).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Labuan Financial Services Authority (licence no. MB/18/0024)')).toBeInTheDocument(); + }); + + it('should render JurisdictionCard with synthetic account_type', () => { + mock_props.account_type = 'synthetic'; + render(); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('40+')).toBeInTheDocument(); + expect(screen.getByText('Synthetics, Basket indices and Derived FX')).toBeInTheDocument(); + expect(screen.getByText('Leverage')).toBeInTheDocument(); + expect(screen.getByText('1:1000')).toBeInTheDocument(); + expect(screen.getByText('Verifications')).toBeInTheDocument(); + expect( + screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.') + ).toBeInTheDocument(); + expect(screen.getByText('Regulator/EDR')).toBeInTheDocument(); + expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument(); + }); + + it('should render JurisdictionCard with disabled to be true', () => { + mock_props.disabled = true; + render(); + expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument(); + }); + + it('should render JurisdictionCard on the back', () => { + mock_props.card_flip_status.svg = true; + render(); + expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument(); + expect(screen.getByText('Your document is pending for verification.')).toBeInTheDocument(); + expect(screen.getByText('Verification failed. Resubmit during account creation.')).toBeInTheDocument(); + expect(screen.getByText('Your document is verified.')).toBeInTheDocument(); + }); + + it('should click on JurisdictionCard and render setJurisdictionSelectedShortCode function', () => { + render(); + const jurisdiction_card = screen.getByTestId('dt_jurisdiction_card'); + jurisdiction_card.click(); + expect(mock_props.setJurisdictionSelectedShortcode).toHaveBeenCalledWith('svg'); + }); + + it('should render BVI type JurisdictionCard, click on Learn more and render flipCard function', () => { + mock_props.type_of_card = Jurisdiction.BVI; + render(); + const learn_more_text = screen.getByText('Learn more'); + learn_more_text.click(); + expect(mock_props.flipCard).toHaveBeenCalledWith('bvi'); + }); +}); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index f2fe13a5e240..7fa3ae6a5968 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -36,6 +36,7 @@ const JurisdictionCard = ({ return (
Date: Wed, 26 Apr 2023 14:00:25 +0800 Subject: [PATCH 2/4] chore: edit test case based on latest update --- .../__test__/jurisdiction-card.spec.tsx | 156 ++++++------------ 1 file changed, 55 insertions(+), 101 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx index 67e78711c6a0..7d70be60557c 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx @@ -1,120 +1,75 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import RootStore from 'Stores/index'; import JurisdictionCard from '../jurisdiction-card'; import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionCard', () => { - const mock_store = { - common: {}, - client: {}, - ui: {}, - }; - const mock_context = new RootStore(mock_store); let mock_props = { + account_status: { + authentication: { + document: { + status: 'none' as const, + }, + identity: { + services: { + idv: { + status: 'none' as const, + }, + onfido: { + status: 'none' as const, + }, + manual: { + status: 'none' as const, + }, + }, + }, + needs_verification: [], + }, + currency_config: {}, + p2p_status: 'none' as const, + prompt_client_to_authenticate: 0 as const, + risk_classification: '', + status: [''], + }, account_type: 'financial', disabled: false, - context: mock_context, jurisdiction_selected_shortcode: '', setJurisdictionSelectedShortcode: jest.fn(), type_of_card: Jurisdiction.SVG, - financial_available_accounts: [ - { - market_type: 'financial' as const, - name: '', - requirements: { - after_first_deposit: { - financial_assessment: [''], - }, - compliance: { - mt5: [''], - tax_information: [''], - }, - signup: [''], - }, - shortcode: Jurisdiction.SVG, - sub_account_type: '', - }, - ], - synthetic_available_accounts: [ - { - market_type: 'gaming' as const, - name: '', - requirements: { - after_first_deposit: { - financial_assessment: [''], + }; + beforeEach(() => { + mock_props = { + account_status: { + authentication: { + document: { + status: 'none' as const, }, - compliance: { - mt5: [''], - tax_information: [''], + identity: { + services: { + idv: { + status: 'none' as const, + }, + onfido: { + status: 'none' as const, + }, + manual: { + status: 'none' as const, + }, + }, }, - signup: [''], + needs_verification: [], }, - shortcode: Jurisdiction.SVG, - sub_account_type: '', + currency_config: {}, + p2p_status: 'none' as const, + prompt_client_to_authenticate: 0 as const, + risk_classification: '', + status: [''], }, - ], - card_flip_status: { - svg: false, - bvi: false, - vanuatu: false, - labuan: false, - maltainvest: false, - }, - flipCard: jest.fn(), - }; - beforeEach(() => { - mock_props = { account_type: 'financial', disabled: false, - context: mock_context, jurisdiction_selected_shortcode: '', setJurisdictionSelectedShortcode: jest.fn(), type_of_card: Jurisdiction.SVG, - financial_available_accounts: [ - { - market_type: 'financial' as const, - name: '', - requirements: { - after_first_deposit: { - financial_assessment: [''], - }, - compliance: { - mt5: [''], - tax_information: [''], - }, - signup: [''], - }, - shortcode: Jurisdiction.SVG, - sub_account_type: '', - }, - ], - synthetic_available_accounts: [ - { - market_type: 'gaming' as const, - name: '', - requirements: { - after_first_deposit: { - financial_assessment: [''], - }, - compliance: { - mt5: [''], - tax_information: [''], - }, - signup: [''], - }, - shortcode: Jurisdiction.SVG, - sub_account_type: '', - }, - ], - card_flip_status: { - svg: false, - bvi: false, - vanuatu: false, - labuan: false, - maltainvest: false, - }, - flipCard: jest.fn(), }; }); @@ -239,7 +194,6 @@ describe('JurisdictionCard', () => { }); it('should render JurisdictionCard on the back', () => { - mock_props.card_flip_status.svg = true; render(); expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument(); expect(screen.getByText('Your document is pending for verification.')).toBeInTheDocument(); @@ -254,11 +208,11 @@ describe('JurisdictionCard', () => { expect(mock_props.setJurisdictionSelectedShortcode).toHaveBeenCalledWith('svg'); }); - it('should render BVI type JurisdictionCard, click on Learn more and render flipCard function', () => { + it('should click on Learn More and include cfd-card-flipped into classnames', () => { mock_props.type_of_card = Jurisdiction.BVI; render(); - const learn_more_text = screen.getByText('Learn more'); - learn_more_text.click(); - expect(mock_props.flipCard).toHaveBeenCalledWith('bvi'); + const learn_more = screen.getByText('Learn more'); + learn_more.click(); + expect(screen.getByTestId('dt_jurisdiction_card')).toHaveClass('cfd-card-flipped'); }); }); From 50069cf7486cabfd6b37fab2b2ca6336b1623a14 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 27 Apr 2023 11:54:31 +0800 Subject: [PATCH 3/4] chore: remove object type declaration for data-testid --- .../cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx index 60961842e8dd..f4ba50fbcda7 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx @@ -35,7 +35,7 @@ const JurisdictionCard = ({ return (
Date: Thu, 27 Apr 2023 14:20:02 +0800 Subject: [PATCH 4/4] chore: remove all as const --- .../__test__/jurisdiction-card.spec.tsx | 62 +++++++++++++++---- 1 file changed, 49 insertions(+), 13 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx index 7d70be60557c..ef220ceb09c2 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx @@ -4,30 +4,66 @@ import JurisdictionCard from '../jurisdiction-card'; import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionCard', () => { - let mock_props = { + type TMockProps = { account_status: { authentication: { document: { - status: 'none' as const, + status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected'; + }; + identity: { + services: { + idv: { + status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected'; + }; + onfido: { + status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected'; + }; + manual: { + status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected'; + }; + }; + }; + needs_verification: string[]; + }; + currency_config: { + [k: string]: { is_deposit_suspended?: 0 | 1 | undefined; is_withdrawal_suspended?: 0 | 1 | undefined }; + }; + p2p_status: 'none' | 'active' | 'temp_ban' | 'perm_ban'; + prompt_client_to_authenticate: 0 | 1; + risk_classification: string; + status: string[]; + }; + account_type: 'financial' | 'synthetic'; + disabled: boolean; + jurisdiction_selected_shortcode: string; + setJurisdictionSelectedShortcode: jest.Mock; + type_of_card: 'svg' | 'bvi' | 'labuan' | 'maltainvest' | 'vanuatu'; + }; + + let mock_props: TMockProps = { + account_status: { + authentication: { + document: { + status: 'none', }, identity: { services: { idv: { - status: 'none' as const, + status: 'none', }, onfido: { - status: 'none' as const, + status: 'none', }, manual: { - status: 'none' as const, + status: 'none', }, }, }, needs_verification: [], }, currency_config: {}, - p2p_status: 'none' as const, - prompt_client_to_authenticate: 0 as const, + p2p_status: 'none', + prompt_client_to_authenticate: 0, risk_classification: '', status: [''], }, @@ -42,26 +78,26 @@ describe('JurisdictionCard', () => { account_status: { authentication: { document: { - status: 'none' as const, + status: 'none', }, identity: { services: { idv: { - status: 'none' as const, + status: 'none', }, onfido: { - status: 'none' as const, + status: 'none', }, manual: { - status: 'none' as const, + status: 'none', }, }, }, needs_verification: [], }, currency_config: {}, - p2p_status: 'none' as const, - prompt_client_to_authenticate: 0 as const, + p2p_status: 'none', + prompt_client_to_authenticate: 0, risk_classification: '', status: [''], },