react-conventions/test/DatePicker.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react'
import { shallow, mount } from 'enzyme'
import DatePicker from '../src/components/DatePicker/DatePicker'
import moment from 'moment'
const rewire = require('rewire')
const DateHelper = rewire('../src/components/DatePicker/DateHelper')

describe('DatePicker', () => {
  const oldDate = '2017-07-02'
  const newDate = '2019-03-03'
  const defaultFormat = 'YYYY-MM-DD'
  let wrapper

  it('should shallow render itself', () => {
    wrapper = shallow(<DatePicker value={oldDate} />)
    expect(wrapper.find('.datepicker-component')).to.have.length(1)
    expect(wrapper.children()).to.have.length(3)
  })

  it('should have current date by default', () => {
    DateHelper.__set__('_getDate', function() { return '20' })
    DateHelper.__set__('_getMonth', function() { return '10' })
    DateHelper.__set__('_getYear', function() { return '2012' })
    wrapper = shallow(<DatePicker dateHelper={DateHelper} />)
    expect(wrapper.find('.datepicker-component')).to.have.length(1)
    expect(wrapper.children()).to.have.length(3)
    expect(wrapper.state('value')).to.equal('2012-11-20')
  })

  it('should have an extra class', () => {
    wrapper = shallow(<DatePicker optClass="test-class" />)
    expect(wrapper.find('.datepicker-component')).to.have.length(1)
    expect(wrapper.hasClass('test-class')).to.be.true
  })

  it('should update the state when the value property changes', () => {
    wrapper = mount(<DatePicker value={oldDate} />)

    expect(wrapper.state('value')).to.equal(oldDate)

    wrapper.setProps({ value: newDate })
    wrapper.update()

    expect(wrapper.state('value')).to.equal(newDate)
  })

  it('should run the changeCallback on changing a month', () => {
    let result = ''
    const callback = (event) => {
      result = event
    }
    wrapper = mount(<DatePicker value={oldDate} changeCallback={callback} />)

    // open <ul>
    wrapper.childAt(0).childAt(2).simulate('click')
    // click <li>
    wrapper.childAt(0).childAt(2).childAt(0).simulate('click')

    const firstMonth = '2017-01-02'
    expect(result.target.value).to.equal(firstMonth)
    expect(wrapper.state('value')).to.equal(firstMonth)
  })

  it('should run the changeCallback on changing a day', () => {
    let result = ''
    const callback = (event) => {
      result = event
    }
    wrapper = mount(<DatePicker value={oldDate} changeCallback={callback} />)

    // open <ul>
    wrapper.childAt(1).childAt(2).simulate('click')
    // click <li>
    wrapper.childAt(1).childAt(2).childAt(0).simulate('click')

    const firstDay = '2017-07-01'
    expect(result.target.value).to.equal(firstDay)
    expect(wrapper.state('value')).to.equal(firstDay)
  })

  it('should run the changeCallback on changing a year', () => {
    let result = ''
    const callback = (event) => {
      result = event
    }
    wrapper = mount(<DatePicker value={oldDate} changeCallback={callback} />)

    // open <ul>
    wrapper.childAt(2).childAt(2).simulate('click')
    // click <li>
    wrapper.childAt(2).childAt(2).childAt(0).simulate('click')

    let firstDate = ''
    const daySelected = moment.utc(oldDate, defaultFormat).date()
    const dayToday = moment.utc().date()

    if (daySelected <= dayToday) {
      firstDate = moment.utc().subtract(10, 'year').format(defaultFormat)
    } else {
      firstDate = moment.utc().date(daySelected).subtract(10, 'year').format(defaultFormat)
    }

    expect(result.target.value).to.equal(firstDate)
    expect(wrapper.state('value')).to.equal(firstDate)
  })

  it('should not result in an error if changeCallback is not defined', () => {
    const spy = sinon.spy(console, 'error')
    wrapper = mount(<DatePicker value={oldDate} />)

    // open <ul>
    wrapper.childAt(0).childAt(2).simulate('click')
    // click <li>
    wrapper.childAt(0).childAt(2).childAt(0).simulate('click')

    expect(spy.called).to.be.false
    spy.restore()
  })

  it('should change to max month & day if selected are greater than max value on selecting last year', () => {
    let result = ''
    const callback = (event) => {
      result = event
    }
    const maxCalc = { month: '5', day: '20', year: '+1'}
    const minCurrent = { month: 'current', day: 'current', year: 'current'}
    const date = moment.utc().month(11).date(31).format(defaultFormat)

    wrapper = mount(<DatePicker value={date} min={minCurrent} max={maxCalc} changeCallback={callback} />)

    // set last year
    wrapper.childAt(2).childAt(2).simulate('click')
    // click <li>
    wrapper.childAt(2).childAt(2).childAt(1).simulate('click')

    const firstYear = moment.utc().add(1, 'year').format('YYYY')+'-06-20'
    expect(result.target.value).to.equal(firstYear)
    expect(wrapper.state('value')).to.equal(firstYear)
  })

  it('should change to min month & day if selected are lower than min value on selecting first year', () => {
    let result = ''
    const callback = (event) => {
      result = event
    }
    const minCalc = { month: '5', day: '20', year: '-1'}
    const maxCurrent = { month: 'current', day: 'current', year: 'current'}
    const date = moment.utc().month(0).date(1).format(defaultFormat)

    wrapper = mount(<DatePicker value={date} min={minCalc} max={maxCurrent} changeCallback={callback} />)

    // set first year
    wrapper.childAt(2).childAt(2).simulate('click')
    // click <li>
    wrapper.childAt(2).childAt(2).childAt(0).simulate('click')

    const firstYear = moment.utc().subtract(1, 'year').format('YYYY')+'-06-20'
    expect(result.target.value).to.equal(firstYear)
    expect(wrapper.state('value')).to.equal(firstYear)
  })

  it('should show correct date when passing custom format and run the changeCallback on changing a year', () => {
    let result = ''
    const callback = (event) => {
      result = event
    }

    const format = 'DD-MM-YYYY'
    const date = moment.utc().format(format)
    const minCurrent = { month: 'current', day: 'current', year: 'current'}

    wrapper = mount(<DatePicker value={date} min={minCurrent} format={format} changeCallback={callback} />)
    expect(wrapper.state('value')).to.equal(date)

    // open <ul>
    wrapper.childAt(2).childAt(2).simulate('click')
    // click <li>
    wrapper.childAt(2).childAt(2).childAt(1).simulate('click')

    const newDate = moment.utc().add(1, 'year').format(format)
    expect(result.target.value).to.equal(newDate)
    expect(wrapper.state('value')).to.equal(newDate)
  })

  describe('Logic', () => {

    describe('_getYears', () => {

      it('should return years range', () => {
        wrapper = shallow(<DatePicker value={oldDate}/>)
        const years = wrapper.instance()._getYears(2010, 2015)

        expect(years).to.be.an.array
        expect(years).to.have.length(6)
        expect(years[0]).to.deep.equal({ value: '2010' })
        expect(years[1]).to.deep.equal({ value: '2011' })
        expect(years[2]).to.deep.equal({ value: '2012' })
        expect(years[3]).to.deep.equal({ value: '2013' })
        expect(years[4]).to.deep.equal({ value: '2014' })
        expect(years[5]).to.deep.equal({ value: '2015' })
      })
    })

    describe('_getMonths', () => {

      wrapper = shallow(<DatePicker value={oldDate} />)

      it('should return full months range', () => {
        let dateObj = {
          year: {
            min: 2010,
            value: 2015,
            max: 2020,
            options: []
          },
          month: {
            min: 0,
            value: 5,
            max: 11,
            options: []
          }
        }

        const months = wrapper.instance()._getMonths(dateObj)

        expect(months).to.be.an.array
        expect(months).to.have.length(12)
        expect(months[0]).to.deep.equal({ value: '0', display: 'Jan' })
        expect(months[5]).to.deep.equal({ value: '5', display: 'Jun' })
        expect(months[11]).to.deep.equal({ value: '11', display: 'Dec' })
      })

      it('should return months range limited by month.min and change month.value to month.min', () => {
        let dateObj = {
          year: {
            min: 2010,
            value: 2010,
            max: 2020,
            options: []
          },
          month: {
            min: 5,
            value: 2,
            max: 11,
            options: []
          }
        }

        const months = wrapper.instance()._getMonths(dateObj)

        expect(dateObj.month.value).to.equal(dateObj.month.min)
        expect(months).to.be.an.array
        expect(months).to.have.length(7)
        expect(months[0]).to.deep.equal({ value: '5', display: 'Jun' })
        expect(months[3]).to.deep.equal({ value: '8', display: 'Sep' })
        expect(months[6]).to.deep.equal({ value: '11', display: 'Dec' })
      })

      it('should return months range limited by month.max and change month.value to month.max', () => {
        let dateObj = {
          year: {
            min: 2010,
            value: 2020,
            max: 2020,
            options: []
          },
          month: {
            min: 0,
            value: 11,
            max: 6,
            options: []
          }
        }

        const months = wrapper.instance()._getMonths(dateObj)

        expect(dateObj.month.value).to.equal(dateObj.month.max)
        expect(months).to.be.an.array
        expect(months).to.have.length(7)
        expect(months[0]).to.deep.equal({ value: '0', display: 'Jan' })
        expect(months[3]).to.deep.equal({ value: '3', display: 'Apr' })
        expect(months[6]).to.deep.equal({ value: '6', display: 'Jul' })
      })
    })

    describe('_getDays()', () => {

      const getDateObj = () => {
        return {
          year: {
            min: 2010,
            value: 2015,
            max: 2020,
            options: []
          },
          month: {
            min: 0,
            value: 6,
            max: 11,
            options: []
          },
          day: {
            min: 1,
            value: 31,
            max: 31,
            options: []
          },
          value: '2015-07-31'
        }
      }

      wrapper = shallow(<DatePicker value={oldDate} />)

      it('should returns full days range of a 31-days month', () => {
        let dateObj = getDateObj()

        const days = wrapper.instance()._getDays(dateObj)

        expect(dateObj.day.value).to.equal(dateObj.day.max)
        expect(dateObj.value).to.equal('2015-07-31')
        expect(days).to.be.an.array
        expect(days).to.have.length(31)
        expect(days[0]).to.deep.equal({ value: '1' })
        expect(days[15]).to.deep.equal({ value: '16' })
        expect(days[30]).to.deep.equal({ value: '31' })
      })

      it('should returns full days range of a 30-days month and change day.value to day.max', () => {
        let dateObj = getDateObj()
        dateObj.month.value = 5
        dateObj.day.max = 30
        dateObj.value = '2015-05-31'

        const days = wrapper.instance()._getDays(dateObj)

        expect(dateObj.day.value).to.equal(dateObj.day.max)
        expect(dateObj.value).to.equal('2015-06-30')
        expect(days).to.be.an.array
        expect(days).to.have.length(30)
        expect(days[0]).to.deep.equal({ value: '1' })
        expect(days[15]).to.deep.equal({ value: '16' })
        expect(days[29]).to.deep.equal({ value: '30' })
      })

      it('should returns full days range of a 29-days month and change day.value to day.max', () => {
        let dateObj = getDateObj()
        dateObj.year.value = 2016
        dateObj.month.value = 1
        dateObj.day.max = 29
        dateObj.value = '2016-02-31'

        const days = wrapper.instance()._getDays(dateObj)

        expect(dateObj.day.value).to.equal(dateObj.day.max)
        expect(dateObj.value).to.equal('2016-02-29')
        expect(days).to.be.an.array
        expect(days).to.have.length(29)
        expect(days[0]).to.deep.equal({ value: '1' })
        expect(days[15]).to.deep.equal({ value: '16' })
        expect(days[28]).to.deep.equal({ value: '29' })
      })

      it('should returns full days range of a 28-days month and change day.value to day.max', () => {
        let dateObj = getDateObj()
        dateObj.month.value = 1
        dateObj.day.max = 28
        dateObj.value = '2015-02-31'

        const days = wrapper.instance()._getDays(dateObj)

        expect(dateObj.day.value).to.equal(dateObj.day.max)
        expect(dateObj.value).to.equal('2015-02-28')
        expect(days).to.be.an.array
        expect(days).to.have.length(28)
        expect(days[0]).to.deep.equal({ value: '1' })
        expect(days[15]).to.deep.equal({ value: '16' })
        expect(days[27]).to.deep.equal({ value: '28' })
      })
    })

    describe('_getValue()', () => {

      const getDateObj = () => {
        return {
          year: {
            min: 2010,
            value: 2015,
            max: 2020,
            options: []
          },
          month: {
            min: 0,
            value: 6,
            max: 11,
            options: []
          },
          day: {
            min: 1,
            value: 31,
            max: 31,
            options: []
          }
        }
      }

      wrapper = shallow(<DatePicker value={oldDate} />)

      it('should return date string in a default format', () => {
        let dateObj = getDateObj()

        const value = wrapper.instance()._getValue(dateObj, defaultFormat)

        expect(value).to.equal('2015-07-31')
      })

      it('should return date string in a custom format', () => {
        let dateObj = getDateObj()
        const customFormat = 'DD-MM-YYYY'

        const value = wrapper.instance()._getValue(dateObj, customFormat)

        expect(value).to.equal('31-07-2015')
      })
    })

    describe('_getMinOrMax()', () => {

      it('should return min values for year, month, day', () => {
        DateHelper.__set__('_getDate', function() { return '20' })
        DateHelper.__set__('_getMonth', function() { return '10' })
        DateHelper.__set__('_getYear', function() { return '2012' })

        wrapper = shallow(<DatePicker value={oldDate} dateHelper={DateHelper} />)

        const min = { month: '-0', day: '-0', year: '-10'}

        const minYear = wrapper.instance()._getMinOrMax(min, 'year')
        const minMonth = wrapper.instance()._getMinOrMax(min, 'month')
        const minDay = wrapper.instance()._getMinOrMax(min, 'day')
        expect(minYear).to.equal(2012)
        expect(minMonth).to.equal(10)
        expect(minDay).to.equal(20)
      })

      it('should return max values for year, month, day', () => {
        DateHelper.__set__('_getDate', function() { return '1' })
        DateHelper.__set__('_getMonth', function() { return '1' })
        DateHelper.__set__('_getYear', function() { return '2020' })

        wrapper = shallow(<DatePicker value={oldDate} dateHelper={DateHelper} />)

        const max = { month: '1', day: '1', year: '+10'}

        const minYear = wrapper.instance()._getMinOrMax(max, 'year')
        const minMonth = wrapper.instance()._getMinOrMax(max, 'month')
        const minDay = wrapper.instance()._getMinOrMax(max, 'day')
        expect(minYear).to.equal(2020)
        expect(minMonth).to.equal(1)
        expect(minDay).to.equal(1)
      })
    })
  })
})