From 8128308175f694954879faa3ca3ebea3c6ac94f0 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Mon, 25 Nov 2024 10:55:32 -0500
Subject: [PATCH] Fix console error, refactor tests.

---
 .../existingPaymentMethods.component.js       |  12 +-
 src/app/checkout/step-2/step-2.component.js   |   2 +-
 .../checkout/step-2/step-2.component.spec.js  | 123 ++++++++++--------
 src/app/checkout/step-2/step-2.tpl.html       |   2 +-
 .../paymentMethodForm.modal.tpl.html          |   1 +
 5 files changed, 79 insertions(+), 61 deletions(-)

diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js
index f48674d07..93c52c8dd 100644
--- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js
+++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js
@@ -37,8 +37,7 @@ class ExistingPaymentMethodsController {
   $onInit () {
     this.enableContinue({ $event: false })
     this.loadPaymentMethods()
-    this.addCvvValidators()
-    console.log(this.sessionStorage)
+    this.waitForFormInitialization()
   }
 
   $onChanges (changes) {
@@ -57,6 +56,15 @@ class ExistingPaymentMethodsController {
     }
   }
 
+  waitForFormInitialization () {
+    const unregister = this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode', () => {
+      if (this.creditCardPaymentForm && this.creditCardPaymentForm.securityCode) {
+        unregister()
+        this.addCvvValidators()
+      }
+    })
+  }
+
   addCvvValidators () {
     this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode.$viewValue', (number) => {
       this.creditCardPaymentForm.securityCode.$validators.minLength = cruPayments.creditCard.cvv.validate.minLength
diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js
index d8e3ffc71..8fed22432 100644
--- a/src/app/checkout/step-2/step-2.component.js
+++ b/src/app/checkout/step-2/step-2.component.js
@@ -116,7 +116,7 @@ class Step2Controller {
     }
   }
 
-  getContinueDisabled () {
+  isContinueDisabled () {
     if (this.selectedPaymentMethod?.['card-type'] && typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) {
       return true
     }
diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js
index 1ba2e6e95..b5a67a9be 100644
--- a/src/app/checkout/step-2/step-2.component.spec.js
+++ b/src/app/checkout/step-2/step-2.component.spec.js
@@ -249,14 +249,14 @@ describe('checkout', () => {
       })
     })
 
-    describe('getContinueDisabled', () => {
+    describe('isContinueDisabled', () => {
       it('should return true when there are existing payment methods but none are valid', () => {
         self.controller.handleExistingPaymentLoading(true, true)
         self.controller.handlePaymentChange(undefined)
 
         expect(self.controller.existingPaymentMethods).toBe(true)
         expect(self.controller.selectedPaymentMethod).toBeUndefined()
-        expect(self.controller.getContinueDisabled()).toBe(true)
+        expect(self.controller.isContinueDisabled()).toBe(true)
       })
 
       it('should return false when there are existing payment methods and at least one is valid', () => {
@@ -265,7 +265,7 @@ describe('checkout', () => {
 
         expect(self.controller.existingPaymentMethods).toBe(true)
         expect(self.controller.selectedPaymentMethod).not.toBeUndefined()
-        expect(self.controller.getContinueDisabled()).toBe(false)
+        expect(self.controller.isContinueDisabled()).toBe(false)
       })
 
       it('should return false when there are not existing payment methods', () => {
@@ -273,19 +273,19 @@ describe('checkout', () => {
 
         expect(self.controller.existingPaymentMethods).toBe(false)
         expect(self.controller.selectedPaymentMethod).toBeUndefined()
-        expect(self.controller.getContinueDisabled()).toBe(false)
+        expect(self.controller.isContinueDisabled()).toBe(false)
       })
 
       it('should return true while the payment methods are loading', () => {
         self.controller.$onInit()
 
         expect(self.controller.loadingPaymentMethods).toBe(true)
-        expect(self.controller.getContinueDisabled()).toBe(true)
+        expect(self.controller.isContinueDisabled()).toBe(true)
 
         self.controller.handleExistingPaymentLoading(true, false)
 
         expect(self.controller.loadingPaymentMethods).toBe(false)
-        expect(self.controller.getContinueDisabled()).toBe(false)
+        expect(self.controller.isContinueDisabled()).toBe(false)
       })
 
       it('should return true while the payment form is encrypting or loading', () => {
@@ -295,80 +295,89 @@ describe('checkout', () => {
         self.controller.onPaymentFormStateChange({ state: 'encrypting' })
 
         expect(self.controller.paymentFormState).toBe('encrypting')
-        expect(self.controller.getContinueDisabled()).toBe(true)
+        expect(self.controller.isContinueDisabled()).toBe(true)
 
         self.controller.onPaymentFormStateChange({ state: 'loading', payload: {}, update: false })
 
         expect(self.controller.paymentFormState).toBe('loading')
-        expect(self.controller.getContinueDisabled()).toBe(true)
+        expect(self.controller.isContinueDisabled()).toBe(true)
 
         deferred.resolve()
         self.$flushPendingTasks()
 
         expect(self.controller.paymentFormState).toBe('success')
-        expect(self.controller.getContinueDisabled()).toBe(false)
+        expect(self.controller.isContinueDisabled()).toBe(false)
       })
 
-      it('should return true when cvv is invalid and credit card is used', () => {
-        self.controller.handleExistingPaymentLoading(true, true)
-        self.controller.isCvvValid = false
-        self.controller.handlePaymentChange({'card-type': 'visa'})
-        
-        expect(self.controller.getContinueDisabled()).toBe(true)
-      })
+      describe('existing credit card used', () => {
+        it('should return true when cvv is invalid', () => {
+          self.controller.handleExistingPaymentLoading(true, true)
+          self.controller.isCvvValid = false
+          self.controller.handlePaymentChange({'card-type': 'visa'})
+          
+          expect(self.controller.isContinueDisabled()).toBe(true)
+        })
 
-      it('should return true when cvv is valid and credit card is used', () => {
-        self.controller.handleExistingPaymentLoading(true, true)
-        self.controller.isCvvValid = true
-        self.controller.handlePaymentChange({'card-type': 'visa'})
-        
-        expect(self.controller.getContinueDisabled()).toBe(false)
-      })
+        it('should return true when cvv is valid', () => {
+          self.controller.handleExistingPaymentLoading(true, true)
+          self.controller.isCvvValid = true
+          self.controller.handlePaymentChange({'card-type': 'visa'})
+          
+          expect(self.controller.isContinueDisabled()).toBe(false)
+        })
 
-      it('should return true when cvv validity is undefined and credit card is used', () => {
-        self.controller.handleExistingPaymentLoading(true, true)
-        self.controller.isCvvValid = undefined
-        self.controller.handlePaymentChange({'card-type': 'visa'})
-        
-        expect(self.controller.getContinueDisabled()).toBe(false)
-      })
+        it('should return true when cvv validity is undefined', () => {
+          self.controller.handleExistingPaymentLoading(true, true)
+          self.controller.isCvvValid = undefined
+          self.controller.handlePaymentChange({'card-type': 'visa'})
+          
+          expect(self.controller.isContinueDisabled()).toBe(false)
+        })
 
-      it('should return false when cvv is invalid and credit card is used', () => {
-        self.controller.handleExistingPaymentLoading(true, true)
-        self.controller.isCvvValid = false
-        self.controller.handlePaymentChange({'account-type': 'checking'})
-        
-        expect(self.controller.getContinueDisabled()).toBe(false)
+        it('should return false when cvv is invalid', () => {
+          self.controller.handleExistingPaymentLoading(true, true)
+          self.controller.isCvvValid = false
+          self.controller.handlePaymentChange({'account-type': 'checking'})
+          
+          expect(self.controller.isContinueDisabled()).toBe(false)
+        })
       })
 
-      it('should return false when cvv validity is undefined and EFT is used', () => {
-        self.controller.handleExistingPaymentLoading(true, true)
-        self.controller.isCvvValid = undefined
-        self.controller.handlePaymentChange({'account-type': 'checking'})
-        
-        expect(self.controller.getContinueDisabled()).toBe(false)
-      })
+      describe('existing EFT used', () => {
+        it('should return false when cvv validity is undefined', () => {
+          self.controller.handleExistingPaymentLoading(true, true)
+          self.controller.isCvvValid = undefined
+          self.controller.handlePaymentChange({'account-type': 'checking'})
+          
+          expect(self.controller.isContinueDisabled()).toBe(false)
+        })
 
-      it('should return false when cvv is valid and EFT is used', () => {
-        self.controller.handleExistingPaymentLoading(true, true)
-        self.controller.isCvvValid = true
-        self.controller.handlePaymentChange({'account-type': 'checking'})
-        
-        expect(self.controller.getContinueDisabled()).toBe(false)
+        it('should return false when cvv is valid', () => {
+          self.controller.handleExistingPaymentLoading(true, true)
+          self.controller.isCvvValid = true
+          self.controller.handlePaymentChange({'account-type': 'checking'})
+          
+          expect(self.controller.isContinueDisabled()).toBe(false)
+        })
       })
 
-      it('should return false when cvv is invalid and new credit card payment is added', () => {
-        self.controller.handlePaymentChange({'card-type': 'visa'})
-        self.controller.isCvvValid = false
-        expect(self.controller.getContinueDisabled()).toBe(true)
+      describe('new credit card used', () => {
+        it('should return false when cvv is invalid and new credit card payment is added', () => {
+          self.controller.handlePaymentChange({'card-type': 'visa'})
+          self.controller.isCvvValid = false
+          expect(self.controller.isContinueDisabled()).toBe(true)
+        })
       })
 
-      it('should return false when cvv is invalid and new EFT is added', () => {
-        self.controller.handlePaymentChange({'account-type': 'checking'})
-        self.controller.isCvvValid = false
-        expect(self.controller.getContinueDisabled()).toBe(false)
+      describe('new EFT used', () => {
+        it('should return false when cvv is invalid and new EFT is added', () => {
+          self.controller.handlePaymentChange({'account-type': 'checking'})
+          self.controller.isCvvValid = false
+          expect(self.controller.isContinueDisabled()).toBe(false)
+        })
       })
     })
+    
     describe('enableContinue', () => {
       it('should set isCvvValid to false', () => {
         self.controller.enableContinue(false)
diff --git a/src/app/checkout/step-2/step-2.tpl.html b/src/app/checkout/step-2/step-2.tpl.html
index 1db964a63..17c09bcd5 100644
--- a/src/app/checkout/step-2/step-2.tpl.html
+++ b/src/app/checkout/step-2/step-2.tpl.html
@@ -44,7 +44,7 @@
       <button id="previousStepButton1" class="btn btn-default" ng-click="$ctrl.changeStep({newStep: 'contact'})">Previous Step</button>
     </div>
     <div class="col-sm-5 col-sm-offset-2">
-      <button id="continueCheckoutButton" class="btn btn-primary pull-right btn-block-mobile" ng-click="$ctrl.submit()" ng-disabled="$ctrl.getContinueDisabled()">
+      <button id="continueCheckoutButton" class="btn btn-primary pull-right btn-block-mobile" ng-click="$ctrl.submit()" ng-disabled="$ctrl.isContinueDisabled()">
         Continue
       </button>
       <button id="previousStepButton2" class="btn btn-link btn-block visible-xs" ng-click="$ctrl.changeStep({newStep: 'contact'})"><i class="fa fa-angle-left"></i> Previous Step</button>
diff --git a/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html b/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html
index afce1a711..4951c6cfe 100644
--- a/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html
+++ b/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html
@@ -49,3 +49,4 @@ <h3 class="text-center">
     </div>
   </div>
 </div>
+