Merge pull request #7 from yauheni-kryzhyk-deriv/yauheni/74111/formbo…

…dy_ts_migration

Yauheni/74111/formbody ts migration

packages/account/src/Components/form-body/__tests__/form-body.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { isMobile, isDesktop } from '@deriv/shared';
+import { FormBody } from '../form-body';
+
+jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
+    ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
+    isMobile: jest.fn(),
+    isDesktop: jest.fn(() => true),
+}));
+
+describe('<FormBody />', () => {
+    it('should render FormBody component with children in desktop', () => {
+        render(
+            <FormBody scroll_offset='100px'>
+                <div>Test children</div>
+            </FormBody>
+        );
+
+        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);
+        render(
+            <FormBody>
+                <div>Test children mobile</div>
+            </FormBody>
+        );
+
+        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();
+    });
+});

packages/account/src/Components/form-body/form-body.jsx → 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<TFormBody>) => (
     <React.Fragment>
         <DesktopWrapper>
             <ScrollbarsContainer className='account__scrollbars_container--grid-layout' scroll_offset={scroll_offset}>

packages/account/src/Components/form-body/index.ts

@@ -0,0 +1,3 @@
+import { FormBody } from './form-body';
+
+export default FormBody;

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 }) => (
     <ThemedScrollbars is_bypassed={isMobile()} height={scroll_offset ? `calc(100% - ${scroll_offset})` : '100%'}>
-        <div className={classNames('account__scrollbars_container', className)}>{children}</div>
+        <div
+            className={classNames('account__scrollbars_container', className)}
+            data-testid='dt_scrollbar_container_div'
+        >
+            {children}
+        </div>
     </ThemedScrollbars>
 );

packages/components/src/components/div100vh-container/div100vh-container.tsx

@@ -40,7 +40,7 @@ const Div100vhContainer = ({
     };
     if (is_bypassed) return children as JSX.Element;
     return (
-        <Div100vh id={id} className={className} style={is_disabled ? {} : height_style}>
+        <Div100vh id={id} className={className} style={is_disabled ? {} : height_style} data-testid='dt_div_100_vh'>
             {children}
         </Div100vh>
     );