Merge pull request deriv-com#70 from farrah-deriv/refactor-leave-page…

…-modal

refactor: LeavePageModal

packages/p2p/src/components/modal-manager/modals/leave-page-modal/__tests__/leave-page-modal.spec.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
+import LeavePageModal from '../leave-page-modal';
+
+const mock_store_values: DeepPartial<ReturnType<typeof useStores>> = {
+    buy_sell_store: {
+        setShowFilterPaymentMethods: jest.fn(),
+    },
+};
+const mock_modal_manager: Partial<ReturnType<typeof useModalManagerContext>> = {
+    hideModal: jest.fn(),
+    is_modal_open: true,
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store_values),
+}));
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    useModalManagerContext: () => mock_modal_manager,
+}));
+
+describe('<LeavePageModal/>', () => {
+    let el_modal: HTMLElement;
+
+    beforeAll(() => {
+        el_modal = document.createElement('div');
+        el_modal.setAttribute('id', 'modal_root');
+        document.body.appendChild(el_modal);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(el_modal);
+    });
+
+    it('should render LeavePageModal with given props', () => {
+        const props = {
+            onCancel: jest.fn(),
+            onLeavePage: jest.fn(),
+        };
+
+        render(<LeavePageModal {...props} />);
+
+        expect(
+            screen.getByText('Are you sure you want to leave this page? Changes made will not be saved.')
+        ).toBeInTheDocument();
+    });
+
+    it('should call onLeavePage and close the modal on click of Leave page button', () => {
+        const props = {
+            onLeavePage: jest.fn(),
+        };
+
+        render(<LeavePageModal {...props} />);
+
+        const leave_page_button = screen.getByRole('button', { name: 'Leave page' });
+        userEvent.click(leave_page_button);
+        expect(props.onLeavePage).toHaveBeenCalled();
+        expect(mock_modal_manager.hideModal).toHaveBeenCalled();
+        expect(mock_store_values.buy_sell_store.setShowFilterPaymentMethods).toHaveBeenCalledWith(false);
+    });
+
+    it('should call onCancel and close the modal on click of Cancel button', () => {
+        const props = {
+            onCancel: jest.fn(),
+        };
+
+        render(<LeavePageModal {...props} />);
+
+        const cancel_button = screen.getByRole('button', { name: 'Cancel' });
+        userEvent.click(cancel_button);
+        expect(props.onCancel).toHaveBeenCalled();
+        expect(mock_modal_manager.hideModal).toHaveBeenCalled();
+    });
+});

packages/p2p/src/components/modal-manager/modals/leave-page-modal/leave-page-modal.jsx → packages/p2p/src/components/modal-manager/modals/leave-page-modal/leave-page-modal.tsx

@@ -1,24 +1,29 @@
 import React from 'react';
 import { Button, Modal, Text } from '@deriv/components';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
+import { observer } from '@deriv/stores';
 import { Localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
+
+type TLeavePageModalProps = {
+    onCancel?: () => void;
+    onLeavePage?: () => void;
+};
 
-const LeavePageModal = ({ onLeavePage = () => {}, onCancel = () => {} }) => {
+const LeavePageModal = ({ onLeavePage, onCancel }: TLeavePageModalProps) => {
     const { buy_sell_store } = useStores();
     const { hideModal, is_modal_open } = useModalManagerContext();
 
     const onClickCancel = () => {
-        onCancel();
+        onCancel?.();
         hideModal({
             should_restore_local_state: true,
         });
     };
 
     const onClickLeavePage = () => {
         buy_sell_store.setShowFilterPaymentMethods(false);
-        onLeavePage();
+        onLeavePage?.();
         hideModal({
             should_restore_local_state: false,
             should_hide_all_modals: true,
@@ -31,7 +36,7 @@ const LeavePageModal = ({ onLeavePage = () => {}, onCancel = () => {} }) => {
             is_open={is_modal_open}
             small
             title={
-                <Text color='prominent' size='s' weight='bold'>
+                <Text color='prominent' weight='bold'>
                     <Localize i18n_default_text='Leave page?' />
                 </Text>
             }