@navinc/base-react-components/src/date-picker.spec.js

Nav's Pattern Library

import React from 'react'
import { render, screen, fireEvent } from '../tests/with-app-context'
import { DatePicker, isDateValid } from './date-picker.js'

describe('<DatePicker />', () => {
  describe('isDateValid', () => {
    it.each([
      {
        date: undefined,
        expected: false,
        title: 'when given date is falsey',
      },
      {
        date: { year: '1', month: '05', day: '01' },
        expected: false,
        title: 'when year length is 1',
      },
      {
        date: { year: '10', month: '05', day: '01' },
        expected: false,
        title: 'when year length is 2',
      },
      {
        date: { year: '103', month: '05', day: '01' },
        expected: false,
        title: 'when year length is 3',
      },
      {
        date: { year: '1985', day: '01' },
        expected: false,
        title: 'when month is falsey',
      },
      {
        date: { year: '1985', month: '05' },
        expected: false,
        title: 'when day is falsey',
      },
      { date: { month: '05', day: '01' }, expected: false, title: 'when year is falsey' },
      {
        date: { year: 1985, month: 5, day: 1 },
        expected: true,
        title: 'when year, month, and day of valid date given are type numbers',
      },
      {
        date: { year: '1985', month: '05', day: '01' },
        expected: true,
        title: 'when year, month, and day of valid date given are type string',
      },
      {
        date: {
          day: 31,
          month: 1,
          year: 1950,
        },
        expected: true,
        title: 'when day is 31',
      },
      {
        date: {
          day: 32,
          month: 1,
          year: 1950,
        },
        expected: false,
        title: 'when the day is too high',
      },
      {
        date: {
          day: 31,
          month: 12,
          year: 1950,
        },
        expected: true,
        title: 'for the last month of the year',
      },
      {
        date: {
          day: 31,
          month: 13,
          year: 1950,
        },
        expected: false,
        title: 'when the month is too high',
      },
    ])('returns $expected $title', ({ date, expected }) => {
      expect(isDateValid(date)).toBe(expected)
    })
  })

  describe('DatePicker', () => {
    describe('onChangeWrapper', () => {
      it('calls onChange with the current value object updated with the key', () => {
        const onChange = jest.fn()

        render(<DatePicker onChange={onChange} value={{ month: 10, year: 1958 }} />)

        fireEvent.change(screen.getByTestId('date_picker:day'), { target: { value: '25' } })

        expect(onChange).toHaveBeenCalledWith({
          target: {
            value: {
              month: 10,
              year: 1958,
              day: '25',
            },
          },
        })
      })
    })

    describe('handleMonthChange', () => {
      it('calls onChangeWrapper with a 10 if given october', () => {
        const onChange = jest.fn()

        render(<DatePicker onChange={onChange} value={{ day: 25, year: 1958 }} />)

        fireEvent.change(screen.getByTestId('date_picker:month'), { target: { value: 'October' } })

        expect(onChange).toHaveBeenCalledWith({
          target: {
            value: {
              month: '10',
              year: 1958,
              day: 25,
            },
          },
        })
      })

      it('calls onChangeWrapper with an 09 if given September', () => {
        const onChange = jest.fn()

        render(<DatePicker onChange={onChange} value={{ day: 25, year: 1958 }} />)

        fireEvent.change(screen.getByTestId('date_picker:month'), { target: { value: 'September' } })

        expect(onChange).toHaveBeenCalledWith({
          target: {
            value: {
              month: '09',
              year: 1958,
              day: 25,
            },
          },
        })
      })
    })

    describe('handleDayChange', () => {
      it('only gives the first 2 numbers to onChange', () => {
        const onChange = jest.fn()

        render(<DatePicker onChange={onChange} value={{ month: 10, year: 1958 }} />)

        fireEvent.change(screen.getByTestId('date_picker:day'), { target: { value: '123' } })

        expect(onChange).toHaveBeenCalledWith({
          target: {
            value: {
              month: 10,
              year: 1958,
              day: '12',
            },
          },
        })
      })
    })

    describe('handleYearChange', () => {
      it('only gives the first 4 numbers to onChange', () => {
        const onChange = jest.fn()

        render(<DatePicker onChange={onChange} value={{ month: 10, year: 1958 }} />)

        fireEvent.change(screen.getByTestId('date_picker:year'), { target: { value: '12345' } })

        expect(onChange).toHaveBeenCalledWith({
          target: {
            value: {
              month: 10,
              year: '1234',
            },
          },
        })
      })
    })

    describe('render', () => {
      it('renders an Err for each error given', () => {
        render(<DatePicker errors={['123', '456']} />)

        expect(screen.getByTestId('date_picker:errors').childNodes.length).toBe(2)
      })

      it('Sets the value as october if the month is passed in as 10 in string format', () => {
        render(<DatePicker value={{ month: '10' }} />)
        expect(screen.getByTestId('date_picker:month').value).toBe('October')
      })

      it('Sets the value as october if the month is passed in as 10 in number format', () => {
        render(<DatePicker value={{ month: 10 }} />)
        expect(screen.getByTestId('date_picker:month').value).toBe('October')
      })

      it('renders just day if only day is passed in to fieldsToShow', () => {
        render(<DatePicker fieldsToShow={['day']} />)

        expect(screen.queryByTestId('date_picker:day')).toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:month')).not.toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:year')).not.toBeInTheDocument()
      })

      it('renders just month if only month is passed in to fieldsToShow', () => {
        render(<DatePicker fieldsToShow={['month']} />)

        expect(screen.queryByTestId('date_picker:day')).not.toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:month')).toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:year')).not.toBeInTheDocument()
      })

      it('renders just year if only year is passed in to fieldsToShow', () => {
        render(<DatePicker fieldsToShow={['year']} />)

        expect(screen.queryByTestId('date_picker:day')).not.toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:month')).not.toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:year')).toBeInTheDocument()
      })

      it('renders all 3 if nothing is passed in to fieldsToShow', () => {
        render(<DatePicker />)

        expect(screen.queryByTestId('date_picker:day')).toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:month')).toBeInTheDocument()
        expect(screen.queryByTestId('date_picker:year')).toBeInTheDocument()
      })
    })
  })
})