Product payment unit tests (#3269)

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.8.10",
+  "version": "2.8.11",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/src/components/auth/create-account/SelectProductPayment.vue

@@ -294,8 +294,13 @@ export default defineComponent({
       emit('emit-bcol-info')
     }
 
+    // Exclude currentOrganization, it's already included in NextPageMixin, but we need it (not on template)
+    // Will remove this when we refactor NextPageMixin.
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    const { currentOrganization, ...refs } = toRefs(state)
+
     return {
-      ...toRefs(state),
+      ...refs,
       form,
       setSelectedProduct,
       setSelectedPayment,

auth-web/src/stores/org.ts

@@ -329,8 +329,8 @@ export const useOrgStore = defineStore('org', () => {
       membershipType: MembershipType.User
     }
   }
-  
-  async function syncMembership(orgId: number): Promise<Member> {
+
+  async function syncMembership (orgId: number): Promise<Member> {
     const { roles } = KeyCloakService.getUserInfo()
 
     // If user has any of the roles in the mapping, assign the permissions and membership type
@@ -351,10 +351,10 @@ export const useOrgStore = defineStore('org', () => {
     const { data: membership } = await UserService.getMembership(orgId)
     const { accountStatus: statusCode } = state.currentAccountSettings
     const { data: permissions } = await PermissionService.getPermissions(statusCode, membership?.membershipTypeCode)
-    
+
     state.permissions = permissions || []
     state.currentMembership = membership
-  
+
     return membership
   }
 

auth-web/tests/unit/components/PaymentMethods.spec.ts

@@ -1,12 +1,14 @@
+import { Account, PaymentTypes } from '@/util/constants'
 import { createLocalVue, mount } from '@vue/test-utils'
-
-import { Account } from '@/util/constants'
 import PaymentMethods from '@/components/auth/common/PaymentMethods.vue'
+import VueRouter from 'vue-router'
 import Vuetify from 'vuetify'
 import can from '@/directives/can'
+import { useOrgStore } from '@/stores'
 
 describe('PaymentMethods.vue', () => {
   let wrapper: any
+  let wrapperFactory: any
   const config = {
     'AUTH_API_URL': 'https://localhost:8080/api/v1/11',
     'PAY_API_URL': 'https://pay-api-dev.apps.silver.devops.gov.bc.ca/api/v1'
@@ -16,17 +18,25 @@ describe('PaymentMethods.vue', () => {
 
   beforeEach(() => {
     const localVue = createLocalVue()
-
+    const orgStore = useOrgStore()
+    orgStore.currentOrganization = { id: 123 } as any
     const vuetify = new Vuetify({})
     localVue.directive('can', can)
 
-    wrapper = mount(PaymentMethods, {
-      localVue,
-      vuetify,
-      propsData: {
-        currentOrgType: Account.PREMIUM
-      }
-    })
+    const router = new VueRouter()
+
+    wrapperFactory = (propsData) => {
+      return mount(PaymentMethods, {
+        localVue,
+        router,
+        vuetify,
+        propsData: {
+          ...propsData
+        }
+      })
+    }
+
+    wrapper = wrapperFactory({ currentOrgType: Account.PREMIUM })
 
     vi.resetModules()
     vi.clearAllMocks()
@@ -98,4 +108,26 @@ describe('PaymentMethods.vue', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.isPaymentSelected(method2)).toBe(false)
   })
+
+  it('should not go into PAD view mode if createAccount is true ', async () => {
+    useOrgStore().currentOrgPADInfo = { 'bankAccountNumber': '123456' }
+    wrapper = wrapperFactory({ isCreateAccount: false, currentSelectedPaymentMethod: PaymentTypes.PAD })
+    await wrapper.vm.$nextTick()
+    wrapper.find('.payment-card-contents')
+    expect(wrapper.find('.banking-info').text('Banking Information')).toBeTruthy()
+    wrapper = wrapperFactory({ isCreateAccount: true, currentSelectedPaymentMethod: PaymentTypes.PAD })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.banking-info').exists()).toBeFalsy()
+  })
+
+  it('Entering BCOL info should enable button create account button', async () => {
+    wrapper = wrapperFactory({ currentOrganization: { id: 123 } as any,
+      isCreateAccount: true,
+      currentSelectedPaymentMethod: PaymentTypes.BCOL })
+    await wrapper.vm.$nextTick()
+    wrapper.find('[data-test="input-user-id"]').setValue('123456789')
+    wrapper.find('[data-test="input-user-password"]').setValue('123456789')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted()).toHaveProperty('emit-bcol-info')
+  })
 })

auth-web/tests/unit/components/SelectProductPayment.spec.ts

@@ -0,0 +1,92 @@
+import { Account, PaymentTypes } from '@/util/constants'
+import { createLocalVue, mount } from '@vue/test-utils'
+import SelectProductPayment from '@/components/auth/create-account/SelectProductPayment.vue'
+import VueRouter from 'vue-router'
+import Vuetify from 'vuetify'
+import can from '@/directives/can'
+import { useOrgStore } from '@/stores'
+
+describe('SelectProductPayment.vue', () => {
+  let wrapper: any
+  let wrapperFactory: any
+
+  const config = {
+    'AUTH_API_URL': 'https://localhost:8080/api/v1/11',
+    'PAY_API_URL': 'https://pay-api-dev.apps.silver.devops.gov.bc.ca/api/v1'
+  }
+
+  sessionStorage['AUTH_API_CONFIG'] = JSON.stringify(config)
+
+  beforeEach(() => {
+    const localVue = createLocalVue()
+
+    const vuetify = new Vuetify({})
+    localVue.directive('can', can)
+    const orgStore = useOrgStore()
+    orgStore.setCurrentOrganization({
+      id: 1,
+      name: 'Test Org'
+    })
+
+    const router = new VueRouter()
+
+    wrapperFactory = (propsData) => {
+      return mount(SelectProductPayment, {
+        localVue,
+        router,
+        vuetify,
+        propsData: {
+          ...propsData
+        }
+      })
+    }
+
+    wrapper = wrapperFactory({ currentOrgType: Account.PREMIUM })
+
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('is a Vue instance', () => {
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('initial selection should be empty', () => {
+    expect(wrapper.vm.$data.selectedPaymentMethod).toBeFalsy()
+  })
+
+  it('currentOrganization should be on state, used for BCOL and PAD', async () => {
+    expect(wrapper.vm.currentOrganization).toBeTruthy()
+  })
+
+  it('correct isPaymentValid', async () => {
+    wrapper.setData({ selectedPaymentMethod: PaymentTypes.PAD })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isPaymentValid).toBe(wrapper.vm.isPADValid)
+    wrapper.setData({ selectedPaymentMethod: PaymentTypes.BCOL })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isPaymentValid).toBe(wrapper.vm.currentOrganization.bcolProfile?.password)
+    wrapper.setData({ selectedPaymentMethod: PaymentTypes.EJV })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isPaymentValid).toBe(wrapper.vm.isEJVValid)
+    wrapper.setData({ selectedPaymentMethod: PaymentTypes.CREDIT_CARD })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isPaymentValid).toBe(!!wrapper.vm.selectedPaymentMethod)
+  })
+
+  it('correct finish button text', async () => {
+    wrapper = wrapperFactory({ govmAccount: true })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.finishButtonText).toBe('Next')
+    wrapper = wrapperFactory({ govmAccount: false, readOnly: false })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.finishButtonText).toBe('Create Account')
+    wrapper = wrapperFactory({ govmAccount: false, readOnly: true })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.finishButtonText).toBe('Submit')
+  })
+})