[FEQ] Jim/FEQ-1629/add unit tests for payment method form (binary-com…

…#13857) * chore: add test cases for payment method form * chore: remove unused imports * chore: clean up * chore: add test cases for reducer
niloofar-deriv · Mar 1, 2024 · 74d8136 · 74d8136
1 parent 577007a
commit 74d8136
Show file tree

Hide file tree

Showing 3 changed files with 571 additions and 11 deletions.
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx
@@ -29,25 +29,20 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
         reset,
     } = useForm({ mode: 'all' });
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { actionType, selectedPaymentMethod, title } = rest.formState || {};
-
+    const { actionType, selectedPaymentMethod, title } = rest.formState;
     const { data: availablePaymentMethods } = p2p.paymentMethods.useGet();
     const { create, error: createError, isSuccess: isCreateSuccessful } = p2p.advertiserPaymentMethods.useCreate();
     const { error: updateError, isSuccess: isUpdateSuccessful, update } = p2p.advertiserPaymentMethods.useUpdate();
 
     useEffect(() => {
         if (isCreateSuccessful) {
             onResetFormState();
-        } else if (createError) {
-            setIsModalOpen(true);
         }
     }, [isCreateSuccessful, createError, onResetFormState]);
 
     useEffect(() => {
         if (isUpdateSuccessful) {
             onResetFormState();
-        } else if (updateError) {
-            setIsModalOpen(true);
         }
     }, [isUpdateSuccessful, onResetFormState, updateError]);
 
@@ -58,7 +53,6 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
         }));
         return listItems || [];
     }, [availablePaymentMethods]);
-
     const handleGoBack = () => {
         if (isDirty) {
             setIsModalOpen(true);
@@ -95,6 +89,7 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                                 actionType === 'EDIT' ? null : (
                                     <CloseCircle
                                         className='p2p-v2-payment-method-form__icon--close'
+                                        data-testid='dt_p2p_v2_payment_methods_form_close_icon'
                                         fill='#999999'
                                         height={15.7}
                                         onClick={() => {
@@ -133,7 +128,9 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                             <Button
                                 className='p2p-v2-payment-method-form__button'
                                 color='primary'
-                                onClick={() => {
+                                onClick={e => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
                                     const paymentMethod = availablePaymentMethods?.find(p => p.id === 'other');
                                     if (paymentMethod) {
                                         onAdd({
@@ -173,7 +170,7 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                     isValid={isValid}
                 />
             </form>
-            {actionType === 'EDIT' && (!isUpdateSuccessful || !updateError) && (
+            {actionType === 'EDIT' && (!isUpdateSuccessful || !updateError) && isModalOpen && (
                 // TODO: Remember to translate these strings
                 <PaymentMethodModal
                     description='If you choose to cancel, the edited details will be lost.'
@@ -187,7 +184,7 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                     title='Cancel your edits?'
                 />
             )}
-            {actionType === 'ADD' && (!isCreateSuccessful || !createError) && (
+            {actionType === 'ADD' && (!isCreateSuccessful || !createError) && isModalOpen && (
                 // TODO: Remember to translate these strings
                 <PaymentMethodModal
                     description='If you choose to cancel, the details you’ve entered will be lost.'
@@ -208,7 +205,6 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                     isModalOpen={true}
                     onConfirm={() => {
                         onResetFormState();
-                        setIsModalOpen(false);
                     }}
                     title='Something’s not right'
                 />