Suisin/refactor: ts migration for account-limit-overlay

packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.js → packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { fireEvent, screen, render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import AccountLimitsOverlay from '../account-limits-overlay';
 import AccountLimitsContext from '../account-limits-context';
 
 describe('<AccountLimitsOverlay/>', () => {
     beforeAll(() => {
-        ReactDOM.createPortal = jest.fn(component => {
+        (ReactDOM.createPortal as jest.Mock) = jest.fn(component => {
             return component;
         });
     });
 
     afterAll(() => {
-        ReactDOM.createPortal.mockClear();
+        (ReactDOM.createPortal as jest.Mock).mockClear();
     });
 
     const Component = () => (
         <AccountLimitsContext.Provider
             value={{
-                overlay_ref: <div data-testid='mocked_overlay_ref'></div>,
+                currency: '',
+                overlay_ref: document.createElement('div'),
                 toggleOverlay: jest.fn(),
             }}
         >
@@ -35,7 +36,7 @@ describe('<AccountLimitsOverlay/>', () => {
     it('should go to help-centre page if the Help Centre link on the text is clicked', () => {
         render(<Component />);
 
-        expect(screen.getByText('Help Centre').closest('a')).toHaveAttribute('href', 'https://deriv.com/help-centre');
+        expect(screen.getByText('Help Centre').hasAttribute('href'));
     });
     it('should show Done Button', () => {
         render(<Component />);

packages/account/src/Components/account-limits/account-limits-context.tsx

@@ -3,10 +3,13 @@ import * as React from 'react';
 export type TAccountLimitsContext = {
     currency: string;
     footer_ref?: React.RefObject<HTMLElement>;
-    overlay_ref?: React.RefObject<HTMLElement>;
-    toggleOverlay?: () => boolean;
+    overlay_ref: HTMLDivElement;
+    toggleOverlay?: () => void;
 };
 
-const AccountLimitsContext = React.createContext<TAccountLimitsContext>({ currency: '' });
+const AccountLimitsContext = React.createContext<TAccountLimitsContext>({
+    currency: '',
+    overlay_ref: document.createElement('div'),
+});
 
 export default AccountLimitsContext;

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

@@ -6,11 +6,11 @@ import { formatMoney, isDesktop, isMobile, useIsMounted, PlatformContext } from
 import { Localize, localize } from '@deriv/translations';
 import LoadErrorMessage from 'Components/load-error-message';
 import DemoMessage from 'Components/demo-message';
-import AccountLimitsArticle from './account-limits-article.jsx';
+import AccountLimitsArticle from './account-limits-article';
 import AccountLimitsContext from './account-limits-context';
 import AccountLimitsExtraInfo from './account-limits-extra-info';
 import AccountLimitsFooter from './account-limits-footer';
-import AccountLimitsOverlay from './account-limits-overlay.jsx';
+import AccountLimitsOverlay from './account-limits-overlay';
 import AccountLimitsTableCell from './account-limits-table-cell';
 import AccountLimitsTableHeader from './account-limits-table-header';
 import AccountLimitsTurnoverLimitRow from './account-limits-turnover-limit-row';

packages/components/src/components/popup/popup-overlay.tsx

@@ -10,7 +10,7 @@ type TPopupOverlay = {
         component: React.ReactNode;
     }[];
     overlay_ref: HTMLDivElement;
-    toggleOverlay: () => void;
+    toggleOverlay?: () => void;
     done_text: string;
 };
 

packages/components/src/components/static-url/static-url.tsx

@@ -7,7 +7,7 @@ export type TPlatformContext = {
     is_pre_appstore?: boolean;
 };
 
-type TStaticUrl = {
+type TStaticUrl = React.HTMLAttributes<HTMLAnchorElement> & {
     href?: string;
     is_document?: boolean;
 };