Merge 024e3d8 into 94644cd

Author: kate-deriv

packages/core/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
     ...baseConfigForPackages,
     moduleNameMapper: {
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
+        '\\.css$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
         '@deriv-com/translations': '<rootDir>/../../__mocks__/translation.mock.js',
         '^_common/(.*)$': '<rootDir>/src/_common/$1',
@@ -18,4 +19,5 @@ module.exports = {
         '^Services$': '<rootDir>/src/Services/index.js',
         '^Stores/(.*)$': '<rootDir>/src/Stores/$1',
     },
+    transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/quill-ui|@simplewebauthn/browser)).+\\.js$'],
 };

packages/core/src/App/Components/Layout/Header/account-info-wrapper.tsx

@@ -5,17 +5,23 @@ import { isBot } from '@deriv/shared';
 type TAccountInfoWrapper = {
     is_disabled?: boolean;
     is_mobile?: boolean;
+    is_dtrader_v2?: boolean;
     disabled_message?: string;
 };
 
 const AccountInfoWrapper = ({
     is_disabled,
     is_mobile,
+    is_dtrader_v2,
     disabled_message,
     children,
 }: React.PropsWithChildren<TAccountInfoWrapper>) =>
     is_disabled && disabled_message ? (
-        <Popover alignment={isBot() && is_mobile ? 'bottom' : 'left'} message={disabled_message} zIndex='99999'>
+        <Popover
+            alignment={(isBot() || is_dtrader_v2) && is_mobile ? 'bottom' : 'left'}
+            message={disabled_message}
+            zIndex='99999'
+        >
             {children}
         </Popover>
     ) : (

packages/core/src/App/Components/Layout/Header/dtrader-v2/Utils/__tests__/account-switcher-dtrader-v2-utils.spec.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { getAccountTitle, getAccountIcon } from '../account-switcher-dtrader-v2-utils';
+
+const mock_currency_none_icon = 'CurrencyNoneIcon';
+const mock_currency_demo_icon = 'CurrencyDemoIcon';
+const mock_currency_usd_icon = 'CurrencyUsdIcon';
+
+jest.mock('@deriv/quill-icons', () => ({
+    ...jest.requireActual('@deriv/quill-icons'),
+    CurrencyNoneIcon: jest.fn(() => mock_currency_none_icon),
+    CurrencyDemoIcon: jest.fn(() => mock_currency_demo_icon),
+    CurrencyUsdIcon: jest.fn(() => mock_currency_usd_icon),
+}));
+
+describe('getAccountTitle', () => {
+    const mock_args = {
+        currency: '',
+        loginid: 'VRTC90000884',
+        is_virtual: false,
+        show_no_currency: true,
+    };
+
+    it('should return "Multipliers" if loginid contains MF', () => {
+        render(getAccountTitle({ ...mock_args, loginid: 'MF90000884' }));
+
+        expect(screen.getByText('Multipliers')).toBeInTheDocument();
+    });
+
+    it('should return "Demo" if loginid does not contain MF and is_virtual === true', () => {
+        render(getAccountTitle({ ...mock_args, is_virtual: true }));
+
+        expect(screen.getByText('Demo')).toBeInTheDocument();
+    });
+
+    it('should return "No currency assigned" if loginid does not contain MF, is_virtual and currency are falsy and show_no_currency is true', () => {
+        render(getAccountTitle(mock_args));
+
+        expect(screen.getByText('No currency assigned')).toBeInTheDocument();
+    });
+
+    it('should return users loginid if loginid does not contain MF, is_virtual and currency are falsy and show_no_currency is false', () => {
+        expect(getAccountTitle({ ...mock_args, show_no_currency: false })).toBe('VRTC90000884');
+    });
+
+    it('should return currency name if loginid does not contain MF, is_virtual and show_no_currency are falsy and there is currency', () => {
+        expect(getAccountTitle({ ...mock_args, currency: 'USDT' })).toBe('Tether Omni');
+    });
+});
+
+describe('getAccountIcon', () => {
+    const mock_args: Parameters<typeof getAccountIcon>[0] = {
+        currency: 'USD',
+        is_virtual: false,
+        size: 'sm',
+    };
+
+    it('should return CurrencyDemoIcon icon if is_virtual === true', () => {
+        render(getAccountIcon({ ...mock_args, is_virtual: true }));
+
+        expect(screen.getByText(mock_currency_demo_icon)).toBeInTheDocument();
+    });
+
+    it('should return CurrencyNoneIcon icon if currency is falsy', () => {
+        render(getAccountIcon({ ...mock_args, currency: '' }));
+
+        expect(screen.getByText(mock_currency_none_icon)).toBeInTheDocument();
+    });
+
+    it('should return an icon specific for a passed currency', () => {
+        render(getAccountIcon({ ...mock_args, currency: 'USD' }));
+
+        expect(screen.getByText(mock_currency_usd_icon)).toBeInTheDocument();
+    });
+
+    it('should return CurrencyNoneIcon icon if currency is not supported', () => {
+        render(getAccountIcon({ ...mock_args, currency: 'KateCoin' }));
+
+        expect(screen.getByText(mock_currency_none_icon)).toBeInTheDocument();
+    });
+});

packages/core/src/App/Components/Layout/Header/dtrader-v2/Utils/account-switcher-dtrader-v2-utils.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { getCurrencyName } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+import {
+    CurrencyBusdIcon,
+    CurrencyAudIcon,
+    CurrencyBchIcon,
+    CurrencyUsdtIcon,
+    CurrencyBtcIcon,
+    CurrencyEthIcon,
+    CurrencyLtcIcon,
+    CurrencyUsdcIcon,
+    CurrencyUsdIcon,
+    CurrencyEurIcon,
+    CurrencyGbpIcon,
+    CurrencyNoneIcon,
+    CurrencyDemoIcon,
+    CurrencyMultiCollateralDaiIcon,
+    CurrencyEursIcon,
+    CurrencyIdkIcon,
+    CurrencyPaxIcon,
+    CurrencyTusdIcon,
+    CurrencyUsdkIcon,
+    CurrencyXrpIcon,
+} from '@deriv/quill-icons';
+
+export const BROKER_CODE = {
+    MF: 'MF',
+    CR: 'CR',
+    VRTC: 'VRTC',
+};
+
+export const getAccountTitle = ({
+    currency,
+    loginid,
+    is_virtual,
+    show_no_currency,
+}: {
+    currency?: string;
+    loginid?: string;
+    is_virtual?: boolean;
+    show_no_currency?: boolean;
+}) => {
+    const account_type = loginid?.replace(/\d/g, '');
+
+    if (account_type === BROKER_CODE.MF) {
+        return <Localize i18n_default_text='Multipliers' />;
+    }
+
+    if (is_virtual) {
+        return <Localize i18n_default_text='Demo' />;
+    }
+
+    if (!currency) {
+        return show_no_currency ? <Localize i18n_default_text='No currency assigned' /> : loginid;
+    }
+
+    return getCurrencyName(currency);
+};
+
+export const getAccountIcon = ({
+    currency,
+    is_virtual,
+    size,
+}: {
+    currency?: string;
+    is_virtual?: boolean;
+    size?: React.ComponentProps<typeof CurrencyDemoIcon>['iconSize'];
+}) => {
+    if (is_virtual) return <CurrencyDemoIcon iconSize={size} />;
+    if (!currency) return <CurrencyNoneIcon iconSize={size} />;
+
+    const key = currency.toUpperCase();
+    const config = {
+        AUD: <CurrencyAudIcon iconSize={size} />,
+        BCH: <CurrencyBchIcon iconSize={size} />,
+        BUSD: <CurrencyBusdIcon iconSize={size} />,
+        DAI: <CurrencyMultiCollateralDaiIcon iconSize={size} />,
+        TUSDT: <CurrencyUsdtIcon iconSize={size} />,
+        UST: <CurrencyUsdtIcon iconSize={size} />,
+        EUSDT: <CurrencyUsdtIcon iconSize={size} />,
+        BTC: <CurrencyBtcIcon iconSize={size} />,
+        ETH: <CurrencyEthIcon iconSize={size} />,
+        LTC: <CurrencyLtcIcon iconSize={size} />,
+        USDC: <CurrencyUsdcIcon iconSize={size} />,
+        USD: <CurrencyUsdIcon iconSize={size} />,
+        EUR: <CurrencyEurIcon iconSize={size} />,
+        GBP: <CurrencyGbpIcon iconSize={size} />,
+        EURS: <CurrencyEursIcon iconSize={size} />,
+        IDK: <CurrencyIdkIcon iconSize={size} />,
+        PAX: <CurrencyPaxIcon iconSize={size} />,
+        TUSD: <CurrencyTusdIcon iconSize={size} />,
+        USDK: <CurrencyUsdkIcon iconSize={size} />,
+        XRP: <CurrencyXrpIcon iconSize={size} />,
+    };
+
+    return config[key as keyof typeof config] ?? <CurrencyNoneIcon iconSize={size} />;
+};

packages/core/src/App/Components/Layout/Header/dtrader-v2/__tests__/account-actions-dtrader-v2.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Loadable from 'react-loadable';
+import AccountActionsDTraderV2 from '../account-actions-dtrader-v2';
+
+const mock_props = {
+    acc_switcher_disabled_message: 'acc_switcher_disabled_message',
+    account_switcher_title: 'account_switcher_title',
+    account_type: 'account_type',
+    balance: 1000,
+    currency: 'USD',
+    is_acc_switcher_on: true,
+    is_acc_switcher_disabled: false,
+    is_eu: true,
+    is_virtual: true,
+    notifications_count: 0,
+    toggleAccountsDialog: jest.fn(),
+};
+const media_query_list = {
+    matches: true,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+};
+
+jest.mock('@deriv/quill-icons', () => ({
+    ...jest.requireActual('@deriv/quill-icons'),
+    LabelPairedBellLgRegularIcon: jest.fn(() => 'LabelPairedBellLgRegularIcon'),
+}));
+jest.mock('../account-info-dtrader-v2', () => jest.fn(() => 'AccountInfoDTraderV2'));
+
+window.matchMedia = jest.fn().mockImplementation(() => media_query_list);
+Loadable.preloadAll();
+
+describe('AccountActionsDTraderV2', () => {
+    it('should render icon component without Badge count if notifications_count is falsy', () => {
+        render(<AccountActionsDTraderV2 {...mock_props} />);
+
+        expect(screen.getByText('LabelPairedBellLgRegularIcon')).toBeInTheDocument();
+    });
+
+    it('should render icon component with Badge count if notifications_count was passed', () => {
+        render(<AccountActionsDTraderV2 {...mock_props} notifications_count={2} balance={undefined} />);
+
+        expect(screen.getByText('AccountInfoDTraderV2')).toBeInTheDocument();
+        expect(screen.getByText('LabelPairedBellLgRegularIcon')).toBeInTheDocument();
+        expect(screen.getByText('2')).toBeInTheDocument();
+    });
+
+    it('should render component even if balance is undefined', () => {
+        render(<AccountActionsDTraderV2 {...mock_props} balance={undefined} />);
+
+        expect(screen.getByText('AccountInfoDTraderV2')).toBeInTheDocument();
+        expect(screen.getByText('LabelPairedBellLgRegularIcon')).toBeInTheDocument();
+    });
+});

packages/core/src/App/Components/Layout/Header/dtrader-v2/__tests__/account-group-wrapper-dtrader-v2.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AccountGroupWrapper from '../account-group-wrapper-dtrader-v2';
+
+const children = 'Children';
+const separator_text = 'separator_text';
+const mock_props = {
+    separator_text,
+    show_bottom_separator: false,
+};
+
+describe('AccountGroupWrapper', () => {
+    it('should render only passed children if separator_text was not passed', () => {
+        render(
+            <AccountGroupWrapper>
+                <div>{children}</div>
+            </AccountGroupWrapper>
+        );
+
+        expect(screen.getByText(children)).toBeInTheDocument();
+        expect(screen.queryByText(separator_text)).not.toBeInTheDocument();
+    });
+
+    it('should render passed children and separator_text if it was passed', () => {
+        render(
+            <AccountGroupWrapper {...mock_props}>
+                <div>{children}</div>
+            </AccountGroupWrapper>
+        );
+
+        expect(screen.getByText(children)).toBeInTheDocument();
+        expect(screen.getByText(separator_text)).toBeInTheDocument();
+    });
+});

packages/core/src/App/Components/Layout/Header/dtrader-v2/__tests__/account-info-dtrader-v2.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AccountInfoDTraderV2 from '../account-info-dtrader-v2';
+
+const account_switcher_title = 'account_switcher_title';
+
+jest.mock('../../account-info-wrapper', () => jest.fn(({ children }) => children));
+jest.mock('../account-switcher-dtrader-v2', () => jest.fn(() => 'AccountSwitcherDTraderV2'));
+
+const media_query_list = {
+    matches: true,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+};
+
+window.matchMedia = jest.fn().mockImplementation(() => media_query_list);
+
+describe('AccountInfoDTraderV2', () => {
+    let mock_props: React.ComponentProps<typeof AccountInfoDTraderV2>;
+
+    beforeEach(() => {
+        mock_props = {
+            acc_switcher_disabled_message: 'acc_switcher_disabled_message',
+            account_switcher_title,
+            balance: 100,
+            currency: 'USD',
+            is_dialog_on: true,
+            is_virtual: true,
+            is_disabled: false,
+            toggleDialog: jest.fn(),
+        };
+    });
+
+    afterEach(() => jest.clearAllMocks());
+
+    it('should render component with default passed props', () => {
+        render(<AccountInfoDTraderV2 {...mock_props} />);
+
+        expect(screen.getByText(account_switcher_title)).toBeInTheDocument();
+        expect(screen.getByText('100 USD')).toBeInTheDocument();
+        expect(screen.getByText('AccountSwitcherDTraderV2')).toBeInTheDocument();
+    });
+
+    it('should not call toggleDialog if user clicks on account switcher and is_disabled === true', () => {
+        render(<AccountInfoDTraderV2 {...mock_props} is_disabled />);
+
+        expect(mock_props.toggleDialog).not.toBeCalled();
+        userEvent.click(screen.getByText(account_switcher_title));
+        expect(mock_props.toggleDialog).not.toBeCalled();
+    });
+
+    it('should call toggleDialog if user clicks on account switcher and is_disabled === false', () => {
+        render(<AccountInfoDTraderV2 {...mock_props} />);
+
+        expect(mock_props.toggleDialog).not.toBeCalled();
+        userEvent.click(screen.getByText(account_switcher_title));
+        expect(mock_props.toggleDialog).toBeCalled();
+    });
+
+    it('should render "No currency assigned" if currency is falsy', () => {
+        render(<AccountInfoDTraderV2 {...mock_props} currency='' />);
+
+        expect(screen.getByText('No currency assigned')).toBeInTheDocument();
+    });
+
+    it('should render "No currency assigned" if currency is falsy and balance was not passed', () => {
+        render(<AccountInfoDTraderV2 {...mock_props} currency='' balance={undefined} />);
+
+        expect(screen.getByText('No currency assigned')).toBeInTheDocument();
+    });
+
+    it('should not render account_switcher_title if it was not passed', () => {
+        render(<AccountInfoDTraderV2 {...mock_props} account_switcher_title={undefined} />);
+
+        expect(screen.queryByText(account_switcher_title)).not.toBeInTheDocument();
+    });
+
+    it('should call toggleDialog with "false" if user clicks outside the modal when it was open', () => {
+        render(<AccountInfoDTraderV2 {...mock_props} />);
+
+        expect(mock_props.toggleDialog).not.toBeCalled();
+        userEvent.click(screen.getByText(account_switcher_title));
+        expect(mock_props.toggleDialog).toBeCalled();
+        userEvent.click(screen.getByTestId('dt-actionsheet-overlay'));
+        expect(mock_props.toggleDialog).toBeCalledWith(false);
+    });
+});