diff --git a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/__tests__/ad-error-tooltip-modal.spec.jsx b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/__tests__/ad-error-tooltip-modal.spec.jsx new file mode 100644 index 000000000000..93458a03212e --- /dev/null +++ b/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('', () => { + 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(); + 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( + + + + ); + 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( + + + + ); + 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( + + + + ); + 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( + + + + ); + 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( + + + + ); + 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( + + + + ); + 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( + + + + ); + 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( + + + + ); + 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( + + + + ); + 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(); + }); +}); diff --git a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx index c809a847ead0..2d1cd7c7ab12 100644 --- a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx +++ b/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(); diff --git a/packages/p2p/src/pages/my-ads/__tests__/my-ads-row-renderer.spec.jsx b/packages/p2p/src/pages/my-ads/__tests__/my-ads-row-renderer.spec.jsx new file mode 100644 index 000000000000..8d7b6bc23bba --- /dev/null +++ b/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('', () => { + it('should display tooltip for hidden ads', () => { + render( + + + + ); + 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( + + + + ); + const visibility_status_icon = screen.getByTestId('dt_visibility_alert_icon'); + userEvent.click(visibility_status_icon); + expect(mock_modal_manager_context.showModal).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/p2p/src/pages/my-ads/my-ads-row-renderer.jsx b/packages/p2p/src/pages/my-ads/my-ads-row-renderer.jsx index 838d84abfa1a..5c78a10f9960 100644 --- a/packages/p2p/src/pages/my-ads/my-ads-row-renderer.jsx +++ b/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' /> ) : ( @@ -310,7 +311,11 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
- +
) : (