Merge pull request deriv-com#33 from nada-deriv/nada/P2PS-1086/curren…

…cy-selector-refactor

refactor: currency selector modal refactor

packages/p2p/src/components/modal-manager/modals/currency-selector-modal/__tests__/currency-selector-modal.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
+import CurrenySelectorModal from '../currency-selector-modal';
+
+const mock_store: DeepPartial<ReturnType<typeof useStores>> = {
+    buy_sell_store: {
+        onLocalCurrencySelect: jest.fn(),
+        selected_local_currency: 'IDR',
+        local_currencies: [
+            { display_name: 'Indonesian Rupiah', text: 'IDR', value: 'IDR', is_default: true },
+            { display_name: 'New Zealand Dollar', text: 'NZD', value: 'NZD', has_adverts: true },
+        ],
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: () => mock_store,
+}));
+
+const mock_modal_manager = {
+    hideModal: jest.fn(),
+    is_modal_open: true,
+};
+
+jest.mock('Components/modal-manager/modal-manager-context');
+const mocked_useModalManagerContext = useModalManagerContext as jest.MockedFunction<
+    () => Partial<ReturnType<typeof useModalManagerContext>>
+>;
+
+mocked_useModalManagerContext.mockImplementation(() => mock_modal_manager);
+
+describe('<CurrenySelectorModal/>', () => {
+    let modal_root_el: HTMLElement;
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+    it('should render the CurrenySelectorModal', () => {
+        render(<CurrenySelectorModal />);
+
+        expect(screen.getByText('Preferred currency')).toBeInTheDocument();
+    });
+    it('should handle currency selection', () => {
+        render(<CurrenySelectorModal />);
+
+        userEvent.click(screen.getByText('NZD'));
+
+        expect(mock_store.buy_sell_store.onLocalCurrencySelect).toBeCalledWith('NZD');
+        expect(mock_modal_manager.hideModal).toBeCalled();
+    });
+});

packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx → packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { MobileFullPageModal } from '@deriv/components';
-import { useStores } from 'Stores';
-import { observer } from 'mobx-react-lite';
+import { observer } from '@deriv/stores';
 import { localize } from 'Components/i18next';
-import CurrencySelector from 'Pages/buy-sell/currency-selector/currency-selector';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import CurrencySelector from 'Pages/buy-sell/currency-selector/currency-selector';
+import { useStores } from 'Stores';
 
 const CurrencySelectorModal = () => {
     const { buy_sell_store } = useStores();
@@ -15,6 +15,7 @@ const CurrencySelectorModal = () => {
         <MobileFullPageModal
             is_flex
             is_modal_open={is_modal_open}
+            onClickClose={hideModal}
             page_header_text={localize('Preferred currency')}
             pageHeaderReturnFn={hideModal}
         >