Merge pull request #20 from amina-deriv/amina/feature/90115/update_ju…

…risdiction

Amina/feature/90115/update jurisdiction

packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import JurisdictionCardBack from '../jurisdiction-card-back';
+
+describe('<JurisdictionCardBack />', () => {
+    type TMockProps = {
+        card_classname: string;
+        toggleCardFlip: jest.Mock;
+        is_card_selected: boolean;
+        verification_docs: (
+            | 'document_number'
+            | 'name_and_address'
+            | 'selfie'
+            | 'identity_document'
+            | 'not_applicable'
+        )[];
+    };
+
+    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(<JurisdictionCardBack {...mock_props} />);
+        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(<JurisdictionCardBack {...mock_props} />);
+        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(<JurisdictionCardBack {...mock_props} />);
+        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(<JurisdictionCardBack {...mock_props} />);
+        const container = screen.getByTestId('dt_jurisdiction_card_back_container');
+        expect(container).toHaveClass('test_classname--selected', 'selected-card');
+    });
+});

packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx

@@ -0,0 +1,126 @@
+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;
+            title_indicators?: {
+                type: 'displayText';
+                display_text: string;
+                display_text_skin_color: string;
+            };
+            description?: string;
+            clickable_description?: [{ type: 'link' | 'text'; text: string }];
+        };
+        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',
+                },
+                identity: {
+                    services: {
+                        idv: {
+                            status: 'none',
+                        },
+                        onfido: {
+                            status: 'none',
+                        },
+                        manual: {
+                            status: 'none',
+                        },
+                    },
+                },
+                needs_verification: [],
+            },
+            currency_config: {},
+            p2p_status: 'none',
+            prompt_client_to_authenticate: 0,
+            risk_classification: '',
+            status: [''],
+        },
+        card_section_item: {
+            key: '',
+            title: 'Test Title',
+            title_indicators: {
+                type: 'displayText',
+                display_text: 'Test Title Indicators Text',
+                display_text_skin_color: '',
+            },
+            description: 'Test Description',
+        },
+        type_of_card: Jurisdiction.SVG,
+        toggleCardFlip: jest.fn(),
+        verification_docs: ['not_applicable'],
+    };
+
+    it('should render JurisdictionCardSection component', () => {
+        render(<JurisdictionCardSection {...mock_props} />);
+        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(<JurisdictionCardSection {...mock_props_with_clickable_description} />);
+        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(<JurisdictionCardSection {...mock_props} />);
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+        expect(screen.queryByText('Test Title Indicators Text')).not.toBeInTheDocument();
+        expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+});