Merge pull request #58 from suisin-deriv/suisin/93479/test_case_for_j…

…urisdiction_clickable_description

Suisin/chore: test case for jurisdiction clickable description

packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import JurisdictionClickableDescription from '../jurisdiction-clickable-description';
+
+describe('JurisdictionClickableDescription', () => {
+    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',
+            },
+            {
+                text: 'to learn more about the documents required for verification.',
+                type: 'text',
+            },
+        ],
+        toggleCardFlip: jest.fn(),
+    };
+
+    it('should render JurisdictionClickableDescription', () => {
+        render(<JurisdictionClickableDescription {...mock_props} />);
+        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();
+    });
+
+    it('should call toggleCardFlip when link is clicked', () => {
+        render(<JurisdictionClickableDescription {...mock_props} />);
+        screen.getByText('Click here').click();
+        expect(mock_props.toggleCardFlip).toHaveBeenCalled();
+    });
+});

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' ? (
                 <span key={description_part.text} onClick={toggleCardFlip}>
-                    <Text as='span' size='xxs' className='cfd-card-clickable-description-link'>
+                    <Text
+                        data-testid='dt_jurisdiction_clickable_description'
+                        as='span'
+                        size='xxs'
+                        className='cfd-card-clickable-description-link'
+                    >
                         {description_part.text}
                     </Text>
                     &nbsp;