From 3cb5ba4e3868d91df9a20071f41e17014a1e250d Mon Sep 17 00:00:00 2001
From: Farrah Mae Ochoa <farrah@deriv.com>
Date: Mon, 29 May 2023 14:56:43 +0400
Subject: [PATCH] fix: tests

---
 packages/p2p/src/components/app-content.jsx   | 11 +--
 .../__tests__/nickname-form.spec.tsx          | 75 +++++++++++++++++++
 2 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx
index ebb5124db5e5..29201de45126 100644
--- a/packages/p2p/src/components/app-content.jsx
+++ b/packages/p2p/src/components/app-content.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { isMobile } from '@deriv/shared';
-import { Loading, Tabs } from '@deriv/components';
+import { Loading, MobileWrapper, Tabs } from '@deriv/components';
 import { useStore } from '@deriv/stores';
 import { isAction, reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -56,10 +56,11 @@ const AppContent = ({ order_id }) => {
     }
 
     if (general_store.should_show_popup) {
-        if (isMobile()) return <NicknameForm />;
-        
-            return <></>;
-        
+        return (
+            <MobileWrapper>
+                <NicknameForm />
+            </MobileWrapper>
+        );
     }
 
     if (buy_sell_store?.show_advertiser_page && !buy_sell_store.should_show_verification) {
diff --git a/packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx b/packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx
index 4c1677fbcd5c..a8d0b18cb87a 100644
--- a/packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx
+++ b/packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx
@@ -1,9 +1,71 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useStores } from 'Stores/index';
 import NicknameForm from '../nickname-form';
 
+let mock_store: DeepPartial<ReturnType<typeof useStores>>;
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
 describe('<NicknameForm/>', () => {
+    beforeEach(() => {
+        mock_store = {
+            general_store: {
+                createAdvertiser: jest.fn(),
+                nickname: '',
+                onNicknamePopupClose: jest.fn(),
+                setNicknameError: jest.fn(),
+                validatePopup: (values: { [key: string]: string }) => {
+                    const validations = {
+                        nickname: [
+                            (v: string) => !!v,
+                            (v: string) => v.length >= 2,
+                            (v: string) => v.length <= 24,
+                            (v: string) => /^[a-zA-Z0-9\\.@_-]{2,24}$/.test(v),
+                            (v: string) =>
+                                /^(?!(.*(.)\\2{4,})|.*[\\.@_-]{2,}|^([\\.@_-])|.*([\\.@_-])$)[a-zA-Z0-9\\.@_-]{2,24}$/.test(
+                                    v
+                                ),
+                            (v: string) => !/([a-zA-Z0-9\\.@_-])\1{4}/.test(v),
+                        ],
+                    };
+
+                    const nickname_messages = [
+                        'Nickname is required',
+                        'Nickname is too short',
+                        'Nickname is too long',
+                        'Can only contain letters, numbers, and special characters .- _ @.',
+                        'Cannot start, end with, or repeat special characters.',
+                        'Cannot repeat a character more than 4 times.',
+                    ];
+
+                    const errors: { key?: string } = {};
+
+                    Object.entries(validations).forEach(([key, rules]) => {
+                        const error_index = rules.findIndex(v => {
+                            return !v(values[key]);
+                        });
+
+                        if (error_index !== -1) {
+                            switch (key) {
+                                case 'nickname':
+                                default: {
+                                    errors[key] = nickname_messages[error_index];
+                                    break;
+                                }
+                            }
+                        }
+                    });
+
+                    return errors;
+                },
+            },
+        };
+    });
     it('should render the component', () => {
         render(<NicknameForm />);
 
@@ -95,10 +157,23 @@ describe('<NicknameForm/>', () => {
         const onCancel = jest.fn();
 
         render(<NicknameForm onCancel={onCancel} />);
+
         userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
 
         await waitFor(() => {
             expect(onCancel).toHaveBeenCalled();
+            expect(mock_store.general_store.onNicknamePopupClose).toHaveBeenCalled();
+        });
+    });
+
+    it('should create the advertiser on click of Confirm button', async () => {
+        render(<NicknameForm />);
+
+        userEvent.type(screen.getByLabelText(/nickname/i), 'Advertiser');
+        userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+
+        await waitFor(() => {
+            expect(mock_store.general_store.createAdvertiser).toHaveBeenCalled();
         });
     });
 });