Test for the PaymentWithCard component

PaymentWithCard.spec.js

import testWrapperBuilder from './PaymentWithCard.spec.factory'
import api from '@/api/paymentAPI'

jest.mock('@/api/paymentAPI', function() {
  return { pay: jest.fn() }
})

describe('Payment with card', () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('should display a success message when the payment succeeds', () => {
    api.pay.mockReturnValue({ ok: true })
    const successMessageSpy = jest.fn()

    let wrapper = testWrapperBuilder()
      .with.cardInfo('12345', 'Hari Seldon', '11/23')
      .spy.successMsg(successMessageSpy)
      .build()

    wrapper.find('[data-qa="pay-btn"]').trigger('click')

    expect(successMessageSpy).toHaveBeenCalledTimes(1)
  })

  it('should display an error message when the payment fails', () => {
    api.pay.mockReturnValue({ ok: false })
    const errorMessageSpy = jest.fn()

    let wrapper = testWrapperBuilder()
      .with.cardInfo('12345', 'Hari Seldon', '11/23')
      .spy.errorMsg(errorMessageSpy)
      .build()

    wrapper.find('[data-qa="pay-btn"]').trigger('click')

    expect(errorMessageSpy).toHaveBeenCalledTimes(1)
  })
})