[COJ] Likhith/186/enhance idv form for uganda

packages/account/src/Components/forms/__tests__/idv-form.spec.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Formik } from 'formik';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import IDVForm from '../idv-form';
+import { TIDVFormValues } from 'Types';
 
 jest.mock('Helpers/utils', () => ({
     ...jest.requireActual('Helpers/utils'),
@@ -32,7 +33,7 @@ jest.mock('@deriv/shared', () => ({
 }));
 
 describe('<IDVForm/>', () => {
-    const mock_props = {
+    const mock_props: React.ComponentProps<typeof IDVForm> = {
         selected_country: {
             value: 'tc',
             identity: {
@@ -99,4 +100,62 @@ describe('<IDVForm/>', () => {
             expect(screen.queryByText('Test document 1 name')).not.toBeInTheDocument();
         });
     });
+
+    it('should render the hint messages for the selected document', async () => {
+        const new_props: React.ComponentProps<typeof IDVForm> = {
+            selected_country: {
+                value: 'tc',
+                identity: {
+                    services: {
+                        idv: {
+                            documents_supported: {
+                                document_1: {
+                                    display_name: 'Test document 1 name',
+                                    format: '5436454364243',
+                                    additional: {
+                                        display_name: 'Test document additional',
+                                        format: '001234',
+                                    },
+                                },
+                                document_2: {
+                                    display_name: 'Test document 2 name',
+                                    format: 'A54321',
+                                },
+                            },
+                            has_visual_sample: 1,
+                        },
+                    },
+                },
+            },
+        };
+
+        const new_values: TIDVFormValues = {
+            ...mock_values,
+            document_type: {
+                ...mock_values.document_type,
+                text: '12345',
+                additional: {
+                    display_name: 'Additional number',
+                    example_format: '0123456789',
+                },
+            },
+        };
+
+        render(<IDVForm {...new_props} />, {
+            wrapper: ({ children }) => (
+                <Formik initialValues={new_values} onSubmit={jest.fn()}>
+                    {() => children}
+                </Formik>
+            ),
+        });
+
+        const document_type_input = screen.getByLabelText('Choose the document type');
+
+        userEvent.click(document_type_input);
+        await waitFor(() => {
+            const el_selected_document = screen.getByText('Test document 1 name');
+            fireEvent.change(el_selected_document);
+        });
+        expect(await screen.findByText('Example: 0123456789')).toBeInTheDocument();
+    });
 });