likhith/Added jest config and test cases for App-Content component

packages/p2p/jest.config.js

@@ -2,9 +2,24 @@ const baseConfigForPackages = require('../../jest.config.base');
 
 module.exports = {
     ...baseConfigForPackages,
+    clearMocks: true,
     moduleNameMapper: {
-        "\\.s(c|a)ss$": "<rootDir>/../../__mocks__/styleMock.js",
-        "^.+\\.svg$": "<rootDir>/../../__mocks__/styleMock.js",
+        '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
+        '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
+        '^Assets/(.*)$': '<rootDir>/src/assets/$1',
+        '^Components/(.*)$': '<rootDir>/src/components/$1',
+        '^Constants/(.*)$': '<rootDir>/src/constants/$1',
+        '^Stores/(.*)$': '<rootDir>/src/stores/$1',
+        '^Stores$': '<rootDir>/src/stores/index',
+        '^Translations/(.*)$': '<rootDir>/src/translations/$1',
+        '^Utils/(.*)$': '<rootDir>/src/utils/$1',
     },
-    testPathIgnorePatterns: ['/scripts/'],
+    testPathIgnorePatterns: ['/scripts/', '/translations/', '/crowdin/'],
+    coveragePathIgnorePatterns: [
+        '<rootDir>/.eslintrc.js',
+        '<rootDir>/jest.config.js',
+        '<rootDir>/build',
+        '<rootDir>/coverage/lcov-report',
+        '<rootDir>/dist',
+    ],
 };

packages/p2p/src/components/__tests__/app-content.spec.js

@@ -0,0 +1,109 @@
+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 />);
+        const el_tab = screen.queryByText('Tabs');
+
+        expect(el_tab).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 />);
+        const el_loading = screen.queryByText('Loading');
+
+        expect(el_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 />);
+        const el_dp2p_blocked = screen.queryByText('Dp2pBlocked');
+
+        expect(el_dp2p_blocked).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 />);
+        const el_nickname_form = screen.queryByText('NicknameForm');
+
+        expect(el_nickname_form).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 />);
+        const el_verification = screen.queryByText('Verification');
+
+        expect(el_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 />);
+        const el_dp2p_blocked = screen.queryByText('Dp2pBlocked');
+        const el_nickname_form = screen.queryByText('NicknameForm');
+
+        expect(el_nickname_form).not.toBeInTheDocument();
+        expect(el_dp2p_blocked).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.queryByTestId('my_profile')).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/app-content.jsx

@@ -60,7 +60,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>
             )}

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: ['.jsx', '.js'],
             symlinks: false,
         },
         module: {
@@ -126,7 +127,7 @@ module.exports = function () {
                           test: /\.js$/,
                           parallel: 2,
                       }),
-                      new CssMinimizerPlugin()
+                      new CssMinimizerPlugin(),
                   ]
                 : [],
         },