From c19a9ec0d915ec46940f204db009003bec6de580 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Tue, 18 Apr 2023 15:35:30 +0800 Subject: [PATCH 01/16] chore: test case for jurisdiction title indicator --- .../jurisdiction-title-indicator.spec.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx new file mode 100644 index 000000000000..3386eb9d1b9d --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import JurisdictionTitleIndicator from '../jurisdiction-title-indicator'; + +describe('JurisdictionTitleIndicator', () => { + type TMockProps = { + title_indicators: { + type: 'displayText' | 'displayIcons'; + display_text?: string; + display_icons?: string[]; + }; + }; + const mock_props: TMockProps = { + title_indicators: { + type: 'displayText', + display_text: 'Test Display Text', + display_icons: [], + }, + }; + it('should render JurisdictionTitleIndicator with displayText', () => { + render(); + expect(screen.getByText('Test Display Text')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons', () => { + mock_props.title_indicators.type = 'displayIcons'; + mock_props.title_indicators.display_icons = ['Test Icon']; + render(); + expect(screen.queryByText('Test Display Text')).not.toBeInTheDocument(); + expect(screen.queryByText('Test Icon')).toBeInTheDocument(); + }); +}); From 5183e2420a9bb4aea9e41bfef30965909fb5a96a Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 19 Apr 2023 16:33:21 +0800 Subject: [PATCH 02/16] chore: test case for jurisdiction card section --- .../jurisdiction-card-section.spec.tsx | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx new file mode 100644 index 000000000000..fde9a13b0567 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import JurisdictionCardSection from '../jurisdiction-card-section'; + +describe('JurisdictionCardSection', () => { + type TMockProps = { + card_section_item: { + key: string; + title: string; + title_indicators?: { + type: 'displayText'; + display_text: string; + display_text_skin_color: string; + }; + description?: string; + clickable_description?: []; + }; + toggleCardFlip: jest.Mock; + }; + const mock_props: TMockProps = { + card_section_item: { + key: '', + title: 'Test Title', + title_indicators: { + type: 'displayText' as const, + display_text: 'Test Title Indicators Text', + display_text_skin_color: '', + }, + description: 'Test Description', + }, + toggleCardFlip: jest.fn(), + }; + + it('should render JurisdictionCardSection component', () => { + render(); + expect(screen.getByText('Test Title')).toBeInTheDocument(); + expect(screen.getByText('Test Title Indicators Text')).toBeInTheDocument(); + expect(screen.getByText('Test Description')).toBeInTheDocument(); + }); + + it('should render JurisdictionCardSection component with clickable description', () => { + const mock_props_with_clickable_description = { + ...mock_props, + card_section_item: { + ...mock_props.card_section_item, + clickable_description: [{ type: 'link' as const, text: 'Test Link' }], + }, + }; + + render(); + expect(screen.getByText('Test Title')).toBeInTheDocument(); + expect(screen.getByText('Test Title Indicators Text')).toBeInTheDocument(); + expect(screen.getByText('Test Link')).toBeInTheDocument(); + expect(screen.queryByText('Test Description')).not.toBeInTheDocument(); + }); + + it('should render JurisdictionCardSection component without displaying title indicators if it is empty', () => { + mock_props.card_section_item.title_indicators = undefined; + render(); + expect(screen.getByText('Test Title')).toBeInTheDocument(); + expect(screen.queryByText('Test Title Indicators Text')).not.toBeInTheDocument(); + expect(screen.getByText('Test Description')).toBeInTheDocument(); + }); +}); From cb425dde164c9b00a1d81cdfe152a3562dff1e38 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 20 Apr 2023 12:14:20 +0800 Subject: [PATCH 03/16] chore: test case for jurisdiction clickable description --- ...urisdiction-clickable-description.spec.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx new file mode 100644 index 000000000000..e68b39b29e1b --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import JurisdictionClickableDescription from '../jurisdiction-clickable-description'; + +describe('JurisdictionClickableDescription', () => { + const mock_props = { + clickable_description: [ + { + text: 'Click here', + type: 'link' as const, + }, + { + text: 'to learn more about the documents required for verification.', + type: 'text' as const, + }, + ], + toggleCardFlip: jest.fn(), + }; + + it('should render JurisdictionClickableDescription', () => { + render(); + expect(screen.getByText('Click here')).toBeInTheDocument(); + expect(screen.getByText('to learn more about the documents required for verification.')).toBeInTheDocument(); + }); + + it('should call toggleCardFlip when link is clicked', () => { + render(); + screen.getByText('Click here').click(); + expect(mock_props.toggleCardFlip).toHaveBeenCalled(); + }); +}); From dc88aed06f0d03c458f2716bf0d9ac033e110c3a Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Tue, 25 Apr 2023 11:41:19 +0800 Subject: [PATCH 04/16] 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 12:00:04 +0800 Subject: [PATCH 05/16] chore: updated test case based on new changes --- .../jurisdiction-title-indicator.spec.tsx | 171 +++++++++++++++++- .../jurisdiction-title-indicator.tsx | 12 +- 2 files changed, 176 insertions(+), 7 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx index 3386eb9d1b9d..40b5c35857c1 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx @@ -7,15 +7,74 @@ describe('JurisdictionTitleIndicator', () => { title_indicators: { type: 'displayText' | 'displayIcons'; display_text?: string; - display_icons?: string[]; }; + type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; + account_status: { + authentication: { + document: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + identity: { + services: { + idv: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + onfido: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + manual: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + }; + }; + needs_verification: string[]; + }; + currency_config: { + [k: string]: { + is_deposit_suspended?: 0 | 1; + is_withdrawal_suspended?: 0 | 1; + }; + }; + p2p_status: 'none'; + prompt_client_to_authenticate: 0; + risk_classification: string; + status: string[]; + }; + verification_docs: ['document_number' | 'selfie' | 'identity_document' | 'name_and_address' | 'not_applicable']; }; const mock_props: TMockProps = { title_indicators: { type: 'displayText', display_text: 'Test Display Text', - display_icons: [], }, + type_of_card: 'bvi', + 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: [''], + }, + verification_docs: ['not_applicable'], }; it('should render JurisdictionTitleIndicator with displayText', () => { render(); @@ -24,9 +83,111 @@ describe('JurisdictionTitleIndicator', () => { it('should render JurisdictionTitleIndicator with displayIcons', () => { mock_props.title_indicators.type = 'displayIcons'; - mock_props.title_indicators.display_icons = ['Test Icon']; render(); - expect(screen.queryByText('Test Display Text')).not.toBeInTheDocument(); - expect(screen.queryByText('Test Icon')).toBeInTheDocument(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Default icon variant', () => { + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['document_number']; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Default_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant', () => { + mock_props.account_status.authentication.identity.services.idv.status = 'pending'; + mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; + mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['document_number']; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant', () => { + mock_props.account_status.authentication.identity.services.idv.status = 'rejected'; + mock_props.account_status.authentication.identity.services.onfido.status = 'rejected'; + mock_props.account_status.authentication.identity.services.manual.status = 'rejected'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['document_number']; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant', () => { + mock_props.account_status.authentication.identity.services.idv.status = 'verified'; + mock_props.account_status.authentication.identity.services.onfido.status = 'verified'; + mock_props.account_status.authentication.identity.services.manual.status = 'verified'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['document_number']; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant with type_of_card to be Vanuatu', () => { + mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; + mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['selfie']; + mock_props.type_of_card = 'vanuatu'; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant with type_of_card to be MaltaInvest', () => { + mock_props.account_status.authentication.identity.services.onfido.status = 'pending'; + mock_props.account_status.authentication.identity.services.manual.status = 'pending'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['identity_document']; + mock_props.type_of_card = 'maltainvest'; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant with type_of_card to be Vanuatu', () => { + mock_props.account_status.authentication.identity.services.onfido.status = 'rejected'; + mock_props.account_status.authentication.identity.services.manual.status = 'rejected'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['selfie']; + mock_props.type_of_card = 'vanuatu'; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant with type_of_card to be Vanuatu', () => { + mock_props.account_status.authentication.identity.services.onfido.status = 'verified'; + mock_props.account_status.authentication.identity.services.manual.status = 'verified'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['selfie']; + mock_props.type_of_card = 'vanuatu'; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant when verification_document is name_and_address and type_of_card to be svg', () => { + mock_props.account_status.authentication.document.status = 'pending'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['name_and_address']; + mock_props.type_of_card = 'svg'; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant when verification_document is name_and_address and type_of_card to be svg', () => { + mock_props.account_status.authentication.document.status = 'rejected'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['name_and_address']; + mock_props.type_of_card = 'svg'; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument(); + }); + + it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant when verification_document is name_and_address and type_of_card to be svg', () => { + mock_props.account_status.authentication.document.status = 'verified'; + mock_props.title_indicators.type = 'displayIcons'; + mock_props.verification_docs = ['name_and_address']; + mock_props.type_of_card = 'svg'; + render(); + expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument(); }); }); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx index 09a4bf6ec15b..84aa42658424 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx @@ -74,9 +74,17 @@ const JurisdictionTitleIndicator = ({ {title_indicators.display_text} ) : ( -
+
{verification_docs?.map(verification_document => ( -
+
Date: Wed, 26 Apr 2023 13:22:57 +0800 Subject: [PATCH 06/16] chore: update test case based on latest update --- .../jurisdiction-card-section.spec.tsx | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx index fde9a13b0567..03bb18422ec7 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx @@ -1,9 +1,41 @@ import React from 'react'; import { screen, render } from '@testing-library/react'; import JurisdictionCardSection from '../jurisdiction-card-section'; +import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionCardSection', () => { type TMockProps = { + account_status: { + authentication: { + document: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + identity: { + services: { + idv: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + onfido: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + manual: { + status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined; + }; + }; + }; + needs_verification: string[]; + }; + currency_config: { + [k: string]: { + is_deposit_suspended?: 0 | 1; + is_withdrawal_suspended?: 0 | 1; + }; + }; + p2p_status: 'none'; + prompt_client_to_authenticate: 0; + risk_classification: string; + status: string[]; + }; card_section_item: { key: string; title: string; @@ -15,9 +47,37 @@ describe('JurisdictionCardSection', () => { description?: string; clickable_description?: []; }; + type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; toggleCardFlip: jest.Mock; + verification_docs: ['document_number' | 'selfie' | 'identity_document' | 'name_and_address' | 'not_applicable']; }; const mock_props: TMockProps = { + 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: [''], + }, card_section_item: { key: '', title: 'Test Title', @@ -28,7 +88,9 @@ describe('JurisdictionCardSection', () => { }, description: 'Test Description', }, + type_of_card: Jurisdiction.SVG, toggleCardFlip: jest.fn(), + verification_docs: ['not_applicable'], }; it('should render JurisdictionCardSection component', () => { From d8f7683861ca032ec23ea9d2688a14b1dedf1dcf Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 26 Apr 2023 13:26:24 +0800 Subject: [PATCH 07/16] chore: remove hard coded variables --- .../jurisdiction-title-indicator.spec.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx index 40b5c35857c1..d03d260cbd89 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { screen, render } from '@testing-library/react'; import JurisdictionTitleIndicator from '../jurisdiction-title-indicator'; +import { Jurisdiction } from '@deriv/shared'; describe('JurisdictionTitleIndicator', () => { type TMockProps = { @@ -47,7 +48,7 @@ describe('JurisdictionTitleIndicator', () => { type: 'displayText', display_text: 'Test Display Text', }, - type_of_card: 'bvi', + type_of_card: Jurisdiction.BVI, account_status: { authentication: { document: { @@ -129,7 +130,7 @@ describe('JurisdictionTitleIndicator', () => { mock_props.account_status.authentication.identity.services.manual.status = 'pending'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['selfie']; - mock_props.type_of_card = 'vanuatu'; + mock_props.type_of_card = Jurisdiction.VANUATU; render(); expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument(); }); @@ -139,7 +140,7 @@ describe('JurisdictionTitleIndicator', () => { mock_props.account_status.authentication.identity.services.manual.status = 'pending'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['identity_document']; - mock_props.type_of_card = 'maltainvest'; + mock_props.type_of_card = Jurisdiction.MALTA_INVEST; render(); expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument(); }); @@ -149,7 +150,7 @@ describe('JurisdictionTitleIndicator', () => { mock_props.account_status.authentication.identity.services.manual.status = 'rejected'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['selfie']; - mock_props.type_of_card = 'vanuatu'; + mock_props.type_of_card = Jurisdiction.VANUATU; render(); expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument(); }); @@ -159,7 +160,7 @@ describe('JurisdictionTitleIndicator', () => { mock_props.account_status.authentication.identity.services.manual.status = 'verified'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['selfie']; - mock_props.type_of_card = 'vanuatu'; + mock_props.type_of_card = Jurisdiction.VANUATU; render(); expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument(); }); @@ -168,7 +169,7 @@ describe('JurisdictionTitleIndicator', () => { mock_props.account_status.authentication.document.status = 'pending'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['name_and_address']; - mock_props.type_of_card = 'svg'; + mock_props.type_of_card = Jurisdiction.SVG; render(); expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument(); }); @@ -177,7 +178,7 @@ describe('JurisdictionTitleIndicator', () => { mock_props.account_status.authentication.document.status = 'rejected'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['name_and_address']; - mock_props.type_of_card = 'svg'; + mock_props.type_of_card = Jurisdiction.SVG; render(); expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument(); }); @@ -186,7 +187,7 @@ describe('JurisdictionTitleIndicator', () => { mock_props.account_status.authentication.document.status = 'verified'; mock_props.title_indicators.type = 'displayIcons'; mock_props.verification_docs = ['name_and_address']; - mock_props.type_of_card = 'svg'; + mock_props.type_of_card = Jurisdiction.SVG; render(); expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument(); }); From e59ab3552568e57779d7497f68466911a11580e1 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 26 Apr 2023 14:00:25 +0800 Subject: [PATCH 08/16] 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 5005abb649684c7ad59da7a0fa49236bcf896da0 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Wed, 26 Apr 2023 14:09:57 +0800 Subject: [PATCH 09/16] chore: test case for jurisdiction card back --- .../__test__/jurisdiction-card-back.spec.tsx | 85 +++++++++++++++++++ .../jurisdiction-card-back.tsx | 2 + 2 files changed, 87 insertions(+) create mode 100644 packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx new file mode 100644 index 000000000000..24f8ed6565a2 --- /dev/null +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import JurisdictionCardBack from '../jurisdiction-card-back'; + +describe('', () => { + type TMockProps = { + card_classname: string; + toggleCardFlip: jest.Mock; + is_card_selected: boolean; + verification_docs: ('document_number' | 'name_and_address' | 'selfie' | 'identity_document')[]; + }; + + const mock_props: TMockProps = { + card_classname: 'test_classname', + is_card_selected: false, + toggleCardFlip: jest.fn(), + verification_docs: [], + }; + + const exampleVerificationMessage = () => { + 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 render JurisdictionCardBack without any required submission if verification_docs is empty', () => { + render(); + const container = screen.getByTestId('dt_jurisdiction_card_back'); + expect(container).toHaveClass( + 'test_classname__card-content-container', + 'test_classname__card-flipped-container' + ); + expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument(); + expect(screen.queryByText('A selfie of yourself.')).not.toBeInTheDocument(); + expect(screen.queryByText('Document number (identity card, passport)')).not.toBeInTheDocument(); + expect( + screen.queryByText( + 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' + ) + ).not.toBeInTheDocument(); + expect( + screen.queryByText('A copy of your identity document (identity card, passport)') + ).not.toBeInTheDocument(); + exampleVerificationMessage(); + }); + + it('should render JurisdictionCardBack display required document_number and name_and_address submission', () => { + mock_props.verification_docs = ['document_number', 'name_and_address']; + render(); + expect(screen.queryByText('A selfie of yourself.')).not.toBeInTheDocument(); + expect( + screen.queryByText('A copy of your identity document (identity card, passport)') + ).not.toBeInTheDocument(); + expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument(); + expect(screen.getByText('Document number (identity card, passport)')).toBeInTheDocument(); + expect( + screen.getByText( + 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' + ) + ).toBeInTheDocument(); + exampleVerificationMessage(); + }); + + it('should render JurisdictionCardBack display required selfie, identity_document and name_and_address submission', () => { + mock_props.verification_docs = ['selfie', 'identity_document', 'name_and_address']; + render(); + expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument(); + expect(screen.getByText('A selfie of yourself.')).toBeInTheDocument(); + expect(screen.getByText('A copy of your identity document (identity card, passport)')).toBeInTheDocument(); + expect( + screen.getByText( + 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.' + ) + ).toBeInTheDocument(); + exampleVerificationMessage(); + expect(screen.queryByText('Document number (identity card, passport)')).not.toBeInTheDocument(); + }); + + it('should render JurisdictionCardBack and include selected_card classname if is_card_selected is true', () => { + mock_props.is_card_selected = true; + render(); + const container = screen.getByTestId('dt_jurisdiction_card_back_container'); + expect(container).toHaveClass('test_classname--selected', 'selected-card'); + }); +}); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx index 4bbfcee9c85a..52431c484a6a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx @@ -11,11 +11,13 @@ const JurisdictionCardBack = ({ verification_docs, }: TJurisdictionCardBackProps) => (
Date: Thu, 27 Apr 2023 11:43:21 +0800 Subject: [PATCH 10/16] chore: update code based on comment --- .../__test__/jurisdiction-card-back.spec.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx index 24f8ed6565a2..842819030173 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx @@ -7,7 +7,13 @@ describe('', () => { card_classname: string; toggleCardFlip: jest.Mock; is_card_selected: boolean; - verification_docs: ('document_number' | 'name_and_address' | 'selfie' | 'identity_document')[]; + verification_docs: ( + | 'document_number' + | 'name_and_address' + | 'selfie' + | 'identity_document' + | 'not_applicable' + )[]; }; const mock_props: TMockProps = { From 0a91fd91715d494c4db15f61cf9ecd9f16858fae Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 27 Apr 2023 11:46:01 +0800 Subject: [PATCH 11/16] chore: remove as const from code --- .../__test__/jurisdiction-title-indicator.spec.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx index d03d260cbd89..62b6bd16aa28 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx @@ -52,26 +52,26 @@ describe('JurisdictionTitleIndicator', () => { 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: [''], }, From ae2b971032a141dc6a8d2cf2479a8be382233aca Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 27 Apr 2023 11:52:58 +0800 Subject: [PATCH 12/16] chore: remove as const from code --- .../__test__/jurisdiction-card-section.spec.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx index 03bb18422ec7..a38700c92acf 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx @@ -45,7 +45,7 @@ describe('JurisdictionCardSection', () => { display_text_skin_color: string; }; description?: string; - clickable_description?: []; + clickable_description?: [{ type: 'link' | 'text'; text: string }]; }; type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest'; toggleCardFlip: jest.Mock; @@ -55,26 +55,26 @@ describe('JurisdictionCardSection', () => { 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: [''], }, @@ -82,7 +82,7 @@ describe('JurisdictionCardSection', () => { key: '', title: 'Test Title', title_indicators: { - type: 'displayText' as const, + type: 'displayText', display_text: 'Test Title Indicators Text', display_text_skin_color: '', }, From 50069cf7486cabfd6b37fab2b2ca6336b1623a14 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 27 Apr 2023 11:54:31 +0800 Subject: [PATCH 13/16] 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 12:02:39 +0800 Subject: [PATCH 14/16] chore: added extra check for className for clickable description --- .../__test__/jurisdiction-clickable-description.spec.tsx | 2 ++ .../jurisdiction-clickable-description.tsx | 7 ++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx index e68b39b29e1b..b2694155ba7e 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx @@ -19,6 +19,8 @@ describe('JurisdictionClickableDescription', () => { it('should render JurisdictionClickableDescription', () => { render(); + const container = screen.getByTestId('dt_jurisdiction_clickable_description'); + expect(container).toHaveClass('cfd-card-clickable-description-link'); expect(screen.getByText('Click here')).toBeInTheDocument(); expect(screen.getByText('to learn more about the documents required for verification.')).toBeInTheDocument(); }); diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx index 2db1f1553da8..81d5aa1b502a 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx @@ -10,7 +10,12 @@ const JurisdictionClickableDescription = ({ {clickable_description.map(description_part => { return description_part.type === 'link' ? ( - + {description_part.text}   From 8365d5f61460206003544c0d74ec379f8d9aa897 Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 27 Apr 2023 14:20:02 +0800 Subject: [PATCH 15/16] 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: [''], }, From 071ce457ff51b8a3e5ccf856b563dfc46f90f56c Mon Sep 17 00:00:00 2001 From: Taysuisin Date: Thu, 27 Apr 2023 14:25:44 +0800 Subject: [PATCH 16/16] chore: remove as const from code base --- .../jurisdiction-clickable-description.spec.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx index b2694155ba7e..a481b9d0f949 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx @@ -3,15 +3,21 @@ import { render, screen } from '@testing-library/react'; import JurisdictionClickableDescription from '../jurisdiction-clickable-description'; describe('JurisdictionClickableDescription', () => { - const mock_props = { + type TClickableDescription = { text: string; type: 'link' | 'text' }; + type TMockProps = { + clickable_description: TClickableDescription[]; + toggleCardFlip: jest.Mock; + }; + + const mock_props: TMockProps = { clickable_description: [ { text: 'Click here', - type: 'link' as const, + type: 'link', }, { text: 'to learn more about the documents required for verification.', - type: 'text' as const, + type: 'text', }, ], toggleCardFlip: jest.fn(),