refactor: added unit test for click icon, tooltip modal

packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/__tests__/ad-error-tooltip-modal.spec.jsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import AdErrorTooltipModal from '../ad-error-tooltip-modal';
+
+const mock_modal_manager = {
+    hideModal: jest.fn(),
+    is_modal_open: true,
+};
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    ...jest.requireActual('Components/modal-manager/modal-manager-context'),
+    useModalManagerContext: jest.fn(() => mock_modal_manager),
+}));
+
+const mock_props = {
+    visibility_status: [],
+    account_currency: 'USD',
+    remaining_amount: 100,
+    advert_type: 'buy',
+};
+
+const el_modal = document.createElement('div');
+
+describe('<AdErrorTooltipModal />', () => {
+    beforeAll(() => {
+        el_modal.setAttribute('id', 'modal_root');
+        document.body.appendChild(el_modal);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(el_modal);
+    });
+
+    it('should render the component in default state', () => {
+        render(<AdErrorTooltipModal {...mock_props} />);
+        expect(
+            screen.getByText('Your ad isn’t listed on Buy/Sell due to the following reason(s):')
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advert_inactive"', () => {
+        mock_props.visibility_status = ['advert_inactive'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText('Your ads with floating rates have been deactivated. Set fixed rates to reactivate them.')
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advert_max_limit"', () => {
+        mock_props.visibility_status = ['advert_max_limit'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText('This ad is not listed on Buy/Sell because its minimum order is higher than 0 USD.')
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advert_min_limit"', () => {
+        mock_props.visibility_status = ['advert_min_limit'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(
+                'This ad is not listed on Buy/Sell because its maximum order is lower than the minimum amount you can specify for orders in your ads.'
+            )
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advert_remaining"', () => {
+        mock_props.visibility_status = ['advert_remaining'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(
+                'This ad is not listed on Buy/Sell because its minimum order is higher than the ad’s remaining amount (100 USD).'
+            )
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advertiser_ads_paused"', () => {
+        mock_props.visibility_status = ['advertiser_ads_paused'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText('This ad is not listed on Buy/Sell because you have paused all your ads.')
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advertiser_balance"', () => {
+        mock_props.visibility_status = ['advertiser_balance'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(
+                'This ad is not listed on Buy/Sell because its minimum order is higher than your Deriv P2P available balance ( USD).'
+            )
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advertiser_daily_limit"', () => {
+        mock_props.visibility_status = ['advertiser_daily_limit'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(
+                'This ad is not listed on Buy/Sell because its minimum order is higher than your remaining daily limit ( USD).'
+            )
+        ).toBeInTheDocument();
+    });
+    it('should display the error message for "advertiser_temp_ban"', () => {
+        mock_props.visibility_status = ['advertiser_temp_ban'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(
+                'You’re not allowed to use Deriv P2P to advertise. Please contact us via live chat for more information.'
+            )
+        ).toBeInTheDocument();
+    });
+    it('should handle the error message when there are multiple visibility statuses', () => {
+        mock_props.visibility_status = ['advertiser_temp_ban', 'advert_inactive'];
+        render(
+            <StoreProvider store={mockStore({})}>
+                <AdErrorTooltipModal {...mock_props} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText('Your ad isn’t listed on Buy/Sell due to the following reason(s):')
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                '1. You’re not allowed to use Deriv P2P to advertise. Please contact us via live chat for more information.'
+            )
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                '2. Your ads with floating rates have been deactivated. Set fixed rates to reactivate them.'
+            )
+        ).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Button, Modal, Text, ThemedScrollbars } from '@deriv/components';
-import { observer } from 'mobx-react-lite';
+import { isMobile } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
 import { localize, Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-import { isMobile } from '@deriv/shared';
-import { ad_type } from 'Constants/floating-rate';
-import { useStore } from '@deriv/stores';
 import { buy_sell } from 'Constants/buy-sell';
+import { ad_type } from 'Constants/floating-rate';
 
 const AdRateError = () => {
     const { floating_rate_store } = useStores();

packages/p2p/src/pages/my-ads/__tests__/my-ads-row-renderer.spec.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { adverts } from 'Components/my-ads/__mocks__/mock-data';
+import MyAdsRowRenderer from '../my-ads-row-renderer';
+
+const mock_store = {
+    floating_rate_store: {},
+    general_store: {
+        is_listed: 0,
+    },
+    my_profile_store: {
+        getAdvertiserPaymentMethods: jest.fn(),
+    },
+    my_ads_store: {
+        selected_ad_id: '1',
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
+const mock_modal_manager_context = {
+    hideModal: jest.fn(),
+    showModal: jest.fn(),
+};
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    useModalManagerContext: () => mock_modal_manager_context,
+}));
+
+const mock_use_store_values = mockStore({
+    client: {
+        currency: 'USD',
+    },
+});
+
+describe('<MyAdsRowRenderer/>', () => {
+    it('should display tooltip for hidden ads', () => {
+        render(
+            <StoreProvider store={mock_use_store_values}>
+                <MyAdsRowRenderer row={{ ...adverts, visibility_status: ['advert_inactive'] }} />
+            </StoreProvider>
+        );
+        const icon = screen.getByTestId('dt_popover_wrapper');
+        expect(icon).toBeInTheDocument();
+        userEvent.hover(icon);
+        expect(screen.getByText('Ad not listed')).toBeInTheDocument();
+    });
+    it('should onClick for hidden ads', () => {
+        render(
+            <StoreProvider store={mock_use_store_values}>
+                <MyAdsRowRenderer row={{ ...adverts, visibility_status: ['advert_inactive'] }} />
+            </StoreProvider>
+        );
+        const visibility_status_icon = screen.getByTestId('dt_visibility_alert_icon');
+        userEvent.click(visibility_status_icon);
+        expect(mock_modal_manager_context.showModal).toHaveBeenCalledTimes(1);
+    });
+});

packages/p2p/src/pages/my-ads/my-ads-row-renderer.jsx

@@ -172,6 +172,7 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                                         icon='IcAlertWarning'
                                         onClick={onClickTooltipIcon}
                                         className={!!is_advert_active && 'my-ads-table__status-warning__icon'}
+                                        data_testid='dt_visibility_alert_icon'
                                     />
                                 </div>
                             ) : (
@@ -310,7 +311,11 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                         <div className='my-ads-table__status-warning'>
                             <AdStatus is_active={!!is_advert_active && !general_store.is_barred} />
                             <Popover alignment='top' message={localize('Ad not listed')}>
-                                <Icon icon='IcAlertWarning' onClick={onClickTooltipIcon} />
+                                <Icon
+                                    icon='IcAlertWarning'
+                                    onClick={onClickTooltipIcon}
+                                    data_testid='dt_visibility_alert_icon'
+                                />
                             </Popover>
                         </div>
                     ) : (