Merge pull request #43 from suisin-deriv/suisin/74186/ts_migration_se…

…lf_exclusion_wrapper Suisin/refactor: ts migration for self-excllusiono-wrapper
jim-deriv · Jan 18, 2023 · 0360500 · 0360500
2 parents 60f400d + fab9931
commit 0360500
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/.../__tests__/self-exclusion-wrapper.spec.js → ...__tests__/self-exclusion-wrapper.spec.tsx b/.../__tests__/self-exclusion-wrapper.spec.js → ...__tests__/self-exclusion-wrapper.spec.tsx
@@ -8,10 +8,18 @@ jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
     ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
     isMobile: jest.fn(),
 }));
-jest.mock('../self-exclusion-article', () => () => <div>SelfExclusionArticle</div>);
+
+jest.mock('../self-exclusion-article', () => {
+    const mockArticle = () => <div>SelfExclusionArticle</div>;
+    return mockArticle;
+});
 
 describe('<SelfExclusionWrapper />', () => {
-    let mock_context = {};
+    let mock_context = {
+        is_app_settings: false,
+        is_wrapper_bypassed: false,
+        state: {},
+    };
 
     beforeEach(() => {
         mock_context = {
@@ -23,61 +31,60 @@ describe('<SelfExclusionWrapper />', () => {
 
     it('should render SelfExclusionWrapper component without wrapper', () => {
         mock_context.is_wrapper_bypassed = true;
-
-        const { container } = render(
+        render(
             <SelfExclusionContext.Provider value={mock_context}>
                 <SelfExclusionWrapper />
             </SelfExclusionContext.Provider>
         );
 
-        expect(container.querySelector('.da-self-exclusion')).toBeInTheDocument();
-        expect(container.querySelector('.da-self-exclusion__scrollbars')).not.toBeInTheDocument();
+        expect(screen.getByRole('section-self-exclusion-wrapper')).toHaveClass('da-self-exclusion');
+        expect(screen.getByRole('section-self-exclusion-wrapper')).not.toHaveClass('da-self-exclusion__scrollbars');
     });
 
     it('should render SelfExclusionWrapper mobile component without wrapper', () => {
         mock_context.is_wrapper_bypassed = true;
-        isMobile.mockReturnValue(true);
+        (isMobile as jest.Mock).mockReturnValue(true);
 
-        const { container } = render(
+        render(
             <SelfExclusionContext.Provider value={mock_context}>
                 <SelfExclusionWrapper />
             </SelfExclusionContext.Provider>
         );
 
         expect(screen.getByText('SelfExclusionArticle')).toBeInTheDocument();
-        expect(container.querySelector('.da-self-exclusion')).toBeInTheDocument();
-        expect(container.querySelector('.da-self-exclusion__scrollbars')).not.toBeInTheDocument();
+        expect(screen.getByRole('section-self-exclusion-wrapper')).toHaveClass('da-self-exclusion');
+        expect(screen.getByRole('section-self-exclusion-wrapper')).not.toHaveClass('da-self-exclusion__scrollbars');
     });
 
     it('should render SelfExclusionWrapper component with wrapper', () => {
-        isMobile.mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(false);
         const mock_child = <div>MockChild</div>;
 
-        const { container } = render(
+        render(
             <SelfExclusionContext.Provider value={mock_context}>
                 <SelfExclusionWrapper>{mock_child}</SelfExclusionWrapper>
             </SelfExclusionContext.Provider>
         );
 
         expect(screen.getByText('MockChild')).toBeInTheDocument();
         expect(screen.getAllByText('SelfExclusionArticle').length).toBe(1);
-        expect(container.querySelector('.da-self-exclusion__wrapper')).toBeInTheDocument();
-        expect(container.querySelector('.da-self-exclusion__scrollbars')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_div_100_vh')).toHaveClass('da-self-exclusion__wrapper');
+        expect(screen.getByTestId('dt_themed_scrollbars')).toHaveClass('da-self-exclusion__scrollbars');
     });
 
     it('should render SelfExclusionWrapper mobile component with wrapper', () => {
-        isMobile.mockReturnValue(true);
+        (isMobile as jest.Mock).mockReturnValue(true);
         const mock_child = <div>MockChild</div>;
 
-        const { container } = render(
+        render(
             <SelfExclusionContext.Provider value={mock_context}>
                 <SelfExclusionWrapper>{mock_child}</SelfExclusionWrapper>
             </SelfExclusionContext.Provider>
         );
 
         expect(screen.getByText('MockChild')).toBeInTheDocument();
         expect(screen.getAllByText('SelfExclusionArticle').length).toBe(2);
-        expect(container.querySelector('.da-self-exclusion__wrapper')).toBeInTheDocument();
-        expect(container.querySelector('.da-self-exclusion__scrollbars')).not.toBeInTheDocument();
+        expect(screen.getByTestId('dt_div_100_vh')).toHaveClass('da-self-exclusion__wrapper');
+        expect(screen.getByTestId('dt_div_100_vh')).not.toHaveClass('da-self-exclusion__scrollbars');
     });
 });
diff --git a/...self-exclusion/self-exclusion-wrapper.jsx → ...self-exclusion/self-exclusion-wrapper.tsx b/...self-exclusion/self-exclusion-wrapper.jsx → ...self-exclusion/self-exclusion-wrapper.tsx
@@ -1,12 +1,11 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import classNames from 'classnames';
 import { isDesktop, isMobile } from '@deriv/shared';
 import { Div100vhContainer, ThemedScrollbars } from '@deriv/components';
 import SelfExclusionArticle from './self-exclusion-article.jsx';
 import SelfExclusionContext from './self-exclusion-context';
 
-const SelfExclusionWrapper = ({ children }) => {
+const SelfExclusionWrapper = ({ children }: { children?: React.ReactNode }) => {
     const { is_app_settings, is_wrapper_bypassed, state } = React.useContext(SelfExclusionContext);
 
     // "is_wrapper_bypassed" is currently used for a <AppSettings> hosted <SelfExclusion>.
@@ -15,6 +14,7 @@ const SelfExclusionWrapper = ({ children }) => {
     if (is_wrapper_bypassed) {
         return (
             <section
+                role='section-self-exclusion-wrapper'
                 className={classNames('da-self-exclusion', {
                     'da-self-exclusion--app-settings': is_app_settings,
                 })}
@@ -42,8 +42,4 @@ const SelfExclusionWrapper = ({ children }) => {
     );
 };
 
-SelfExclusionWrapper.propTypes = {
-    children: PropTypes.any.isRequired,
-};
-
 export default SelfExclusionWrapper;
diff --git a/packages/account/src/Components/self-exclusion/self-exclusion.jsx b/packages/account/src/Components/self-exclusion/self-exclusion.jsx
@@ -16,7 +16,7 @@ import LoadErrorMessage from 'Components/load-error-message';
 import SelfExclusionArticleContent from './self-exclusion-article-content';
 import SelfExclusionContext from './self-exclusion-context';
 import SelfExclusionModal from './self-exclusion-modal.jsx';
-import SelfExclusionWrapper from './self-exclusion-wrapper.jsx';
+import SelfExclusionWrapper from './self-exclusion-wrapper';
 import SelfExclusionForm from './self-exclusion-form.jsx';
 
 const SelfExclusion = ({