diff --git a/packages/appstore/src/components/main-title-bar/__tests__/regulators-switcher.spec.tsx b/packages/appstore/src/components/main-title-bar/__tests__/regulators-switcher.spec.tsx
new file mode 100644
index 000000000000..c42c2275ee9a
--- /dev/null
+++ b/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: () =>
RegulationsSwitcherLoader
,
+}));
+
+describe('RegulatorSwitcher', () => {
+ it('should render correctly', () => {
+ const mock = mockStore({});
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ });
+
+ it('should render the correct text', () => {
+ const mock = mockStore({});
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ 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 }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ 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 }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ 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 }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ 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 }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('RegulationsSwitcherLoader')).toBeInTheDocument();
+ });
+});
diff --git a/packages/appstore/src/components/main-title-bar/regulators-switcher.tsx b/packages/appstore/src/components/main-title-bar/regulators-switcher.tsx
index dfedf655d9a7..33133cb1fb9c 100644
--- a/packages/appstore/src/components/main-title-bar/regulators-switcher.tsx
+++ b/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,8 +22,8 @@ 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;
@@ -32,7 +31,11 @@ const RegulatorSwitcher = () => {
{localize('Regulation:')}
-
toggleRegulatorsCompareModal()}>
+
toggleRegulatorsCompareModal()}
+ >
@@ -57,6 +60,6 @@ const RegulatorSwitcher = () => {
)}
);
-};
+});
-export default observer(RegulatorSwitcher);
+export default RegulatorSwitcher;
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index d6474daa6a91..4d07ef9b09a3 100644
--- a/packages/stores/src/mockStore.ts
+++ b/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',
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 5fa350ce3eb4..59eff0c6fbe8 100644
--- a/packages/stores/types.ts
+++ b/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;