Arshad / COJ-508 / POA Unit tests (deriv-com#13353)

* feat: added formInputfield to accounts v2

* feat: Added formdropdownfield to accounts v2

* feat: added address field validations

* feat: Added address fields in account v2 package

* fix: Make the options parameter optional in useStatesList

* refactor: Append tests, refactor constants

* fix: fix regex character duplication

* chore: update deriv-com/ui package version

* chore: change deriv ui package version

* fix: fix regex for postcode

* feat: Added Proof of Address flow

* fix: remove commented styles

* fix: remove commented code

* refactor: refactored regex and added onclick to icon

* refactor: refactored code

* refactor: export modules and useKycAuthStatus hook

* Merge branch 'master' into Arshad/COJ-508/POAForm

* refactor: remove different status components

* refactor: added route contants

* fix: fixed button and text import path and dropdown

* feat: Add loader to POAForm

* Merge branch 'master' into Arshad/COJ-508/POAForm

* Merge branch 'master' into Arshad/COJ-508/POAForm

* fix: fixed redirection button conditions

* test: Added unit tests for POAForm

* test: Updated unit tests for form fields

* feat: removed InlineMessage component in account-v2

* fix: COJ-508: POA Unit Tests (#1)

* fix: replaced empty func with jest.fn

* fix: removed validation schema from test

* fix: fixed failling unit tests

* fix: fix unit tests

packages/account-v2/src/components/DemoMessage/__tests__/DemoMessage.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useAuthorize } from '@deriv/api';
+import { render, screen } from '@testing-library/react';
+import { DemoMessage } from '../DemoMessage';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useAuthorize: jest.fn(() => ({
+        data: {
+            account_list: [
+                {
+                    is_virtual: 0,
+                },
+            ],
+        },
+    })),
+}));
+
+describe('DemoMessage', () => {
+    it('renders the demo message button if any real account', () => {
+        render(<DemoMessage />);
+        expect(screen.getByText('Switch to real account')).toBeInTheDocument();
+    });
+
+    it('renders the demo message button if no real account', () => {
+        (useAuthorize as jest.Mock).mockImplementation(() => ({
+            data: {
+                account_list: [
+                    {
+                        is_virtual: 1,
+                    },
+                ],
+            },
+        }));
+        render(<DemoMessage />);
+        expect(screen.getByText('Add a real account')).toBeInTheDocument();
+    });
+});

packages/account-v2/src/components/Dropzone/Dropzone.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable color-no-hex */
 
-.wallets-dropzone {
+.account-dropzone {
     display: flex;
     justify-content: center;
     align-items: center;

packages/account-v2/src/components/Dropzone/Dropzone.tsx

@@ -107,12 +107,12 @@ const Dropzone: React.FC<TProps> = ({
             />
             <div
                 className={classNames(
-                    'wallets-dropzone',
-                    { 'wallets-dropzone--hover': showHoverMessage },
-                    { 'wallets-dropzone--active': file }
+                    'account-dropzone',
+                    { 'account-dropzone--hover': showHoverMessage },
+                    { 'account-dropzone--active': file }
                 )}
             >
-                <div className='w-full h-full flex flex-col items-center justify-center gap-400'>
+                <div className='flex flex-col items-center justify-center w-full h-full gap-400'>
                     {showHoverMessage && <Text size='sm'>{hoverMessage}</Text>}
                     {!file && (
                         <div className='flex flex-col items-center gap-700'>
@@ -142,8 +142,8 @@ const Dropzone: React.FC<TProps> = ({
                     {file && (
                         <React.Fragment key={file.name}>
                             <div
-                                className={classNames('wallets-dropzone__thumb', {
-                                    'wallets-dropzone__thumb--has-frame': hasFrame,
+                                className={classNames('account-dropzone__thumb', {
+                                    'account-dropzone__thumb--has-frame': hasFrame,
                                 })}
                                 data-testid='dt_remove-button'
                                 style={{ backgroundImage: `url(${file.preview})` }}

packages/account-v2/src/components/FormFields/FormInputField.tsx

@@ -23,6 +23,7 @@ const FormInputField = ({ name, validationSchema, ...rest }: FormInputFieldProps
             <Input
                 {...field}
                 {...rest}
+                aria-label={rest.label}
                 autoComplete='off'
                 error={Boolean(error && touched)}
                 message={touched && error}

packages/account-v2/src/components/FormFields/__tests__/FormDocumentUploadField.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FormDocumentUploadField from '../FormDocumentUploadField';
+
+beforeAll(() => {
+    global.URL.createObjectURL = jest.fn();
+});
+
+afterAll(() => {
+    jest.clearAllMocks();
+});
+
+describe('FormDocumentUploadField', () => {
+    it('renders without errors', () => {
+        render(
+            <Formik initialValues={{ document: null }} onSubmit={jest.fn()}>
+                <FormDocumentUploadField
+                    icon={null}
+                    name='document'
+                    title='Drag and drop a file or click to browse your files.'
+                />
+            </Formik>
+        );
+
+        expect(screen.getByText('Drag and drop a file or click to browse your files.')).toBeInTheDocument();
+    });
+
+    it('updates form field value on file change', async () => {
+        const onSubmit = jest.fn();
+        let formValues = { document: null };
+        render(
+            <Formik initialValues={{ document: null }} onSubmit={onSubmit}>
+                {({ values }) => {
+                    formValues = values;
+                    return (
+                        <Form>
+                            <FormDocumentUploadField icon={null} name='document' />
+                        </Form>
+                    );
+                }}
+            </Formik>
+        );
+
+        const file = new File(['test file content'], 'test-file.txt', { type: 'text/plain' });
+
+        await waitFor(() => {
+            const input = screen.getByTestId('dt_dropzone-input');
+            userEvent.upload(input, file);
+        });
+
+        expect(formValues?.document).toEqual(file);
+    });
+});

packages/account-v2/src/components/FormFields/__tests__/FormDropDownField.spec.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FormDropDownField from '../FormDropDownField';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+describe('FormDropDownField', () => {
+    it('should render the dropdown field', () => {
+        render(
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
+                <Form>
+                    <FormDropDownField list={[]} name='testField' />
+                </Form>
+            </Formik>
+        );
+
+        // Assert that the dropdown field is rendered
+        const dropdownField = screen.getByRole('combobox');
+        expect(dropdownField).toBeInTheDocument();
+    });
+
+    it('should update the field value when an option is selected', () => {
+        let formValues = { testField: '' };
+        render(
+            <Formik initialValues={{ testField: '' }} onSubmit={jest.fn()}>
+                {({ values }) => {
+                    formValues = values;
+                    return (
+                        <Form>
+                            <FormDropDownField list={[{ text: 'sum1', value: 'sum1' }]} name='testField' />
+                        </Form>
+                    );
+                }}
+            </Formik>
+        );
+
+        // Select an option from the dropdown
+        const dropdownField = screen.getByRole('combobox');
+        userEvent.click(dropdownField);
+        const option = screen.getByText('sum1');
+        userEvent.click(option);
+
+        // Assert that the field value is updated
+        expect(formValues.testField).toEqual('sum1');
+    });
+
+    it('should not allow values in input when isMobile flag is true', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
+        render(
+            <Formik initialValues={{ testField: '' }} onSubmit={jest.fn()}>
+                <Form>
+                    <FormDropDownField list={[{ text: 'sum1', value: 'sum1' }]} name='testField' />
+                </Form>
+            </Formik>
+        );
+
+        const dropdownField = screen.getByRole('combobox');
+        userEvent.type(dropdownField, 'su');
+        expect(dropdownField).toHaveValue('');
+    });
+});

packages/account-v2/src/components/FormFields/__tests__/FormInputField.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FormInputField from '../FormInputField';
+
+describe('FormInputField', () => {
+    it('should render the Input field', () => {
+        render(
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
+                <Form>
+                    <FormInputField label='testField' name='testField' />
+                </Form>
+            </Formik>
+        );
+
+        // Assert that the input field is rendered
+        const inputField = screen.getByLabelText('testField');
+        expect(inputField).toBeInTheDocument();
+    });
+
+    it('should update the field value when user types', () => {
+        let formValues = { testField: '' };
+        render(
+            <Formik initialValues={{ testField: '' }} onSubmit={jest.fn()}>
+                {({ values }) => {
+                    formValues = values;
+                    return (
+                        <Form>
+                            <FormInputField label='testField' name='testField' />
+                        </Form>
+                    );
+                }}
+            </Formik>
+        );
+
+        // Select an option from the input
+        const inputField = screen.getByLabelText('testField');
+        userEvent.type(inputField, 'value 1');
+
+        // Assert that the field value is updated
+        expect(formValues.testField).toEqual('value 1');
+    });
+});

packages/account-v2/src/containers/POAForm/DocumentSubmission/__tests__/DocumentSubmission.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { getExampleImagesConfig } from '../../CommonMistakeExample/CommonMistakeExampleConfig';
+import DocumentSubmission from '../DocumentSubmission';
+
+jest.mock('../../../../components/FormFields/FormDocumentUploadField', () => {
+    const FormDocumentUploadField = () => <div>FormDocumentUploadField</div>;
+    FormDocumentUploadField.displayName = 'FormDocumentUploadField';
+    return FormDocumentUploadField;
+});
+
+jest.mock('../../CommonMistakeExample/CommonMistakeExample', () => {
+    const CommonMistakeExamples = ({ description }: { description: string }) => (
+        <div data-testid='dt_common-mistake-example'>{description}</div>
+    );
+    CommonMistakeExamples.displayName = 'CommonMistakeExample';
+    return CommonMistakeExamples;
+});
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+describe('DocumentSubmission', () => {
+    beforeEach(() => {
+        render(<DocumentSubmission />);
+    });
+
+    it('renders the Document Submission title', () => {
+        expect(screen.getByText('Document Submission')).toBeInTheDocument();
+    });
+
+    it('renders the document submission instructions', () => {
+        const instructions =
+            'We accept only these types of documents as proof of address. The document must be recent (issued within last 6 months) and include your name and address:';
+        expect(screen.getByText(instructions)).toBeInTheDocument();
+    });
+
+    it('renders the list of acceptable documents', () => {
+        const listItems = [
+            'Utility bill: electricity, water, gas, or landline phone bill.',
+            'Financial, legal, or government document: recent bank statement, affidavit, or government-issued letter.',
+            'Home rental agreement: valid and current agreement.',
+        ];
+
+        listItems.forEach(item => {
+            expect(screen.getByText(item)).toBeInTheDocument();
+        });
+    });
+
+    it('renders the Common Mistake', () => {
+        expect(screen.getByText('Common Mistakes')).toBeInTheDocument();
+        const commonMistakeExamples = getExampleImagesConfig();
+        const examples = screen.getAllByTestId('dt_common-mistake-example');
+        commonMistakeExamples.forEach((example, index) => {
+            expect(examples[index]).toHaveTextContent(example.description);
+        });
+    });
+});