Nada/p2 ps 234/buy sell ads message

packages/p2p/src/components/buy-sell/no-ads/__tests__/no-ads.spec.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { createBrowserHistory } from 'history';
+import { Router } from 'react-router';
+import NoAds from '../no-ads';
+
+const mock_store_values = {
+    buy_sell_store: {
+        is_buy: true,
+        local_currencies: [
+            {
+                text: 'USD',
+                value: 'USD',
+                is_default: true,
+            },
+        ],
+        selected_local_currency: 'USD',
+        setCreateSellAdFromNoAds: jest.fn(),
+    },
+    general_store: {
+        handleTabClick: jest.fn(),
+        is_barred: false,
+    },
+    my_ads_store: {
+        setShowAdForm: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store_values),
+}));
+
+jest.mock('@sendbird/chat', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/groupChannel', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/message', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+const mock_props = {
+    is_ads_page: false,
+};
+
+describe('<NoAds/>', () => {
+    it('should render the component', () => {
+        render(<NoAds />);
+        expect(screen.getByText('No ads for this currency 😞')).toBeInTheDocument();
+        expect(screen.getByText('Create ad')).toBeInTheDocument();
+        expect(
+            screen.getByText('Looking to buy or sell USD? You can post your own ad for others to respond.')
+        ).toBeInTheDocument();
+    });
+    it('should display "You have no ads" when is_ads_page is true', () => {
+        render(<NoAds {...mock_props} is_ads_page />);
+        expect(screen.getByText('You have no ads.')).toBeInTheDocument();
+        expect(screen.getByText('Create new ad')).toBeInTheDocument();
+    });
+    it('should handle onclick of create ad button', () => {
+        const history = createBrowserHistory();
+        render(
+            <Router history={history}>
+                <NoAds is_ads_page />
+            </Router>
+        );
+        const create_ad_button = screen.getByRole('button', { name: 'Create new ad' });
+        expect(create_ad_button).toBeInTheDocument();
+        create_ad_button.click();
+        expect(mock_store_values.buy_sell_store.setCreateSellAdFromNoAds).toHaveBeenCalledWith(true);
+        expect(mock_store_values.general_store.handleTabClick).toHaveBeenCalledTimes(0);
+        expect(mock_store_values.my_ads_store.setShowAdForm).toHaveBeenCalledWith(true);
+    });
+});

packages/p2p/src/components/buy-sell/no-ads/no-ads.jsx

@@ -21,7 +21,7 @@ const NoAds = ({ is_ads_page = false }) => {
 
     const onClickButton = () => {
         if (!is_ads_page) handleTabClick(2);
-        if (!is_buy) setCreateSellAdFromNoAds(true);
+        if (is_buy) setCreateSellAdFromNoAds(true);
         setShowAdForm(true);
         history.push(routes.p2p_my_ads);
     };

packages/p2p/src/components/buy-sell/no-ads/no-ads.scss

@@ -24,9 +24,17 @@
 }
 
 .ads-page {
-    margin-top: 4.5rem;
+    margin: 4.5rem 1.6rem;
+
+    @include desktop {
+        position: absolute;
+        left: 5rem;
+    }
 
     @include mobile {
         margin-top: 11.8rem;
+        .no-ads__message {
+            width: 100%;
+        }
     }
 }

packages/p2p/src/components/my-ads/__tests__/my-ads-table.spec.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MyAdsTable from '../my-ads-table';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+const mock_store_values = {
+    general_store: {
+        setP2PConfig: jest.fn(),
+    },
+    my_ads_store: {
+        setAdverts: jest.fn(),
+        setSelectedAdId: jest.fn(),
+        loadMoreAds: jest.fn(),
+        is_table_loading: false,
+        api_error_message: null,
+        setApiErrorCode: jest.fn(),
+        adverts: [],
+    },
+    floating_rate_store: {
+        setChangeAdAlert: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store_values),
+}));
+
+jest.mock('../../buy-sell/no-ads', () => jest.fn(() => <div>No Ads Component</div>));
+
+jest.mock('@sendbird/chat', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/groupChannel', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/message', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+const mock_use_store_values = mockStore({
+    client: {
+        currency: 'USD',
+    },
+});
+
+describe('<MyAdsTable/>', () => {
+    it('should render the NoAds component when there are no ads', () => {
+        render(
+            <StoreProvider store={mock_use_store_values}>
+                <MyAdsTable />
+            </StoreProvider>
+        );
+        expect(screen.getByText('No Ads Component')).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/my-ads/my-ads-table.jsx

@@ -9,7 +9,7 @@ import { TableError } from 'Components/table/table-error.jsx';
 import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import MyAdsRowRenderer from './my-ads-row-renderer.jsx';
-import NoAds from '../buy-sell/no-ads/no-ads.jsx';
+import NoAds from '../buy-sell/no-ads';
 
 const getHeaders = offered_currency => [
     { text: localize('Ad ID') },