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

Nav's Pattern Library

import React from 'react'
import { render, screen, fireEvent, waitFor, createEvent } from '../tests/with-app-context'

import { AddressInput } from './address-input.js'

describe('Base Components: address-input', () => {
  describe('<AddressInput />', () => {
    it('calls preventDefault if the enter key is pressed', () => {
      const addListener = jest.fn()
      window.google = global.google = {
        maps: { places: { Autocomplete: jest.fn(() => ({ addListener })) } },
      }

      render(<AddressInput />)

      const input = screen.getByPlaceholderText('Enter a location')
      const keyDownEvent = createEvent.keyDown(input, {
        key: 'Enter',
        code: 'Enter',
        charCode: 13,
        keyCode: 13,
      })

      fireEvent(input, keyDownEvent)

      expect(keyDownEvent.defaultPrevented).toBe(true)
    })

    it('calls the onAddressSelected prop with an address object', async () => {
      const addListener = jest.fn()
      const getPlace = jest.fn(() => ({
        address_components: [
          {
            types: ['street_number'],
            long_name: 'street_number longName',
            short_name: 'street_number shortName',
          },
          {
            types: ['route'],
            long_name: 'route longName',
            short_name: 'route shortName',
          },
          {
            types: ['locality'],
            long_name: 'locality longName',
            short_name: 'locality shortName',
          },
          {
            types: ['administrative_area_level_1'],
            long_name: 'administrative_area_level_1 longName',
            short_name: 'administrative_area_level_1 shortName',
          },
          {
            types: ['postal_code'],
            long_name: 'postal_code longName',
            short_name: 'postal_code shortName',
          },
        ],
      }))
      window.google = global.google = {
        maps: {
          places: {
            Autocomplete: jest.fn(() => ({ addListener, getPlace })),
          },
        },
      }

      const onAddressSelected = jest.fn()
      render(<AddressInput onAddressSelected={onAddressSelected} />)

      await waitFor(() => expect(addListener).toHaveBeenCalled())

      addListener.mock.calls[0][1]()

      const expected = {
        city: 'locality longName',
        state: 'administrative_area_level_1 shortName',
        street1: 'street_number shortName route longName',
        zip: 'postal_code shortName',
      }

      expect(getPlace).toHaveBeenCalled()
      expect(onAddressSelected).toHaveBeenCalledWith(expected)
    })
  })
})