From 7e14fd0ab95ef2cf387e2b50bd82a0cfefac3ed6 Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Thu, 1 Jun 2023 19:15:36 +0800 Subject: [PATCH] chore: add test coverage for regulators-switcher component (#8320) Co-authored-by: Bahar --- .../__tests__/regulators-switcher.spec.tsx | 103 ++++++++++++++++++ .../main-title-bar/regulators-switcher.tsx | 17 +-- packages/stores/src/mockStore.ts | 2 + packages/stores/types.ts | 2 + 4 files changed, 117 insertions(+), 7 deletions(-) create mode 100644 packages/appstore/src/components/main-title-bar/__tests__/regulators-switcher.spec.tsx 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;