From 9a3d32888fdb28414b241815a9b930ca193ae7ca Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Date: Mon, 14 Mar 2022 08:22:01 +0400
Subject: [PATCH] likhith/Added jest config and test cases for App-Content
 component (#4876)

* Added jest config and test cases for App-Content component

* Added test cases for App Content component

* Fixed lint errors

* Removed lint errors and configured webpack

* Reordered webpack extension array

* Implemented review comments

* implemented review comments
---
 .../components/__tests__/app-content.spec.js  | 102 ++++++++++++++++++
 packages/p2p/src/components/app-content.jsx   |   2 +-
 packages/p2p/webpack.config.js                |   3 +-
 3 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 packages/p2p/src/components/__tests__/app-content.spec.js

diff --git a/packages/p2p/src/components/__tests__/app-content.spec.js b/packages/p2p/src/components/__tests__/app-content.spec.js
new file mode 100644
index 000000000000..38f9e53a0338
--- /dev/null
+++ b/packages/p2p/src/components/__tests__/app-content.spec.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useStores } from 'Stores';
+import AppContent from '../app-content.jsx';
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(),
+}));
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    Tabs: jest.fn(({ children }) => (
+        <div>
+            Tabs<div>{children}</div>
+        </div>
+    )),
+    Loading: () => <div>Loading</div>,
+}));
+
+jest.mock('Components/dp2p-blocked', () => jest.fn(() => 'Dp2pBlocked'));
+jest.mock('Components/nickname-form', () => jest.fn(() => 'NicknameForm'));
+jest.mock('Components/verification/verification', () => jest.fn(() => 'Verification'));
+jest.mock('Components/my-ads/my-ads', () => jest.fn(() => 'MyAds'));
+jest.mock('Components/orders/orders', () => jest.fn(() => 'Orders'));
+jest.mock('Components/buy-sell/buy-sell', () => jest.fn(() => 'BuySell'));
+jest.mock('Components/my-profile', () => jest.fn(() => 'MyProfile'));
+
+describe('<AppContent/>', () => {
+    const mocked_store_values = {
+        is_loading: false,
+        should_show_dp2p_blocked: false,
+        should_show_popup: false,
+        props: { should_show_verification: false },
+        is_advertiser: false,
+    };
+
+    it('should load the Tab component when no error status are set', () => {
+        useStores.mockImplementation(() => ({
+            general_store: mocked_store_values,
+        }));
+        render(<AppContent />);
+
+        expect(screen.getByText('Tabs')).toBeInTheDocument();
+        expect(screen.queryByTestId('my_profile')).not.toBeInTheDocument();
+    });
+
+    it('should render the loading component when is_loading state is true', () => {
+        useStores.mockImplementation(() => ({
+            general_store: { ...mocked_store_values, is_loading: true },
+        }));
+        render(<AppContent />);
+
+        expect(screen.getByText('Loading')).toBeInTheDocument();
+    });
+
+    it('should render the DP2P blocked component when should_show_dp2p_blocked state is true', () => {
+        useStores.mockImplementation(() => ({
+            general_store: { ...mocked_store_values, should_show_dp2p_blocked: true },
+        }));
+        render(<AppContent />);
+
+        expect(screen.getByText('Dp2pBlocked')).toBeInTheDocument();
+    });
+
+    it('should render the nick-name form component when should_show_popup state is true', () => {
+        useStores.mockImplementation(() => ({
+            general_store: { ...mocked_store_values, should_show_popup: true },
+        }));
+        render(<AppContent />);
+
+        expect(screen.getByText('NicknameForm')).toBeInTheDocument();
+    });
+
+    it('should render verification component when should_show_verification state is true', () => {
+        useStores.mockImplementation(() => ({
+            general_store: { ...mocked_store_values, props: { should_show_verification: true } },
+        }));
+        render(<AppContent />);
+
+        expect(screen.getByText('Verification')).toBeInTheDocument();
+    });
+
+    it('should render only the first notification component when multiple error status is set', () => {
+        useStores.mockImplementation(() => ({
+            general_store: { ...mocked_store_values, should_show_popup: true, should_show_dp2p_blocked: true },
+        }));
+        render(<AppContent />);
+
+        expect(screen.queryByText('NicknameForm')).not.toBeInTheDocument();
+        expect(screen.getByText('Dp2pBlocked')).toBeInTheDocument();
+    });
+
+    it('should render MyProfile component when is_advertiser state is true', () => {
+        useStores.mockImplementation(() => ({
+            general_store: { ...mocked_store_values, is_advertiser: true },
+        }));
+        render(<AppContent />);
+
+        expect(screen.getByTestId('my_profile')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx
index 39fb3c006c31..4c4beff5b90e 100644
--- a/packages/p2p/src/components/app-content.jsx
+++ b/packages/p2p/src/components/app-content.jsx
@@ -55,7 +55,7 @@ const AppContent = () => {
                 <MyAds />
             </div>
             {general_store.is_advertiser && (
-                <div label={localize('My profile')}>
+                <div label={localize('My profile')} data-testid='my_profile'>
                     <MyProfile />
                 </div>
             )}
diff --git a/packages/p2p/webpack.config.js b/packages/p2p/webpack.config.js
index fdd8b22e3a73..4b06d2ed0794 100644
--- a/packages/p2p/webpack.config.js
+++ b/packages/p2p/webpack.config.js
@@ -31,6 +31,7 @@ module.exports = function () {
                 Stores: path.resolve(__dirname, 'src/stores'),
                 ...publisher_utils.getLocalDerivPackageAliases(__dirname, is_publishing),
             },
+            extensions: ['.js', '.jsx'],
             symlinks: false,
         },
         module: {
@@ -126,7 +127,7 @@ module.exports = function () {
                           test: /\.js$/,
                           parallel: 2,
                       }),
-                      new CssMinimizerPlugin()
+                      new CssMinimizerPlugin(),
                   ]
                 : [],
         },