From 123d8447e89fb2ffd748236d6b4e81fddba8ba1e Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 11 Jan 2023 16:44:00 +0800 Subject: [PATCH 1/2] refactor: ts migration for account-limit-overlay --- ...it-overlay.spec.js => account-limit-overlay.spec.tsx} | 7 ++++--- .../Components/account-limits/account-limits-context.tsx | 9 ++++++--- ...unt-limits-overlay.jsx => account-limits-overlay.tsx} | 0 .../components/src/components/popup/popup-overlay.tsx | 2 +- .../components/src/components/static-url/static-url.tsx | 2 +- 5 files changed, 12 insertions(+), 8 deletions(-) rename packages/account/src/Components/account-limits/__tests__/{account-limit-overlay.spec.js => account-limit-overlay.spec.tsx} (83%) rename packages/account/src/Components/account-limits/{account-limits-overlay.jsx => account-limits-overlay.tsx} (100%) diff --git a/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.js b/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx similarity index 83% rename from packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.js rename to packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx index b4e3c1e333e8..c2671fb247ee 100644 --- a/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.js +++ b/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx @@ -1,6 +1,6 @@ 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'; @@ -18,7 +18,8 @@ describe('', () => { const Component = () => ( , + currency: '', + overlay_ref: document.createElement('div'), toggleOverlay: jest.fn(), }} > @@ -35,7 +36,7 @@ describe('', () => { it('should go to help-centre page if the Help Centre link on the text is clicked', () => { render(); - 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(); diff --git a/packages/account/src/Components/account-limits/account-limits-context.tsx b/packages/account/src/Components/account-limits/account-limits-context.tsx index e1237f0462a4..3ee0a4067ad8 100644 --- a/packages/account/src/Components/account-limits/account-limits-context.tsx +++ b/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; - overlay_ref?: React.RefObject; - toggleOverlay?: () => boolean; + overlay_ref: HTMLDivElement; + toggleOverlay?: () => void; }; -const AccountLimitsContext = React.createContext({ currency: '' }); +const AccountLimitsContext = React.createContext({ + currency: '', + overlay_ref: document.createElement('div'), +}); export default AccountLimitsContext; diff --git a/packages/account/src/Components/account-limits/account-limits-overlay.jsx b/packages/account/src/Components/account-limits/account-limits-overlay.tsx similarity index 100% rename from packages/account/src/Components/account-limits/account-limits-overlay.jsx rename to packages/account/src/Components/account-limits/account-limits-overlay.tsx diff --git a/packages/components/src/components/popup/popup-overlay.tsx b/packages/components/src/components/popup/popup-overlay.tsx index e44e55d182e3..4f922c768f95 100644 --- a/packages/components/src/components/popup/popup-overlay.tsx +++ b/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; }; diff --git a/packages/components/src/components/static-url/static-url.tsx b/packages/components/src/components/static-url/static-url.tsx index 1d0d5dcef238..474038358a87 100644 --- a/packages/components/src/components/static-url/static-url.tsx +++ b/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 & { href?: string; is_document?: boolean; }; From f4db147812a6d22bed4f7b75b5f43cf413b6abb5 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 11 Jan 2023 16:57:23 +0800 Subject: [PATCH 2/2] chore: remove .jsx from files --- .../account-limits/__tests__/account-limit-overlay.spec.tsx | 4 ++-- .../account/src/Components/account-limits/account-limits.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx b/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx index c2671fb247ee..b61ef8b811ea 100644 --- a/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx +++ b/packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx @@ -6,13 +6,13 @@ import AccountLimitsContext from '../account-limits-context'; describe('', () => { 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 = () => ( diff --git a/packages/account/src/Components/account-limits/account-limits.jsx b/packages/account/src/Components/account-limits/account-limits.jsx index 1871c9aa832c..c6590f36c67c 100644 --- a/packages/account/src/Components/account-limits/account-limits.jsx +++ b/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';