StepAddress.spec.tsx

import { act, render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { mockSgeState } from 'tests/__mocks__/forms.mock'
import StepAddress from './StepAddress'

const mockHandleChange = jest.fn()

describe('StepAddress component', () => {
  it('should be rendered correctly', () => {
    const { container } = render(
      <StepAddress sgeState={mockSgeState} onChange={mockHandleChange} />
    )
    expect(container).toMatchSnapshot()
  })

  describe('should change inputs', () => {
    beforeEach(() => {
      render(
        <StepAddress sgeState={mockSgeState} onChange={mockHandleChange} />
      )
    })
    it('should change address value', async () => {
      const input = screen.getByRole('textbox', {
        name: 'auth.enedissgegrandlyon.address',
      })
      await act(async () => {
        await userEvent.type(input, 't')
      })
      expect(mockHandleChange).toHaveBeenCalledWith('address', 't')
    })
    it('should change zipCode value', async () => {
      const input = screen.getByRole('spinbutton', {
        name: 'auth.enedissgegrandlyon.zipCode',
      })
      await act(async () => {
        await userEvent.type(input, '1')
      })
      expect(mockHandleChange).toHaveBeenCalledWith('zipCode', '1', 5)
    })

    it('should change city value', async () => {
      const input = screen.getByRole('textbox', {
        name: 'auth.enedissgegrandlyon.city',
      })
      await act(async () => {
        await userEvent.type(input, 'c')
      })
      expect(mockHandleChange).toHaveBeenCalledWith('city', 'c')
    })
  })
  it('should have an existing zipCode value', () => {
    render(
      <StepAddress
        sgeState={{ ...mockSgeState, zipCode: 69200 }}
        onChange={mockHandleChange}
      />
    )
    const input = screen.getByRole('spinbutton', {
      name: 'auth.enedissgegrandlyon.zipCode',
    })
    expect(input).toHaveValue(69200)
  })
})