@navinc/base-react-components/src/form-elements/phone-number-input.spec.js

Nav's Pattern Library

import { Formik, Form } from 'formik'
import React from 'react'
import { render, fireEvent, waitFor } from '../../tests/with-app-context.js'
import PhoneNumberInput, { createPhoneNumberValidator } from './phone-number-input.js'

describe('Base Components: PhoneNumberInput', () => {
  describe('createPhoneNumberValidator()', () => {
    it('fails on incomplete phone numbers', () => {
      const validator = createPhoneNumberValidator({ isRequired: true })
      expect(validator('1')).toStrictEqual(['We need your full 10-digit phone number'])
      expect(validator('123')).toStrictEqual(['We need your full 10-digit phone number'])
      expect(validator('999-999-99')).toStrictEqual(['We need your full 10-digit phone number'])
      expect(validator('999-999-999')).toStrictEqual(['We need your full 10-digit phone number'])
      expect(validator('123456789')).toStrictEqual(['We need your full 10-digit phone number'])
    })

    it('fails on missing phone numbers', () => {
      const validator = createPhoneNumberValidator({ isRequired: true })
      expect(validator('')).toStrictEqual(['Required'])
    })

    it('not fail if phone numbers is not required', () => {
      const validator = createPhoneNumberValidator({ isRequired: false })
      expect(validator('')).toBeFalsy()
    })

    it('not fail on valid phone number', () => {
      const validator = createPhoneNumberValidator({ isRequired: false })
      expect(validator('999-999-9999')).toBeFalsy()
      expect(validator('9999999999')).toBeFalsy()
      expect(validator('323-123-1234')).toBeFalsy()
      expect(validator('+1 555-555-5555')).toBeFalsy()
      expect(validator('+15555555555')).toBeFalsy()
    })
  })

  describe('render', () => {
    it('renders errors if there are any', () => {
      const testId = 'phonenumber-test-id'

      const { getByText, getByTestId, queryByText } = render(
        <Formik
          initialValues={{
            test: '999-999-99',
          }}
        >
          <PhoneNumberInput name="test" data-testid={testId} />
        </Formik>
      )

      const input = getByTestId(testId)

      expect(queryByText('We need your full 10-digit phone number')).toBeNull()

      fireEvent.blur(input)

      return waitFor(() => expect(getByText('We need your full 10-digit phone number')).toBeTruthy())
    })
  })

  it('removes prefix +1 from UI, but adds it to the value', () => {
    const testId = 'phonenumber-test-id'
    const handleSubmit = jest.fn()

    const { getByTestId, getByRole } = render(
      <Formik
        initialValues={{
          test: '+1 999-999-9999',
        }}
        onSubmit={handleSubmit}
      >
        <Form>
          <PhoneNumberInput name="test" data-testid={testId} />
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    )

    const input = getByTestId(testId)

    expect(input.value).toBe('999-999-9999')

    fireEvent.change(input, { target: { value: '9876543210' } })
    fireEvent.click(getByRole('button', { name: /submit/i }))

    return waitFor(() => expect(handleSubmit).toHaveBeenCalledWith({ test: '+19876543210' }, expect.anything()))
  })
})