@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('returns true if the date matches what is passed in', () => {
      expect(
        isDateValid({
          day: 25,
          month: 12,
          year: 1950,
        })
      ).toBe(true)
    })

    it('returns true if the date matches what is passed in and it passes strings', () => {
      expect(
        isDateValid({
          day: '25',
          month: '12',
          year: '1950',
        })
      ).toBe(true)
    })

    it('returns true for the last day of the month', () => {
      expect(
        isDateValid({
          day: 31,
          month: 1,
          year: 1950,
        })
      ).toBe(true)
    })

    it('returns false if the day is too high', () => {
      expect(
        isDateValid({
          day: 32,
          month: 1,
          year: 1950,
        })
      ).toBe(false)
    })

    it('returns true for the last month', () => {
      expect(
        isDateValid({
          day: 31,
          month: 12,
          year: 1950,
        })
      ).toBe(true)
    })

    it('returns false if the month is too high', () => {
      expect(
        isDateValid({
          day: 31,
          month: 13,
          year: 1950,
        })
      ).toBe(false)
    })

    it('returns false if you pass in null', () => {
      expect(isDateValid(null)).toBe(false)
    })

    it('returns false if you are missing a day', () => {
      expect(
        isDateValid({
          day: '',
          month: 12,
          year: 1950,
        })
      ).toBe(false)
    })

    it('returns false if you are missing a month', () => {
      expect(
        isDateValid({
          day: 15,
          month: null,
          year: 1950,
        })
      ).toBe(false)
    })

    it('returns false if you are missing a year', () => {
      expect(
        isDateValid({
          day: 15,
          month: 12,
          year: undefined,
        })
      ).toBe(false)
    })
  })

  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()
      })
    })
  })
})