ngfrontend/tests/unit/ui-refactor/paystackPaymentDialog.spec.js

/* eslint-env jest */
import Vue from 'vue'
import ElementUI from 'element-ui'
import path from 'path'
import { load } from '@/ui-refactor/views/purchase/__tests__/loadComponent'

jest.mock('@/utils/usersInfo', () => ({}))
Vue.use(ElementUI)
const PaymentDialog = load(path.resolve('src/ui-refactor/components/PaystackPaymentDialog.vue'))
const instances = []
async function settle() { await Vue.nextTick(); jest.advanceTimersByTime(350); await Vue.nextTick() }
beforeEach(() => jest.useFakeTimers())
afterEach(() => {
  instances.splice(0).forEach(vm => { vm.$destroy(); vm.$el.remove() })
  jest.clearAllTimers()
  jest.useRealTimers()
})

it.each([false, true])('preserves editable/readonly email and delegates payment and cancellation (readonly=%s)', async readonlyEmail => {
  const changed = jest.fn()
  const continued = jest.fn()
  const cancelled = jest.fn()
  const vm = new Vue({
    data: () => ({ visible: true, email: 'member@example.test', loading: false }),
    render(h) {
      return h(PaymentDialog, {
        props: { visible: this.visible, email: this.email, amount: 104000, currency: 'NGN', readonlyEmail, loading: this.loading },
        attrs: { 'before-close': cancelled, 'close-on-press-escape': false },
        on: { 'update:email': value => { this.email = value; changed(value) }, continue: continued }
      })
    }
  }).$mount()
  document.body.appendChild(vm.$el)
  instances.push(vm)
  await settle()
  const input = vm.$el.querySelector('input')
  expect(input.value).toBe('member@example.test')
  expect(input.readOnly).toBe(readonlyEmail)
  expect(vm.$el.querySelector('.ng-paystack-payment-amount').textContent).toContain('NGN 104,000')
  if (!readonlyEmail) {
    input.value = 'confirmed@example.test'
    input.dispatchEvent(new Event('input', { bubbles: true }))
    expect(changed).toHaveBeenCalledWith('confirmed@example.test')
  }
  const button = vm.$el.querySelector('.ng-paystack-payment-continue')
  button.click()
  expect(continued).toHaveBeenCalledTimes(1)
  vm.loading = true
  await settle()
  expect(input.disabled).toBe(true)
  expect(button.disabled).toBe(true)
  expect(vm.$el.querySelector('.el-dialog__headerbtn')).toBeNull()
  button.click()
  expect(continued).toHaveBeenCalledTimes(1)
  vm.loading = false
  await settle()
  vm.$el.querySelector('.el-dialog__headerbtn').click()
  expect(cancelled).toHaveBeenCalledTimes(1)
  expect(vm.visible).toBe(true)
  vm.visible = false
  await Vue.nextTick()
  button.click()
  expect(continued).toHaveBeenCalledTimes(1)
})