Skip to content

Commit

Permalink
chore: add test coverage for currency switcher container (#8449)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thisyahlen-deriv
thisyahlen-deriv committed May 10, 2023
1 parent b457650 commit 08fe6e7
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 59 deletions.
140 changes: 140 additions & 0 deletions packages/appstore/src/components/containers/__tests__/currency-switcher-container.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React from 'react';
import CurrentSwitcherContainer from '../currency-switcher-container';
import { render, screen } from '@testing-library/react';
import { StoreProvider, mockStore } from '@deriv/stores';

describe('CurrentSwitcherContainer', () => {
it('should render the modal', async () => {
const mock = mockStore({
modules: {
cfd: {
current_list: {
CR123123: {
landing_company_short: 'maltainvest',
},
},
},
},
});

const wrapper = ({ children }: { children: JSX.Element }) => (
<StoreProvider store={mock}>{children}</StoreProvider>
);

const { container } = render(
<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />,
{
wrapper,
}
);
expect(container).toBeInTheDocument();
});

it('should not have the dropdown if is demo is true', () => {
const mock = mockStore({
modules: {
cfd: {
current_list: {
CR123123: {
landing_company_short: 'maltainvest',
},
},
},
},
traders_hub: {
is_demo: true,
},
});
const wrapper = ({ children }: { children: JSX.Element }) => (
<StoreProvider store={mock}>{children}</StoreProvider>
);

render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
wrapper,
});

expect(screen.queryByTestId('currency-switcher-container__arrow')).not.toBeInTheDocument();
});

it('should not have the dropdown if is_eu_user is true', () => {
const mock = mockStore({
modules: {
cfd: {
current_list: {
CR123123: {
landing_company_short: 'maltainvest',
},
},
},
},
traders_hub: {
is_eu_user: true,
},
});
const wrapper = ({ children }: { children: JSX.Element }) => (
<StoreProvider store={mock}>{children}</StoreProvider>
);

render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
wrapper,
});

expect(screen.queryByTestId('currency-switcher-container__arrow')).not.toBeInTheDocument();
});

it('should have pending in the classname if the document status is pending', () => {
const mock = mockStore({
modules: {
cfd: {
current_list: {
CR123123: {
landing_company_short: 'maltainvest',
},
},
},
},
client: {
authentication_status: {
document_status: 'pending',
},
},
});
const wrapper = ({ children }: { children: JSX.Element }) => (
<StoreProvider store={mock}>{children}</StoreProvider>
);

render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
wrapper,
});

expect(screen.getByText('USD')).toHaveClass('currency-switcher-container__content--text--pending');
});

it('should have default in the classname if the document status is default', () => {
const mock = mockStore({
modules: {
cfd: {
current_list: {
CR123123: {
landing_company_short: 'maltainvest',
},
},
},
},
client: {
authentication_status: {
document_status: 'default',
},
},
});
const wrapper = ({ children }: { children: JSX.Element }) => (
<StoreProvider store={mock}>{children}</StoreProvider>
);

render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
wrapper,
});

expect(screen.getByText('USD')).toHaveClass('currency-switcher-container__content--text--default');
});
});
117 changes: 58 additions & 59 deletions packages/appstore/src/components/containers/currency-switcher-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import classNames from 'classnames';
import { Icon } from '@deriv/components';
import CurrencyIcon, { Currency } from 'Assets/svgs/currency';
import './currency-switcher-container.scss';
import { useStores } from 'Stores/index';
import { observer } from 'mobx-react-lite';
import { TRootStore } from 'Types';
import { useStore, observer } from '@deriv/stores';

interface CurrentSwitcherContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
actions?: ReactNode;
Expand All @@ -14,72 +12,73 @@ interface CurrentSwitcherContainerProps extends Omit<HTMLAttributes<HTMLDivEleme
title: ReactNode;
}

const CurrentSwitcherContainer = ({
actions,
children,
className,
has_interaction = false,
icon,
title,
...props
}: CurrentSwitcherContainerProps) => {
const store = useStores();
const { client, modules, traders_hub }: TRootStore = store;
const CurrentSwitcherContainer = observer(
({
actions,
children,
className,
has_interaction = false,
icon,
title,
...props
}: CurrentSwitcherContainerProps) => {
const { client, modules, traders_hub } = useStore();

const { document_status } = client.authentication_status;
const { is_eu_user, is_demo } = traders_hub;
const { current_list } = modules.cfd;
const { document_status } = client.authentication_status;
const { is_eu_user, is_demo } = traders_hub;
const { current_list } = modules.cfd;

const has_mf_mt5_account = Object.keys(current_list)
.map(key => current_list[key])
.some(account => account.landing_company_short === 'maltainvest');
const has_mf_mt5_account = Object.keys(current_list)
.map(key => current_list[key])
.some(account => account.landing_company_short === 'maltainvest');

const Dropdown = () => {
const icon_dropdown = (
<div className='currency-switcher-container__arrow' {...props}>
<Icon icon='IcChevronDownBold' />
</div>
);
const Dropdown = () => {
const icon_dropdown = (
<div className='currency-switcher-container__arrow' {...props}>
<Icon icon='IcChevronDownBold' />
</div>
);

if ((is_eu_user && has_mf_mt5_account) || is_demo) {
return null;
}
return icon_dropdown;
};
if ((is_eu_user && has_mf_mt5_account) || is_demo) {
return null;
}
return icon_dropdown;
};

return (
<div
className={classNames(className, 'currency-switcher-container', {
'currency-switcher-container--has-interaction': has_interaction,
})}
>
<div className='currency-switcher-container--left'>
<CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
<div
className={classNames(
'currency-switcher-container__content',
`currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
)}
>
return (
<div
className={classNames(className, 'currency-switcher-container', {
'currency-switcher-container--has-interaction': has_interaction,
})}
>
<div className='currency-switcher-container--left'>
<CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
<div
className={classNames(
'currency-switcher-container__content--text',
`currency-switcher-container__content--text--${
document_status || 'failed' || 'pending' || 'default'
}`
'currency-switcher-container__content',
`currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
)}
>
{title}
<div
className={classNames(
'currency-switcher-container__content--text',
`currency-switcher-container__content--text--${
document_status || 'failed' || 'pending' || 'default'
}`
)}
>
{title}
</div>
{children}
</div>
{children}
</div>
<div className='currency-switcher-container--right'>
{actions}
<Dropdown />
</div>
</div>
<div className='currency-switcher-container--right'>
{actions}
<Dropdown />
</div>
</div>
);
};
);
}
);

export default observer(CurrentSwitcherContainer);
export default CurrentSwitcherContainer;
1 change: 1 addition & 0 deletions packages/stores/src/mockStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ const mock = (): TStores & { is_mock: boolean } => {
no_CR_account: false,
no_MF_account: false,
setTogglePlatformType: jest.fn(),
is_demo: false,
},
menu: {
attach: jest.fn(),
Expand Down
1 change: 1 addition & 0 deletions packages/stores/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@ type TTradersHubStore = {
selected_account_type: string;
no_CR_account: boolean;
no_MF_account: boolean;
is_demo: boolean;
};

/**
Expand Down

1 comment on commit 08fe6e7

@vercel
Copy link

@vercel vercel bot commented on 08fe6e7 May 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

deriv-app – ./

deriv-app.binary.sx
binary.sx
deriv-app.vercel.app
deriv-app-git-master.binary.sx

Please sign in to comment.