@navinc/base-react-components/src/cc-input.spec.js

Nav's Pattern Library

import React from 'react'
import { render, waitFor } from '../tests/with-app-context'
import { theme } from './theme.js'
import CCInput, { getStripeDefaults } from './cc-input.js'

const { CLIENT_BILLING_PUBLIC_KEY = '' } = global.process.env

describe('Base Components: cc-input', () => {
  describe('<Stripe />', () => {
    // Stripe Mock
    const mount = jest.fn()
    const addEventListener = jest.fn()
    const create = jest.fn(() => ({ mount, addEventListener }))
    const elements = jest.fn(() => ({ create }))
    const createToken = jest.fn(() => 'mockToken')
    const createPaymentMethod = jest.fn(() => 'mockPaymentMethod')

    window.Stripe = global.Stripe = jest.fn((KEY) => ({
      elements,
      createToken,
      createPaymentMethod,
    }))

    describe('Stripe.onStripeReady', () => {
      it('is a promise that resolves when stripe.js has initialized', async () => {
        render(<CCInput />)

        await waitFor(() => expect(window.Stripe).toHaveBeenCalledWith(CLIENT_BILLING_PUBLIC_KEY))
      })
    })

    describe('Stripe.componentDidMount()', () => {
      it('bootstraps Stripe', () => {
        render(<CCInput />)

        expect(elements).toHaveBeenCalledWith(getStripeDefaults(theme).stripe)
        expect(create).toHaveBeenCalledWith('card', getStripeDefaults(theme).elements)
        expect(mount).toHaveBeenCalledWith('.js-stripe_card')
        expect(addEventListener).toHaveBeenCalledWith('change', expect.any(Function))
      })

      it('calls createTokenRef', async () => {
        const createTokenRef = jest.fn()
        render(<CCInput createTokenRef={createTokenRef} />)

        await waitFor(() => expect(createTokenRef).toHaveBeenCalled())
        expect(createTokenRef.mock.calls[0][0]({})).toBe('mockToken')
      })

      it('calls createPaymentMethodRef', async () => {
        const createPaymentMethodRef = jest.fn()
        render(<CCInput createPaymentMethodRef={createPaymentMethodRef} />)

        await waitFor(() => expect(createPaymentMethodRef).toHaveBeenCalled())
        expect(createPaymentMethodRef.mock.calls[0][0]({})).toBe('mockPaymentMethod')
      })
    })
  })
})