From 1edcfaae7896fe765e60b1c7221428f308900b0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Mon, 24 Oct 2022 12:13:36 +0300 Subject: [PATCH 1/2] yauheni/74111/formbody ts migration --- .../{form-body.spec.js => form-body.spec.tsx} | 8 +++++--- .../form-body/{form-body.jsx => form-body.tsx} | 8 ++++++-- packages/account/src/Components/form-body/index.js | 3 --- packages/account/src/Components/form-body/index.ts | 3 +++ .../div100vh-container/div100vh-container.tsx | 14 +++++++------- 5 files changed, 21 insertions(+), 15 deletions(-) rename packages/account/src/Components/form-body/__tests__/{form-body.spec.js => form-body.spec.tsx} (74%) rename packages/account/src/Components/form-body/{form-body.jsx => form-body.tsx} (84%) delete mode 100644 packages/account/src/Components/form-body/index.js create mode 100644 packages/account/src/Components/form-body/index.ts diff --git a/packages/account/src/Components/form-body/__tests__/form-body.spec.js b/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx similarity index 74% rename from packages/account/src/Components/form-body/__tests__/form-body.spec.js rename to packages/account/src/Components/form-body/__tests__/form-body.spec.tsx index 3d3d5214a801..fa60bb0e71b9 100644 --- a/packages/account/src/Components/form-body/__tests__/form-body.spec.js +++ b/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx @@ -16,18 +16,20 @@ describe('', () => {
Test children
 ); - expect(container.querySelector('account__scrollbars_container--grid-layout')).toBeInTheDocument; + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access + expect(container.querySelector('.account__scrollbars_container--grid-layout')).toBeInTheDocument(); expect(screen.getByText('Test children')).toBeInTheDocument(); }); it('should render FormBody component with children in mobile', () => { - isMobile.mockReturnValue(true); - isDesktop.mockReturnValue(false); + (isMobile as jest.Mock).mockReturnValue(true); + (isDesktop as jest.Mock).mockReturnValue(false); const { container } = render(
Test children
 ); + // eslint-disable-next-line testing-library/no-node-access expect(container.firstChild).toHaveClass('account__scrollbars_container--grid-layout'); expect(screen.getByText('Test children')).toBeInTheDocument(); }); diff --git a/packages/account/src/Components/form-body/form-body.jsx b/packages/account/src/Components/form-body/form-body.tsx similarity index 84% rename from packages/account/src/Components/form-body/form-body.jsx rename to packages/account/src/Components/form-body/form-body.tsx index 22a128f2ce1c..e8a69ec0203b 100644 --- a/packages/account/src/Components/form-body/form-body.jsx +++ b/packages/account/src/Components/form-body/form-body.tsx @@ -1,8 +1,12 @@ -import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components'; import React from 'react'; +import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components'; import { ScrollbarsContainer } from 'Components/scrollbars-container/scrollbars-container.jsx'; -export const FormBody = ({ children, scroll_offset }) => ( +type TFormBody = { + scroll_offset?: string; +}; + +export const FormBody = ({ children, scroll_offset }: React.PropsWithChildren) => ( diff --git a/packages/account/src/Components/form-body/index.js b/packages/account/src/Components/form-body/index.js deleted file mode 100644 index 56ff062e3e45..000000000000 --- a/packages/account/src/Components/form-body/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { FormBody } from './form-body.jsx'; - -export default FormBody; diff --git a/packages/account/src/Components/form-body/index.ts b/packages/account/src/Components/form-body/index.ts new file mode 100644 index 000000000000..40f8a2f5613c --- /dev/null +++ b/packages/account/src/Components/form-body/index.ts @@ -0,0 +1,3 @@ +import { FormBody } from './form-body'; + +export default FormBody; diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx index ba67ba7f5be5..c23598e937b6 100644 --- a/packages/components/src/components/div100vh-container/div100vh-container.tsx +++ b/packages/components/src/components/div100vh-container/div100vh-container.tsx @@ -15,13 +15,13 @@ import Div100vh from 'react-div-100vh'; /* To bypass usage of component altogether, use is_bypassed */ type TDiv100vhContainerProps = { - id?: string; - height_offset?: string; + id: string; + height_offset: string; is_bypassed: boolean; is_disabled: boolean; - max_height_offset?: string; - className?: string; - max_autoheight_offset?: string; + max_height_offset: string; + className: string; + max_autoheight_offset: string; }; const Div100vhContainer = ({ @@ -32,13 +32,13 @@ const Div100vhContainer = ({ id, height_offset, max_autoheight_offset, -}: React.PropsWithChildren) => { +}: React.PropsWithChildren>) => { const height_rule = height_offset ? `calc(100rvh - ${height_offset})` : 'calc(100rvh)'; const height_style = { height: max_autoheight_offset ? '' : height_rule, maxHeight: max_autoheight_offset ? `calc(100rvh - ${max_autoheight_offset})` : '', }; - if (is_bypassed) return children; + if (is_bypassed) return children as JSX.Element; return ( {children} From 1dea1e2c8042b95d421b1034dd6437cbd3edcb45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Mon, 31 Oct 2022 18:18:27 +0300 Subject: [PATCH 2/2] test refactor --- .../form-body/__tests__/form-body.spec.tsx | 25 +++++++++++++------ .../scrollbars-container.jsx | 7 +++++- .../div100vh-container/div100vh-container.tsx | 2 +- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx b/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx index fa60bb0e71b9..851a6d3e89c5 100644 --- a/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx +++ b/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx @@ -11,26 +11,35 @@ jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({ describe('', () => { it('should render FormBody component with children in desktop', () => { - const { container } = render( + render(
Test children
 ); - // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access - expect(container.querySelector('.account__scrollbars_container--grid-layout')).toBeInTheDocument(); + + const div_wrapper_sc = screen.getByTestId('dt_scrollbar_container_div'); + expect(div_wrapper_sc).toBeInTheDocument(); + expect(div_wrapper_sc).toHaveClass('account__scrollbars_container--grid-layout'); expect(screen.getByText('Test children')).toBeInTheDocument(); + const div_wrapper_ts = screen.getByTestId('dt_themed_scrollbars'); + expect(div_wrapper_ts).toBeInTheDocument(); + expect(div_wrapper_ts).toHaveStyle('max-height: calc(100% - 100px)'); }); it('should render FormBody component with children in mobile', () => { (isMobile as jest.Mock).mockReturnValue(true); (isDesktop as jest.Mock).mockReturnValue(false); - const { container } = render( + render( -
Test children
+
Test children mobile
 ); - // eslint-disable-next-line testing-library/no-node-access - expect(container.firstChild).toHaveClass('account__scrollbars_container--grid-layout'); - expect(screen.getByText('Test children')).toBeInTheDocument(); + + expect(screen.queryByTestId('dt_scrollbar_container_div')).not.toBeInTheDocument(); + expect(screen.queryByTestId('dt_themed_scrollbars')).not.toBeInTheDocument(); + const div_100_vh = screen.getByTestId('dt_div_100_vh'); + expect(div_100_vh).toBeInTheDocument(); + expect(div_100_vh).toHaveClass('account__scrollbars_container--grid-layout'); + expect(screen.getByText('Test children mobile')).toBeInTheDocument(); }); }); diff --git a/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx b/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx index 7b9f6239bfbb..2d477a772be2 100644 --- a/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx +++ b/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx @@ -5,6 +5,11 @@ import { isMobile } from '@deriv/shared'; export const ScrollbarsContainer = ({ children, className, scroll_offset }) => ( -
{children}
+
+ {children} +
); diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx index 42842be95fc8..062587213525 100644 --- a/packages/components/src/components/div100vh-container/div100vh-container.tsx +++ b/packages/components/src/components/div100vh-container/div100vh-container.tsx @@ -40,7 +40,7 @@ const Div100vhContainer = ({ }; if (is_bypassed) return children as JSX.Element; return ( - + {children} );