Merge pull request #30 from suisin-deriv/suisin/74076/ts_migration_fo…

…r_account_limits_extra_info_and_tests

Suisin/74076/ts migration for account limits extra info and tests

packages/account/src/Components/account-limits/__tests__/account-limits-extra-info.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { isMobile } from '@deriv/shared';
+import AccountLimitsExtraInfo from '../account-limits-extra-info';
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn(() => true),
+}));
+
+describe('<AccountLimitsExtraInfo/>', () => {
+    it('should render AccountLimitsExtraInfo component', () => {
+        render(<AccountLimitsExtraInfo message='Lorem ipsum' />);
+        expect(screen.getByText(/lorem ipsum/i)).toBeInTheDocument();
+    });
+
+    it('should render PopoverComponent if isMobile is false', () => {
+        (isMobile as jest.Mock).mockReturnValue(false);
+        render(<AccountLimitsExtraInfo message='Lorem ipsum' />);
+        expect(screen.queryByTestId('dt_acc_limits_popover')).toHaveClass('da-account-limits__popover');
+    });
+
+    it('should pass props to PopoverComponent if isMobile is false', async () => {
+        (isMobile as jest.Mock).mockReturnValue(false);
+        render(<AccountLimitsExtraInfo message='Lorem ipsum' className='test_class' />);
+        const popover = await screen.findByTestId('dt_acc_limits_popover');
+        expect(popover).toHaveClass('test_class');
+    });
+});

packages/account/src/Components/account-limits/account-limits-extra-info.jsx → packages/account/src/Components/account-limits/account-limits-extra-info.tsx

@@ -1,9 +1,13 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { Popover, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 
-const AccountLimitsExtraInfo = ({ message, ...props }) => {
+type TAccountLimitsExtraInfo = {
+    message: string;
+    className?: string;
+};
+
+const AccountLimitsExtraInfo = ({ message, ...props }: TAccountLimitsExtraInfo) => {
     if (isMobile()) {
         return (
             <Text color='less-prominent' line_height='s' size='xxxs'>
@@ -14,6 +18,7 @@ const AccountLimitsExtraInfo = ({ message, ...props }) => {
 
     return (
         <Popover
+            data_testid='dt_acc_limits_popover'
             alignment='right'
             className='da-account-limits__popover'
             icon='info'
@@ -25,8 +30,4 @@ const AccountLimitsExtraInfo = ({ message, ...props }) => {
     );
 };
 
-AccountLimitsExtraInfo.propTypes = {
-    message: PropTypes.string.isRequired,
-};
-
 export default AccountLimitsExtraInfo;

packages/account/src/Components/account-limits/account-limits.jsx

@@ -8,7 +8,7 @@ import LoadErrorMessage from 'Components/load-error-message';
 import DemoMessage from 'Components/demo-message';
 import AccountLimitsArticle from './account-limits-article.jsx';
 import AccountLimitsContext from './account-limits-context';
-import AccountLimitsExtraInfo from './account-limits-extra-info.jsx';
+import AccountLimitsExtraInfo from './account-limits-extra-info';
 import AccountLimitsFooter from './account-limits-footer.jsx';
 import AccountLimitsOverlay from './account-limits-overlay.jsx';
 import AccountLimitsTableCell from './account-limits-table-cell';

packages/components/src/components/popover/popover.tsx

@@ -31,9 +31,11 @@ const Popover = ({
     should_show_cursor,
     window_border,
     zIndex = '1',
+    data_testid,
 }: React.PropsWithChildren<Partial<TPopoverProps>>) => {
     const ref = React.useRef<HTMLDivElement | undefined>();
     const [popover_ref, setPopoverRef] = React.useState<HTMLDivElement | undefined>(undefined);
+
     const [hover_ref, is_hovered] = useHover(null, true);
     const [bubble_hover_ref, is_bubble_hovered] = useHoverCallback();
 
@@ -173,7 +175,7 @@ const Popover = ({
                         );
                     }}
                 >
-                    <div className={classNames('dc-popover', className)} id={id}>
+                    <div data-testid={data_testid} className={classNames('dc-popover', className)} id={id}>
                         <div className={classNames(classNameTarget, 'dc-popover__target')}>
                             {!disable_target_icon && (
                                 <i

packages/components/src/components/types/popover.types.ts

@@ -25,4 +25,5 @@ export type TPopoverProps = {
     should_show_cursor?: boolean;
     zIndex: string;
     window_border: number;
+    data_testid?: string;
 };