chore: add test coverage for regulators-switcher component (binary-co…

…m#8320)

Co-authored-by: Bahar <bahar@regentmarkets.com>

packages/appstore/src/components/main-title-bar/__tests__/regulators-switcher.spec.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import RegulatorSwitcher from '../regulators-switcher';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+jest.mock('../../pre-loader/regulations-switcher-loader', () => ({
+    __esModule: true,
+    default: () => <div>RegulationsSwitcherLoader</div>,
+}));
+
+describe('RegulatorSwitcher', () => {
+    it('should render correctly', () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<RegulatorSwitcher />, {
+            wrapper,
+        });
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should render the correct text', () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<RegulatorSwitcher />, {
+            wrapper,
+        });
+        expect(container).toBeInTheDocument();
+        expect(screen.getByText('Regulation:')).toBeInTheDocument();
+        expect(screen.getByText('Non-EU')).toBeInTheDocument();
+        expect(screen.getByText('EU')).toBeInTheDocument();
+    });
+    it('should open toggleRegulatorsCompareModal if the user clicks on the icon', () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<RegulatorSwitcher />, {
+            wrapper,
+        });
+        expect(container).toBeInTheDocument();
+        fireEvent.click(screen.getByTestId('dt_regulators-switcher-icon'));
+        expect(mock.traders_hub.toggleRegulatorsCompareModal).toHaveBeenCalled();
+    });
+
+    it('should switch the region to EU if the user clicks on EU', () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<RegulatorSwitcher />, {
+            wrapper,
+        });
+        expect(container).toBeInTheDocument();
+        fireEvent.click(screen.getByText('EU'));
+        expect(mock.traders_hub.selectRegion).toHaveBeenCalledWith('EU');
+    });
+
+    it('should switch the region to Non-EU if the user clicks on Non-EU', () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<RegulatorSwitcher />, {
+            wrapper,
+        });
+        expect(container).toBeInTheDocument();
+        fireEvent.click(screen.getByText('Non-EU'));
+        expect(mock.traders_hub.selectRegion).toHaveBeenCalledWith('Non-EU');
+    });
+
+    it('should show loader if is_switching is true', () => {
+        const mock = mockStore({
+            client: {
+                is_switching: true,
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(<RegulatorSwitcher />, {
+            wrapper,
+        });
+
+        expect(container).toBeInTheDocument();
+        expect(screen.getByText('RegulationsSwitcherLoader')).toBeInTheDocument();
+    });
+});

packages/appstore/src/components/main-title-bar/regulators-switcher.tsx

@@ -1,11 +1,10 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { observer } from 'mobx-react-lite';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { region_availability } from 'Constants/platform-config';
 import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
-import { useStores } from 'Stores/index';
+import { useStore, observer } from '@deriv/stores';
 import './regulators-switcher.scss';
 
 type SwitcherItemProps = {
@@ -23,16 +22,20 @@ const SwitcherItem = ({ children, is_selected, ...props }: SwitcherItemProps & H
     );
 };
 
-const RegulatorSwitcher = () => {
-    const { traders_hub, client } = useStores();
+const RegulatorSwitcher = observer(() => {
+    const { traders_hub, client } = useStore();
     const { toggleRegulatorsCompareModal } = traders_hub;
     const { is_switching } = client;
 
     return (
         <div className='regulators-switcher__container'>
             <div className='regulators-switcher--text'>
                 <Text>{localize('Regulation:')}</Text>
-                <div className='regulators-switcher--icon' onClick={() => toggleRegulatorsCompareModal()}>
+                <div
+                    data-testid='dt_regulators-switcher-icon'
+                    className='regulators-switcher--icon'
+                    onClick={() => toggleRegulatorsCompareModal()}
+                >
                     <Icon icon='IcInfoOutline' />
                 </div>
             </div>
@@ -57,6 +60,6 @@ const RegulatorSwitcher = () => {
             )}
         </div>
     );
-};
+});
 
-export default observer(RegulatorSwitcher);
+export default RegulatorSwitcher;

packages/stores/src/mockStore.ts

@@ -277,6 +277,8 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_real: false,
             selectRegion: jest.fn(),
             is_low_risk_cr_eu_real: false,
+            toggleRegulatorsCompareModal: jest.fn(),
+            selected_region: '',
             is_demo: false,
             financial_restricted_countries: false,
             selected_account_type: 'real',

packages/stores/types.ts

@@ -351,6 +351,8 @@ type TTradersHubStore = {
     setTogglePlatformType: (platform_type: string) => void;
     is_real: boolean;
     selectRegion: (region: string) => void;
+    toggleRegulatorsCompareModal: () => void;
+    selected_region: string;
     openFailedVerificationModal: (selected_account_type: string) => void;
     multipliers_account_status: string;
     financial_restricted_countries: boolean;