Merge pull request #60 from suisin-deriv/suisin/74183/ts_migration_se…

…lf_exclusion_inputs Suisin/refactor: ts migration for self-exclusion-inputs
niloofar-deriv · Feb 16, 2023 · 0bf8098 · 0bf8098
2 parents 1ecbb05 + 7146965
commit 0bf8098
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 75 deletions.
diff --git a/...n/__tests__/self-exclusion-inputs.spec.js → .../__tests__/self-exclusion-inputs.spec.tsx b/...n/__tests__/self-exclusion-inputs.spec.js → .../__tests__/self-exclusion-inputs.spec.tsx
@@ -1,22 +1,69 @@
 import React from 'react';
-import { Formik } from 'formik';
+import { Formik, FormikContextType } from 'formik';
 import * as formik from 'formik';
 import { fireEvent, render, screen } from '@testing-library/react';
 import SelfExclusionInputs from '../self-exclusion-inputs';
-import SelfExclusionContext from '../self-exclusion-context';
+import SelfExclusionContext, { TSelfExclusionContext } from '../self-exclusion-context';
 
-jest.mock('../self-exclusion-footer', () => () => <div>SelfExclusionFooter</div>);
+jest.mock('../self-exclusion-footer', () => {
+    const MockSelfExclusionFooter = () => <div>SelfExclusionFooter</div>;
+    return MockSelfExclusionFooter;
+});
 
-const mockUseFormikContext = jest.spyOn(formik, 'useFormikContext');
+let mock_context: TSelfExclusionContext = {
+    currency: '',
+    currency_display: '',
+    footer_ref: undefined,
+    getMaxLength: jest.fn(),
+    goToConfirm: jest.fn(),
+    is_appstore: false,
+    is_app_settings: false,
+    is_eu: false,
+    is_mf: false,
+    is_mlt: false,
+    is_mx: false,
+    is_tablet: false,
+    session_duration_digits: false,
+    handleSubmit: jest.fn(),
+    overlay_ref: document.createElement('div'),
+};
+const mockUseFormikContext = jest.fn<FormikContextType<unknown>, []>();
+jest.spyOn(formik, 'useFormikContext').mockImplementation(mockUseFormikContext);
 
 describe('<SelfExclusionInputs />', () => {
-    let mock_context = {};
+    const common_mock_formik_context = {
+        touched: {},
+        isValidating: false,
+        submitCount: 0,
+        setStatus: jest.fn(),
+        setErrors: jest.fn(),
+        setSubmitting: jest.fn(),
+        setTouched: jest.fn(),
+        setValues: jest.fn(),
+        setFieldError: jest.fn(),
+        setFieldTouched: jest.fn(),
+        validateForm: jest.fn(),
+        validateField: jest.fn(),
+        resetForm: jest.fn(),
+        submitForm: jest.fn(),
+        setFormikState: jest.fn(),
+        handleSubmit: jest.fn(),
+        handleReset: jest.fn(),
+        getFieldProps: jest.fn(),
+        getFieldMeta: jest.fn(),
+        getFieldHelpers: jest.fn(),
+        initialValues: undefined,
+        initialErrors: {},
+        initialTouched: {},
+        registerField: jest.fn(),
+        unregisterField: jest.fn(),
+    };
 
     beforeEach(() => {
         mock_context = {
             currency: 'test currency',
             currency_display: 'test currency',
-            footer_ref: null,
+            footer_ref: undefined,
             getMaxLength: jest.fn(),
             goToConfirm: jest.fn(),
             is_appstore: false,
@@ -26,7 +73,9 @@ describe('<SelfExclusionInputs />', () => {
             is_mlt: false,
             is_mx: false,
             is_tablet: false,
-            session_duration_digits: 0,
+            session_duration_digits: false,
+            handleSubmit: jest.fn(),
+            overlay_ref: document.createElement('div'),
         };
         mockUseFormikContext.mockReturnValue({
             dirty: false,
@@ -37,14 +86,15 @@ describe('<SelfExclusionInputs />', () => {
             isValid: false,
             setFieldValue: jest.fn(),
             values: {},
+            ...common_mock_formik_context,
         });
     });
 
     it('should render SelfExclusionFooter instead of Next Button', () => {
-        mock_context.footer_ref = true;
+        mock_context.footer_ref = React.createRef();
 
         render(
-            <Formik>
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
@@ -64,12 +114,13 @@ describe('<SelfExclusionInputs />', () => {
             handleBlur: jest.fn(),
             handleChange: jest.fn(),
             setFieldValue: jest.fn(),
+            ...common_mock_formik_context,
         });
 
         const mockGoToConfirm = mock_context.goToConfirm;
 
         render(
-            <Formik>
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
@@ -111,12 +162,13 @@ describe('<SelfExclusionInputs />', () => {
             isSubmitting: false,
             isValid: true,
             setFieldValue: jest.fn(),
+            ...common_mock_formik_context,
         });
 
         const mockGoToConfirm = mock_context.goToConfirm;
 
         render(
-            <Formik>
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
@@ -172,10 +224,11 @@ describe('<SelfExclusionInputs />', () => {
             isSubmitting: false,
             isValid: true,
             setFieldValue: jest.fn(),
+            ...common_mock_formik_context,
         });
 
         render(
-            <Formik>
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
@@ -202,89 +255,99 @@ describe('<SelfExclusionInputs />', () => {
     it('Should trigger handleChange callback when the input field changes in StakeLossAndLimitsInputs', () => {
         const mockHandleChange = mockUseFormikContext().handleChange;
 
-        const { container } = render(
-            <Formik>
+        render(
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
             </Formik>
         );
 
-        const el_input = container.querySelector(`input[name="max_turnover"]`);
+        const el_input: HTMLTextAreaElement | undefined = screen
+            .getAllByRole<HTMLTextAreaElement>('textbox')
+            .find((e: HTMLTextAreaElement) => e.name === 'max_turnover');
         expect(el_input).toBeInTheDocument();
-        fireEvent.change(el_input, { target: { value: 200 } });
+        fireEvent.change(el_input as Node, { target: { value: '200' } });
         expect(mockHandleChange).toHaveBeenCalledTimes(1);
     });
 
     it('Should trigger handleChange callback when the input field changes in SessionAndLoginLimitsInputs', () => {
         const mockHandleChange = mockUseFormikContext().handleChange;
 
-        const { container } = render(
-            <Formik>
+        render(
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
             </Formik>
         );
 
-        const el_input = container.querySelector(`input[name="session_duration_limit"]`);
+        const el_input: HTMLTextAreaElement | undefined = screen
+            .getAllByRole<HTMLTextAreaElement>('textbox')
+            .find((e: HTMLTextAreaElement) => e.name === 'session_duration_limit');
         expect(el_input).toBeInTheDocument();
-        fireEvent.change(el_input, { target: { value: 500 } });
+        fireEvent.change(el_input as Node, { target: { value: 500 } });
         expect(mockHandleChange).toHaveBeenCalledTimes(1);
     });
 
     it('Should trigger handleChange callback when the input field changes in MaximumAccountBalanceAndOpenPositionsInputs', () => {
         const mockHandleChange = mockUseFormikContext().handleChange;
 
-        const { container } = render(
-            <Formik>
+        render(
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
             </Formik>
         );
 
-        const el_input = container.querySelector(`input[name="max_balance"]`);
+        const el_input: HTMLTextAreaElement | undefined = screen
+            .getAllByRole<HTMLTextAreaElement>('textbox')
+            .find((e: HTMLTextAreaElement) => e.name === 'max_balance');
         expect(el_input).toBeInTheDocument();
-        fireEvent.change(el_input, { target: { value: 900 } });
+        fireEvent.change(el_input as Node, { target: { value: 900 } });
         expect(mockHandleChange).toHaveBeenCalledTimes(1);
-        expect(el_input.value).toBe('900');
+        expect(el_input?.value).toBe('900');
     });
 
     it('Should trigger handleChange callback when the input field changes in MaximumDepositLimitInputs', () => {
         const mockHandleChange = mockUseFormikContext().handleChange;
         mock_context.is_mlt = true;
 
-        const { container } = render(
-            <Formik>
+        render(
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
             </Formik>
         );
 
-        const el_input = container.querySelector(`input[name="max_deposit"]`);
+        const el_input: HTMLTextAreaElement | undefined = screen
+            .getAllByRole<HTMLTextAreaElement>('textbox')
+            .find((e: HTMLTextAreaElement) => e.name === 'max_deposit');
         expect(el_input).toBeInTheDocument();
-        fireEvent.change(el_input, { target: { value: 700 } });
+        fireEvent.change(el_input as Node, { target: { value: 700 } });
         expect(mockHandleChange).toHaveBeenCalledTimes(1);
-        expect(el_input.value).toBe('700');
+        expect(el_input?.value).toBe('700');
     });
 
     it('Should trigger onChange callback when the date field changes in SessionAndLoginLimitsInputs', () => {
         const mockSetFieldValue = mockUseFormikContext().setFieldValue;
 
-        const { container } = render(
-            <Formik>
+        render(
+            <Formik initialValues={{}} onSubmit={common_mock_formik_context.handleSubmit()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionInputs />
                 </SelfExclusionContext.Provider>
             </Formik>
         );
 
-        const exclude_date_input = container.querySelector(`input[name="exclude_until"]`);
+        const exclude_date_input: HTMLTextAreaElement | undefined = screen
+            .getAllByRole<HTMLTextAreaElement>('textbox')
+            .find((e: HTMLTextAreaElement) => e.name === 'exclude_until');
         expect(exclude_date_input).toBeInTheDocument();
-        fireEvent.click(exclude_date_input);
-        fireEvent.change(exclude_date_input, { target: { value: '2012-12-12' } });
+        fireEvent.click(exclude_date_input as Node);
+        fireEvent.change(exclude_date_input as Node, { target: { value: '2012-12-12' } });
         expect(mockSetFieldValue).toHaveBeenCalledTimes(1);
         expect(mockSetFieldValue).toHaveBeenCalledWith('exclude_until', '2012-12-12', true);
     });

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion-context.tsx b/packages/account/src/Components/self-exclusion/self-exclusion-context.tsx
@@ -15,6 +15,15 @@ export type TSelfExclusionContext = {
     state?: FormikValues;
     overlay_ref: HTMLDivElement;
     validateFields?: () => void;
+    getMaxLength?: (value: string) => void;
+    is_mlt?: boolean;
+    is_mx?: boolean;
+    is_mf?: boolean;
+    is_tablet?: boolean;
+    footer_ref?: React.RefObject<HTMLElement>;
+    session_duration_digits?: boolean;
+    goToConfirm?: (value: FormikValues) => void;
+    is_appstore?: boolean;
 };
 
 const SelfExclusionContext = React.createContext<TSelfExclusionContext>({

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion-form.tsx b/packages/account/src/Components/self-exclusion/self-exclusion-form.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Form, Formik } from 'formik';
 import SelfExclusionContext from './self-exclusion-context';
 import SelfExclusionConfirmPage from './self-exclusion-confirm-page';
-import SelfExclusionInputs from './self-exclusion-inputs.jsx';
+import SelfExclusionInputs from './self-exclusion-inputs';
 
 const SelfExclusionForm = () => {
     const { handleSubmit, state, validateFields } = React.useContext(SelfExclusionContext);