chore: add pending unit tests

src/__mocks__/mock-data.ts

@@ -125,3 +125,152 @@ export const mockAdvertiserPaymentMethods = [
         used_by_orders: null,
     },
 ];
+
+export const mockCountryList = {
+    af: {
+        country_name: 'Afghanistan',
+        cross_border_ads_enabled: 1,
+        fixed_rate_adverts: 'enabled',
+        float_rate_adverts: 'disabled',
+        float_rate_offset_limit: 10,
+        local_currency: 'AFN',
+        payment_methods: {
+            alipay: {
+                display_name: 'Alipay',
+                fields: {
+                    account: {
+                        display_name: 'Alipay ID',
+                        required: 1,
+                        type: 'text',
+                    },
+                    instructions: {
+                        display_name: 'Instructions',
+                        required: 0,
+                        type: 'memo',
+                    },
+                },
+                type: 'ewallet',
+            },
+        },
+    },
+};
+
+export const mockPaymentMethods = [
+    {
+        display_name: 'Bank Transfer',
+        fields: {
+            account: {
+                display_name: 'Account Number',
+                required: 1,
+                type: 'text',
+                value: 'Account Number',
+            },
+            bank_name: { display_name: 'Bank Transfer', required: 1, type: 'text', value: 'Bank Name' },
+        },
+        id: 'test1',
+        is_enabled: 0,
+        method: '',
+        type: 'bank',
+        used_by_adverts: null,
+        used_by_orders: null,
+    },
+    {
+        display_name: 'Ali pay',
+        fields: {
+            account: {
+                display_name: 'Account Number',
+                required: 1,
+                type: 'text',
+                value: 'Account Number',
+            },
+            bank_name: { display_name: 'Ali pay', required: 1, type: 'text', value: 'Bank Name' },
+        },
+        id: 'test2',
+        is_enabled: 0,
+        method: '',
+        type: 'wallet',
+        used_by_adverts: null,
+        used_by_orders: null,
+    },
+    {
+        display_name: 'Skrill',
+        fields: {
+            account: {
+                display_name: 'Account Number',
+                required: 1,
+                type: 'text',
+                value: 'Account Number',
+            },
+            bank_name: { display_name: 'Skrill', required: 1, type: 'text', value: 'Bank Name' },
+        },
+        id: 'test3',
+        is_enabled: 0,
+        method: '',
+        type: 'wallet',
+        used_by_adverts: null,
+        used_by_orders: null,
+    },
+];
+
+export const mockAdvertiserAdvertValues = {
+    account_currency: 'USD',
+    active_orders: 0,
+    advertiser_details: {
+        completed_orders_count: 0,
+        has_not_been_recommended: false,
+        id: '34',
+        is_blocked: false,
+        is_favourite: false,
+        is_online: true,
+        is_recommended: false,
+        last_online_time: 1688480346,
+        name: 'client CR90000212',
+        rating_average: null,
+        rating_count: 0,
+        recommended_average: null,
+        recommended_count: null,
+        total_completion_rate: null,
+    },
+    amount: 22,
+    amount_display: '22.00',
+    block_trade: false,
+    contact_info: '',
+    counterparty_type: 'sell' as const,
+    country: 'id',
+    created_time: new Date(1688460999),
+    currentRateType: 'fixed' as const,
+    days_until_archive: 1,
+    description: '',
+    effective_rate: 22,
+    effective_rate_display: '22.00',
+    eligible_countries: ['ID'],
+    id: '138',
+    is_active: true,
+    is_floating: false,
+    is_visible: true,
+    local_currency: 'IDR',
+    max_order_amount: 22,
+    max_order_amount_display: '22.00',
+    max_order_amount_limit: 22,
+    max_order_amount_limit_display: '22.00',
+    min_completion_rate: 22,
+    min_join_days: 4,
+    min_order_amount: 22,
+    min_order_amount_display: '22.00',
+    min_order_amount_limit: 22,
+    min_order_amount_limit_display: '22.00',
+    min_rating: 4,
+    order_expiry_period: 900,
+    payment_info: '',
+    payment_method: null,
+    payment_method_names: ['Bank Transfer'],
+    price: 22,
+    price_display: '22.00',
+    rate: 22,
+    rate_display: '22.00',
+    rate_type: 'fixed' as const,
+    remaining_amount: 22,
+    remaining_amount_display: '22.00',
+    type: 'buy' as const,
+    visibility_status: [],
+};

src/components/CopyAdForm/CopyAdForm.scss

@@ -9,7 +9,7 @@
         position: absolute;
         top: -6rem;
         z-index: 2;
-        height: calc(100vh - 9rem);
+        height: calc(100vh - 12rem);
 
         & .mobile-wrapper__body {
             margin-top: 1.6rem;

src/components/CopyAdForm/CopyAdForm.tsx

@@ -57,14 +57,15 @@ const CopyAdForm = ({
         type,
     } = rest;
     const { floatRateOffsetLimitString, rateType } = useFloatingRate();
+
     const methods = useForm<TFormValues>({
         defaultValues: {
-            amount: amount ?? formValues.amount,
+            amount: formValues.amount || (amount ?? 0),
             'float-rate-offset-limit': floatRateOffsetLimitString,
             'max-order': formValues.maxOrder,
             'min-order': formValues.minOrder,
             'rate-type-string': rateType,
-            'rate-value': formValues.rateValue ?? rateType === RATE_TYPE.FLOAT ? '-0.01' : rateDisplay,
+            'rate-value': formValues.rateValue || (rateType === RATE_TYPE.FLOAT ? '-0.01' : rateDisplay),
         },
         mode: 'all',
     });

src/components/CopyAdForm/CopyAdFormFooter.tsx

@@ -16,6 +16,7 @@ const CopyAdFormFooter = ({ isValid, onClickCancel, onSubmit }: TCopyAdFormFoote
                 onClick={onClickCancel}
                 size='lg'
                 textSize={isMobile ? 'md' : 'sm'}
+                type='button'
                 variant='outlined'
             >
                 <Localize i18n_default_text='Cancel' />

src/components/CopyAdForm/__tests__/CopyAdForm.spec.tsx

@@ -0,0 +1,72 @@
+// import { ReactNode } from 'react';
+import { mockAdvertiserAdvertValues, mockCountryList } from '@/__mocks__/mock-data';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CopyAdForm from '../CopyAdForm';
+
+const mockProps = {
+    ...mockAdvertiserAdvertValues,
+    formValues: {
+        amount: 22,
+        maxOrder: '22',
+        minOrder: '22',
+        rateValue: '22',
+    },
+    isModalOpen: true,
+    isValid: true,
+    onClickCancel: jest.fn(),
+    onFormSubmit: jest.fn(),
+    onRequestClose: jest.fn(),
+};
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+jest.mock('@/pages/my-ads/components/AdFormInput', () => ({
+    AdFormInput: () => <div>AdFormInput</div>,
+}));
+
+jest.mock('@/pages/my-ads/components/AdFormTextArea', () => ({
+    AdFormTextArea: () => <div>AdFormTextArea</div>,
+}));
+
+jest.mock('@/hooks/custom-hooks', () => {
+    return {
+        ...jest.requireActual('@/hooks'),
+        useFloatingRate: () => ({ floatRateOffsetLimitString: '22', rateType: 'fixed' }),
+    };
+});
+
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
+        countryList: {
+            useGet: jest.fn(() => ({ data: mockCountryList })),
+        },
+    },
+}));
+
+describe('CopyAdForm', () => {
+    it('should render the form', () => {
+        render(<CopyAdForm {...mockProps} />);
+        expect(screen.getByText('Ad type')).toBeInTheDocument();
+        expect(screen.getByText('Instructions')).toBeInTheDocument();
+        expect(
+            screen.getByText('Review your settings and create a new ad. Every ad must have unique limits and rates.')
+        ).toBeInTheDocument();
+    });
+    it('should handle cancel', async () => {
+        render(<CopyAdForm {...mockProps} />);
+        const button = screen.getByRole('button', { name: 'Cancel' });
+        await userEvent.click(button);
+        expect(mockProps.onClickCancel).toHaveBeenCalled();
+    });
+    it('should handle submit', async () => {
+        render(<CopyAdForm {...mockProps} />);
+        const button = screen.getByRole('button', { name: 'Create ad' });
+        await userEvent.click(button);
+        expect(mockProps.onFormSubmit).toHaveBeenCalled();
+    });
+});

src/components/CopyAdForm/__tests__/CopyAdFormDisplayWrapper.spec.tsx

@@ -0,0 +1,29 @@
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import CopyAdFormDisplayWrapper from '../CopyAdFormDisplayWrapper';
+
+const mockProps = {
+    isModalOpen: true,
+    isValid: true,
+    onClickCancel: jest.fn(),
+    onRequestClose: jest.fn(),
+    onSubmit: jest.fn(),
+};
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+describe('CopyAdFormDisplayWrapper', () => {
+    it('should render the modal with header for desktop view', () => {
+        render(<CopyAdFormDisplayWrapper {...mockProps} />);
+        expect(screen.getByText('Create a similar ad')).toBeInTheDocument();
+    });
+    it('should render the full page mobile wrapper for mobile view', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
+        render(<CopyAdFormDisplayWrapper {...mockProps} />);
+        expect(screen.getByTestId('dt_full_page_mobile_wrapper')).toBeInTheDocument();
+        expect(screen.queryByText('Create a similar ad')).not.toBeInTheDocument();
+    });
+});

src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.tsx

@@ -8,9 +8,10 @@ import './AdCancelCreateEditModal.scss';
 type TAdCancelCreateEditModalProps = {
     isModalOpen: boolean;
     onRequestClose: () => void;
+    resetValues?: () => void;
 };
 
-const AdCancelCreateEditModal = ({ isModalOpen, onRequestClose }: TAdCancelCreateEditModalProps) => {
+const AdCancelCreateEditModal = ({ isModalOpen, onRequestClose, resetValues }: TAdCancelCreateEditModalProps) => {
     const { isMobile } = useDevice();
     const history = useHistory();
     const { queryString } = useQueryString();
@@ -46,7 +47,10 @@ const AdCancelCreateEditModal = ({ isModalOpen, onRequestClose }: TAdCancelCreat
                 <Button
                     className='border-2'
                     color='black'
-                    onClick={() => history.push(MY_ADS_URL)}
+                    onClick={() => {
+                        resetValues?.();
+                        history.push(MY_ADS_URL);
+                    }}
                     size='lg'
                     textSize={textSize}
                     variant='outlined'

src/components/Modals/AdCancelCreateEditModal/__tests__/AdCancelCreateEditModal.spec.tsx

@@ -49,4 +49,11 @@ describe('AdCancelCreateEditModal', () => {
         await userEvent.click(button);
         expect(mockProps.onRequestClose).toHaveBeenCalledTimes(1);
     });
+    it('should call the resetValues function on clicking cancel button if provided', async () => {
+        const resetValues = jest.fn();
+        render(<AdCancelCreateEditModal {...mockProps} resetValues={resetValues} />);
+        const button = screen.getByRole('button', { name: 'Cancel' });
+        await userEvent.click(button);
+        expect(resetValues).toHaveBeenCalledTimes(1);
+    });
 });

src/components/Modals/CopyAdFormModal/__tests__/CopyAdFormModal.spec.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CopyAdFormModal from '../CopyAdFormModal';
+
+const mockProps = {
+    isModalOpen: true,
+    isValid: true,
+    onClickCancel: jest.fn(),
+    onSubmit: jest.fn(),
+};
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+describe('CopyAdFormModal', () => {
+    it('should render the component as expected', () => {
+        render(<CopyAdFormModal {...mockProps} />);
+        expect(screen.getByText('Create a similar ad')).toBeInTheDocument();
+    });
+    it('should call onClickCancel function on clicking cancel button', async () => {
+        render(<CopyAdFormModal {...mockProps} />);
+        const button = screen.getByRole('button', { name: 'Cancel' });
+        await userEvent.click(button);
+        expect(mockProps.onClickCancel).toHaveBeenCalledTimes(1);
+    });
+    it('should call onSubmit function on clicking submit button', async () => {
+        render(<CopyAdFormModal {...mockProps} />);
+        const button = screen.getByRole('button', { name: 'Create ad' });
+        await userEvent.click(button);
+        expect(mockProps.onSubmit).toHaveBeenCalledTimes(1);
+    });
+    it('should render the children as expected', () => {
+        render(
+            <CopyAdFormModal {...mockProps}>
+                <div>Children</div>
+            </CopyAdFormModal>
+        );
+        expect(screen.getByText('Children')).toBeInTheDocument();
+    });
+});